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

[ADF-4900] Card View and Metadata Components refactoring (#5592)

Browse Source 
* [ADF-4900] Card View and Metadata Components refactoring

* CSS linting

* Unit test excluded

* Rebase branch

* Fix unit tests

* Fix linting

* Fix e2e tests

* Fix 2e2 tests

* Fix process-services e2e tests

* More fixes

* Fix more e2e tests

* Fix unit test

* Improve flaky unit test

* Fix process services e2e tests

* Update Process Header Cloud Page

* Fix linting

* Fix timing issue

* Lintintg

* Fix selectors

* Fix e2e tests

* Fix timing issue

* Fix C260328

* Fix spellcheck

* save screenshot

* performance issue

* Fix unit tests and e2e tests

* fix e2e

* refactoring

* fix lint

* fix e2e

* Fix C309698

* fix other e2e

* fix lint

* increase timeout

Co-authored-by: Eugenio Romano <eugenio.romano@alfresco.com>
This commit is contained in:
davidcanonieto
2020-04-27 00:09:52 +01:00
committed by GitHub
parent ebfeb053ce
commit 8f68899ce0
65 changed files with 1211 additions and 1214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
lib/core/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.html
View File

@@ -1,21 +1,20 @@
<div [attr.data-automation-id]="'card-key-value-pairs-label-' + property.key" class="adf-property-label">{{ property.label | translate }}</div>
<div class="adf-property-value">
<div [attr.data-automation-id]="'card-key-value-pairs-label-' + property.key"
class="adf-property-label">{{ property.label | translate }}</div>
<div class="adf-property-field">
<div *ngIf="isEditable()">
{{ 'CORE.CARDVIEW.KEYVALUEPAIRS.ADD' | translate }}
<button (click)="add()" mat-icon-button class="adf-card-view__key-value-pairs__add-btn" [attr.data-automation-id]="'card-key-value-pairs-button-' + property.key">
<mat-icon>add</mat-icon>
</button>
</div>
<div *ngIf="!isEditable()" class="adf-card-view__key-value-pairs__read-only">
<mat-table #table [dataSource]="matTableValues" class="mat-elevation-z8">
<div *ngIf="!isEditable()"
class="adf-card-view__key-value-pairs__read-only adf-property-value">
<mat-table #table
[dataSource]="matTableValues"
class="mat-elevation-z8">
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef>{{ 'CORE.CARDVIEW.KEYVALUEPAIRS.NAME' | translate }}</mat-header-cell>
<mat-header-cell *matHeaderCellDef>{{ 'CORE.CARDVIEW.KEYVALUEPAIRS.NAME' | translate }}
</mat-header-cell>
<mat-cell *matCellDef="let item">{{item.name}}</mat-cell>
</ng-container>
<ng-container matColumnDef="value">
<mat-header-cell *matHeaderCellDef>{{ 'CORE.CARDVIEW.KEYVALUEPAIRS.VALUE' | translate }}</mat-header-cell>
<mat-header-cell *matHeaderCellDef>{{ 'CORE.CARDVIEW.KEYVALUEPAIRS.VALUE' | translate }}
</mat-header-cell>
<mat-cell *matCellDef="let item">{{item.value}}</mat-cell>
</ng-container>
@@ -25,15 +24,17 @@
</div>
<div class="adf-card-view__key-value-pairs" *ngIf="isEditable() && values && values.length">
<div class="adf-card-view__key-value-pairs adf-property-value"
*ngIf="isEditable() && values && values.length">
<div class="adf-card-view__key-value-pairs__row">
<div class="adf-card-view__key-value-pairs__col">{{ 'CORE.CARDVIEW.KEYVALUEPAIRS.NAME' | translate }}</div>
<div class="adf-card-view__key-value-pairs__col">{{ 'CORE.CARDVIEW.KEYVALUEPAIRS.VALUE' | translate }}</div>
</div>
<div class="adf-card-view__key-value-pairs__row" *ngFor="let item of values; let i = index">
<div class="adf-card-view__key-value-pairs__row"
*ngFor="let item of values; let i = index">
<div class="adf-card-view__key-value-pairs__col">
<mat-form-field class="adf-example-full-width">
<mat-form-field>
<input matInput
placeholder="{{ 'CORE.CARDVIEW.KEYVALUEPAIRS.NAME' | translate }}"
(blur)="onBlur(item.value)"
@@ -42,17 +43,30 @@
</mat-form-field>
</div>
<div class="adf-card-view__key-value-pairs__col">
<mat-form-field class="adf-example-full-width">
<mat-form-field>
<input matInput
placeholder="{{ 'CORE.CARDVIEW.KEYVALUEPAIRS.VALUE' | translate }}"
(blur)="onBlur(item.value)"
[attr.data-automation-id]="'card-'+ property.key +'-value-input-' + i"
[(ngModel)]="values[i].value">
<button matSuffix
mat-icon-button
(click)="remove(i)"
class="adf-card-view__key-value-pairs__remove-btn">
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
</div>
<button mat-icon-button (click)="remove(i)" class="adf-card-view__key-value-pairs__remove-btn">
<mat-icon>close</mat-icon>
</button>
</div>
</div>
<div *ngIf="isEditable()"
class="adf-property-value adf-card-view__key-value-pairs__add-btn-container">
<button (click)="add()"
mat-button
class="adf-card-view__key-value-pairs__add-btn"
[attr.data-automation-id]="'card-key-value-pairs-button-' + property.key">
{{ 'CORE.CARDVIEW.KEYVALUEPAIRS.ADD' | translate }}
<mat-icon>add</mat-icon>
</button>
</div>
</div>

50
lib/core/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.scss
View File

@@ -1,21 +1,45 @@
.adf-card-view {
&__key-value-pairs {
&__col {
display: inline-block;
width: 39%;
@mixin adf-card-view-keyvaluepairsitem-theme($theme) {
$foreground: map-get($theme, foreground);
.mat-form-field {
.adf-card-view {
&__key-value-pairs {
&__row {
display: flex;
justify-content: center;
}
&__col {
width: 100%;
}
}
&__read-only {
.mat-table {
box-shadow: none;
.mat-form-field {
width: 100%;
font-size: 14px;
}
.mat-form-field-appearance-legacy .mat-form-field-label {
color: mat-color($foreground, text, 0.4) !important;
}
}
.mat-header-row, .mat-row {
padding: 0;
&__add-btn-container {
display: flex;
justify-content: center;
}
&__add-btn.mat-button {
margin-bottom: 20px;
}
&__read-only {
padding-bottom: 20px;
.mat-table {
box-shadow: none;
}
.mat-header-row, .mat-row {
padding: 0;
}
}
}
}