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">
<span *ngIf="!isEditable()">
<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>
<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">

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 {
color: mat-color($foreground, text);
cursor: pointer !important;;
cursor: pointer !important;
}
mat-form-field {
@@ -129,11 +129,24 @@
margin-bottom: -8px;
}
&-textitem-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
&-textitem-scroll {
overflow-x: auto;
white-space: nowrap;
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;
}
}
}