turn ADF customisations into theme mixins (#409)

* theming support for upload dialog customisations

* pagination theme

* about dialog theme

* update shared workspace settings for VS code

* remove hardcoded color variable

* upgrade sidenav theme

* document list theme

* upload drag area theme

.vscode/settings.json

@@ -1,5 +1,6 @@
 {
-    "cSpell.words": [
+    "javascript.preferences.quoteStyle": "single",
-        "sidenav"
+    "typescript.preferences.quoteStyle": "single",
-    ]
+    "javascript.preferences.importModuleSpecifier": "relative",
-}
+    "typescript.preferences.importModuleSpecifier": "relative"
+}

src/app/components/about/about.component.scss

@@ -1,37 +0,0 @@
-@import 'variables';
-
-article {
-    color: $alfresco-secondary-text-color;
-}
-
-article:first-of-type {
-    padding-bottom: 0;
-}
-
-article:last-of-type {
-    margin-bottom: 50px;
-}
-
-header {
-    line-height: 24px;
-    font-size: 14px;
-    font-weight: 800;
-    letter-spacing: -0.2px;
-}
-
-a {
-    text-decoration: none;
-    color: $alfresco-primary-text-color;
-}
-
-.padding {
-    padding: 25px;
-}
-
-.padding-top-bottom {
-    padding: 25px 0 25px 0;
-}
-
-.padding-left-right {
-    padding: 0 25px 0 25px;
-}

src/app/components/about/about.component.theme.scss

@@ -0,0 +1,39 @@
+@mixin aca-about-component-theme($theme) {
+    $foreground: map-get($theme, foreground);
+
+    article {
+        color: mat-color($foreground, text, 0.54);
+    }
+
+    article:first-of-type {
+        padding-bottom: 0;
+    }
+
+    article:last-of-type {
+        margin-bottom: 50px;
+    }
+
+    header {
+        line-height: 24px;
+        font-size: 14px;
+        font-weight: 800;
+        letter-spacing: -0.2px;
+    }
+
+    a {
+        text-decoration: none;
+        color: mat-color($foreground, text, 0.87);
+    }
+
+    .padding {
+        padding: 25px;
+    }
+
+    .padding-top-bottom {
+        padding: 25px 0 25px 0;
+    }
+
+    .padding-left-right {
+        padding: 0 25px 0 25px;
+    }
+}

src/app/components/about/about.component.ts

