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

* Add Edit icon

Browse Source
This commit is contained in:
sivakumar414ram
2019-12-11 19:47:19 +05:30
parent 2cc7fe7efe
commit e3f7e3da09
6 changed files with 77 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.html
View File

@@ -1,15 +1,14 @@
<div [attr.data-automation-id]="'card-array-label-' + property.key" class="adf-property-label">{{ property.label | translate }}</div>
<div class="adf-property-value" (click)="clicked()">
<div class="adf-property-value adf-card-view-array-item-container" (click)="clicked()">
<ng-container *ngIf="(property.displayValue | async) as items; else elseEmptyValueBlock">
<mat-chip-list *ngIf="items.length > 0; else elseEmptyValueBlock" data-automation-id="card-arrayitem-chip-list-container">
<ng-container *ngIf="displayCount() > 0; else withOutDisplayCount" >
<mat-chip
*ngFor="let item of items.slice(0, displayCount())"
(click)="clicked()"
[attr.data-automation-id]="'card-arrayitem-chip-' + item">
<mat-icon *ngIf="hasIcon()" class="adf-array-item-icon">{{property.icon}}</mat-icon>
<span>{{item}}</span>
[attr.data-automation-id]="'card-arrayitem-chip-' + item.value">
<mat-icon *ngIf="item?.icon" class="adf-array-item-icon">{{item.icon}}</mat-icon>
<span>{{item.value}}</span>
</mat-chip>
<mat-chip
*ngIf="items.length > displayCount()"
@@ -22,9 +21,9 @@
<mat-chip
*ngFor="let item of items"
(click)="clicked()"
[attr.data-automation-id]="'card-arrayitem-chip-' + item">
<mat-icon *ngIf="hasIcon()" class="adf-array-item-icon">{{property.icon}}</mat-icon>
<span>{{item}}</span>
[attr.data-automation-id]="'card-arrayitem-chip-' + item.value">
<mat-icon *ngIf="item?.icon" class="adf-array-item-icon">{{item.icon}}</mat-icon>
<span>{{item.value}}</span>
</mat-chip>
</ng-template>
</mat-chip-list>
@@ -34,9 +33,9 @@
<mat-chip-list>
<mat-chip (click)="clicked()"
*ngFor="let item of items.slice(displayCount(), items.length)"
[attr.data-automation-id]="'card-arrayitem-chip-' + item">
<mat-icon *ngIf="hasIcon()" class="adf-array-item-icon">{{property.icon}}</mat-icon>
<span>{{item}}</span>
[attr.data-automation-id]="'card-arrayitem-chip-' + item.value">
<mat-icon *ngIf="item?.icon" class="adf-array-item-icon">{{item.icon}}</mat-icon>
<span>{{item.value}}</span>
</mat-chip>
</mat-chip-list>
</mat-card-content>
@@ -44,6 +43,13 @@
</mat-menu>
</ng-container>
<ng-template #elseEmptyValueBlock>
<span data-automation-id="card-arrayitem-default">{{ property.default | translate }}</span>
<span class="adf-card-array-item-default" data-automation-id="card-arrayitem-default">{{ property?.default | translate }}</span>
</ng-template>
<button mat-icon-button *ngIf="showClickableIcon()"
class="adf-array-item-action"
[attr.aria-label]="'CORE.METADATA.ACTIONS.EDIT' | translate"
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
[attr.data-automation-id]="'card-array-item-clickable-icon-' + property.key">
<mat-icon class="adf-array-item-icon">{{property.icon}}</mat-icon>
</button>
</div>

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

@@ -1,4 +1,5 @@
@mixin adf-card-view-array-item-theme($theme) {
$foreground: map-get($theme, foreground);
.adf {
&-array-item-icon {
@@ -6,6 +7,21 @@
padding-top: 8px;
}
&-array-item-action {
color: mat-color($foreground, text, 0.25);
}
&-array-item-action:hover, &-array-item-action:focus {
color: mat-color($foreground, text);
}
&-card-array-item-default {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
&-array-item-more-chip-container {
&.mat-card {
box-shadow: none;
@@ -29,5 +45,13 @@
cursor: pointer;
}
}
&-card-view-array-item-container {
flex-direction: row;
box-sizing: border-box;
display: flex;
place-content: center space-between;
align-items: center;
}
}
}

12
lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.ts
View File

@@ -33,7 +33,13 @@ export class CardViewArrayItemComponent {
constructor(private cardViewUpdateService: CardViewUpdateService) {}
clicked(): void {
this.cardViewUpdateService.clicked(this.property);
if (this.isClickable()) {
this.cardViewUpdateService.clicked(this.property);
}
}
showClickableIcon(): boolean {
return this.hasIcon() && this.isClickable();
}
hasIcon(): boolean {
@@ -43,4 +49,8 @@ export class CardViewArrayItemComponent {
displayCount(): number {
return this.property.noOfItemsToDisplay ? this.property.noOfItemsToDisplay : 0;
}
isClickable(): boolean {
return !!this.property.clickable;
}
}

9
lib/core/card-view/models/card-view-arrayitem.model.ts
View File

@@ -21,10 +21,15 @@ import { CardViewBaseItemModel } from './card-view-baseitem.model';
import { Observable } from 'rxjs';
import { CardViewArrayItemProperties } from '../interfaces/card-view-arrayitem-properties.interface';
export interface CardViewArrayItem {
icon: string;
value: string;
}
export class CardViewArrayItemModel extends CardViewBaseItemModel implements CardViewItem, DynamicComponentModel {
type: string = 'array';
value: Observable<string[]>;
value: Observable<CardViewArrayItem[]>;
noOfItemsToDisplay: number;
constructor(cardViewArrayItemProperties: CardViewArrayItemProperties) {
@@ -32,7 +37,7 @@ export class CardViewArrayItemModel extends CardViewBaseItemModel implements Car
this.noOfItemsToDisplay = cardViewArrayItemProperties.noOfItemsToDisplay;
}
get displayValue(): Observable<string[]> {
get displayValue(): Observable<CardViewArrayItem[]> {
return this.value;
}
}