Styles cleanup (#1764)

* remove useless context menu styles

* deprecate layout theme mixins

* cleanup name column

* use adf snackbar styles

* permissions and search results

* cleanup node versions dialog

* cleanup toolbar actions

projects/aca-shared/src/lib/components/tool-bar/toolbar-action/toolbar-action.component.scss

@@ -0,0 +1,4 @@
+.aca-toolbar-action {
+  color: var(--theme-foreground-text-color);
+  margin: 0 5px;
+}

projects/aca-shared/src/lib/components/tool-bar/toolbar-action/toolbar-action.component.ts

@@ -29,6 +29,7 @@ import { ContentActionRef } from '@alfresco/adf-extensions';
 @Component({
   selector: 'aca-toolbar-action',
   templateUrl: './toolbar-action.component.html',
+  styleUrls: ['./toolbar-action.component.scss'],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'aca-toolbar-action' }

projects/aca-shared/store/src/effects/snackbar.effects.ts

@@ -45,7 +45,7 @@ export class SnackbarEffects {
   infoEffect = this.actions$.pipe(
     ofType<SnackbarInfoAction>(SnackbarActionTypes.Info),
     map((action: SnackbarInfoAction) => {
-      this.showSnackBar(action, 'info-snackbar');
+      this.showSnackBar(action, 'adf-info-snackbar');
     })
   );
 
@@ -53,7 +53,7 @@ export class SnackbarEffects {
   warningEffect = this.actions$.pipe(
     ofType<SnackbarWarningAction>(SnackbarActionTypes.Warning),
     map((action: SnackbarWarningAction) => {
-      this.showSnackBar(action, 'warning-snackbar');
+      this.showSnackBar(action, 'adf-warning-snackbar');
     })
   );
 
@@ -61,7 +61,7 @@ export class SnackbarEffects {
   errorEffect = this.actions$.pipe(
     ofType<SnackbarErrorAction>(SnackbarActionTypes.Error),
     map((action: SnackbarErrorAction) => {
-      this.showSnackBar(action, 'error-snackbar');
+      this.showSnackBar(action, 'adf-error-snackbar');
     })
   );
 

src/app/components/context-menu/context-menu.component.theme.scss

@@ -1,8 +0,0 @@
-@mixin aca-context-menu-theme($theme) {
-  $foreground: map-get($theme, foreground);
-  $primary: map-get($theme, primary);
-
-  .aca-context-menu {
-    @include angular-material-theme($theme);
-  }
-}

src/app/components/context-menu/context-menu.component.ts

@@ -38,7 +38,6 @@ import { AppExtensionService } from '@alfresco/aca-shared';
 @Component({
   selector: 'aca-context-menu',
   templateUrl: './context-menu.component.html',
-  styleUrls: ['./context-menu.component.theme.scss'],
   host: {
     class: 'aca-context-menu-holder'
   },

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

@@ -1,3 +1,7 @@
+.aca-custom-name-column {
+  display: block;
+  align-items: center;
+
   .aca-name-column-container {
     aca-locked-by {
       display: flex;
@@ -12,20 +16,4 @@
       }
     }
   }
-
-@mixin aca-custom-name-column-theme($theme) {
-  $primary: map-get($theme, primary);
-
-  aca-custom-name-column {
-    display: block;
-    align-items: center;
-
-    &:hover {
-      color: mat-color($primary, A200) !important;
-    }
-
-    .adf-datatable-cell-value {
-      margin: 0 4px;
-    }
-  }
 }

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

@@ -38,7 +38,7 @@ import { isLocked } from '@alfresco/aca-shared';
   styleUrls: ['name-column.component.scss'],
   encapsulation: ViewEncapsulation.None,
   host: {
-    class: ' adf-datatable-content-cell adf-datatable-link adf-name-column'
+    class: 'adf-datatable-content-cell adf-datatable-link adf-name-column aca-custom-name-column'
   }
 })
 export class CustomNameColumnComponent extends NameColumnComponent implements OnInit, OnDestroy {

src/app/components/header/header.component.scss

@@ -1,10 +1,5 @@
-@import '~@angular/material/theming';
-
-@mixin app-header-theme($theme) {
-  $foreground: map-get($theme, foreground);
-
 .app-header {
-    @include mat-elevation(6, #000000, 0.1);
+  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.02), 0px 6px 10px 0px rgba(0, 0, 0, 0.014), 0px 1px 18px 0px rgba(0, 0, 0, 0.012);
   z-index: 2;
 
   .mat-toolbar {
@@ -12,24 +7,23 @@
     background-repeat: no-repeat !important;
 
     .adf-app-title {
-        color: mat-color($foreground, text, 0.72);
+      color: var(--theme-foreground-text-color);
     }
 
     .adf-menu-icon {
-        color: mat-color($foreground, text, 0.72) !important;
+      color: var(--theme-foreground-text-color) !important;
     }
 
     .aca-current-user {
-        color: mat-color($foreground, text, 0.72) !important;
+      color: var(--theme-foreground-text-color) !important;
     }
 
     .adf-toolbar-divider div {
-        background-color: mat-color($foreground, text, 0.72) !important;
+      background-color: var(--theme-foreground-text-color) !important;
     }
 
     .app-toolbar-menu {
-        color: mat-color($foreground, text, 0.72) !important;
+      color: var(--theme-foreground-text-color) !important;
-      }
     }
   }
 }

src/app/components/layout/app-layout/app-layout.component.scss

@@ -0,0 +1,30 @@
+.app-layout {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  height: 100%;
+  overflow: hidden;
+  min-height: 0;
+
+  router-outlet[name='viewer'] + * {
+    width: 100%;
+    height: 100%;
+    z-index: 999;
+    position: absolute;
+    top: 0;
+    right: 0;
+    background-color: white;
+  }
+}
+
+@media screen and (max-width: 599px) {
+  .adf-app-title {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 719px) {
+  .adf-app-logo {
+    display: none;
+  }
+}

src/app/components/layout/app-layout/app-layout.component.ts

@@ -37,6 +37,7 @@ import { Directionality } from '@angular/cdk/bidi';
 @Component({
   selector: 'app-layout',
   templateUrl: './app-layout.component.html',
+  styleUrls: ['./app-layout.component.scss'],
   encapsulation: ViewEncapsulation.None,
   host: { class: 'app-layout' }
 })

src/app/components/layout/app-layout/app-layout.theme.scss

@@ -1,27 +0,0 @@
-@mixin app-layout-theme($theme) {
-  .app-layout {
-    @include flex-column;
-
-    router-outlet[name='viewer'] + * {
-      width: 100%;
-      height: 100%;
-      z-index: 999;
-      position: absolute;
-      top: 0;
-      right: 0;
-      background-color: white;
-    }
-  }
-
-  @media screen and (max-width: 599px) {
-    .adf-app-title {
-      display: none;
-    }
-  }
-
-  @media screen and (max-width: 719px) {
-    .adf-app-logo {
-      display: none;
-    }
-  }
-}

src/app/components/layout/layout.theme.scss

@@ -1,7 +0,0 @@
-@import './app-layout/app-layout.theme.scss';
-@import '../header/header.component.scss';
-
-@mixin layout-theme($theme) {
-  @include app-layout-theme($theme);
-  @include app-header-theme($theme);
-}

src/app/components/permissions/permission-manager/permission-manager.component.scss

@@ -0,0 +1,40 @@
+aca-permissions-dialog-panel {
+  height: 400px;
+}
+
+.aca-node-permissions-dialog {
+  .mat-dialog-title {
+    font-size: 20px;
+    font-weight: 600;
+    font-style: normal;
+    font-stretch: normal;
+    line-height: 1.6;
+    margin: 0;
+    letter-spacing: -0.5px;
+    color: var(--theme-foreground-text-bold-color);
+  }
+
+  .mat-dialog-content {
+    flex: 1 1 auto;
+    position: relative;
+    overflow: auto;
+
+    adf-permission-list {
+      display: flex;
+    }
+  }
+
+  .mat-dialog-actions {
+    flex: 0 0 auto;
+
+    padding: 8px 8px 24px 8px;
+    display: flex;
+    justify-content: flex-end;
+    color: var(--theme-text-color);
+
+    button {
+      text-transform: uppercase;
+      font-weight: normal;
+    }
+  }
+}

src/app/components/permissions/permission-manager/permission-manager.component.theme.scss

@@ -1,49 +0,0 @@
-@mixin app-permission-manager-theme($theme) {
-  $foreground: map-get($theme, foreground);
-  $accent: map-get($theme, accent);
-
-  aca-permissions-dialog-panel {
-    height: 400px;
-  }
-
-  .aca-node-permissions-dialog {
-    .mat-dialog-title {
-      font-size: 20px;
-      font-weight: 600;
-      font-style: normal;
-      font-stretch: normal;
-      line-height: 1.6;
-      margin: 0;
-      letter-spacing: -0.5px;
-      color: mat-color($foreground, text, 0.87);
-    }
-
-    .mat-dialog-content {
-      flex: 1 1 auto;
-      position: relative;
-      overflow: auto;
-
-      adf-permission-list {
-        display: flex;
-      }
-    }
-
-    .mat-dialog-actions {
-      flex: 0 0 auto;
-
-      padding: 8px 8px 24px 8px;
-      display: -webkit-box;
-      display: -ms-flexbox;
-      display: flex;
-      -webkit-box-pack: end;
-      -ms-flex-pack: end;
-      justify-content: flex-end;
-      color: mat-color($foreground, text, 0.54);
-
-      button {
-        text-transform: uppercase;
-        font-weight: normal;
-      }
-    }
-  }
-}

src/app/components/permissions/permission-manager/permission-manager.component.ts

@@ -26,7 +26,7 @@
 import { AppStore, SnackbarErrorAction } from '@alfresco/aca-shared/store';
 import { NodePermissionDialogService, PermissionListComponent } from '@alfresco/adf-content-services';
 import { MinimalNodeEntryEntity } from '@alfresco/js-api';
-import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { Component, Input, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
 import { ContentApiService } from '@alfresco/aca-shared';
@@ -34,7 +34,9 @@ import { NodePermissionsDialogComponent } from '../permission-dialog/node-permis
 
 @Component({
   selector: 'app-permission-manager',
-  templateUrl: './permission-manager.component.html'
+  templateUrl: './permission-manager.component.html',
+  styleUrls: ['permission-manager.component.scss'],
+  encapsulation: ViewEncapsulation.None
 })
 export class PermissionsManagerComponent implements OnInit {
   @ViewChild('permissionList', { static: true })

src/app/components/search/search-results-row/search-results-row.component.scss

@@ -1,12 +1,10 @@
-@import 'mixins';
-
-@mixin aca-result-row-theme($theme) {
-  $primary: map-get($theme, primary);
-  $foreground: map-get($theme, foreground);
-
 .aca-search-results-row {
-    @include flex-column;
+  display: flex;
-  }
+  flex-direction: column;
+  flex: 1;
+  height: 100%;
+  overflow: hidden;
+  min-height: 0;
 
   .line {
     margin: 5px;
@@ -14,22 +12,22 @@
 
   .bold {
     font-weight: 400;
-    color: mat-color($foreground, text, 0.87);
+    color: var(--theme-text-bold-color);
   }
 
   .link {
     text-decoration: none;
-    color: mat-color($foreground, text, 0.87);
+    color: var(--theme-text-bold-color);
   }
 
   .link:hover,
   .aca-location-link .adf-datatable-cell-value:hover {
-    color: mat-color($primary, A200) !important;
+    color: var(--theme-primary-color) !important;
     text-decoration: underline;
   }
 
   .adf-is-selected .link:not(:hover),
   .adf-is-selected .adf-datatable-cell-value:not(:hover) {
-    color: mat-color($primary) !important;
+    color: var(--theme-primary-color) !important;
   }
 }

src/app/components/toolbar/toolbar-action/toolbar-actions.component.scss

@@ -1,8 +0,0 @@
-@mixin toolbar-actions-theme($theme) {
-  $foreground: map-get($theme, foreground);
-
-  .aca-toolbar-action {
-    color: mat-color($foreground, text, 0.72);
-    margin: 0 5px;
-  }
-}

src/app/dialogs/node-versions/node-versions.dialog.html

@@ -1,9 +1,5 @@
-<header mat-dialog-title *ngIf="isTypeList">
+<header mat-dialog-title *ngIf="isTypeList">{{ 'VERSION.DIALOG_ADF.TITLE' | translate }}</header>
-  {{ 'VERSION.DIALOG_ADF.TITLE' | translate }}
+<header mat-dialog-title *ngIf="!isTypeList">{{ 'VERSION.DIALOG.TITLE' | translate }}</header>
-</header>
-<header mat-dialog-title *ngIf="!isTypeList">
-  {{ 'VERSION.DIALOG.TITLE' | translate }}
-</header>
 <section mat-dialog-content *ngIf="!isTypeList">
   <adf-version-comparison id="adf-version-comparison" [newFileVersion]="file" [node]="node"></adf-version-comparison>
   <adf-version-upload
@@ -32,8 +28,6 @@
     </div>
   </section>
   <footer mat-dialog-actions>
-    <button mat-button [mat-dialog-close]="true">
+    <button mat-button color="primary" [mat-dialog-close]="true">{{ 'VERSION.DIALOG_ADF.CLOSE' | translate }}</button>
-      {{ 'VERSION.DIALOG_ADF.CLOSE' | translate }}
-    </button>
   </footer>
 </ng-container>

src/app/dialogs/node-versions/node-versions.dialog.scss

@@ -0,0 +1,69 @@
+.adf-version-manager-dialog-panel-list {
+  height: 400px;
+}
+
+.adf-version-manager-dialog-panel-upload {
+  height: 500px;
+}
+
+.aca-node-versions-dialog {
+  .mat-dialog-title {
+    flex: 0 0 auto;
+  }
+
+  .mat-dialog-content {
+    flex: 1 1 auto;
+    position: relative;
+    overflow-y: auto;
+  }
+
+  .mat-dialog-actions {
+    flex: 0 0 auto;
+  }
+
+  .mat-dialog-title {
+    font-size: 20px;
+    font-weight: 600;
+    font-style: normal;
+    font-stretch: normal;
+    line-height: 1.6;
+    margin: 0;
+    letter-spacing: -0.5px;
+    color: var(--theme-text-bold-color);
+  }
+
+  .mat-dialog-actions {
+    padding: 8px 8px 24px 8px;
+    display: flex;
+    justify-content: flex-end;
+    color: var(--theme-text-color);
+
+    button {
+      text-transform: uppercase;
+      font-weight: normal;
+    }
+  }
+
+  .mat-dialog-content {
+    max-height: 100vh;
+    overflow: hidden;
+    padding: 2px 26px;
+  }
+
+  .mat-list-item-content {
+    padding: 0;
+    margin: 0 16px;
+  }
+
+  .adf-version-list-container {
+    .adf-version-list {
+      height: 250px;
+      overflow: hidden;
+      padding: 0;
+    }
+
+    .mat-list.adf-version-list {
+      overflow: auto;
+    }
+  }
+}

src/app/dialogs/node-versions/node-versions.dialog.theme.scss

@@ -1,82 +0,0 @@
-@mixin aca-node-versions-dialog-theme($theme) {
-  $foreground: map-get($theme, foreground);
-  $accent: map-get($theme, accent);
-
-  .adf-version-manager-dialog-panel-list {
-    height: 400px;
-  }
-
-  .adf-version-manager-dialog-panel-upload {
-    height: 500px;
-  }
-
-  .aca-node-versions-dialog {
-    .mat-dialog-title {
-      flex: 0 0 auto;
-    }
-
-    .mat-dialog-content {
-      flex: 1 1 auto;
-      position: relative;
-      overflow-y: auto;
-    }
-
-    .mat-dialog-actions {
-      flex: 0 0 auto;
-    }
-
-    .mat-dialog-title {
-      font-size: 20px;
-      font-weight: 600;
-      font-style: normal;
-      font-stretch: normal;
-      line-height: 1.6;
-      margin: 0;
-      letter-spacing: -0.5px;
-      color: mat-color($foreground, text, 0.87);
-    }
-
-    .mat-dialog-actions {
-      padding: 8px 8px 24px 8px;
-      display: -webkit-box;
-      display: -ms-flexbox;
-      display: flex;
-      -webkit-box-pack: end;
-      -ms-flex-pack: end;
-      justify-content: flex-end;
-      color: mat-color($foreground, text, 0.54);
-
-      button {
-        text-transform: uppercase;
-        font-weight: normal;
-
-        &:enabled {
-          color: mat-color($accent);
-        }
-      }
-    }
-
-    .mat-dialog-content {
-      max-height: 100vh;
-      overflow: hidden;
-      padding: 2px 26px;
-    }
-
-    .mat-list-item-content {
-      padding: 0;
-      margin: 0 16px;
-    }
-
-    .adf-version-list-container {
-      .adf-version-list {
-        height: 250px;
-        overflow: hidden;
-        padding: 0;
-      }
-
-      .mat-list.adf-version-list {
-        overflow: auto;
-      }
-    }
-  }
-}

src/app/dialogs/node-versions/node-versions.dialog.ts

@@ -33,6 +33,7 @@ import { Router } from '@angular/router';
 
 @Component({
   templateUrl: './node-versions.dialog.html',
+  styleUrls: ['./node-versions.dialog.scss'],
   encapsulation: ViewEncapsulation.None,
   host: { class: 'aca-node-versions-dialog' }
 })

src/app/ui/custom-theme.scss

@@ -3,19 +3,11 @@
 
 @import '../components/sidenav/sidenav.component.theme';
 @import '../components/search/search-input/search-input.component.theme';
-@import '../components/search/search-results-row/search-results-row.component.scss';
-@import '../components/permissions/permission-manager/permission-manager.component.theme';
-@import '../components/context-menu/context-menu.component.theme';
-@import '../components/dl-custom-components/name-column/name-column.component.scss';
-@import '../dialogs/node-versions/node-versions.dialog.theme';
 @import '../components/create-menu/create-menu.component.scss';
-@import '../components/layout/layout.theme.scss';
 @import '../dialogs/node-template/create-from-template.dialog.scss';
-@import '../components/toolbar/toolbar-action/toolbar-actions.component.scss';
 
 @import './overrides/adf-style-fixes.theme';
 
-@import 'snackbar';
 @import 'colors';
 
 @include mat-core();
@@ -27,24 +19,18 @@ $custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent, $cus
 $foreground: map-get($custom-theme, foreground);
 $background: map-get($custom-theme, background);
 $warn: map-get($custom-theme, warn);
+$accent: map-get($custom-theme, accent);
+$primary: map-get($custom-theme, primary);
 
 @mixin custom-theme($theme) {
   @include angular-material-theme($theme);
   @include adf-content-services-theme($theme);
   @include adf-core-theme($theme);
 
-  @include layout-theme($theme);
   @include aca-search-input-theme($theme);
-  @include aca-result-row-theme($theme);
-  @include app-permission-manager-theme($theme);
-  @include aca-node-versions-dialog-theme($theme);
-  @include snackbar-theme($theme);
   @include sidenav-component-theme($theme);
-  @include aca-context-menu-theme($theme);
-  @include aca-custom-name-column-theme($theme);
   @include app-create-from-template-theme($theme);
   @include app-create-menu-theme($theme);
-  @include toolbar-actions-theme($theme);
   @include adf-style-fixes($theme);
 
   .mat-toolbar {
@@ -80,13 +66,18 @@ $adf-upload-dragging-level1-border: none;
 $adf-permission-list-width: 100%;
 
 $defaults: (
+  --theme-primary-color: mat-color($primary),
   --theme-warn-color: mat-color($warn),
+  --theme-accent-color: mat-color($accent),
   --theme-text-color: mat-color($foreground, text, 0.54),
+  --theme-text-bold-color: mat-color($foreground, text, 0.87),
   --theme-title-color: mat-color($foreground, text, 0.87),
   --theme-text-disabled-color: mat-color($foreground, text, 0.38),
   --theme-border-color: mat-color($foreground, text, 0.07),
   --header-background-image: url('/assets/images/mastHead-bg-shapesPattern.svg'),
-  --theme-card-background-color: mat-color($background, card)
+  --theme-card-background-color: mat-color($background, card),
+  --theme-foreground-text-color: mat-color($foreground, text, 0.72),
+  --theme-foreground-text-bold-color: mat-color($foreground, text, 0.87)
 );
 
 // propagates SCSS variables into the CSS variables scope

src/app/ui/overrides/adf-style-fixes.theme.scss

@@ -1,5 +1,3 @@
-@import 'mixins';
-
 @mixin adf-style-fixes($theme) {
   //  add here all ADF style overrides
   //  and create a task to move them to ADF

src/app/ui/snackbar.scss

@@ -1,29 +0,0 @@
-@mixin snackbar-theme($theme) {
-  $warn: map-get($theme, warn);
-  $accent: map-get($theme, accent);
-  $primary: map-get($theme, primary);
-
-  .error-snackbar {
-    background-color: mat-color($warn);
-
-    .mat-simple-snackbar-action {
-      color: white;
-    }
-  }
-
-  .warning-snackbar {
-    background-color: mat-color($accent);
-
-    .mat-simple-snackbar-action {
-      color: white;
-    }
-  }
-
-  .info-snackbar {
-    background-color: mat-color($primary);
-
-    .mat-simple-snackbar-action {
-      color: white;
-    }
-  }
-}