[ACA-2330] fix document-list styling (#1062)

* [ACA-2330] fix DL display - enable single click tests

* [ACA-2330] fix locked-by item display

* [ACA-2330] set text color and padding on DL

* [ACA-2330] fix ellipsis on name column text

* [ACA-2330] apply fix to library-name-column also

- fixes failing test on libraries DL

* [ACA-2330] set scss variables

* [ACA-2330] fix wrong variable names

* [ACA-2330] decrease thumbnail width

* [ACA-2330] enable related tests

e2e/suites/actions/single-click.test.ts

@@ -98,11 +98,10 @@ describe('Single click on item name', () => {
     });
 
     it('Hyperlink appears when mouse over a file/folder - [C280032]', async () => {
-        expect(await dataTable.hasLinkOnName(file1)).toBe(true, 'Link on name is missing');
+      expect(await dataTable.hasLinkOnName(file1)).toBe(true, 'Link on name is missing');
     });
 
-    // TODO: investigate
+    it('File preview opens when clicking the hyperlink - [C280033]', async () => {
-    xit('File preview opens when clicking the hyperlink - [C280033]', async () => {
       await dataTable.clickNameLink(file1);
 
       expect(await viewer.isViewerOpened()).toBe(true, 'Viewer is not opened');
@@ -110,8 +109,7 @@ describe('Single click on item name', () => {
       await Utils.pressEscape();
     });
 
-    // TODO: investigate
+    it('Navigate inside the folder when clicking the hyperlink - [C280034]', async () => {
-    xit('Navigate inside the folder when clicking the hyperlink - [C280034]', async () => {
       await dataTable.clickNameLink(folder1);
 
       expect(await breadcrumb.getCurrentItemName()).toBe(folder1);
@@ -128,8 +126,7 @@ describe('Single click on item name', () => {
       expect(await dataTable.hasLinkOnName(siteName)).toBe(true, 'Link on site name is missing');
     });
 
-    // TODO: enable this when ACA-2330 is done
+    it('Navigate inside the library when clicking the hyperlink - [C284902]', async () => {
-    xit('Navigate inside the library when clicking the hyperlink - [C284902]', async () => {
       await dataTable.clickNameLink(siteName);
 
       expect(await breadcrumb.getCurrentItemName()).toBe(siteName);
@@ -147,8 +144,7 @@ describe('Single click on item name', () => {
       expect(await dataTable.hasLinkOnName(file1)).toBe(true, 'Link on name is missing');
     });
 
-    // TODO: enable this when ACA-2330 is done
+    it('File preview opens when clicking the hyperlink - [C284906]', async () => {
-    xit('File preview opens when clicking the hyperlink - [C284906]', async () => {
       await dataTable.clickNameLink(file1);
 
       expect(await viewer.isViewerOpened()).toBe(true, 'Viewer is not opened');
@@ -167,8 +163,7 @@ describe('Single click on item name', () => {
       expect(await dataTable.hasLinkOnName(file1)).toBe(true, 'Link on name is missing');
     });
 
-    // TODO: enable this when ACA-2330 is done
+    it('File preview opens when clicking the hyperlink - [C284908]', async () => {
-    xit('File preview opens when clicking the hyperlink - [C284908]', async () => {
       await dataTable.clickNameLink(file1);
 
       expect(await viewer.isViewerOpened()).toBe(true, 'Viewer is not opened');
@@ -187,8 +182,7 @@ describe('Single click on item name', () => {
       expect(await dataTable.hasLinkOnName(file1)).toBe(true, 'Link on name is missing');
     });
 
-    // TODO: enable this when ACA-2330 is done
+    it('File preview opens when clicking the hyperlink - [C284910]', async () => {
-    xit('File preview opens when clicking the hyperlink - [C284910]', async () => {
       await dataTable.clickNameLink(file1);
 
       expect(await viewer.isViewerOpened()).toBe(true, 'Viewer is not opened');
@@ -196,8 +190,7 @@ describe('Single click on item name', () => {
       await Utils.pressEscape();
     });
 
-    // TODO: enable this when ACA-2330 is done
+    it('Navigate inside the folder when clicking the hyperlink - [C284911]', async () => {
-    xit('Navigate inside the folder when clicking the hyperlink - [C284911]', async () => {
       await dataTable.clickNameLink(folder1);
 
       expect(await breadcrumb.getCurrentItemName()).toBe(folder1);

src/app/components/dl-custom-components/name-column/name-column.component.scss

@@ -1,10 +1,11 @@
 .aca-name-column-container {
   aca-locked-by {
     position: absolute;
-    top: 10px;
+    top: 35px;
-    left: -4px;
+    left: 13px;
     display: flex;
     align-items: center;
+    color: rgba(0, 0, 0, 0.54);
   }
 }
 

src/app/ui/custom-theme.scss

@@ -92,3 +92,8 @@ $custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent);
   @include app-create-menu-theme($theme);
   @include aca-share-dialog-theme($theme);
 }
+
+//Custom variables - ACA specific styling:
+$document-list-selection-color: mat-color($alfresco-ecm-blue, 500);
+$document-list-background: white;
+$document-list-thumbnail-width: 35px;

src/app/ui/overrides/adf-document-list.theme.scss

@@ -1,21 +1,48 @@
 @import 'mixins';
 
 @mixin adf-document-list-theme($theme) {
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+  $primary: map-get($theme, primary);
+
+  $document-list-selection-color: mat-color($primary) !default;
+  $document-list-selection-background: #e0f7fa !default;
+  $document-list-background: mat-color($background, background) !default;
+  $document-list-text-color: mat-color($foreground, text, 0.54) !default;
+  $document-list-name-text-color: mat-color($foreground, text) !default;
+  $document-list-thumbnail-width: 50px !default;
+
   .adf-datatable-list {
     border: none;
 
-    .adf-datatable-cell-value {
+    .adf-datatable-link {
-      max-width: calc(100% - 2em) !important;
+      &.adf-name-column,
-      width: auto !important;
+      &.adf-library-name-column {
+        color: $document-list-name-text-color;
+
+        &:hover {
+          color: $document-list-selection-color;
+        }
+
+        .adf-datatable-cell-value {
+          position: static;
+          max-width: 35vw;
+        }
+      }
+    }
+
+    .adf-datatable-cell--image {
+      max-width: $document-list-thumbnail-width;
     }
   }
 
   .mat-icon.adf-datatable-selected > svg {
-    fill: #2196f3;
+    fill: $document-list-selection-color;
   }
 
   adf-document-list {
     @include flex-column;
+    background-color: $document-list-background;
   }
 
   .adf-datatable {
@@ -24,20 +51,31 @@
 
     .adf-datatable-cell-header,
     .adf-datatable-cell {
+      padding: 0 2px;
+      box-sizing: border-box;
+
       &:focus {
         outline: none !important;
       }
+
+      .adf-datatable-cell-value {
+        width: 100% !important;
+      }
+    }
+
+    .adf-datatable-cell {
+      color: $document-list-text-color;
     }
 
     .adf-datatable-body .adf-datatable-row {
       &:hover,
       &:focus {
-        background-color: #e0f7fa;
+        background-color: $document-list-selection-background;
       }
 
       &.adf-is-selected,
       &.adf-is-selected:hover {
-        background-color: #e0f7fa;
+        background-color: $document-list-selection-background;
       }
     }