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

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

@@ -1,57 +1,60 @@
<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'">
<input matInput <ng-container *ngTemplateOutlet="label"></ng-container>
*ngIf="!property.multiline" <div class="adf-property-field-content">
class="adf-property-value" <input matInput
title="{{property.label | translate }}" *ngIf="!property.multiline"
[placeholder]="property.default" class="adf-property-value"
[attr.aria-label]="property.label | translate" title="{{property.label | translate }}"
[formControl]="textInput" [placeholder]="property.default"
(dblclick)="copyToClipboard(property.displayValue)" [attr.aria-label]="property.label | translate"
matTooltipShowDelay="1000" [formControl]="textInput"
[matTooltip]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate" (dblclick)="copyToClipboard(property.displayValue)"
[matTooltipDisabled]="isEditable" matTooltipShowDelay="1000"
[attr.data-automation-id]="'card-textitem-value-' + property.key"> [matTooltip]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
<textarea matInput [matTooltipDisabled]="isEditable"
*ngIf="property.multiline" [attr.data-automation-id]="'card-textitem-value-' + property.key">
title="{{property.label | translate }}" <textarea matInput
[cdkTextareaAutosize]="true" *ngIf="property.multiline"
[cdkAutosizeMaxRows]="1" title="{{property.label | translate }}"
[cdkAutosizeMaxRows]="5" [cdkTextareaAutosize]="true"
class="adf-property-value" [cdkAutosizeMaxRows]="1"
[placeholder]="property.default" [cdkAutosizeMaxRows]="5"
[attr.aria-label]="property.label | translate" class="adf-property-value"
[formControl]="textInput" [placeholder]="property.default"
[attr.data-automation-id]="'card-textitem-value-' + property.key"></textarea> [attr.aria-label]="property.label | translate"
<button mat-button [formControl]="textInput"
[attr.data-automation-id]="'card-textitem-value-' + property.key">
</textarea>
<button mat-button
matSuffix matSuffix
class="adf-property-clear-value" class="adf-property-clear-value"
*ngIf="isEditable" *ngIf="isEditable"
mat-icon-button mat-icon-button
[attr.aria-label]="'CORE.METADATA.ACTIONS.CLEAR' | translate" [attr.aria-label]="'CORE.METADATA.ACTIONS.CLEAR' | translate"
(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">
*ngIf="isEditable" <mat-icon
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate" *ngIf="isEditable"
class="adf-textitem-edit-icon">mode_edit</mat-icon> mat-icon-button
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
class="adf-textitem-edit-icon"
>mode_edit</mat-icon>
</div>
</div>
</mat-form-field> </mat-form-field>
</div> </div>
<mat-error [attr.data-automation-id]="'card-textitem-error-' + property.key" <mat-error [attr.data-automation-id]="'card-textitem-error-' + property.key"
class="adf-textitem-editable-error" class="adf-textitem-editable-error"
*ngIf="isEditable && hasErrors"> *ngIf="isEditable && hasErrors">
<ul> <ul>
<li *ngFor="let error of errors">{{ error.message | translate: error }}</li> <li *ngFor="let error of errors">{{ error.message | translate: error }}</li>
</ul> </ul>
@@ -60,63 +63,64 @@
<div *ngSwitchCase="'chipsTemplate'" <div *ngSwitchCase="'chipsTemplate'"
class="adf-property-field adf-textitem-chip-list-container"> class="adf-property-field adf-textitem-chip-list-container">
<mat-chip-list #chipList <mat-chip-list #chipList
class="adf-textitem-chip-list"> class="adf-textitem-chip-list">
<mat-chip *ngFor="let propertyValue of editedValue; let idx = index" <mat-chip *ngFor="let propertyValue of editedValue; let idx = index"
[removable]="isEditable" [removable]="isEditable"
(removed)="removeValueFromList(idx)"> (removed)="removeValueFromList(idx)">
{{ propertyValue }} {{ propertyValue }}
<mat-icon *ngIf="isEditable" <mat-icon *ngIf="isEditable"
matChipRemove>cancel</mat-icon> matChipRemove>cancel</mat-icon>
</mat-chip> </mat-chip>
</mat-chip-list> </mat-chip-list>
<mat-form-field *ngIf="isEditable" <mat-form-field *ngIf="isEditable"
class="adf-property-field adf-textitem-chip-list-input" class="adf-property-field adf-textitem-chip-list-input"
[ngClass]="{ 'adf-property-read-only': !isEditable }" [ngClass]="{ 'adf-property-read-only': !isEditable }"
[floatLabel]="'never'"> [floatLabel]="'never'">
<input matInput <input matInput
class="adf-property-value" class="adf-property-value"
title="{{property.label | translate }}" title="{{property.label | translate }}"
[placeholder]="editedValue ? '' : property.default | translate" [placeholder]="editedValue ? '' : property.default | translate"
[attr.aria-label]="property.label | translate" [attr.aria-label]="property.label | translate"
[matChipInputFor]="chipList" [matChipInputFor]="chipList"
[matChipInputAddOnBlur]="true" [matChipInputAddOnBlur]="true"
(matChipInputTokenEnd)="addValueToList($event)" (matChipInputTokenEnd)="addValueToList($event)"
[attr.data-automation-id]="'card-textitem-editchipinput-' + property.key"> [attr.data-automation-id]="'card-textitem-editchipinput-' + property.key">
<mat-icon matSuffix <mat-icon matSuffix
class="adf-textitem-edit-icon">mode_edit</mat-icon> class="adf-textitem-edit-icon">mode_edit</mat-icon>
</mat-form-field> </mat-form-field>
</div> </div>
<div *ngSwitchCase="'clickableTemplate'" <div *ngSwitchCase="'clickableTemplate'"
role="button" role="button"
class="adf-textitem-clickable" class="adf-textitem-clickable"
[ngClass]="{ 'adf-property-read-only': !isEditable }" [ngClass]="{ 'adf-property-read-only': !isEditable }"
[attr.data-automation-id]="'card-textitem-toggle-' + property.key" [attr.data-automation-id]="'card-textitem-toggle-' + property.key"
(click)="clicked()" (click)="clicked()"
fxLayout="row" fxLayout="row"
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"
title="{{property.label | translate }}" title="{{property.label | translate }}"
[ngClass]="{ 'adf-textitem-clickable-value': !isEditable }" [ngClass]="{ 'adf-textitem-clickable-value': !isEditable }"
[placeholder]="property.default" [placeholder]="property.default"
[attr.aria-label]="property.label | translate" [attr.aria-label]="property.label | translate"
[(ngModel)]="editedValue" [(ngModel)]="editedValue"
(blur)="update()" (blur)="update()"
(keydown.enter)="update()" (keydown.enter)="update()"
[disabled]="!isEditable" [disabled]="!isEditable"
[attr.data-automation-id]="'card-textitem-value-' + property.key"> [attr.data-automation-id]="'card-textitem-value-' + property.key">
<button mat-icon-button <button mat-icon-button
matSuffix matSuffix
fxFlex="0 0 auto" fxFlex="0 0 auto"
*ngIf="showClickableIcon" *ngIf="showClickableIcon"
class="adf-textitem-action" class="adf-textitem-action"
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate" [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
[attr.data-automation-id]="'card-textitem-clickable-icon-' + property.key"> [attr.data-automation-id]="'card-textitem-clickable-icon-' + property.key">
<mat-icon class="adf-textitem-icon">{{ property?.icon }}</mat-icon> <mat-icon class="adf-textitem-icon">{{ property?.icon }}</mat-icon>
</button> </button>
</mat-form-field> </mat-form-field>
@@ -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 {