@@ -30,8 +30,7 @@ import { EcmProductVersionModel, ObjectDataTableAdapter  } from '@alfresco/adf-c
 
 @Component({
     selector: 'app-about',
-    templateUrl: './about.component.html',
+    templateUrl: './about.component.html'
-    styleUrls: [ './about.component.scss' ]
 })
 export class AboutComponent implements OnInit {
     ecmVersion: EcmProductVersionModel = null;

src/app/ui/_variables.scss

@@ -1,13 +1,6 @@
-// Primary color palette
-// - please note that Hue 2 and Enhanced Hue 1 and 2
-// are missing from specs
-$alfresco-app-color--default: #00bcd4;
-$alfresco-app-color--hue-1: #e0f7fa;
-
 // Grayscale
 $alfresco-white: #fff;
 $alfresco-black: #000;
 
 // Dark
-$alfresco-primary-text-color: rgba($alfresco-black, .87);
 $alfresco-secondary-text-color: rgba($alfresco-black, .54);

src/app/ui/application.scss

@@ -2,11 +2,13 @@
 @import 'variables';
 @import 'theme';
 
+$foreground: map-get($theme, foreground);
+
 html, body {
     @include flex-column;
     font-size: 14px;
     font-family: "Muli", sans-serif;
-    color: $alfresco-primary-text-color;
+    color: mat-color($foreground, text, 0.87);
     margin: 0;
 
     & > main {
@@ -24,8 +26,3 @@ ng-component {
 }
 
 @import 'layout';
-
-@import './overrides/adf-sidenav-layout';
-@import './overrides/alfresco-document-list';
-@import './overrides/alfresco-upload-drag-area';
-@import './overrides/alfresco-upload-dialog';

src/app/ui/custom-theme.scss

@@ -2,11 +2,18 @@
 @import '~@alfresco/adf-content-services/theming';
 
 @import '../components/sidenav/sidenav.component.theme';
+@import '../components/about/about.component.theme';
 @import './overrides/adf-toolbar.theme';
 @import './overrides/adf-search-filter.theme';
 @import './overrides/adf-info-drawer.theme';
 @import './overrides/adf-upload-button.theme';
 @import './overrides/adf-sidebar-action-menu.theme';
+@import './overrides/adf-upload-dialog.theme';
+@import './overrides/adf-pagination.theme';
+@import './overrides/adf-sidenav-layout.theme';
+@import './overrides/adf-document-list.theme';
+@import './overrides/adf-upload-drag-area.theme';
+
 @import 'snackbar';
 
 $grey-scale: (
@@ -50,11 +57,17 @@ $custom-theme-warn: mat-palette($alfresco-warn);
 $custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent);
 
 @mixin custom-theme($theme) {
-    @include sidenav-component-theme($custom-theme);
     @include adf-toolbar-theme($custom-theme);
-    @include snackbar-theme($custom-theme);
     @include adf-search-filter-theme($custom-theme);
     @include adf-info-drawer-theme($custom-theme);
     @include adf-upload-button-theme($custom-theme);
     @include adf-sidebar-action-menu-theme($custom-theme);
+    @include adf-pagination-theme($custom-theme);
+    @include adf-sidenav-layout-theme($custom-theme);
+    @include adf-document-list-theme($custom-theme);
+    @include adf-upload-drag-area-theme($custom-theme);
+
+    @include snackbar-theme($custom-theme);
+    @include sidenav-component-theme($custom-theme);
+    @include aca-about-component-theme($custom-theme);
 }

src/app/ui/overrides/_adf-sidenav-layout.scss

@@ -1,18 +0,0 @@
-@import 'mixins';
-
-adf-sidenav-layout {
-    @include flex-column;
-
-    .mat-drawer-content {
-        @include flex-column;
-        overflow: auto;
-    }
-}
-
-.sidenav-layout {
-    @include flex-column;
-}
-
-.mat-drawer-content>div, .mat-drawer-content>div>div {
-    @include flex-column;
-}

src/app/ui/overrides/_alfresco-document-list.scss

@@ -1,86 +0,0 @@
-@import 'variables';
-@import 'mixins';
-
-adf-document-list {
-    @include flex-column;
-    background-color: white; // TODO: remove when ADF 2.4.0 is out.
-}
-
-adf-datatable {
-    @include flex-column;
-    overflow-y: scroll;
-}
-
-.adf-data-table {
-    border: none !important;
-
-    .adf-datatable-header, .adf-datatable-row, .adf-data-table-cell {
-        color: $alfresco-secondary-text-color;
-        &:focus {
-            outline: none !important;
-        }
-    }
-
-    .adf-datatable-table-cell-header:focus {
-        outline: none !important;
-    }
-
-    .adf-datatable-body .adf-datatable-row {
-        &:hover, &:focus {
-            background-color: $alfresco-app-color--hue-1;
-        }
-
-        &.is-selected, &.is-selected:hover {
-            background-color: $alfresco-app-color--hue-1;
-        }
-    }
-
-    .adf-data-table-cell, .adf-datatable-header {
-        width: 100%;
-        text-align: left;
-    }
-
-    .adf-datatable-body .adf-data-table-cell--image {
-        padding-left: 24px;
-        padding-right: 0;
-        width: 10px;
-    }
-
-    .adf-data-table-cell--ellipsis .cell-value,
-    .adf-data-table-cell--ellipsis__name .cell-value {
-        display: flex;
-        align-items: center;
-    }
-
-    .adf-data-table-cell--ellipsis .adf-datatable-cell,
-    .adf-data-table-cell--ellipsis__name .adf-datatable-cell {
-        white-space: nowrap;
-        display: block;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    .adf-data-table-cell--ellipsis .adf-datatable-cell {
-        max-width: 7vw;
-    }
-
-    .adf-data-table-cell--ellipsis__name .adf-datatable-cell {
-        position: absolute;
-        max-width: calc(100% - 2em);
-    }
-
-    .adf-datatable-row:last-child .adf-datatable-table-cell {
-        border-bottom: 1px solid rgba(0, 0, 0, 0.07);
-    }
-
-    &.adf-data-table--empty {
-        .adf-datatable-row:hover,
-        .adf-datatable-row:focus {
-            background-color: unset;
-        }
-    }
-}
-
-.adf-pagination__empty {
-    display: none;
-}

src/app/ui/overrides/_alfresco-upload-dialog.scss

@@ -1,31 +0,0 @@
-@import 'variables';
-
-$alfresco-primary-accent--hue-3: #ff6d00;
-$alfresco-warn-color--hue-3: #d50000;
-$alfresco-dark-color--hue-3: #546e7a;
-
-.upload-dialog {
-    z-index: 999;
-}
-
-.adf-file-uploading-row {
-    &__status {
-        &--done {
-            color: $alfresco-app-color--default !important;
-        }
-
-        &--error {
-            color: $alfresco-primary-accent--hue-3 !important;
-        }
-    }
-
-    &__action {
-        &--cancel {
-            color: $alfresco-warn-color--hue-3 !important;
-        }
-
-        &--remove {
-            color: $alfresco-dark-color--hue-3 !important;
-        }
-    }
-}

src/app/ui/overrides/_alfresco-upload-drag-area.scss

@@ -1,76 +0,0 @@
-@import 'mixins';
-@import 'variables.scss';
-
-@mixin file-draggable__input-focus {
-    color: $alfresco-secondary-text-color !important;
-    border: 1px solid $alfresco-app-color--default !important;
-    margin-left: 0 !important;
-}
-
-adf-upload-drag-area {
-    @include flex-column;
-
-    .upload-border {
-        @include flex-column;
-
-        vertical-align: unset;
-        text-align: unset;
-    }
-}
-
-adf-upload-drag-area:first-child {
-    & > div {
-        adf-upload-drag-area {
-            .file-draggable__input-focus {
-                @include file-draggable__input-focus;
-            }
-        }
-    }
-
-    .upload-border {
-        vertical-align: inherit !important;
-        text-align: inherit !important;
-    }
-
-    .file-draggable__input-focus {
-        color: none !important;
-        border: none !important;
-        margin-left: 0 !important;
-
-        adf-upload-drag-area {
-            & > div {
-                @include file-draggable__input-focus;
-            }
-        }
-    }
-}
-
-adf-upload-drag-area {
-    .file-draggable__input-focus {
-        adf-document-list {
-            background: $alfresco-app-color--hue-1;
-
-            adf-datatable > table {
-                background: inherit;
-            }
-        }
-    }
-
-    .adf-upload__dragging {
-        background: $alfresco-app-color--hue-1;
-        color: $alfresco-secondary-text-color !important;
-    }
-
-    .adf-upload__dragging td {
-        border-top: 1px solid $alfresco-app-color--default !important;
-        border-bottom: 1px solid $alfresco-app-color--default !important;
-
-        &:first-child {
-            border-left: 1px solid $alfresco-app-color--default !important;
-        }
-
-        &:last-child {
-            border-right: 1px solid $alfresco-app-color--default !important;
-        }
-    }
-}

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

@@ -0,0 +1,92 @@
+@import 'variables';
+@import 'mixins';
+
+@mixin adf-document-list-theme($theme) {
+    $foreground: map-get($theme, foreground);
+    $primary: map-get($theme, primary);
+
+    adf-document-list {
+        @include flex-column;
+        background-color: white; // TODO: remove when ADF 2.4.0 is out.
+    }
+
+    adf-datatable {
+        @include flex-column;
+        overflow-y: scroll;
+    }
+
+    .adf-data-table {
+        border: none !important;
+
+        .adf-datatable-selected > svg {
+            // fill: mat-color($primary);
+            fill: #2196f3;
+        }
+
+        .adf-datatable-header, .adf-datatable-row, .adf-data-table-cell {
+            color: mat-color($foreground, text, 0.54);
+            &:focus {
+                outline: none !important;
+            }
+        }
+
+        .adf-datatable-table-cell-header:focus {
+            outline: none !important;
+        }
+
+        .adf-datatable-body .adf-datatable-row {
+            &:hover, &:focus {
+                background-color: #e0f7fa;
+            }
+
+            &.is-selected, &.is-selected:hover {
+                background-color: #e0f7fa;
+            }
+        }
+
+        .adf-data-table-cell, .adf-datatable-header {
+            width: 100%;
+            text-align: left;
+        }
+
+        .adf-datatable-body .adf-data-table-cell--image {
+            padding-left: 24px;
+            padding-right: 0;
+            width: 10px;
+        }
+
+        .adf-data-table-cell--ellipsis .cell-value,
+        .adf-data-table-cell--ellipsis__name .cell-value {
+            display: flex;
+            align-items: center;
+        }
+
+        .adf-data-table-cell--ellipsis .adf-datatable-cell,
+        .adf-data-table-cell--ellipsis__name .adf-datatable-cell {
+            white-space: nowrap;
+            display: block;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .adf-data-table-cell--ellipsis .adf-datatable-cell {
+            max-width: 7vw;
+        }
+
+        .adf-data-table-cell--ellipsis__name .adf-datatable-cell {
+            position: absolute;
+            max-width: calc(100% - 2em);
+        }
+
+        .adf-datatable-row:last-child .adf-datatable-table-cell {
+            border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+        }
+
+        &.adf-data-table--empty {
+            .adf-datatable-row:hover,
+            .adf-datatable-row:focus {
+                background-color: unset;
+            }
+        }
+    }
+}

src/app/ui/overrides/adf-pagination.theme.scss

@@ -0,0 +1,7 @@
+@mixin adf-pagination-theme($theme) {
+    .adf-pagination {
+        &.adf-pagination__empty {
+            display: none;
+        }
+    }
+}

src/app/ui/overrides/adf-sidenav-layout.theme.scss

@@ -0,0 +1,20 @@
+@import 'mixins';
+
+@mixin adf-sidenav-layout-theme($theme) {
+    adf-sidenav-layout {
+        @include flex-column;
+
+        .mat-drawer-content {
+            @include flex-column;
+            overflow: auto;
+        }
+    }
+
+    .sidenav-layout {
+        @include flex-column;
+    }
+
+    .mat-drawer-content>div, .mat-drawer-content>div>div {
+        @include flex-column;
+    }
+}

src/app/ui/overrides/adf-upload-dialog.theme.scss

@@ -0,0 +1,31 @@
+@mixin adf-upload-dialog-theme($theme) {
+    $primary: map-get($theme, primary);
+    $accent: map-get($theme, accent);
+    $warn: map-get($theme, warn);
+
+    .upload-dialog {
+        z-index: 999;
+    }
+
+    .adf-file-uploading-row {
+        &__status {
+            &--done {
+                color: mat-color($accent);
+            }
+
+            &--error {
+                color: mat-color($warn);
+            }
+        }
+
+        &__action {
+            &--cancel {
+                color: mat-color($warn);
+            }
+
+            &--remove {
+                color: mat-color($warn);
+            }
+        }
+    }
+}

src/app/ui/overrides/adf-upload-drag-area.theme.scss

@@ -0,0 +1,83 @@
+@import 'mixins';
+
+$alfresco-app-color--default: #00bcd4;
+
+@mixin file-draggable__input-focus($theme) {
+    $foreground: map-get($theme, foreground);
+
+    color: mat-color($foreground, text, 0.54);
+    border: 1px solid $alfresco-app-color--default !important;
+    margin-left: 0 !important;
+}
+
+@mixin adf-upload-drag-area-theme($theme) {
+    $foreground: map-get($theme, foreground);
+
+    adf-upload-drag-area {
+        @include flex-column;
+
+        .upload-border {
+            @include flex-column;
+
+            vertical-align: unset;
+            text-align: unset;
+        }
+    }
+
+    adf-upload-drag-area:first-child {
+        & > div {
+            adf-upload-drag-area {
+                .file-draggable__input-focus {
+                    @include file-draggable__input-focus($theme);
+                }
+            }
+        }
+
+        .upload-border {
+            vertical-align: inherit !important;
+            text-align: inherit !important;
+        }
+
+        .file-draggable__input-focus {
+            color: none !important;
+            border: none !important;
+            margin-left: 0 !important;
+
+            adf-upload-drag-area {
+                & > div {
+                    @include file-draggable__input-focus($theme);
+                }
+            }
+        }
+    }
+
+    adf-upload-drag-area {
+        .file-draggable__input-focus {
+            adf-document-list {
+                background: #e0f7fa;
+
+                adf-datatable > table {
+                    background: inherit;
+                }
+            }
+        }
+
+        .adf-upload__dragging {
+            background: #e0f7fa;
+            color: mat-color($foreground, text, 0.54);
+        }
+
+        .adf-upload__dragging td {
+            border-top: 1px solid $alfresco-app-color--default !important;
+            border-bottom: 1px solid $alfresco-app-color--default !important;
+
+            &:first-child {
+                border-left: 1px solid $alfresco-app-color--default !important;
+            }
+
+            &:last-child {
+                border-right: 1px solid $alfresco-app-color--default !important;
+            }
+        }
+    }
+}