From b7de48c82135517d35592d172a4493df6eca6ab2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Baptiste=20Mah=C3=A9?= <baptiste.mahe@alfresco.com>
Date: Fri, 21 Feb 2020 11:02:45 +0000
Subject: [PATCH] [ADF-5074] Scrollable card-view-textitem when value too long
 for display (#5480)

* 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
---
 .../card-view-textitem.component.html         |  4 +++-
 .../card-view-textitem.component.scss         | 21 +++++++++++++++----
 .../components/task-header.component.spec.ts  |  2 +-
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html
index b5f6080dce..01b490ae21 100644
--- a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html
+++ b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html
@@ -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">
diff --git a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.scss b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.scss
index a6fd9db4bc..dc76f7d329 100644
--- a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.scss
+++ b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.scss
@@ -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;
         }
     }
 }
diff --git a/lib/process-services/src/lib/task-list/components/task-header.component.spec.ts b/lib/process-services/src/lib/task-list/components/task-header.component.spec.ts
index 082eb5580a..9f3418b6dc 100644
--- a/lib/process-services/src/lib/task-list/components/task-header.component.spec.ts
+++ b/lib/process-services/src/lib/task-list/components/task-header.component.spec.ts
@@ -301,7 +301,7 @@ describe('TaskHeaderComponent', () => {
             const clickableForm = fixture.debugElement.query(By.css('[data-automation-id="header-formName"] .adf-textitem-clickable-value'));
             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');
         });
     }));