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 [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> <div *ngSwitchDefault>
<mat-form-field class="adf-property-field adf-card-textitem-field" <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'"> [floatLabel]="'never'">
<ng-container *ngTemplateOutlet="label"></ng-container>
<div class="adf-property-field-content">
<input matInput <input matInput
*ngIf="!property.multiline" *ngIf="!property.multiline"
class="adf-property-value" class="adf-property-value"
@@ -31,7 +27,9 @@
[placeholder]="property.default" [placeholder]="property.default"
[attr.aria-label]="property.label | translate" [attr.aria-label]="property.label | translate"
[formControl]="textInput" [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 <button mat-button
matSuffix matSuffix
class="adf-property-clear-value" class="adf-property-clear-value"
@@ -41,10 +39,15 @@
(click)="clearValue()"> (click)="clearValue()">
<mat-icon>cancel</mat-icon> <mat-icon>cancel</mat-icon>
</button> </button>
<mat-icon matSuffix <div matSuffix *ngIf="isEditable" class="adf-textitem-edit-value">
<mat-icon
*ngIf="isEditable" *ngIf="isEditable"
mat-icon-button
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate" [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> </mat-form-field>
</div> </div>
@@ -98,6 +101,7 @@
fxLayoutAlign="space-between center"> fxLayoutAlign="space-between center">
<mat-form-field class="adf-property-field adf-card-textitem-field" <mat-form-field class="adf-property-field adf-card-textitem-field"
[floatLabel]="'never'"> [floatLabel]="'never'">
<ng-container *ngTemplateOutlet="label"></ng-container>
<input matInput <input matInput
[type]=property.inputType [type]=property.inputType
class="adf-property-value" class="adf-property-value"
@@ -124,6 +128,18 @@
</div> </div>
<div *ngSwitchCase="'emptyTemplate'"> <div *ngSwitchCase="'emptyTemplate'">
<ng-container *ngTemplateOutlet="label"></ng-container>
<span class="adf-textitem-default-value">{{ property.default | translate }}</span> <span class="adf-textitem-default-value">{{ property.default | translate }}</span>
</div> </div>
</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; 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 { &-property-field.adf-card-textitem-field:hover {
.adf-textitem-edit-value,
.adf-textitem-edit-icon { .adf-textitem-edit-icon {
display: none; display: none;
} }
.adf-property-clear-value { .adf-property-clear-value {
color: var(--theme-foreground-text-color-025); color: var(--theme-foreground-text-color-025);
display: inline; display: flex;
} }
.adf-property-clear-value:hover { .adf-property-clear-value:hover {