inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[AAE-1288] moved label inside field for easier styling (#8347)

Browse Source
This commit is contained in:
tomasz hanaj
2023-03-10 08:42:07 +01:00
committed by GitHub
parent 241b7c6361
commit 112e272ce7
2 changed files with 117 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html
View File

@@ -1,14 +1,10 @@
<div [ngSwitch]="templateType">
<div class="adf-property-label"
[attr.data-automation-id]="'card-textitem-label-' + property.key"
*ngIf="showProperty || isEditable">
{{ property.label | translate }}
</div>
<div *ngSwitchDefault>
<mat-form-field class="adf-property-field adf-card-textitem-field"
[ngClass]="{ 'adf-property-read-only': !isEditable,'adf-property-field-has-error': isEditable && hasErrors }"
[ngClass]="{ 'adf-property-read-only': !isEditable,'adf-property-field-has-error mat-form-field-invalid': isEditable && hasErrors }"
[floatLabel]="'never'">
<ng-container *ngTemplateOutlet="label"></ng-container>
<div class="adf-property-field-content">
<input matInput
*ngIf="!property.multiline"
class="adf-property-value"
@@ -31,7 +27,9 @@
[placeholder]="property.default"
[attr.aria-label]="property.label | translate"
[formControl]="textInput"
[attr.data-automation-id]="'card-textitem-value-' + property.key"></textarea>
[attr.data-automation-id]="'card-textitem-value-' + property.key">
</textarea>
<button mat-button
matSuffix
class="adf-property-clear-value"
@@ -41,10 +39,15 @@
(click)="clearValue()">
<mat-icon>cancel</mat-icon>
</button>
<mat-icon matSuffix
<div matSuffix *ngIf="isEditable" class="adf-textitem-edit-value">
<mat-icon
*ngIf="isEditable"
mat-icon-button
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
class="adf-textitem-edit-icon">mode_edit</mat-icon>
class="adf-textitem-edit-icon"
>mode_edit</mat-icon>
</div>
</div>
</mat-form-field>
</div>
@@ -98,6 +101,7 @@
fxLayoutAlign="space-between center">
<mat-form-field class="adf-property-field adf-card-textitem-field"
[floatLabel]="'never'">
<ng-container *ngTemplateOutlet="label"></ng-container>
<input matInput
[type]=property.inputType
class="adf-property-value"
@@ -124,6 +128,18 @@
</div>
<div *ngSwitchCase="'emptyTemplate'">
<ng-container *ngTemplateOutlet="label"></ng-container>
<span class="adf-textitem-default-value">{{ property.default | translate }}</span>
</div>
</div>
<ng-template #label>
<mat-label>
<div class="adf-property-label"
[attr.data-automation-id]="'card-textitem-label-' + property.key"
*ngIf="showProperty || isEditable"
>
{{ property.label | translate }}
</div>
</mat-label>
</ng-template>

21
lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss
View File

@@ -166,14 +166,33 @@
display: none;
}
&-property-field {
.adf-property-clear-value,
.adf-textitem-edit-value {
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
}
.adf-textitem-edit-value {
display: flex;
}
.adf-property-field-content {
display: flex;
}
}
&-property-field.adf-card-textitem-field:hover {
.adf-textitem-edit-value,
.adf-textitem-edit-icon {
display: none;
}
.adf-property-clear-value {
color: var(--theme-foreground-text-color-025);
display: inline;
display: flex;
}
.adf-property-clear-value:hover {