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

[AAE-13069]- Input fields label improvements (#8387)

Browse Source 
* AAE-13069: Removing extra div inside mat label

* AAE-13069: Removing font size css rule and applying right class to the mat label

* AAE-13069: Refactoring text item component based on Angular Material

* AAE-13069: Updated unit test

* AAE-13069: Fixed lint issues

* AAE-13069: Fixed styles

* AAE-13069: Updated e2e tests

* AAE-13069: Updated e2e tests
This commit is contained in:
Ehsan Rezaei 2023-03-20 20:25:13 +01:00 committed by GitHub
parent cf52683771
commit 5ab6dc2e9d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 49 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
e2e/core/pages/metadata-view.page.ts
View File

@ -213,7 +213,7 @@ export class MetadataViewPage {
}
async checkPropertyIsVisible(propertyName: string, type: string): Promise<void> {
const property = $('div[data-automation-id="card-' + type + '-label-' + propertyName + '"]');
const property = $('[data-automation-id="card-' + type + '-label-' + propertyName + '"]');
await BrowserVisibility.waitUntilElementIsVisible(property);
}

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

@ -1,10 +1,12 @@
<div [ngSwitch]="templateType">
<div *ngSwitchDefault>
<mat-form-field class="adf-property-field adf-card-textitem-field"
[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">
[ngClass]="{ 'adf-property-read-only': !isEditable, 'adf-property-field-has-error mat-form-field-invalid': isEditable && hasErrors }"
[floatLabel]="'never'"
appearance="standard">
<mat-label *ngIf="showProperty || isEditable" [attr.data-automation-id]="'card-textitem-label-' + property.key" class="adf-property-label">
{{ property.label | translate }}
</mat-label>
<input matInput
*ngIf="!property.multiline"
class="adf-property-value"
@ -30,24 +32,21 @@
[attr.data-automation-id]="'card-textitem-value-' + property.key">
</textarea>
<button mat-button
matSuffix
class="adf-property-clear-value"
<button
*ngIf="isEditable"
mat-icon-button
matSuffix
class="adf-textitem-clear-icon"
[attr.aria-label]="'CORE.METADATA.ACTIONS.CLEAR' | translate"
(click)="clearValue()">
<mat-icon>cancel</mat-icon>
</button>
<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>
</div>
</div>
<button
*ngIf="isEditable"
matSuffix
class="adf-textitem-edit-icon"
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate">
<mat-icon>mode_edit</mat-icon>
</button>
</mat-form-field>
</div>
@ -65,7 +64,7 @@
</mat-chip>
</mat-chip-list>
<mat-form-field *ngIf="isEditable"
<mat-form-field *ngIf="isEditable" appearance="standard"
class="adf-property-field adf-textitem-chip-list-input"
[ngClass]="{ 'adf-property-read-only': !isEditable }"
[floatLabel]="'never'">
@ -91,9 +90,11 @@
(click)="clicked()"
fxLayout="row"
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" appearance="standard"
[floatLabel]="'never'">
<ng-container *ngTemplateOutlet="label"></ng-container>
<mat-label *ngIf="showProperty || isEditable" [attr.data-automation-id]="'card-textitem-label-' + property.key" class="adf-property-label">
{{ property.label | translate }}
</mat-label>
<input matInput
[type]=property.inputType
class="adf-property-value"
@ -120,7 +121,6 @@
</div>
<div *ngSwitchCase="'emptyTemplate'">
<ng-container *ngTemplateOutlet="label"></ng-container>
<span class="adf-textitem-default-value">{{ property.default | translate }}</span>
</div>
@ -132,14 +132,3 @@
</ul>
</mat-error>
</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>

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

@ -161,42 +161,41 @@
&-textitem-multiline {
display: block;
}
}
&-property-field .adf-property-clear-value {
display: none;
}
&-property-field {
.adf-property-clear-value,
.adf-textitem-edit-value {
justify-content: center;
align-items: center;
.mat-form-field {
.mat-form-field-suffix {
.mat-icon {
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: block;
}
.adf-textitem-clear-icon {
display: none;
}
.adf-property-clear-value {
color: var(--adf-theme-foreground-text-color-025);
display: flex;
.adf-textitem-edit-icon,
.adf-textitem-clear-icon {
background: transparent;
border: none;
&:hover {
cursor: pointer;
}
}
.adf-property-clear-value:hover {
color: var(--adf-theme-foreground-text-color);
&:hover {
.adf-textitem-edit-icon {
display: none;
}
.adf-textitem-clear-icon {
display: block;
}
}
}
}

2
lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts
View File

@ -460,7 +460,7 @@ describe('CardViewTextItemComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
fixture.detectChanges();
const clickEl = fixture.debugElement.query(By.css(`.adf-property-clear-value`));
const clickEl = fixture.debugElement.query(By.css(`.adf-textitem-clear-icon`));
clickEl.triggerEventHandler('click', new MouseEvent('click'));
fixture.detectChanges();

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

@ -7,12 +7,6 @@
margin-top: 6px;
}
.adf-property-read-only {
.mat-form-field-underline {
display: none;
}
}
.adf-property-field {
width: 100%;
margin-bottom: -25px;
@ -24,24 +18,6 @@
.mat-form-field-label {
margin-top: 6px;
}
.adf-property-read-only {
.mat-form-field-underline {
display: none;
}
}
}
.adf-property-label {
font-size: var(--theme-caption-font-size);
color: var(--adf-theme-foreground-text-color-054);
word-wrap: break-word;
}
.adf-property-value,
.mat-form-field-label {
font-size: var(--theme-body-1-font-size);
color: var(--adf-theme-foreground-text-color-087);
}
}
}

4
lib/core/src/lib/form/components/widgets/form.theme.scss
View File

@ -5,10 +5,6 @@ ul > li > form-field > .adf-focus {
}
}
.mat-form-field-label {
color: var(--adf-theme-mat-grey-color-a200-dark) !important;
}
.adf {
&-error-container {
height: 20px;

4
lib/testing/src/lib/protractor/core/pages/card-view/card-view-text-item.page.ts
View File

@ -24,13 +24,13 @@ export class CardTextItemPage {
saveButton = 'button[data-automation-id*="card-textitem-update"]';
clearButton = 'button[data-automation-id*="card-textitem-reset"]';
field = '[data-automation-id*="card-textitem-value"]';
labelLocator = 'div[data-automation-id*="card-textitem-label"]';
labelLocator = '[data-automation-id*="card-textitem-label"]';
errorMessage = '.adf-textitem-editable-error';
clickableElement = '.adf-textitem-clickable';
readOnlyField = '.adf-property-read-only';
constructor(label: string = 'assignee') {
this.rootElement = element(by.xpath(`//div[contains(@data-automation-id, "card-textitem-label-${label}")]//ancestor::adf-card-view-textitem`));
this.rootElement = element(by.xpath(`//mat-label[contains(@data-automation-id, "card-textitem-label-${label}")]//ancestor::adf-card-view-textitem`));
}
async getFieldValue(): Promise<string> {