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-5074] Scrollable card-view-textitem when value too long for display (#5480)

Browse Source 
* ADF-5074 Scrollable non-multiline and full display for multiline

* ADF-5074 Refactor template

* ADF-5074 Scrollbar displayed only on overflow

* ADF-5074 adf-textitem-ellipsis is now replaced by adf-textitem-scroll

* ADF-5074 Scrollable non-multiline and full display for multiline

* ADF-5074 Refactor template

* ADF-5074 Scrollbar displayed only on overflow

* ADF-5074 adf-textitem-ellipsis is now replaced by adf-textitem-scroll
This commit is contained in:
Baptiste Mahé
2020-02-21 11:02:45 +00:00
committed by GitHub
parent 2283af2384
commit b7de48c821
3 changed files with 21 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,7 +2,9 @@
<div class="adf-property-value"> <div class="adf-property-value">
<span *ngIf="!isEditable()"> <span *ngIf="!isEditable()">
<span *ngIf="!isClickable(); else elseBlock" [attr.data-automation-id]="'card-textitem-value-' + property.key"> <span *ngIf="!isClickable(); else elseBlock" [attr.data-automation-id]="'card-textitem-value-' + property.key">
<span *ngIf="showProperty()" class="adf-textitem-ellipsis">{{ property.displayValue }}</span> <span *ngIf="showProperty()"
[ngClass]="property.multiline?'adf-textitem-multiline':'adf-textitem-scroll'">
{{ property.displayValue }}</span>
</span> </span>
<ng-template #elseBlock> <ng-template #elseBlock>
<div role="button" class="adf-textitem-clickable" [attr.data-automation-id]="'card-textitem-toggle-' + property.key" (click)="clicked()" fxLayout="row" fxLayoutAlign="space-between center"> <div role="button" class="adf-textitem-clickable" [attr.data-automation-id]="'card-textitem-toggle-' + property.key" (click)="clicked()" fxLayout="row" fxLayoutAlign="space-between center">

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

@@ -52,7 +52,7 @@
mat-icon:not(.adf-button-disabled):hover { mat-icon:not(.adf-button-disabled):hover {
color: mat-color($foreground, text); color: mat-color($foreground, text);
cursor: pointer !important;; cursor: pointer !important;
} }
mat-form-field { mat-form-field {
@@ -129,11 +129,24 @@
margin-bottom: -8px; margin-bottom: -8px;
} }
&-textitem-ellipsis { &-textitem-scroll {
overflow: hidden; overflow-x: auto;
text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
display: block; display: block;
&::-webkit-scrollbar {
height: 5px;
}
&:hover::-webkit-scrollbar-thumb {
display: block;
background-color: mat-color($foreground, text, 0.25);
border-radius: 2px;
}
}
&-textitem-multiline {
display: block;
} }
} }
} }

2
lib/process-services/src/lib/task-list/components/task-header.component.spec.ts
View File

@@ -301,7 +301,7 @@ describe('TaskHeaderComponent', () => {
const clickableForm = fixture.debugElement.query(By.css('[data-automation-id="header-formName"] .adf-textitem-clickable-value')); const clickableForm = fixture.debugElement.query(By.css('[data-automation-id="header-formName"] .adf-textitem-clickable-value'));
expect(clickableForm).toBeNull(); expect(clickableForm).toBeNull();
const readOnlyForm = fixture.debugElement.query(By.css('[data-automation-id="header-formName"] .adf-textitem-ellipsis')); const readOnlyForm = fixture.debugElement.query(By.css('[data-automation-id="header-formName"] .adf-textitem-scroll'));
expect(readOnlyForm.nativeElement.innerText).toBe('test form'); expect(readOnlyForm.nativeElement.innerText).toBe('test form');
}); });
})); }));