diff --git a/projects/aca-shared/src/lib/components/tool-bar/toolbar-action/toolbar-action.component.scss b/projects/aca-shared/src/lib/components/tool-bar/toolbar-action/toolbar-action.component.scss new file mode 100644 index 000000000..94a968faf --- /dev/null +++ b/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; +} diff --git a/projects/aca-shared/src/lib/components/tool-bar/toolbar-action/toolbar-action.component.ts b/projects/aca-shared/src/lib/components/tool-bar/toolbar-action/toolbar-action.component.ts index e42dd9081..b8661f3e4 100644 --- a/projects/aca-shared/src/lib/components/tool-bar/toolbar-action/toolbar-action.component.ts +++ b/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' } diff --git a/projects/aca-shared/store/src/effects/snackbar.effects.ts b/projects/aca-shared/store/src/effects/snackbar.effects.ts index 4b3d1efee..69524cc0c 100644 --- a/projects/aca-shared/store/src/effects/snackbar.effects.ts +++ b/projects/aca-shared/store/src/effects/snackbar.effects.ts @@ -45,7 +45,7 @@ export class SnackbarEffects { infoEffect = this.actions$.pipe( ofType(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(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(SnackbarActionTypes.Error), map((action: SnackbarErrorAction) => { - this.showSnackBar(action, 'error-snackbar'); + this.showSnackBar(action, 'adf-error-snackbar'); }) ); diff --git a/src/app/components/context-menu/context-menu.component.theme.scss b/src/app/components/context-menu/context-menu.component.theme.scss deleted file mode 100644 index d71a433e3..000000000 --- a/src/app/components/context-menu/context-menu.component.theme.scss +++ /dev/null @@ -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); - } -} diff --git a/src/app/components/context-menu/context-menu.component.ts b/src/app/components/context-menu/context-menu.component.ts index fa5fda00e..3b8fb54f3 100644 --- a/src/app/components/context-menu/context-menu.component.ts +++ b/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' }, diff --git a/src/app/components/dl-custom-components/name-column/name-column.component.scss b/src/app/components/dl-custom-components/name-column/name-column.component.scss index 73fa18999..2adc67c0f 100644 --- a/src/app/components/dl-custom-components/name-column/name-column.component.scss +++ b/src/app/components/dl-custom-components/name-column/name-column.component.scss @@ -1,31 +1,19 @@ -.aca-name-column-container { - aca-locked-by { - display: flex; - align-items: center; - color: rgba(0, 0, 0, 0.54); - max-width: 100%; - padding: 0 10px; +.aca-custom-name-column { + display: block; + align-items: center; - .locked_by--name { - overflow: hidden; - text-overflow: ellipsis; - } - } -} - -@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; + .aca-name-column-container { + aca-locked-by { + display: flex; + align-items: center; + color: rgba(0, 0, 0, 0.54); + max-width: 100%; + padding: 0 10px; + + .locked_by--name { + overflow: hidden; + text-overflow: ellipsis; + } } } } diff --git a/src/app/components/dl-custom-components/name-column/name-column.component.ts b/src/app/components/dl-custom-components/name-column/name-column.component.ts index dead92463..b87d01e97 100644 --- a/src/app/components/dl-custom-components/name-column/name-column.component.ts +++ b/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 { diff --git a/src/app/components/header/header.component.scss b/src/app/components/header/header.component.scss index 07562cbf5..8a247d6d5 100644 --- a/src/app/components/header/header.component.scss +++ b/src/app/components/header/header.component.scss @@ -1,35 +1,29 @@ -@import '~@angular/material/theming'; +.app-header { + 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; -@mixin app-header-theme($theme) { - $foreground: map-get($theme, foreground); + .mat-toolbar { + background-image: var(--header-background-image) !important; + background-repeat: no-repeat !important; - .app-header { - @include mat-elevation(6, #000000, 0.1); - z-index: 2; + .adf-app-title { + color: var(--theme-foreground-text-color); + } - .mat-toolbar { - background-image: var(--header-background-image) !important; - background-repeat: no-repeat !important; + .adf-menu-icon { + color: var(--theme-foreground-text-color) !important; + } - .adf-app-title { - color: mat-color($foreground, text, 0.72); - } + .aca-current-user { + color: var(--theme-foreground-text-color) !important; + } - .adf-menu-icon { - color: mat-color($foreground, text, 0.72) !important; - } + .adf-toolbar-divider div { + background-color: var(--theme-foreground-text-color) !important; + } - .aca-current-user { - color: mat-color($foreground, text, 0.72) !important; - } - - .adf-toolbar-divider div { - background-color: mat-color($foreground, text, 0.72) !important; - } - - .app-toolbar-menu { - color: mat-color($foreground, text, 0.72) !important; - } + .app-toolbar-menu { + color: var(--theme-foreground-text-color) !important; } } } diff --git a/src/app/components/layout/app-layout/app-layout.component.scss b/src/app/components/layout/app-layout/app-layout.component.scss new file mode 100644 index 000000000..ec355913d --- /dev/null +++ b/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; + } +} diff --git a/src/app/components/layout/app-layout/app-layout.component.ts b/src/app/components/layout/app-layout/app-layout.component.ts index 6bce62f9a..90a406e77 100644 --- a/src/app/components/layout/app-layout/app-layout.component.ts +++ b/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' } }) diff --git a/src/app/components/layout/app-layout/app-layout.theme.scss b/src/app/components/layout/app-layout/app-layout.theme.scss deleted file mode 100644 index 6313742fd..000000000 --- a/src/app/components/layout/app-layout/app-layout.theme.scss +++ /dev/null @@ -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; - } - } -} diff --git a/src/app/components/layout/layout.theme.scss b/src/app/components/layout/layout.theme.scss deleted file mode 100644 index c1b1bac25..000000000 --- a/src/app/components/layout/layout.theme.scss +++ /dev/null @@ -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); -} diff --git a/src/app/components/permissions/permission-manager/permission-manager.component.scss b/src/app/components/permissions/permission-manager/permission-manager.component.scss new file mode 100644 index 000000000..85a947d65 --- /dev/null +++ b/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; + } + } +} diff --git a/src/app/components/permissions/permission-manager/permission-manager.component.theme.scss b/src/app/components/permissions/permission-manager/permission-manager.component.theme.scss deleted file mode 100644 index e80839473..000000000 --- a/src/app/components/permissions/permission-manager/permission-manager.component.theme.scss +++ /dev/null @@ -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; - } - } - } -} diff --git a/src/app/components/permissions/permission-manager/permission-manager.component.ts b/src/app/components/permissions/permission-manager/permission-manager.component.ts index 05eb075ec..529313ab7 100644 --- a/src/app/components/permissions/permission-manager/permission-manager.component.ts +++ b/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 }) diff --git a/src/app/components/search/search-results-row/search-results-row.component.scss b/src/app/components/search/search-results-row/search-results-row.component.scss index dc6f74823..b686d17df 100644 --- a/src/app/components/search/search-results-row/search-results-row.component.scss +++ b/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; - } +.aca-search-results-row { + 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; } } diff --git a/src/app/components/toolbar/toolbar-action/toolbar-actions.component.scss b/src/app/components/toolbar/toolbar-action/toolbar-actions.component.scss deleted file mode 100644 index 987a0dcb7..000000000 --- a/src/app/components/toolbar/toolbar-action/toolbar-actions.component.scss +++ /dev/null @@ -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; - } -} diff --git a/src/app/dialogs/node-versions/node-versions.dialog.html b/src/app/dialogs/node-versions/node-versions.dialog.html index 21ed24791..c3aba13b5 100644 --- a/src/app/dialogs/node-versions/node-versions.dialog.html +++ b/src/app/dialogs/node-versions/node-versions.dialog.html @@ -1,9 +1,5 @@ -
- {{ 'VERSION.DIALOG_ADF.TITLE' | translate }} -
-
- {{ 'VERSION.DIALOG.TITLE' | translate }} -
+
{{ 'VERSION.DIALOG_ADF.TITLE' | translate }}
+
{{ 'VERSION.DIALOG.TITLE' | translate }}
diff --git a/src/app/dialogs/node-versions/node-versions.dialog.scss b/src/app/dialogs/node-versions/node-versions.dialog.scss new file mode 100644 index 000000000..5a5318908 --- /dev/null +++ b/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; + } + } +} diff --git a/src/app/dialogs/node-versions/node-versions.dialog.theme.scss b/src/app/dialogs/node-versions/node-versions.dialog.theme.scss deleted file mode 100644 index 6ea277aa0..000000000 --- a/src/app/dialogs/node-versions/node-versions.dialog.theme.scss +++ /dev/null @@ -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; - } - } - } -} diff --git a/src/app/dialogs/node-versions/node-versions.dialog.ts b/src/app/dialogs/node-versions/node-versions.dialog.ts index 9aaef1f63..04389051e 100644 --- a/src/app/dialogs/node-versions/node-versions.dialog.ts +++ b/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' } }) diff --git a/src/app/ui/custom-theme.scss b/src/app/ui/custom-theme.scss index 7dcc5406d..6ccd6f359 100644 --- a/src/app/ui/custom-theme.scss +++ b/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 diff --git a/src/app/ui/overrides/adf-style-fixes.theme.scss b/src/app/ui/overrides/adf-style-fixes.theme.scss index b4229859d..d983b7eba 100644 --- a/src/app/ui/overrides/adf-style-fixes.theme.scss +++ b/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 diff --git a/src/app/ui/snackbar.scss b/src/app/ui/snackbar.scss deleted file mode 100644 index 4894a3e5b..000000000 --- a/src/app/ui/snackbar.scss +++ /dev/null @@ -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; - } - } -}