diff --git a/e2e/components/header/header.ts b/e2e/components/header/header.ts index ef151d54d..c5e5f944a 100755 --- a/e2e/components/header/header.ts +++ b/e2e/components/header/header.ts @@ -30,13 +30,13 @@ import { UserInfo } from './user-info'; export class Header extends Component { private locators = { logoLink: by.css('.app-menu__title'), - userInfo: by.css('app-current-user') + userInfo: by.css('aca-current-user') }; logoLink: ElementFinder = this.component.element(this.locators.logoLink); userInfo: UserInfo = new UserInfo(this.component); constructor(ancestor?: ElementFinder) { - super('app-header', ancestor); + super('aca-header', ancestor); } } diff --git a/e2e/components/header/user-info.ts b/e2e/components/header/user-info.ts index b5e840080..36a14b186 100755 --- a/e2e/components/header/user-info.ts +++ b/e2e/components/header/user-info.ts @@ -40,7 +40,7 @@ export class UserInfo extends Component { menu: Menu = new Menu(); constructor(ancestor?: ElementFinder) { - super('app-current-user', ancestor); + super('aca-current-user', ancestor); } openMenu(): promise.Promise { diff --git a/src/app/components/current-user/current-user.component.html b/src/app/components/current-user/current-user.component.html index 9ce4be5ac..c2eeef62e 100644 --- a/src/app/components/current-user/current-user.component.html +++ b/src/app/components/current-user/current-user.component.html @@ -1,25 +1,23 @@ -
-
-
{{ userName }}
-
- {{ userInitials }} -
+
+
{{ userName }}
+
+ {{ userInitials }}
- - - - - - - - - -
+ + + + + + + + + + diff --git a/src/app/components/current-user/current-user.component.scss b/src/app/components/current-user/current-user.component.scss deleted file mode 100644 index b301ce7bc..000000000 --- a/src/app/components/current-user/current-user.component.scss +++ /dev/null @@ -1,49 +0,0 @@ -@import 'variables'; - -$am-avatar-size: 40px; - -$am-avatar-light-bg: rgba(white, .15); -$am-avatar-dark-bg: rgba(black, .15); - -:host { - font-weight: lighter; - position: relative; - - color: $alfresco-white; - line-height: 20px; - - .am-avatar { - margin-left: 5px; - cursor: pointer; - - display: inline-block; - width: $am-avatar-size; - height: $am-avatar-size; - line-height: $am-avatar-size; - font-size: 1.2em; - text-align: center; - color: inherit; - border-radius: 100%; - - &--light { - background: $am-avatar-light-bg; - } - - &--dark { - background: $am-avatar-dark-bg; - } - } - - .current-user__full-name { - width: 100px; - text-align: right; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - display:inline-block; - height: 20px; - font-size: 14px; - line-height: 1.43; - letter-spacing: -0.2px; - } -} diff --git a/src/app/components/current-user/current-user.component.theme.scss b/src/app/components/current-user/current-user.component.theme.scss new file mode 100644 index 000000000..6a22fa665 --- /dev/null +++ b/src/app/components/current-user/current-user.component.theme.scss @@ -0,0 +1,38 @@ +@mixin aca-current-user-theme($theme) { + $background: map-get($theme, background); + $am-avatar-size: 40px; + + .aca-current-user { + font-weight: lighter; + position: relative; + color: mat-color($background, card); + line-height: 20px; + + .am-avatar { + margin-left: 5px; + cursor: pointer; + display: inline-block; + width: $am-avatar-size; + height: $am-avatar-size; + line-height: $am-avatar-size; + font-size: 1.2em; + text-align: center; + color: inherit; + border-radius: 100%; + background-color: mat-color($background, card, .15); + } + + .current-user__full-name { + width: 100px; + text-align: right; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display:inline-block; + height: 20px; + font-size: 14px; + line-height: 1.43; + letter-spacing: -0.2px; + } + } +} diff --git a/src/app/components/current-user/current-user.component.ts b/src/app/components/current-user/current-user.component.ts index b91bd6ce1..996646cf5 100644 --- a/src/app/components/current-user/current-user.component.ts +++ b/src/app/components/current-user/current-user.component.ts @@ -23,14 +23,15 @@ * along with Alfresco. If not, see . */ -import { Component, OnInit, OnDestroy } from '@angular/core'; +import { Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core'; import { PeopleContentService } from '@alfresco/adf-core'; import { Subscription } from 'rxjs/Rx'; @Component({ - selector: 'app-current-user', + selector: 'aca-current-user', templateUrl: './current-user.component.html', - styleUrls: [ './current-user.component.scss' ] + encapsulation: ViewEncapsulation.None, + host: { class: 'aca-current-user' } }) export class CurrentUserComponent implements OnInit, OnDestroy { private subscriptions: Subscription[] = []; diff --git a/src/app/components/files/files.component.html b/src/app/components/files/files.component.html index 41ebb77cd..e24f683c7 100644 --- a/src/app/components/files/files.component.html +++ b/src/app/components/files/files.component.html @@ -94,7 +94,7 @@
- +
diff --git a/src/app/components/generic-error/generic-error.component.html b/src/app/components/generic-error/generic-error.component.html index 1525e9ba3..ac7157b63 100644 --- a/src/app/components/generic-error/generic-error.component.html +++ b/src/app/components/generic-error/generic-error.component.html @@ -1,4 +1,4 @@ -
- ic_error -

This file / folder no longer exists or you don't have permission to view it.

-
\ No newline at end of file +ic_error +

+ {{ 'APP.MESSAGES.ERRORS.MISSING_CONTENT' | translate }} +

diff --git a/src/app/components/generic-error/generic-error.component.scss b/src/app/components/generic-error/generic-error.component.scss deleted file mode 100644 index a3b5b67f1..000000000 --- a/src/app/components/generic-error/generic-error.component.scss +++ /dev/null @@ -1,25 +0,0 @@ -@import 'variables'; - -$alfresco-warn-color--hue-2: #ff5252; - -.generic-error { - color: $alfresco-secondary-text-color; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - width: 100%; - height: 100%; - - &__title { - font-size: 16px; - } - - mat-icon { - color: $alfresco-warn-color--hue-2; - direction: rtl; - font-size: 52px; - height: 52px; - width: 52px; - } - } diff --git a/src/app/components/generic-error/generic-error.component.theme.scss b/src/app/components/generic-error/generic-error.component.theme.scss new file mode 100644 index 000000000..bbf0735e9 --- /dev/null +++ b/src/app/components/generic-error/generic-error.component.theme.scss @@ -0,0 +1,27 @@ +@mixin aca-generic-error-theme($theme) { + $warn: map-get($theme, warn); + $foreground: map-get($theme, foreground); + + .aca-generic-error { + color: mat-color($foreground, text, 0.54); + + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + width: 100%; + height: 100%; + + &__title { + font-size: 16px; + } + + mat-icon { + color: mat-color($warn); + direction: rtl; + font-size: 52px; + height: 52px; + width: 52px; + } + } +} diff --git a/src/app/components/generic-error/generic-error.component.ts b/src/app/components/generic-error/generic-error.component.ts index abfbf9a6d..dfae6b91e 100644 --- a/src/app/components/generic-error/generic-error.component.ts +++ b/src/app/components/generic-error/generic-error.component.ts @@ -23,12 +23,14 @@ * along with Alfresco. If not, see . */ -import { Component } from '@angular/core'; +import { Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core'; @Component({ - selector: 'app-generic-error', - styleUrls: ['./generic-error.component.scss'], - templateUrl: './generic-error.component.html' + selector: 'aca-generic-error', + templateUrl: './generic-error.component.html', + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + host: { class: 'aca-generic-error' } }) export class GenericErrorComponent {} diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html index c389a6072..2a4668d66 100644 --- a/src/app/components/header/header.component.html +++ b/src/app/components/header/header.component.html @@ -16,9 +16,9 @@
- + - + diff --git a/src/app/components/header/header.component.scss b/src/app/components/header/header.component.scss deleted file mode 100644 index 1ef205891..000000000 --- a/src/app/components/header/header.component.scss +++ /dev/null @@ -1,55 +0,0 @@ -@import 'variables'; - -$app-menu-height: 64px; - -.app-menu { - height: $app-menu-height; - - &.adf-toolbar { - .mat-toolbar { - background-color: inherit; - font-family: inherit; - min-height: $app-menu-height; - height: $app-menu-height; - - .mat-toolbar-layout { - height: $app-menu-height; - - .mat-toolbar-row { - height: $app-menu-height; - } - } - } - - .adf-toolbar-divider { - margin-left: 5px; - margin-right: 5px; - - & > div { - background-color: $alfresco-white !important; - } - } - - .adf-toolbar-title { - color: $alfresco-white; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - } - } - - .app-menu__title { - width: 100px; - height: 50px; - margin-left: 40px; - display: flex; - justify-content: center; - align-items: stretch; - - &> img { - width: 100%; - object-fit: contain; - } - } -} diff --git a/src/app/components/header/header.component.theme.scss b/src/app/components/header/header.component.theme.scss new file mode 100644 index 000000000..8b56a4224 --- /dev/null +++ b/src/app/components/header/header.component.theme.scss @@ -0,0 +1,59 @@ +@mixin aca-header-theme($theme) { + $background: map-get($theme, background); + $app-menu-height: 64px; + + .aca-header { + + .app-menu { + height: $app-menu-height; + + &.adf-toolbar { + .mat-toolbar { + background-color: inherit; + font-family: inherit; + min-height: $app-menu-height; + height: $app-menu-height; + + .mat-toolbar-layout { + height: $app-menu-height; + + .mat-toolbar-row { + height: $app-menu-height; + } + } + } + + .adf-toolbar-divider { + margin-left: 5px; + margin-right: 5px; + + & > div { + background-color: mat-color($background, card); + } + } + + .adf-toolbar-title { + color: mat-color($background, card); + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + } + } + + .app-menu__title { + width: 100px; + height: 50px; + margin-left: 40px; + display: flex; + justify-content: center; + align-items: stretch; + + &> img { + width: 100%; + object-fit: contain; + } + } + } + } +} diff --git a/src/app/components/header/header.component.ts b/src/app/components/header/header.component.ts index 2c121e61a..6ad498bb3 100644 --- a/src/app/components/header/header.component.ts +++ b/src/app/components/header/header.component.ts @@ -30,10 +30,10 @@ import { AppStore } from '../../store/states/app.state'; import { selectHeaderColor, selectAppName, selectLogoPath } from '../../store/selectors/app.selectors'; @Component({ - selector: 'app-header', + selector: 'aca-header', templateUrl: './header.component.html', - styleUrls: [ './header.component.scss' ], - encapsulation: ViewEncapsulation.None + encapsulation: ViewEncapsulation.None, + host: { class: 'aca-header' } }) export class HeaderComponent { @Output() menu: EventEmitter = new EventEmitter(); diff --git a/src/app/components/layout/layout.component.html b/src/app/components/layout/layout.component.html index 754195e4c..52c37d768 100644 --- a/src/app/components/layout/layout.component.html +++ b/src/app/components/layout/layout.component.html @@ -15,7 +15,7 @@ - + @@ -35,4 +35,4 @@ -
\ No newline at end of file +
diff --git a/src/app/components/location-link/location-link.component.ts b/src/app/components/location-link/location-link.component.ts index 1cf93f11f..0277f76ce 100644 --- a/src/app/components/location-link/location-link.component.ts +++ b/src/app/components/location-link/location-link.component.ts @@ -30,7 +30,7 @@ import { Observable } from 'rxjs/Rx'; import { Store } from '@ngrx/store'; import { AppStore } from '../../store/states/app.state'; -import { NavigateToLocationAction } from '../../store/actions'; +import { NavigateToLocationAction } from '../../store/actions'; @Component({ selector: 'app-location-link', @@ -41,10 +41,7 @@ import { NavigateToLocationAction } from '../../store/actions'; `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, - // tslint:disable-next-line:use-host-property-decorator - host: { - 'class': 'app-location-link adf-location-cell' - } + host: { 'class': 'app-location-link adf-location-cell' } }) export class LocationLinkComponent implements OnInit { diff --git a/src/app/components/preview/preview.component.ts b/src/app/components/preview/preview.component.ts index 1d140d3a0..cd603cd73 100644 --- a/src/app/components/preview/preview.component.ts +++ b/src/app/components/preview/preview.component.ts @@ -37,7 +37,6 @@ import { PageComponent } from '../page.component'; templateUrl: 'preview.component.html', styleUrls: ['preview.component.scss'], encapsulation: ViewEncapsulation.None, - // tslint:disable-next-line:use-host-property-decorator host: { 'class': 'app-preview' } }) export class PreviewComponent extends PageComponent implements OnInit { diff --git a/src/app/components/search-input/search-input.component.html b/src/app/components/search-input/search-input.component.html index f37d847a3..95fd9b69d 100644 --- a/src/app/components/search-input/search-input.component.html +++ b/src/app/components/search-input/search-input.component.html @@ -1,17 +1,15 @@ -
- - - -
+ + + diff --git a/src/app/components/search-input/search-input.component.scss b/src/app/components/search-input/search-input.component.scss deleted file mode 100644 index 513e16531..000000000 --- a/src/app/components/search-input/search-input.component.scss +++ /dev/null @@ -1,23 +0,0 @@ -@import 'variables'; - -adf-search-control { - color: $alfresco-white; -} - -.adf-search-control-wrapper { - display: flex; - box-sizing: border-box; - padding: 0; - width: 100%; - flex-direction: row; - align-items: center; - white-space: nowrap; - - .adf-search-button { - left: -15px; - margin-left: 13px; - align-items: flex-start; - font: 400 11px system-ui; - color: #fff; - } -} diff --git a/src/app/components/search-input/search-input.component.theme.scss b/src/app/components/search-input/search-input.component.theme.scss new file mode 100644 index 000000000..ead9a266d --- /dev/null +++ b/src/app/components/search-input/search-input.component.theme.scss @@ -0,0 +1,28 @@ +@mixin aca-search-input-theme($theme) { + $background: map-get($theme, background); + + .aca-search-input{ + display: flex; + box-sizing: border-box; + padding: 0; + flex-direction: row; + align-items: center; + white-space: nowrap; + + .adf-search-control { + color: mat-color($background, card); + + .mat-form-field-underline { + background-color: mat-color($background, card); + } + } + + .adf-search-button { + left: -15px; + margin-left: 13px; + align-items: flex-start; + font: 400 11px system-ui; + color: mat-color($background, card); + } + } +} diff --git a/src/app/components/search-input/search-input.component.ts b/src/app/components/search-input/search-input.component.ts index 31ed8d222..71b90270d 100644 --- a/src/app/components/search-input/search-input.component.ts +++ b/src/app/components/search-input/search-input.component.ts @@ -23,7 +23,7 @@ * along with Alfresco. If not, see . */ -import { Component, OnInit, ViewChild } from '@angular/core'; +import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; import { NavigationEnd, PRIMARY_OUTLET, Router, RouterEvent, UrlSegment, UrlSegmentGroup, UrlTree @@ -32,9 +32,10 @@ import { MinimalNodeEntity } from 'alfresco-js-api'; import { SearchControlComponent } from '@alfresco/adf-content-services'; @Component({ - selector: 'app-search-input', + selector: 'aca-search-input', templateUrl: 'search-input.component.html', - styleUrls: ['search-input.component.scss'] + encapsulation: ViewEncapsulation.None, + host: { class: 'aca-search-input' } }) export class SearchInputComponent implements OnInit { diff --git a/src/app/components/settings/settings.component.scss b/src/app/components/settings/settings.component.scss deleted file mode 100644 index ad87b6492..000000000 --- a/src/app/components/settings/settings.component.scss +++ /dev/null @@ -1,69 +0,0 @@ -@import 'variables'; - -.app-settings { - .settings-input { - width: 50%; - } - - .settings-buttons { - text-align: right; - - .mat-button { - text-transform: uppercase; - } - } - - $app-menu-height: 64px; - - .app-menu { - height: $app-menu-height; - - &.adf-toolbar { - .mat-toolbar { - background-color: inherit; - font-family: inherit; - min-height: $app-menu-height; - height: $app-menu-height; - - .mat-toolbar-layout { - height: $app-menu-height; - - .mat-toolbar-row { - height: $app-menu-height; - } - } - } - - .adf-toolbar-divider { - margin-left: 5px; - margin-right: 5px; - - & > div { - background-color: $alfresco-white !important; - } - } - - .adf-toolbar-title { - color: $alfresco-white; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - } - } - - .app-menu__title { - width: 100px; - height: 50px; - margin-left: 40px; - display: flex; - justify-content: center; - align-items: stretch; - - &> img { - width: 100%; - object-fit: contain; - } - } - } -} diff --git a/src/app/components/settings/settings.component.theme.scss b/src/app/components/settings/settings.component.theme.scss new file mode 100644 index 000000000..11de98a19 --- /dev/null +++ b/src/app/components/settings/settings.component.theme.scss @@ -0,0 +1,70 @@ +@mixin aca-settings-theme($theme) { + $background: map-get($theme, background); + $app-menu-height: 64px; + + .aca-settings { + .settings-input { + width: 50%; + } + + .settings-buttons { + text-align: right; + + .mat-button { + text-transform: uppercase; + } + } + + .app-menu { + height: $app-menu-height; + + &.adf-toolbar { + .mat-toolbar { + background-color: inherit; + font-family: inherit; + min-height: $app-menu-height; + height: $app-menu-height; + + .mat-toolbar-layout { + height: $app-menu-height; + + .mat-toolbar-row { + height: $app-menu-height; + } + } + } + + .adf-toolbar-divider { + margin-left: 5px; + margin-right: 5px; + + & > div { + background-color: mat-color($background, card); + } + } + + .adf-toolbar-title { + color: mat-color($background, card); + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + } + } + + .app-menu__title { + width: 100px; + height: 50px; + margin-left: 40px; + display: flex; + justify-content: center; + align-items: stretch; + + &> img { + width: 100%; + object-fit: contain; + } + } + } + } +} diff --git a/src/app/components/settings/settings.component.ts b/src/app/components/settings/settings.component.ts index f0087bb06..27507dd1a 100644 --- a/src/app/components/settings/settings.component.ts +++ b/src/app/components/settings/settings.component.ts @@ -29,12 +29,10 @@ import { DomSanitizer } from '@angular/platform-browser'; import { Validators, FormGroup, FormBuilder } from '@angular/forms'; @Component({ - selector: 'app-settings', + selector: 'aca-settings', templateUrl: './settings.component.html', - styleUrls: ['./settings.component.scss'], encapsulation: ViewEncapsulation.None, - // tslint:disable-next-line:use-host-property-decorator - host: { class: 'app-settings' } + host: { class: 'aca-settings' } }) export class SettingsComponent implements OnInit { diff --git a/src/app/dialogs/node-versions/node-versions.dialog.ts b/src/app/dialogs/node-versions/node-versions.dialog.ts index 4a96bccf6..e99e07d38 100644 --- a/src/app/dialogs/node-versions/node-versions.dialog.ts +++ b/src/app/dialogs/node-versions/node-versions.dialog.ts @@ -33,7 +33,6 @@ import { SnackbarErrorAction } from '../../store/actions'; @Component({ templateUrl: './node-versions.dialog.html', encapsulation: ViewEncapsulation.None, - // tslint:disable-next-line:use-host-property-decorator host: { class: 'aca-node-versions-dialog' } }) export class NodeVersionsDialogComponent { diff --git a/src/app/ui/_layout.scss b/src/app/ui/_layout.scss deleted file mode 100644 index ad9e7e81d..000000000 --- a/src/app/ui/_layout.scss +++ /dev/null @@ -1,56 +0,0 @@ -@import 'mixins'; - -$app-layout--header-height: 65px; -$app-layout--side-width: 320px; -$app-inner-layout--header-height: 48px; -$app-inner-layout--footer-height: 48px; -$alfresco-divider-color: rgba($alfresco-black, .07); -$alfresco-gray-background: #fafafa; - -.layout { - @include flex-column; -} - -.inner-layout { - @include flex-column; - - &__header { - display: flex; - align-items: center; - flex: 0 0 $app-layout--header-height; - flex-basis: $app-inner-layout--header-height; - background: $alfresco-gray-background; - border-bottom: 1px solid $alfresco-divider-color; - padding: 0 24px; - } - - &__content { - @include flex-row; - } - - &__content--hide { - display: none !important; - } - - &__panel { - @include flex-column; - border-right: 1px solid rgba(0, 0, 0, 0.07); - } - - &__side-panel { - display: block; - height: 100%; - overflow-y: scroll; - max-width: 350px; - width: 350px; - } -} - -.content--scroll { - overflow: auto !important; -} - -app-generic-error { - height: 100%; - width: 100%; -} diff --git a/src/app/ui/_variables.scss b/src/app/ui/_variables.scss deleted file mode 100644 index 02fdf15ec..000000000 --- a/src/app/ui/_variables.scss +++ /dev/null @@ -1,6 +0,0 @@ -// Grayscale -$alfresco-white: #fff; -$alfresco-black: #000; - -// Dark -$alfresco-secondary-text-color: rgba($alfresco-black, .54); diff --git a/src/app/ui/application.scss b/src/app/ui/application.scss index e04d525ab..70891f13f 100644 --- a/src/app/ui/application.scss +++ b/src/app/ui/application.scss @@ -1,5 +1,4 @@ @import 'mixins'; -@import 'variables'; @import 'theme'; $foreground: map-get($theme, foreground); @@ -24,5 +23,3 @@ app-search, ng-component { @include flex-column; } - -@import 'layout'; diff --git a/src/app/ui/custom-theme.scss b/src/app/ui/custom-theme.scss index 1f9535842..f99eea249 100644 --- a/src/app/ui/custom-theme.scss +++ b/src/app/ui/custom-theme.scss @@ -3,7 +3,13 @@ @import '../components/sidenav/sidenav.component.theme'; @import '../components/about/about.component.theme'; +@import '../components/generic-error/generic-error.component.theme'; +@import '../components/search-input/search-input.component.theme'; +@import '../components/settings/settings.component.theme'; +@import '../components/current-user/current-user.component.theme'; +@import '../components/header/header.component.theme'; @import '../dialogs/node-versions/node-versions.dialog.theme'; + @import './overrides/adf-toolbar.theme'; @import './overrides/adf-search-filter.theme'; @import './overrides/adf-info-drawer.theme'; @@ -14,7 +20,9 @@ @import './overrides/adf-sidenav-layout.theme'; @import './overrides/adf-document-list.theme'; @import './overrides/adf-upload-drag-area.theme'; +@import './overrides/adf-search-sorting-picker.theme'; +@import 'layout'; @import 'snackbar'; $grey-scale: ( @@ -58,18 +66,25 @@ $custom-theme-warn: mat-palette($alfresco-warn); $custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent); @mixin custom-theme($theme) { - @include adf-toolbar-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 adf-toolbar-theme($theme); + @include adf-search-filter-theme($theme); + @include adf-info-drawer-theme($theme); + @include adf-upload-button-theme($theme); + @include adf-sidebar-action-menu-theme($theme); + @include adf-pagination-theme($theme); + @include adf-sidenav-layout-theme($theme); + @include adf-document-list-theme($theme); + @include adf-upload-drag-area-theme($theme); + @include adf-search-sorting-picker-theme($theme); - @include aca-node-versions-dialog-theme($custom-theme); - @include snackbar-theme($custom-theme); - @include sidenav-component-theme($custom-theme); - @include aca-about-component-theme($custom-theme); + @include aca-layout-theme($theme); + @include aca-header-theme($theme); + @include aca-search-input-theme($theme); + @include aca-generic-error-theme($theme); + @include aca-node-versions-dialog-theme($theme); + @include aca-settings-theme($theme); + @include snackbar-theme($theme); + @include sidenav-component-theme($theme); + @include aca-about-component-theme($theme); + @include aca-current-user-theme($theme); } diff --git a/src/app/ui/layout.scss b/src/app/ui/layout.scss new file mode 100644 index 000000000..bb38d0e07 --- /dev/null +++ b/src/app/ui/layout.scss @@ -0,0 +1,55 @@ +@import 'mixins'; + +@mixin aca-layout-theme($theme) { + $foreground: map-get($theme, foreground); + + $app-layout--header-height: 65px; + $app-layout--side-width: 320px; + $app-inner-layout--header-height: 48px; + $app-inner-layout--footer-height: 48px; + $alfresco-divider-color: mat-color($foreground, text, 0.07); + $alfresco-gray-background: #fafafa; + + .layout { + @include flex-column; + } + + .inner-layout { + @include flex-column; + + &__header { + display: flex; + align-items: center; + flex: 0 0 $app-layout--header-height; + flex-basis: $app-inner-layout--header-height; + background: $alfresco-gray-background; + border-bottom: 1px solid $alfresco-divider-color; + padding: 0 24px; + } + + &__content { + @include flex-row; + } + + &__content--hide { + display: none !important; + } + + &__panel { + @include flex-column; + border-right: 1px solid mat-color($foreground, text, 0.07); + } + + &__side-panel { + display: block; + height: 100%; + overflow-y: scroll; + max-width: 350px; + width: 350px; + } + } + + .content--scroll { + overflow: auto !important; + } +} diff --git a/src/app/ui/overrides/adf-search-sorting-picker.theme.scss b/src/app/ui/overrides/adf-search-sorting-picker.theme.scss new file mode 100644 index 000000000..f83b1b64e --- /dev/null +++ b/src/app/ui/overrides/adf-search-sorting-picker.theme.scss @@ -0,0 +1,9 @@ +@mixin adf-search-sorting-picker-theme($theme) { + $foreground: map-get($theme, foreground); + + .adf-search-sorting-picker { + .mat-icon-button { + color: mat-color($foreground, text, 0.54); + } + } +} diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index cec609fb1..c7b97ea31 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -152,6 +152,7 @@ }, "MESSAGES": { "ERRORS":{ + "MISSING_CONTENT": "This file / folder no longer exists or you don't have permission to view it.", "GENERIC": "The action was unsuccessful. Try again or contact your IT Team.", "CONFLICT": "This name is already in use, try a different name.", "NODE_MOVE": "Move unsuccessful, a file with the same name already exists.", diff --git a/tslint.json b/tslint.json index b43b9774e..12d8eaf91 100644 --- a/tslint.json +++ b/tslint.json @@ -127,7 +127,7 @@ ], "use-input-property-decorator": true, "use-output-property-decorator": true, - "use-host-property-decorator": true, + "use-host-property-decorator": false, "no-input-rename": true, "no-output-rename": true, "use-life-cycle-interface": true,