[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

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;
-    left: -4px;
+    top: 35px;
+    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 {
-      max-width: calc(100% - 2em) !important;
-      width: auto !important;
+    .adf-datatable-link {
+      &.adf-name-column,
+      &.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;
       }
     }