From 9f127c0530071ffbfe8c02ec5b336da9188ce83b Mon Sep 17 00:00:00 2001 From: Suzana Dirla Date: Fri, 5 Apr 2019 14:38:08 +0300 Subject: [PATCH] [ACA-2328] style cleanup to prepare for move css overrides to ADF (#1055) * [ACA-2139] remove style override - was added on ADF component since 3.0.0 * [ACA-2149] prepare for moving adf-upload-dialog style to ADF - separate new styling from overrides * [ACA-2148] just delete without moving to ADF - since we no longer use the adf-upload-button anywhere in ACA * [ACA-2150] refactor adf-upload-drag-area code * [ACA-2150] more refactor adf-upload-drag-area scss * [ACA-2150] change variable naming on adf-upload-drag-area scss * [ACA-2141] fix adf-info-drawer height - and mark code that could be removed in the future - without moving to ADF * [ACA-2147] prepare adf-toolbar code to be moved to ADF * [ACA-2141] remove not needed styles - already set inside the adf-version-manager styling * [ACA-2146] prepare adf-sidenav-layout code to be moved to ADF * [ACA-2144] remove no more needed styles for facet-buttons - styles for adf-facet-buttons are applied in ADF 3.1.0 * [ACA-2150] fix reset 'parent' color on adf-upload-drag-area * [ACA-2150] refactor adf-upload-drag-area code - to easier to move to ADF * [ACA-2141] better fix for adf-info-drawer height * [ACA-2147] rename css class to prepare adf-toolbar code to be moved to ADF --- .../favorite-libraries.component.html | 2 +- .../favorites/favorites.component.html | 2 +- src/app/components/files/files.component.html | 2 +- .../libraries/libraries.component.html | 2 +- .../recent-files/recent-files.component.html | 2 +- .../search-libraries-results.component.html | 2 +- .../search-results.component.html | 2 +- .../shared-files/shared-files.component.html | 2 +- .../toolbar-menu-item.component.ts | 7 ++ .../trashcan/trashcan.component.html | 2 +- .../file-uploading-list-row.component.scss | 11 +++ .../file-uploading-list-row.component.ts | 6 +- src/app/ui/custom-theme.scss | 4 - .../adf-content-node-selector.theme.scss | 9 -- .../ui/overrides/adf-info-drawer.theme.scss | 35 ++----- .../ui/overrides/adf-search-filter.theme.scss | 12 --- .../overrides/adf-sidenav-layout.theme.scss | 1 + src/app/ui/overrides/adf-toolbar.theme.scss | 13 ++- .../ui/overrides/adf-upload-button.theme.scss | 50 ---------- .../ui/overrides/adf-upload-dialog.theme.scss | 12 --- .../overrides/adf-upload-drag-area.theme.scss | 97 ++++++++++--------- 21 files changed, 98 insertions(+), 177 deletions(-) create mode 100644 src/app/components/upload-dialog/file-uploading-list-row.component.scss delete mode 100644 src/app/ui/overrides/adf-content-node-selector.theme.scss delete mode 100644 src/app/ui/overrides/adf-upload-button.theme.scss diff --git a/src/app/components/favorite-libraries/favorite-libraries.component.html b/src/app/components/favorite-libraries/favorite-libraries.component.html index c8efa09f2..dc5a8606e 100644 --- a/src/app/components/favorite-libraries/favorite-libraries.component.html +++ b/src/app/components/favorite-libraries/favorite-libraries.component.html @@ -3,7 +3,7 @@ - + diff --git a/src/app/components/favorites/favorites.component.html b/src/app/components/favorites/favorites.component.html index e74033407..264653ba6 100644 --- a/src/app/components/favorites/favorites.component.html +++ b/src/app/components/favorites/favorites.component.html @@ -2,7 +2,7 @@ - + diff --git a/src/app/components/files/files.component.html b/src/app/components/files/files.component.html index 604298839..d830a3bc7 100644 --- a/src/app/components/files/files.component.html +++ b/src/app/components/files/files.component.html @@ -8,7 +8,7 @@ > - + diff --git a/src/app/components/libraries/libraries.component.html b/src/app/components/libraries/libraries.component.html index 2103ece1c..03833f5f6 100644 --- a/src/app/components/libraries/libraries.component.html +++ b/src/app/components/libraries/libraries.component.html @@ -3,7 +3,7 @@ - + diff --git a/src/app/components/recent-files/recent-files.component.html b/src/app/components/recent-files/recent-files.component.html index 05a224afc..02e53c2cf 100644 --- a/src/app/components/recent-files/recent-files.component.html +++ b/src/app/components/recent-files/recent-files.component.html @@ -2,7 +2,7 @@ - + diff --git a/src/app/components/search/search-libraries-results/search-libraries-results.component.html b/src/app/components/search/search-libraries-results/search-libraries-results.component.html index 3c58d5ace..f00954e45 100644 --- a/src/app/components/search/search-libraries-results/search-libraries-results.component.html +++ b/src/app/components/search/search-libraries-results/search-libraries-results.component.html @@ -1,7 +1,7 @@ - + diff --git a/src/app/components/search/search-results/search-results.component.html b/src/app/components/search/search-results/search-results.component.html index 85f1ba426..824ec2513 100644 --- a/src/app/components/search/search-results/search-results.component.html +++ b/src/app/components/search/search-results/search-results.component.html @@ -1,7 +1,7 @@ - + diff --git a/src/app/components/shared-files/shared-files.component.html b/src/app/components/shared-files/shared-files.component.html index 707aa7b8c..2d748e83a 100644 --- a/src/app/components/shared-files/shared-files.component.html +++ b/src/app/components/shared-files/shared-files.component.html @@ -2,7 +2,7 @@ - + diff --git a/src/app/components/toolbar/toolbar-menu-item/toolbar-menu-item.component.ts b/src/app/components/toolbar/toolbar-menu-item/toolbar-menu-item.component.ts index 9bd05d27a..db2444aa0 100644 --- a/src/app/components/toolbar/toolbar-menu-item/toolbar-menu-item.component.ts +++ b/src/app/components/toolbar/toolbar-menu-item/toolbar-menu-item.component.ts @@ -30,6 +30,13 @@ import { AppExtensionService } from '../../../extensions/extension.service'; @Component({ selector: 'app-toolbar-menu-item', templateUrl: 'toolbar-menu-item.component.html', + styles: [ + ` + .app-toolbar-menu-item:last-child > .mat-divider-horizontal { + display: none; + } + ` + ], encapsulation: ViewEncapsulation.None, host: { class: 'app-toolbar-menu-item' } }) diff --git a/src/app/components/trashcan/trashcan.component.html b/src/app/components/trashcan/trashcan.component.html index 5a1b435f5..032009ebf 100644 --- a/src/app/components/trashcan/trashcan.component.html +++ b/src/app/components/trashcan/trashcan.component.html @@ -2,7 +2,7 @@ - + diff --git a/src/app/components/upload-dialog/file-uploading-list-row.component.scss b/src/app/components/upload-dialog/file-uploading-list-row.component.scss new file mode 100644 index 000000000..ee1a302c5 --- /dev/null +++ b/src/app/components/upload-dialog/file-uploading-list-row.component.scss @@ -0,0 +1,11 @@ +.adf-file-uploading-row__version { + flex: 0; + + .mat-chip { + padding: 2px 6px; + } + + .mat-chip.mat-chip-disabled { + opacity: 1; + } +} diff --git a/src/app/components/upload-dialog/file-uploading-list-row.component.ts b/src/app/components/upload-dialog/file-uploading-list-row.component.ts index 84396ebae..be1a1f3b7 100644 --- a/src/app/components/upload-dialog/file-uploading-list-row.component.ts +++ b/src/app/components/upload-dialog/file-uploading-list-row.component.ts @@ -15,11 +15,13 @@ * limitations under the License. */ -import { Component } from '@angular/core'; +import { Component, ViewEncapsulation } from '@angular/core'; import { FileUploadingListRowComponent } from '@alfresco/adf-content-services'; @Component({ selector: 'app-file-uploading-list-row', - templateUrl: './file-uploading-list-row.component.html' + templateUrl: './file-uploading-list-row.component.html', + styleUrls: ['./file-uploading-list-row.component.scss'], + encapsulation: ViewEncapsulation.None }) export class AppFileUploadingListRowComponent extends FileUploadingListRowComponent { isUploadVersion() { diff --git a/src/app/ui/custom-theme.scss b/src/app/ui/custom-theme.scss index 4a992210e..d44710f97 100644 --- a/src/app/ui/custom-theme.scss +++ b/src/app/ui/custom-theme.scss @@ -17,14 +17,12 @@ @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-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 './overrides/adf-search-sorting-picker.theme'; -@import './overrides/adf-content-node-selector.theme'; @import './overrides/adf-version-manager.theme'; @import 'snackbar'; @@ -73,13 +71,11 @@ $custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent); @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-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 adf-content-node-selector-theme($theme); @include adf-version-manager-theme($theme); @include layout-theme($theme); diff --git a/src/app/ui/overrides/adf-content-node-selector.theme.scss b/src/app/ui/overrides/adf-content-node-selector.theme.scss deleted file mode 100644 index 815aa9196..000000000 --- a/src/app/ui/overrides/adf-content-node-selector.theme.scss +++ /dev/null @@ -1,9 +0,0 @@ -@mixin adf-content-node-selector-theme($theme) { - adf-content-node-selector { - .adf-content-node-selector-content-breadcrumb { - .adf-current-folder { - font-weight: 600; - } - } - } -} diff --git a/src/app/ui/overrides/adf-info-drawer.theme.scss b/src/app/ui/overrides/adf-info-drawer.theme.scss index a78d24606..034300640 100644 --- a/src/app/ui/overrides/adf-info-drawer.theme.scss +++ b/src/app/ui/overrides/adf-info-drawer.theme.scss @@ -1,13 +1,20 @@ +@import 'mixins'; + @mixin adf-info-drawer-theme($theme) { $foreground: map-get($theme, foreground); $accent: map-get($theme, accent); $icon-size: 48px; .adf-info-drawer { + @include flex-column; + .adf-info-drawer-layout { - height: 100%; + @include flex-column; + overflow: auto; .mat-tab-label { + // cannot move this color style to ADF, but: + // check if this is still needed after ADF upgrades @angular/material version to be > 7.1.0 color: mat-color($accent); } @@ -31,31 +38,5 @@ } } } - - .adf-version-list-container { - .adf-version-list { - height: auto; - } - - .mat-list .mat-list-item { - &.mat-3-line { - display: flex; - align-items: center; - height: 100%; - min-height: 88px; - } - - .mat-list-item-content { - padding-top: 10px; - padding-bottom: 10px; - width: 100%; - } - - .mat-line.adf-version-list-item-comment { - overflow: visible; - white-space: pre-wrap; - } - } - } } } diff --git a/src/app/ui/overrides/adf-search-filter.theme.scss b/src/app/ui/overrides/adf-search-filter.theme.scss index e0aa8db42..0d0bf72aa 100644 --- a/src/app/ui/overrides/adf-search-filter.theme.scss +++ b/src/app/ui/overrides/adf-search-filter.theme.scss @@ -11,17 +11,5 @@ .mat-radio-label { color: mat-color($foreground, text, 0.54); } - - .facet-buttons { - text-align: right; - - .mat-button { - text-transform: uppercase; - } - - &--topSpace { - padding-top: 15px; - } - } } } diff --git a/src/app/ui/overrides/adf-sidenav-layout.theme.scss b/src/app/ui/overrides/adf-sidenav-layout.theme.scss index 1d42a8d68..2c4416cf7 100644 --- a/src/app/ui/overrides/adf-sidenav-layout.theme.scss +++ b/src/app/ui/overrides/adf-sidenav-layout.theme.scss @@ -25,5 +25,6 @@ .mat-drawer-content > div, .mat-drawer-content > div > div { @include flex-column; + overflow: auto; } } diff --git a/src/app/ui/overrides/adf-toolbar.theme.scss b/src/app/ui/overrides/adf-toolbar.theme.scss index b9b573faf..123ec3484 100644 --- a/src/app/ui/overrides/adf-toolbar.theme.scss +++ b/src/app/ui/overrides/adf-toolbar.theme.scss @@ -1,10 +1,9 @@ +$adf-toolbar-single-row-height: 48px; +$adf-toolbar-padding: 14px; + @mixin adf-toolbar-theme($theme) { $foreground: map-get($theme, foreground); - .app-toolbar-menu-item:last-child > .mat-divider-horizontal { - display: none; - } - .adf-viewer { .adf-toolbar { .mat-toolbar { @@ -17,11 +16,11 @@ @include angular-material-theme($theme); .mat-toolbar-single-row { - padding: 0 14px; - height: 48px; + padding: 0 $adf-toolbar-padding; + height: $adf-toolbar-single-row-height; } - &.inline { + &.adf-toolbar--inline { .mat-toolbar { background-color: inherit; border: none !important; diff --git a/src/app/ui/overrides/adf-upload-button.theme.scss b/src/app/ui/overrides/adf-upload-button.theme.scss deleted file mode 100644 index 060df90a8..000000000 --- a/src/app/ui/overrides/adf-upload-button.theme.scss +++ /dev/null @@ -1,50 +0,0 @@ -@mixin adf-upload-button-theme($theme) { - $foreground: map-get($theme, foreground); - $accent: map-get($theme, accent); - $primary: map-get($theme, primary); - - adf-upload-button { - .mat-raised-button.mat-primary { - width: 100%; - border-radius: 0; - text-align: left; - line-height: 48px; - box-shadow: none; - transform: none; - transition: unset; - background-color: transparent; - } - - .mat-raised-button.mat-primary:hover:not([disabled]) { - background-color: mat-color($foreground, text, 0.04); - } - - .mat-raised-button.mat-primary[disabled] { - background: none; - } - - .mat-raised-button.mat-primary[disabled] label { - color: mat-color($foreground, text, 0.38); - } - - .mat-raised-button:not([disabled]):active { - box-shadow: none; - } - - mat-icon { - color: mat-color($foreground, text, 0.54); - } - - label { - font-weight: normal; - text-align: left; - margin-left: 12px; - color: mat-color($primary); - } - - &:hover label { - color: mat-color($accent); - opacity: inherit; - } - } -} diff --git a/src/app/ui/overrides/adf-upload-dialog.theme.scss b/src/app/ui/overrides/adf-upload-dialog.theme.scss index 364f2f44c..7cdee1ebd 100644 --- a/src/app/ui/overrides/adf-upload-dialog.theme.scss +++ b/src/app/ui/overrides/adf-upload-dialog.theme.scss @@ -15,18 +15,6 @@ display: flex; justify-content: flex-end; } - - &__version { - flex: 0; - - .mat-chip { - padding: 2px 6px; - } - - .mat-chip.mat-chip-disabled { - opacity: 1; - } - } } .adf-file-uploading-row { diff --git a/src/app/ui/overrides/adf-upload-drag-area.theme.scss b/src/app/ui/overrides/adf-upload-drag-area.theme.scss index c1e90b092..8b666b07d 100644 --- a/src/app/ui/overrides/adf-upload-drag-area.theme.scss +++ b/src/app/ui/overrides/adf-upload-drag-area.theme.scss @@ -1,61 +1,35 @@ @import 'mixins'; -$alfresco-app-color--default: #00bcd4; +$adf-upload-dragging-color: unset !default; +$adf-upload-dragging-border: 1px solid #00bcd4 !default; +$adf-upload-dragging-background: #e0f7fa !default; +$adf-upload-dragging-level1-color: unset !default; +$adf-upload-dragging-level1-border: none !default; -@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; +@mixin file-draggable__input-focus($text-color, $border) { + color: $text-color; + border: $border !important; margin-left: 0 !important; } @mixin adf-upload-drag-area-theme($theme) { - $foreground: map-get($theme, foreground); - adf-upload-drag-area { @include flex-column; .adf-upload-border { @include flex-column; - vertical-align: unset; text-align: unset; - } - } - - adf-upload-drag-area:first-child { - & > div { - adf-upload-drag-area { - .adf-file-draggable__input-focus { - @include file-draggable__input-focus($theme); - } - } - } - - .adf-upload-border { - vertical-align: inherit !important; - text-align: inherit !important; + width: 100%; + box-sizing: border-box; } .adf-file-draggable__input-focus { - color: none !important; - border: none !important; - margin-left: 0 !important; + color: $adf-upload-dragging-color; + border: $adf-upload-dragging-border; - adf-upload-drag-area { - & > div { - @include file-draggable__input-focus($theme); - } - } - } - } - - adf-upload-drag-area { - .adf-file-draggable__input-focus { adf-document-list { - background: #e0f7fa; - + background: $adf-upload-dragging-background; adf-datatable > table { background: inherit; } @@ -63,20 +37,53 @@ $alfresco-app-color--default: #00bcd4; } .adf-upload__dragging { - background: #e0f7fa; - color: mat-color($foreground, text, 0.54); + background: $adf-upload-dragging-background; + color: $adf-upload-dragging-color; } .adf-upload__dragging td { - border-top: 1px solid $alfresco-app-color--default !important; - border-bottom: 1px solid $alfresco-app-color--default !important; + border-top: $adf-upload-dragging-border !important; + border-bottom: $adf-upload-dragging-border !important; &:first-child { - border-left: 1px solid $alfresco-app-color--default !important; + border-left: $adf-upload-dragging-border !important; } &:last-child { - border-right: 1px solid $alfresco-app-color--default !important; + border-right: $adf-upload-dragging-border !important; + } + } + + &:first-child { + & > div { + adf-upload-drag-area { + .adf-file-draggable__input-focus { + @include file-draggable__input-focus( + $adf-upload-dragging-color, + $adf-upload-dragging-border + ); + } + } + } + + .adf-upload-border { + vertical-align: inherit !important; + text-align: inherit !important; + } + + .adf-file-draggable__input-focus { + color: $adf-upload-dragging-level1-color !important; + border: $adf-upload-dragging-level1-border !important; + margin-left: 0 !important; + + adf-upload-drag-area { + & > div { + @include file-draggable__input-focus( + $adf-upload-dragging-color, + $adf-upload-dragging-border + ); + } + } } } }