diff --git a/demo-shell/src/app/components/app-layout/app-layout.component.scss b/demo-shell/src/app/components/app-layout/app-layout.component.scss index 49960db1e4..0dc4177ee7 100644 --- a/demo-shell/src/app/components/app-layout/app-layout.component.scss +++ b/demo-shell/src/app/components/app-layout/app-layout.component.scss @@ -1,69 +1,65 @@ -@mixin app-layout-theme($theme) { - $primary: map-get($theme, primary); - $minimumAppWidth: 320px; - @media screen and (max-width: 599px) { - app-search-bar { - width: 150px; - } - } - - @media screen and (max-width: 350px) { - app-search-bar { - width: 100px; - } - } - - adf-file-uploading-dialog { - z-index: 1100; - } - - .app-layout { - display: flex; - flex: 1; - min-width: $minimumAppWidth; - height: 100%; - - .app-sidenav-link--active { - color: mat-color($primary); - } - - .app-sidenav-link { - .mat-list-text { - font-size: 14px; - white-space: nowrap; - min-width: 120px; - padding: 0 10px; - } - } - - .mat-nav-list .mat-list-item.app-sidenav-link { - height: 40px; - } - - &-menu-spacer { - flex: 1 1 auto; - } - } - - @media screen and (max-width: 959px) { - .app-menu { - padding-top: 0; - } - } - - @media screen and (max-width: 599px) {} - - mat-sidenav-content > div { - display: flex; - height: 100%; - - > div { - flex: auto; - } - } - - [dir='rtl'] .app-sidenav-link__expand-button { - transform: rotateY(180deg); +@media screen and (max-width: 599px) { + app-search-bar { + width: 150px; } } + +@media screen and (max-width: 350px) { + app-search-bar { + width: 100px; + } +} + +adf-file-uploading-dialog { + z-index: 1100; +} + +.app-layout { + display: flex; + flex: 1; + min-width: 320px; + height: 100%; + + .app-sidenav-link--active { + color: var(--theme-primary-color); + } + + .app-sidenav-link { + .mat-list-text { + font-size: 14px; + white-space: nowrap; + min-width: 120px; + padding: 0 10px; + } + } + + .mat-nav-list .mat-list-item.app-sidenav-link { + height: 40px; + } + + &-menu-spacer { + flex: 1 1 auto; + } +} + +@media screen and (max-width: 959px) { + .app-menu { + padding-top: 0; + } +} + +@media screen and (max-width: 599px) {} + +mat-sidenav-content > div { + display: flex; + height: 100%; + + > div { + flex: auto; + } +} + +[dir='rtl'] .app-sidenav-link__expand-button { + transform: rotateY(180deg); +} diff --git a/demo-shell/src/app/components/app-layout/app-layout.component.ts b/demo-shell/src/app/components/app-layout/app-layout.component.ts index df190dbe10..394ea1dfd5 100644 --- a/demo-shell/src/app/components/app-layout/app-layout.component.ts +++ b/demo-shell/src/app/components/app-layout/app-layout.component.ts @@ -24,9 +24,8 @@ import { ThemePalette } from '@angular/material/core'; @Component({ templateUrl: './app-layout.component.html', - host: { - 'class': 'app-layout' - }, + styleUrls: ['./app-layout.component.scss'], + host: { 'class': 'app-layout' }, encapsulation: ViewEncapsulation.None }) export class AppLayoutComponent implements OnInit, OnDestroy { diff --git a/demo-shell/src/app/components/files/files.component.scss b/demo-shell/src/app/components/files/files.component.scss index 54ddc4778e..4c0b2c3345 100644 --- a/demo-shell/src/app/components/files/files.component.scss +++ b/demo-shell/src/app/components/files/files.component.scss @@ -1,95 +1,93 @@ -@mixin app-file-component-theme($theme) { +.app-container { + margin: 10px !important; +} + +@media screen and (max-width: 599px) { .app-container { - margin: 10px !important; + margin: 0; } - @media screen and (max-width: 599px) { - .app-container { - margin: 0; - } - - .app-show-versions-button.mat-icon-button { - display: none; - } - } - - .app-error-message { - text-align: left; - } - - .app-error-message--text { - color: #d50000; - } - - .app-document-list-container { - min-height: 400px; - - .app-datatable-list { - min-height: 400px; - } - } - - .adf-datatable-card .app-lock-button { - top: -10px; - position: absolute; - } - - .app-site-container-style { - margin-top: 10px; - margin-bottom: 10px; - width: 100%; - min-width: 200px; - } - - .app-content-service-settings { - padding: 16px; - } - - .app-manage-versions-sidebar { - width: 360px !important; - - & .app-info-drawer-layout-header { - display: none !important; - } - } - - .app-no-result__empty_doc_lib { - width: 565px; - height: 161px; - object-fit: contain; - margin-top: 17px; - } - - .app-empty_template { - text-align: center; - margin-top: 20px; - margin-bottom: 20px; - } - - .app-no-result-message { - height: 32px; - opacity: 0.26; - font-size: 24px; - line-height: 1.33; - letter-spacing: -1px; - } - - .app-container-recent { - mat-icon { - margin-left: 20px; - } - - .app-empty-list__block { - height: 100%; - padding: 0; - margin: 0; - display: flex; - align-items: center; - justify-content: center; - } - } - - .adf-preselect-nodes-input { - width: 100%; + .app-show-versions-button.mat-icon-button { + display: none; } } + +.app-error-message { + text-align: left; +} + +.app-error-message--text { + color: #d50000; +} + +.app-document-list-container { + min-height: 400px; + + .app-datatable-list { + min-height: 400px; + } +} + +.adf-datatable-card .app-lock-button { + top: -10px; + position: absolute; +} + +.app-site-container-style { + margin-top: 10px; + margin-bottom: 10px; + width: 100%; + min-width: 200px; +} + +.app-content-service-settings { + padding: 16px; +} + +.app-manage-versions-sidebar { + width: 360px !important; + + & .app-info-drawer-layout-header { + display: none !important; + } +} + +.app-no-result__empty_doc_lib { + width: 565px; + height: 161px; + object-fit: contain; + margin-top: 17px; +} + +.app-empty_template { + text-align: center; + margin-top: 20px; + margin-bottom: 20px; +} + +.app-no-result-message { + height: 32px; + opacity: 0.26; + font-size: 24px; + line-height: 1.33; + letter-spacing: -1px; +} + +.app-container-recent { + mat-icon { + margin-left: 20px; + } + + .app-empty-list__block { + height: 100%; + padding: 0; + margin: 0; + display: flex; + align-items: center; + justify-content: center; + } +} + +.adf-preselect-nodes-input { + width: 100%; +} diff --git a/demo-shell/src/app/components/files/files.component.ts b/demo-shell/src/app/components/files/files.component.ts index 0a07e1fd7b..ea82522072 100644 --- a/demo-shell/src/app/components/files/files.component.ts +++ b/demo-shell/src/app/components/files/files.component.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { Component, Input, OnInit, OnChanges, OnDestroy, Optional, EventEmitter, ViewChild, SimpleChanges, Output } from '@angular/core'; +import { Component, Input, OnInit, OnChanges, OnDestroy, Optional, EventEmitter, ViewChild, SimpleChanges, Output, ViewEncapsulation } from '@angular/core'; import { Location } from '@angular/common'; import { MatDialog } from '@angular/material/dialog'; import { ActivatedRoute, Params, Router } from '@angular/router'; @@ -55,6 +55,8 @@ const DEFAULT_FOLDER_TO_SHOW = '-my-'; @Component({ selector: 'app-files-component', templateUrl: './files.component.html', + styleUrls: ['./files.component.scss'], + encapsulation: ViewEncapsulation.None, providers: [ { provide: FormRenderingService, useClass: ProcessFormRenderingService } ] diff --git a/demo-shell/src/app/components/home/home.component.html b/demo-shell/src/app/components/home/home.component.html index 7f38adcaf1..9c6f037f8c 100644 --- a/demo-shell/src/app/components/home/home.component.html +++ b/demo-shell/src/app/components/home/home.component.html @@ -6,7 +6,7 @@
- {{ 'APP.HOME.DOCUMENTATION' | translate}} + {{ 'APP.HOME.DOCUMENTATION' | translate}}
diff --git a/demo-shell/src/app/components/login/login.component.scss b/demo-shell/src/app/components/login/login.component.scss index f0cd6b87c8..fdf2695ec0 100644 --- a/demo-shell/src/app/components/login/login.component.scss +++ b/demo-shell/src/app/components/login/login.component.scss @@ -1,51 +1,49 @@ -@mixin app-login-component-theme($theme) { - .app-setting-button.mat-fab.mat-accent { - position: absolute; - right: 10px; - top: 10px; - z-index: 1; - } +.app-setting-button.mat-fab.mat-accent { + position: absolute; + right: 10px; + top: 10px; + z-index: 1; +} - .app-settings { - border-radius: 8px; - position: absolute; - background-color: papayawhip; - color: cadetblue; - left: 10px; - top: 10px; - z-index: 1; - } +.app-settings { + border-radius: 8px; + position: absolute; + background-color: papayawhip; + color: cadetblue; + left: 10px; + top: 10px; + z-index: 1; +} - .app-toggle { - width: auto; - margin: 5px; - padding: 5px; - } +.app-toggle { + width: auto; + margin: 5px; + padding: 5px; +} - .app-mobile-settings, .app-mobile-setting-button { +.app-mobile-settings, .app-mobile-setting-button { + display: none; +} + +@media screen and (max-width: 959px) { + .app-settings, .app-setting-button.mat-fab.mat-accent { display: none; } - @media screen and (max-width: 959px) { - .app-settings, .app-setting-button.mat-fab.mat-accent { - display: none; - } - - .app-mobile-settings, .app-mobile-setting-button { - display: block; - } - - .app-mobile-setting-button { - width: 100%; - } - - .app-mobile-settings { - padding-bottom: 20px; - border-bottom: 1px solid rgba(0, 0, 0, 0.1); - } + .app-mobile-settings, .app-mobile-setting-button { + display: block; } - .app-settings ::ng-deep .mat-slide-toggle-thumb-container { - cursor: pointer; + .app-mobile-setting-button { + width: 100%; + } + + .app-mobile-settings { + padding-bottom: 20px; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); } } + +.app-settings ::ng-deep .mat-slide-toggle-thumb-container { + cursor: pointer; +} diff --git a/demo-shell/src/app/components/login/login.component.ts b/demo-shell/src/app/components/login/login.component.ts index 0ed5776767..4cda6d3ec7 100644 --- a/demo-shell/src/app/components/login/login.component.ts +++ b/demo-shell/src/app/components/login/login.component.ts @@ -15,13 +15,15 @@ * limitations under the License. */ -import { Component } from '@angular/core'; +import { Component, ViewEncapsulation } from '@angular/core'; import { Router } from '@angular/router'; import { LogService } from '@alfresco/adf-core'; @Component({ selector: 'app-login', - templateUrl: './login.component.html' + templateUrl: './login.component.html', + styleUrls: ['./login.component.scss'], + encapsulation: ViewEncapsulation.None }) export class LoginComponent { diff --git a/demo-shell/src/app/components/logout/logout.component.html b/demo-shell/src/app/components/logout/logout.component.html index bdcaefd5c8..59a8092649 100644 --- a/demo-shell/src/app/components/logout/logout.component.html +++ b/demo-shell/src/app/components/logout/logout.component.html @@ -6,11 +6,11 @@
- {{ 'APP.LOGOUT.LOGIN' | translate}}
- {{ 'APP.LOGOUT.HOME' | translate}}
diff --git a/demo-shell/src/app/components/notifications/notifications.component.ts b/demo-shell/src/app/components/notifications/notifications.component.ts index 956593ac8b..8bd6a5c73f 100644 --- a/demo-shell/src/app/components/notifications/notifications.component.ts +++ b/demo-shell/src/app/components/notifications/notifications.component.ts @@ -132,7 +132,7 @@ export class NotificationsComponent implements OnInit, OnDestroy { } quickInfo() { - this.notificationService.showInfo(this.message); + this.notificationService.showInfo(this.message, 'Agree'); } quickWarning() { diff --git a/demo-shell/src/custom-style-dev.scss b/demo-shell/src/custom-style-dev.scss index 50c9d67ac7..08c7331239 100644 --- a/demo-shell/src/custom-style-dev.scss +++ b/demo-shell/src/custom-style-dev.scss @@ -1,16 +1,7 @@ -@import './app/components/app-layout/app-layout.component.scss'; -@import './app/components/files/files.component.scss'; -@import './app/components/login/login.component.scss'; - - -@import '../../lib/content-services/src/lib/styles/index'; -@import '../../lib/process-services/src/lib/styles/index'; -@import '../../lib/insights/src/lib/styles/index'; -@import '../../lib/core/styles/index'; -@import '../../lib/process-services-cloud/src/lib/styles/index'; - @import '~@angular/material/theming'; +@import '../../lib/core/styles/index'; + @include mat-core($alfresco-typography); $primary: mat-palette($alfresco-accent-orange); @@ -19,15 +10,6 @@ $warn: mat-palette($alfresco-warn); $theme: mat-light-theme($primary, $accent, $warn); @include angular-material-theme($theme); -@include app-layout-theme($theme); -@include app-file-component-theme($theme); -@include app-login-component-theme($theme); - - -@include adf-content-services-theme($theme); -@include adf-process-services-theme($theme); -@include adf-process-services-cloud-theme($theme); -@include adf-insights-theme($theme); @include adf-core-theme($theme); body, html { diff --git a/demo-shell/src/custom-style.scss b/demo-shell/src/custom-style.scss index f915567db1..7dc8b8d85b 100644 --- a/demo-shell/src/custom-style.scss +++ b/demo-shell/src/custom-style.scss @@ -1,15 +1,7 @@ -@import './app/components/app-layout/app-layout.component.scss'; -@import './app/components/files/files.component.scss'; -@import './app/components/login/login.component.scss'; - -@import '~@alfresco/adf-content-services/theming'; -@import '~@alfresco/adf-process-services/theming'; -@import '~@alfresco/adf-process-services-cloud/theming'; -@import '~@alfresco/adf-insights/theming'; -@import '~@alfresco/adf-core/theming'; - @import '~@angular/material/theming'; +@import '~@alfresco/adf-core/theming'; + @include mat-core($alfresco-typography); $primary: mat-palette($alfresco-accent-orange); @@ -18,14 +10,6 @@ $warn: mat-palette($alfresco-warn); $theme: mat-light-theme($primary, $accent, $warn); @include angular-material-theme($theme); -@include app-layout-theme($theme); -@include app-file-component-theme($theme); -@include app-login-component-theme($theme); - -@include adf-content-services-theme($theme); -@include adf-process-services-theme($theme); -@include adf-process-services-cloud-theme($theme); -@include adf-insights-theme($theme); @include adf-core-theme($theme); body, html { diff --git a/docs/user-guide/theming.md b/docs/user-guide/theming.md index 380e984d23..6e1201d3c1 100644 --- a/docs/user-guide/theming.md +++ b/docs/user-guide/theming.md @@ -70,9 +70,6 @@ When you want more customization than a pre-built theme offers, you can create y /* * Include only packages that you are using (and core by default) */ -@import '~@alfresco/adf-content-services/theming'; -@import '~@alfresco/adf-process-services/theming'; -@import '~@alfresco/adf-insights/theming'; @import '~@alfresco/adf-core/theming'; @import '~@angular/material/theming'; @@ -86,9 +83,6 @@ $theme: mat-light-theme($primary, $accent, $warn); @include angular-material-theme($theme); -@include adf-content-services-theme($theme); -@include adf-process-services-theme($theme); -@include adf-insights-theme($theme); @include adf-core-theme($theme); ``` @@ -134,7 +128,6 @@ Any component with the `add-dark-theme` class will use the dark theme, while ot .adf-hide-small // Display none vieweport <960px .adf-hide-xsmall // Display none vieweport <600px -.adf-primary-color // Primary color .accent-color // Accent color .warn-color // Warn color .primary-contrast-text-color // Default contrast color for primary color @@ -142,4 +135,4 @@ Any component with the `add-dark-theme` class will use the dark theme, while ot .background-color // Dialog background color .primary-background-color // Primary background color .accent-background-color // Default background color for accent -``` \ No newline at end of file +``` diff --git a/lib/content-services/src/lib/aspect-list/aspect-list.component.scss b/lib/content-services/src/lib/aspect-list/aspect-list.component.scss new file mode 100644 index 0000000000..3ed8f2bc76 --- /dev/null +++ b/lib/content-services/src/lib/aspect-list/aspect-list.component.scss @@ -0,0 +1,69 @@ +.adf { + + &-aspect-list-spinner { + display: flex; + align-items: center; + justify-content: center; + min-height: 400px; + } + + &-aspect-list-container { + + padding-top: 3px; + height: 400px; + overflow: auto; + border: 1px solid var(--theme-border-color); + + .adf-aspect-list-check-button { + margin-right: 5px; + align-items: center; + display: flex; + } + + .adf-aspect-list-element-title { + display: flex; + align-items: center; + } + + .adf-accordion-aspect-list { + + .mat-expansion-panel-spacing { + margin: 0; + } + + .mat-expansion-panel-header { + font-size: smaller; + } + + .mat-expansion-panel-header-title { + flex: 1 1 0; + } + + .mat-expansion-panel-header-description { + justify-content: flex-start; + align-items: center; + flex: 1 1 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } + } + + &-aspect-property-table { + width: 100%; + + .mat-column-name { + width: 15%; + } + + .mat-column-description { + width: 65%; + } + + .mat-column-type { + width: 20%; + padding-left: 10px; + } + } +} diff --git a/lib/content-services/src/lib/aspect-list/aspect-list.component.ts b/lib/content-services/src/lib/aspect-list/aspect-list.component.ts index 71cd3b06f3..50d7dfb02b 100644 --- a/lib/content-services/src/lib/aspect-list/aspect-list.component.ts +++ b/lib/content-services/src/lib/aspect-list/aspect-list.component.ts @@ -25,6 +25,7 @@ import { AspectEntry } from '@alfresco/js-api'; @Component({ selector: 'adf-aspect-list', templateUrl: './aspect-list.component.html', + styleUrls: ['./aspect-list.component.scss'], encapsulation: ViewEncapsulation.None }) diff --git a/lib/content-services/src/lib/aspect-list/aspect-list.theme.scss b/lib/content-services/src/lib/aspect-list/aspect-list.theme.scss deleted file mode 100644 index dffa218ab5..0000000000 --- a/lib/content-services/src/lib/aspect-list/aspect-list.theme.scss +++ /dev/null @@ -1,73 +0,0 @@ -@mixin adf-aspect-list-theme($theme) { - $foreground: map-get($theme, foreground); - - .adf { - - &-aspect-list-spinner { - display: flex; - align-items: center; - justify-content: center; - min-height: 400px; - } - - &-aspect-list-container { - - padding-top: 3px; - height: 400px; - overflow: auto; - border: 1px solid mat-color($foreground, base, 0.07); - - .adf-aspect-list-check-button { - margin-right: 5px; - align-items: center; - display: flex; - } - - .adf-aspect-list-element-title { - display: flex; - align-items: center; - } - - .adf-accordion-aspect-list { - - .mat-expansion-panel-spacing { - margin: 0; - } - - .mat-expansion-panel-header { - font-size: smaller; - } - - .mat-expansion-panel-header-title { - flex: 1 1 0; - } - - .mat-expansion-panel-header-description { - justify-content: flex-start; - align-items: center; - flex: 1 1 0; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - } - } - - &-aspect-property-table { - width: 100%; - - .mat-column-name { - width: 15%; - } - - .mat-column-description { - width: 65%; - } - - .mat-column-type { - width: 20%; - padding-left: 10px; - } - } - } -} diff --git a/lib/content-services/src/lib/breadcrumb/breadcrumb.component.scss b/lib/content-services/src/lib/breadcrumb/breadcrumb.component.scss new file mode 100644 index 0000000000..cfb11462e3 --- /dev/null +++ b/lib/content-services/src/lib/breadcrumb/breadcrumb.component.scss @@ -0,0 +1,140 @@ +.adf-breadcrumb { + display: flex; + flex: 1; + line-height: 24px; + font-size: 14px; + font-weight: 600; + letter-spacing: -0.2px; + color: var(--theme-text-color); + overflow: hidden; + + &-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: default; + display: flex; + overflow: hidden; + } + + &-dropdown { + &-path { + width: 0; + height: 0; + overflow: hidden; + margin-top: 35px; + + &.mat-select { + width: 0; + } + } + + &-trigger { + cursor: pointer; + padding: 0; + border: none; + background: transparent; + width: 30px; + margin-top: 2px; + margin-right: 5px; + + &:focus { + color: var(--theme-primary-color); + outline: none; + } + + &-icon { + position: relative; + } + + &-arrow { + font-size: 17px; + position: absolute; + left: 4px; + top: 4px; + color: white; + z-index: 2; + } + + &-arrow.adf-isRoot { + visibility: hidden; + } + + &-arrow.adf-focus { + border: none; + } + } + + &-trigger.adf-isRoot { + cursor: not-allowed; + } + } + + &-item { + padding-right: 2px; + overflow: hidden; + display: flex; + line-height: 33px; + font-size: 14px; + font-weight: 600; + letter-spacing: -0.2px; + text-align: left; + color: var(--theme-text-color); + flex: 0 1 auto; + min-width: 35px; + margin-top: auto; + text-overflow: ellipsis; + + &:hover, + &.adf-active { + color: var(--adf-breadcrumb-item-active-hover-color); + } + + &.adf-active { + color: var(--adf-breadcrumb-item-active-color); + } + + &-chevron { + opacity: 1; + margin-top: 9px; + font-size: 17px; + } + + &.mat-primary { + color: var(--theme-primary-color); + } + + &.mat-accent { + color: var(--theme-accent-color); + } + + &.mat-warn { + color: var(--theme-warn-color); + } + + &-anchor { + box-sizing: border-box; + color: inherit; + text-decoration: none; + display: inline-block; + width: 100%; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + flex: 0 1 auto; + padding: 0 2px; + text-align: center; + + &:focus { + outline: 1px solid var(--theme-accent-color-a200); + outline-offset: -1px; + } + } + + &-current { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + } +} diff --git a/lib/content-services/src/lib/breadcrumb/breadcrumb.component.ts b/lib/content-services/src/lib/breadcrumb/breadcrumb.component.ts index 21cbbd20ee..8151825b68 100644 --- a/lib/content-services/src/lib/breadcrumb/breadcrumb.component.ts +++ b/lib/content-services/src/lib/breadcrumb/breadcrumb.component.ts @@ -35,10 +35,9 @@ import { takeUntil } from 'rxjs/operators'; @Component({ selector: 'adf-breadcrumb', templateUrl: './breadcrumb.component.html', + styleUrls: ['./breadcrumb.component.scss'], encapsulation: ViewEncapsulation.None, - host: { - 'class': 'adf-breadcrumb' - } + host: { 'class': 'adf-breadcrumb' } }) export class BreadcrumbComponent implements OnInit, OnChanges, OnDestroy { diff --git a/lib/content-services/src/lib/breadcrumb/breadcrumb.theme.scss b/lib/content-services/src/lib/breadcrumb/breadcrumb.theme.scss deleted file mode 100644 index de453c004b..0000000000 --- a/lib/content-services/src/lib/breadcrumb/breadcrumb.theme.scss +++ /dev/null @@ -1,150 +0,0 @@ -@mixin adf-breadcrumb-theme($theme) { - $primary: map-get($theme, primary); - $accent: map-get($theme, accent); - $warn: map-get($theme, warn); - $foreground: map-get($theme, foreground); - - $breadcrumb-chevron-spacer: 2px; - $breadcrumb-outline: 1px solid mat-color($accent, A200) !default; - - .adf-breadcrumb { - display: flex; - flex: 1; - line-height: 24px; - font-size: 14px; - font-weight: 600; - letter-spacing: -0.2px; - color: mat-color($foreground, text, 0.54); - overflow: hidden; - - &-container { - margin: 0; - padding: 0; - list-style-type: none; - cursor: default; - display: flex; - overflow: hidden; - } - - &-dropdown { - &-path { - width: 0; - height: 0; - overflow: hidden; - margin-top: 35px; - - &.mat-select { - width: 0; - } - } - - &-trigger { - cursor: pointer; - padding: 0; - border: none; - background: transparent; - width: 30px; - margin-top: 2px; - margin-right: 5px; - - &:focus { - color: mat-color($primary); - outline: none; - } - - &-icon { - position: relative; - } - - &-arrow { - font-size: 17px; - position: absolute; - left: 4px; - top: 4px; - color: white; - z-index: 2; - } - - &-arrow.adf-isRoot { - visibility: hidden; - } - - &-arrow.adf-focus { - border: none; - } - } - - &-trigger.adf-isRoot { - cursor: not-allowed; - } - } - - &-item { - padding-right: $breadcrumb-chevron-spacer; - overflow: hidden; - display: flex; - line-height: 33px; - font-size: 14px; - font-weight: 600; - letter-spacing: -0.2px; - text-align: left; - color: mat-color($foreground, text, 0.54); - flex: 0 1 auto; - min-width: 35px; - margin-top: auto; - text-overflow: ellipsis; - - &:hover, - &.adf-active { - color: mat-color($foreground, text, 0.64); - } - - &.adf-active { - color: mat-color($foreground, text, 0.87); - } - - &-chevron { - opacity: 1; - margin-top: 9px; - font-size: 17px; - } - - &.mat-primary { - color: mat-color($primary); - } - - &.mat-accent { - color: mat-color($accent); - } - - &.mat-warn { - color: mat-color($warn); - } - - &-anchor { - box-sizing: border-box; - color: inherit; - text-decoration: none; - display: inline-block; - width: 100%; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - flex: 0 1 auto; - padding: 0 2px; - text-align: center; - - &:focus { - outline: $breadcrumb-outline; - outline-offset: -1px; - } - } - - &-current { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } - } - } -} diff --git a/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.scss b/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.scss new file mode 100644 index 0000000000..1811502ea9 --- /dev/null +++ b/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.scss @@ -0,0 +1,100 @@ +$dropdownHorizontalOffset: 30px; + +.adf { + &-dropdown-breadcrumb { + display: flex; + flex: 1; + line-height: 24px; + font-size: 14px; + font-weight: 600; + letter-spacing: -0.2px; + color: var(--theme-text-color); + overflow: hidden; + margin-top: 10px; + + .mat-icon { + height: 35px; + } + + &-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: default; + display: flex; + overflow: hidden; + } + } + + &-dropdown-breadcrumb-trigger { + cursor: pointer; + padding: 0; + border: none; + background: transparent; + width: 25px; + + &:focus { + color: var(--theme-primary-color); + outline: none; + } + } + + &-dropdown-breadcrumb-trigger.adf-isRoot { + cursor: not-allowed; + } + + &-dropdown-breadcrumb-path { + width: 0; + height: 0; + overflow: hidden; + margin-top: 35px; + + &.mat-select { + width: 0; + } + } + + &-current-folder { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + width: 75%; + color: var(--theme-foreground-text-color); + } + + &-dropdown-breadcrumb-path-option.mat-option { + height: 28px; + line-height: 28px; + padding: 0 12px; + font-size: 13px; + } + + &-dropdown-breadcrumb-path-option.mat-option:first-child { + padding-top: 4px; + } + + &-dropdown-breadcrumb-path-option.mat-option:last-child { + padding-bottom: 4px; + } +} + +[dir='ltr'] .adf { + &-dropdown-breadcrumb-path { + margin-left: -$dropdownHorizontalOffset; + } + + &-current-folder { + margin-left: $dropdownHorizontalOffset; + } +} + +[dir='rtl'] .adf { + &-dropdown-breadcrumb-path { + margin-right: -$dropdownHorizontalOffset; + } + + &-current-folder { + margin-right: $dropdownHorizontalOffset; + } +} diff --git a/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.ts b/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.ts index f8bd2db8ff..73849a682c 100644 --- a/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.ts +++ b/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.ts @@ -23,10 +23,9 @@ import { BreadcrumbComponent } from './breadcrumb.component'; @Component({ selector: 'adf-dropdown-breadcrumb', templateUrl: './dropdown-breadcrumb.component.html', + styleUrls: ['./dropdown-breadcrumb.component.scss'], encapsulation: ViewEncapsulation.None, - host: { - 'class': 'adf-dropdown-breadcrumb' - } + host: { 'class': 'adf-dropdown-breadcrumb' } }) export class DropdownBreadcrumbComponent extends BreadcrumbComponent implements OnChanges { diff --git a/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.theme.scss b/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.theme.scss deleted file mode 100644 index cc0ea4db9f..0000000000 --- a/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.theme.scss +++ /dev/null @@ -1,104 +0,0 @@ -@mixin adf-breadcrumb-dropdown-theme($theme) { - $primary: map-get($theme, primary); - $dropdownHorizontalOffset: 30px; - $foreground: map-get($theme, foreground); - - .adf { - &-dropdown-breadcrumb { - display: flex; - flex: 1; - line-height: 24px; - font-size: 14px; - font-weight: 600; - letter-spacing: -0.2px; - color: mat-color($foreground, text, 0.54); - overflow: hidden; - margin-top: 10px; - - .mat-icon { - height: 35px; - } - - &-container { - margin: 0; - padding: 0; - list-style-type: none; - cursor: default; - display: flex; - overflow: hidden; - } - } - - &-dropdown-breadcrumb-trigger { - cursor: pointer; - padding: 0; - border: none; - background: transparent; - width: 25px; - - &:focus { - color: mat-color($primary); - outline: none; - } - } - - &-dropdown-breadcrumb-trigger.adf-isRoot { - cursor: not-allowed; - } - - &-dropdown-breadcrumb-path { - width: 0; - height: 0; - overflow: hidden; - margin-top: 35px; - - &.mat-select { - width: 0; - } - } - - &-current-folder { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - display: inline-block; - width: 75%; - color: mat-color($foreground, text, 0.72); - } - - &-dropdown-breadcrumb-path-option.mat-option { - height: 28px; - line-height: 28px; - padding: 0 12px; - font-size: 13px; - } - - &-dropdown-breadcrumb-path-option.mat-option:first-child { - padding-top: 4px; - } - - &-dropdown-breadcrumb-path-option.mat-option:last-child { - padding-bottom: 4px; - } - } - - [dir='ltr'] .adf { - &-dropdown-breadcrumb-path { - margin-left: -$dropdownHorizontalOffset; - } - - &-current-folder { - margin-left: $dropdownHorizontalOffset; - } - } - - [dir='rtl'] .adf { - &-dropdown-breadcrumb-path { - margin-right: -$dropdownHorizontalOffset; - } - - &-current-folder { - margin-right: $dropdownHorizontalOffset; - } - } -} diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.scss b/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.scss new file mode 100644 index 0000000000..065b88173f --- /dev/null +++ b/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.scss @@ -0,0 +1,24 @@ +.adf-content-metadata-card { + + .mat-card { + padding: 0; + + .mat-card-content { + margin-bottom: 0; + } + } + + &-footer.mat-card-footer { + margin: 0; + padding: 8px 12px; + border-top: 1px solid var(--theme-border-color); + + button { + color: var(--theme-text-color); + + &:hover { + color: var(--theme-text-bold-color); + } + } + } +} diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.ts b/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.ts index bc0682c7fc..78acf4e501 100644 --- a/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.ts +++ b/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.ts @@ -22,6 +22,7 @@ import { NodeAspectService } from '../../../aspect-list/node-aspect.service'; @Component({ selector: 'adf-content-metadata-card', templateUrl: './content-metadata-card.component.html', + styleUrls: ['./content-metadata-card.component.scss'], encapsulation: ViewEncapsulation.None, host: { 'class': 'adf-content-metadata-card' } }) diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.theme.scss b/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.theme.scss deleted file mode 100644 index 00ac5f29b6..0000000000 --- a/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.theme.scss +++ /dev/null @@ -1,28 +0,0 @@ -@mixin adf-content-metadata-card-theme($theme) { - $foreground: map-get($theme, foreground); - - .adf-content-metadata-card { - - .mat-card { - padding: 0; - - .mat-card-content { - margin-bottom: 0; - } - } - - &-footer.mat-card-footer { - margin: 0; - padding: 8px 12px; - border-top: 1px solid mat-color($foreground, text, 0.07); - - button { - color: mat-color($foreground, text, 0.54); - - &:hover { - color: mat-color($foreground, text, 0.87); - } - } - } - } -} diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss new file mode 100644 index 0000000000..a1b32c623e --- /dev/null +++ b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss @@ -0,0 +1,22 @@ +.adf { + &-metadata-properties { + .mat-expansion-panel-header.mat-expanded:hover, + .mat-expansion-panel-header.mat-expanded:focus { + background: var(--theme-bg-hover-color); + } + + mat-expansion-panel-header { + height: 64px; + } + + .mat-expansion-panel:not([class*='mat-elevation-z']) { + box-shadow: none; + } + } + + &-metadata-action-buttons { + display: flex; + justify-content: space-evenly; + margin: 10px; + } +} diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts index e2570ef5d0..2fdbb64afe 100644 --- a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts +++ b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts @@ -36,6 +36,7 @@ import { takeUntil, debounceTime, catchError, map } from 'rxjs/operators'; @Component({ selector: 'adf-content-metadata', templateUrl: './content-metadata.component.html', + styleUrls: ['./content-metadata.component.scss'], host: { 'class': 'adf-content-metadata' }, encapsulation: ViewEncapsulation.None }) diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.theme.scss b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.theme.scss deleted file mode 100644 index cd9273281e..0000000000 --- a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.theme.scss +++ /dev/null @@ -1,27 +0,0 @@ -@mixin adf-content-metadata-theme($theme) { - $background: map-get($theme, background); - $panel-header-hover: mat-color($background, hover); - - .adf { - &-metadata-properties { - .mat-expansion-panel-header.mat-expanded:hover, - .mat-expansion-panel-header.mat-expanded:focus { - background: $panel-header-hover; - } - - mat-expansion-panel-header { - height: 64px; - } - - .mat-expansion-panel:not([class*='mat-elevation-z']) { - box-shadow: none; - } - } - - &-metadata-action-buttons { - display: flex; - justify-content: space-evenly; - margin: 10px; - } - } -} diff --git a/lib/content-services/src/lib/content-metadata/content-metadata.theme.scss b/lib/content-services/src/lib/content-metadata/content-metadata.theme.scss deleted file mode 100644 index 141e53759a..0000000000 --- a/lib/content-services/src/lib/content-metadata/content-metadata.theme.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import './components/content-metadata/content-metadata.theme'; -@import './components/content-metadata-card/content-metadata-card.theme'; - -@mixin adf-content-metadata-module-theme($theme) { - @include adf-content-metadata-theme($theme); - @include adf-content-metadata-card-theme($theme); -} diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.scss b/lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.scss new file mode 100644 index 0000000000..4ac11fdf1d --- /dev/null +++ b/lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.scss @@ -0,0 +1,197 @@ +$content-node-selector-thumbnail-width: 35px !default; + +.adf-search-results-label { + flex: 1; + font-weight: 600; + font-size: 14px; + font-style: normal; + font-stretch: normal; + line-height: 1.43; + letter-spacing: -0.2px; + color: var(--theme-text-bold-color); +} + +.adf-toolbar .mat-toolbar { + max-height: 48px; + border-bottom-width: 0; + font-size: 14px; + + &.mat-toolbar-single-row { + height: auto; + } +} + +.adf-content-node-selector { + + &-search-panel-container { + display: flex; + } + + &-document-list-container { + width: 100%; + } + + &-content { + padding-top: 0; + + &-input { + width: 100%; + + &-icon { + color: var(--adf-node-selector-icon-color); + cursor: pointer; + + &:hover { + color: var(--theme-fg-base-color); + } + } + } + + .mat-form-field-underline .mat-form-field-ripple { + height: 1px; + transition: none; + } + + .adf-site-dropdown-container { + .mat-form-field { + display: block; + margin-bottom: 15px; + } + } + + .adf-site-dropdown-list-element { + width: 100%; + margin-bottom: 0; + + .mat-select-trigger { + font-size: 14px; + } + + } + + &-breadcrumb { + .adf-dropdown-breadcrumb-trigger { + outline: none; + .mat-icon { + color: var(--adf-node-selector-base-color); + + &:hover { + color: var(--adf-node-selector-base-bold-color); + } + } + + &:focus .mat-icon { + color: var(--theme-primary-color); + } + } + + .adf-dropdown-breadcrumb-item-chevron { + color: var(--adf-node-selector-base-color); + } + } + + &-list { + height: 300px; + overflow: auto; + border: 1px solid var(--theme-border-color); + border-top: 0; + + .adf-highlight { + color: var(--theme-primary-color); + } + + .adf-datatable-list { + border: none; + + .adf-datatable-selected { + height: 100%; + width: 100%; + } + + .adf-datatable-selected > svg { + fill: #00bcd4 !important; + } + + .adf-no-content-container { + text-align: center; + border: none !important; + } + + .adf-datatable-cell { + &--image { + min-width: $content-node-selector-thumbnail-width; + width: $content-node-selector-thumbnail-width; + max-width: $content-node-selector-thumbnail-width; + } + + &:nth-child(2) { + flex: 1 0 95px; + } + + .adf-name-location-cell-location { + display: none; + } + + &.adf-content-selector-visibility-cell { + flex: 0 1 auto; + min-width: 1px; + + .adf-datatable-cell-value { + padding: 0; + } + } + } + + .adf-datatable-body .adf-datatable-row { + min-height: 40px; + + @media screen and (-ms-high-contrast: active), + screen and (-ms-high-contrast: none) { + padding-top: 15px; + } + + &:first-child { + .adf-datatable-cell { + border-top: none; + } + } + + &:last-child { + .adf-datatable-cell { + border-bottom: none; + } + } + } + } + + &-searchLayout { + .adf-datatable-list .adf-datatable-row { + min-height: 65px !important; + + .adf-datatable-cell { + .adf-name-location-cell-location { + padding: 0 10px; + display: block; + } + + .adf-name-location-cell-name { + padding: 5px 10px 2px; + } + + &.adf-content-selector-modified-cell { + display: none; + } + + &.adf-content-selector-modifier-cell { + display: none; + } + + &.adf-content-selector-visibility-cell { + display: none; + } + } + } + } + } + } +} diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.ts b/lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.ts index 2600e378c7..45cfc2ae9b 100644 --- a/lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.ts +++ b/lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.ts @@ -60,6 +60,7 @@ export const defaultValidation = () => true; @Component({ selector: 'adf-content-node-selector-panel', templateUrl: './content-node-selector-panel.component.html', + styleUrls: ['./content-node-selector-panel.component.scss'], encapsulation: ViewEncapsulation.None, host: { 'class': 'adf-content-node-selector-panel' }, providers: [{ diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector-panel.theme.scss b/lib/content-services/src/lib/content-node-selector/content-node-selector-panel.theme.scss deleted file mode 100644 index f8745820e3..0000000000 --- a/lib/content-services/src/lib/content-node-selector/content-node-selector-panel.theme.scss +++ /dev/null @@ -1,202 +0,0 @@ -@mixin adf-content-node-selector-theme($theme) { - $primary: map-get($theme, primary); - $foreground: map-get($theme, foreground); - $content-node-selector-thumbnail-width: 35px !default; - - .adf-search-results-label { - flex: 1; - font-weight: 600; - font-size: 14px; - font-style: normal; - font-stretch: normal; - line-height: 1.43; - letter-spacing: -0.2px; - color: mat-color($foreground, base, 0.87); - } - - .adf-toolbar .mat-toolbar { - max-height: 48px; - border-bottom-width: 0; - font-size: 14px; - - &.mat-toolbar-single-row { - height: auto; - } - } - - .adf-content-node-selector { - - &-search-panel-container { - display: flex; - } - - &-document-list-container { - width: 100%; - } - - &-content { - padding-top: 0; - - &-input { - width: 100%; - - &-icon { - color: mat-color($foreground, icon, 0.54); - cursor: pointer; - - &:hover { - color: mat-color($foreground, base); - } - } - } - - .mat-form-field-underline .mat-form-field-ripple { - height: 1px; - transition: none; - } - - .adf-site-dropdown-container { - .mat-form-field { - display: block; - margin-bottom: 15px; - } - } - - .adf-site-dropdown-list-element { - width: 100%; - margin-bottom: 0; - - .mat-select-trigger { - font-size: 14px; - } - - } - - &-breadcrumb { - .adf-dropdown-breadcrumb-trigger { - outline: none; - .mat-icon { - color: mat-color($foreground, base, 0.45); - - &:hover { - color: mat-color($foreground, base, 0.65); - } - } - - &:focus .mat-icon { - color: mat-color($primary); - } - } - - .adf-dropdown-breadcrumb-item-chevron { - color: mat-color($foreground, base, 0.45); - } - } - - &-list { - height: 300px; - overflow: auto; - border: 1px solid mat-color($foreground, base, 0.07); - border-top: 0; - - .adf-highlight { - color: mat-color($primary); - } - - .adf-datatable-list { - border: none; - - .adf-datatable-selected { - height: 100%; - width: 100%; - } - - .adf-datatable-selected > svg { - fill: #00bcd4 !important; - } - - .adf-no-content-container { - text-align: center; - border: none !important; - } - - .adf-datatable-cell { - &--image { - min-width: $content-node-selector-thumbnail-width; - width: $content-node-selector-thumbnail-width; - max-width: $content-node-selector-thumbnail-width; - } - - &:nth-child(2) { - flex: 1 0 95px; - } - - .adf-name-location-cell-location { - display: none; - } - - &.adf-content-selector-visibility-cell { - flex: 0 1 auto; - min-width: 1px; - - .adf-datatable-cell-value { - padding: 0; - } - } - } - - .adf-datatable-body .adf-datatable-row { - min-height: 40px; - - @media screen and (-ms-high-contrast: active), - screen and (-ms-high-contrast: none) { - padding-top: 15px; - } - - &:first-child { - .adf-datatable-cell { - border-top: none; - } - } - - &:last-child { - .adf-datatable-cell { - border-bottom: none; - } - } - } - } - - &-searchLayout { - .adf-datatable-list .adf-datatable-row { - min-height: 65px !important; - - .adf-datatable-cell { - .adf-name-location-cell-location { - padding: 0 10px; - display: block; - } - - .adf-name-location-cell-name { - padding: 5px 10px 2px; - } - - &.adf-content-selector-modified-cell { - display: none; - } - - &.adf-content-selector-modifier-cell { - display: none; - } - - &.adf-content-selector-visibility-cell { - display: none; - } - } - } - } - } - } - } - -} diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss new file mode 100644 index 0000000000..afa63f387a --- /dev/null +++ b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss @@ -0,0 +1,105 @@ +adf-content-node-selector { + .adf-content-node-selector-headless-tabs { + .mat-tab-header { + display: none; + } + } + + .adf-upload-dialog { + box-shadow: none; + + &__content { + max-height: 64%; + } + + height: 100%; + width: 100%; + position: unset; + bottom: unset; + } + + .adf-upload-dialog-container { + height: 380px; + } + + .adf-toolbar-title { + place-items: center; + } + + .adf-content-node-selector-local-upload-content { + height: 368px; + + adf-upload-drag-area { + adf-empty-list { + .adf-empty-folder-drag-drop { + min-height:46px; + font-size: 40px; + } + .adf-empty-folder-image { + height: 100px; + width: 460px; + } + } + } + } +} + +.adf-content-node-selector-dialog { + &-content { + padding-left: 24px; + padding-right: 24px; + } + + .mat-dialog-title { + margin-left: 24px; + margin-right: 24px; + font-size: 20px; + font-weight: 600; + font-style: normal; + font-stretch: normal; + line-height: 1.6; + letter-spacing: -0.5px; + color: var(--theme-text-bold-color); + + h2 { + margin: unset; + font-size: unset; + } + } + + .mat-dialog-container { + padding-left: 0; + padding-right: 0; + } + + .mat-dialog-content { + margin: 0; + overflow: hidden; + } + + .mat-dialog-actions { + padding: 8px; + height: 61px; + background-color: var(--theme-background-color); + display: flex; + flex-direction: row; + justify-content: space-between; + color: var(--theme-foreground-text-color); + + button { + text-transform: uppercase; + font-weight: normal; + } + + .adf-choose-action { + + &[disabled] { + color: var(--theme-secondary-text-color); + } + + &:enabled { + color: var(--theme-primary-color); + } + } + } +} diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector.component.ts b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.ts index 657b411ecf..74da77b70f 100644 --- a/lib/content-services/src/lib/content-node-selector/content-node-selector.component.ts +++ b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.ts @@ -27,6 +27,7 @@ import { NodeAction } from '../document-list/models/node-action.enum'; @Component({ selector: 'adf-content-node-selector', templateUrl: './content-node-selector.component.html', + styleUrls: ['./content-node-selector.component.scss'], encapsulation: ViewEncapsulation.None }) export class ContentNodeSelectorComponent implements OnInit { diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector.theme.scss b/lib/content-services/src/lib/content-node-selector/content-node-selector.theme.scss deleted file mode 100644 index 9aaf3fe44c..0000000000 --- a/lib/content-services/src/lib/content-node-selector/content-node-selector.theme.scss +++ /dev/null @@ -1,111 +0,0 @@ -@mixin adf-content-node-selector-dialog-theme($theme) { - $primary: map-get($theme, primary); - $foreground: map-get($theme, foreground); - $background: map-get($theme, background); - - adf-content-node-selector { - .adf-content-node-selector-headless-tabs { - .mat-tab-header { - display: none; - } - } - - .adf-upload-dialog { - box-shadow: none; - - &__content { - max-height: 64%; - } - - height: 100%; - width: 100%; - position: unset; - bottom: unset; - } - - .adf-upload-dialog-container { - height: 380px; - } - - .adf-toolbar-title { - place-items: center; - } - - .adf-content-node-selector-local-upload-content { - height: 368px; - - adf-upload-drag-area { - adf-empty-list { - .adf-empty-folder-drag-drop { - min-height:46px; - font-size: 40px; - } - .adf-empty-folder-image { - height: 100px; - width: 460px; - } - } - } - } - } - - .adf-content-node-selector-dialog { - &-content { - padding-left: 24px; - padding-right: 24px; - } - - .mat-dialog-title { - margin-left: 24px; - margin-right: 24px; - font-size: 20px; - font-weight: 600; - font-style: normal; - font-stretch: normal; - line-height: 1.6; - letter-spacing: -0.5px; - color: mat-color($foreground, text, 0.87); - - h2 { - margin: unset; - font-size: unset; - } - } - - .mat-dialog-container { - padding-left: 0; - padding-right: 0; - } - - .mat-dialog-content { - margin: 0; - overflow: hidden; - } - - .mat-dialog-actions { - padding: 8px; - height: 61px; - background-color: mat-color($background, background); - display: flex; - flex-direction: row; - justify-content: space-between; - color: mat-color($foreground, text, 0.72); - - button { - text-transform: uppercase; - font-weight: normal; - } - - .adf-choose-action { - - &[disabled] { - color: mat-color($foreground, secondary-text); - } - - &:enabled { - color: mat-color($primary); - } - } - } - } -} diff --git a/lib/content-services/src/lib/content-node-selector/name-location-cell/name-location-cell.component.scss b/lib/content-services/src/lib/content-node-selector/name-location-cell/name-location-cell.component.scss new file mode 100644 index 0000000000..eb398708ba --- /dev/null +++ b/lib/content-services/src/lib/content-node-selector/name-location-cell/name-location-cell.component.scss @@ -0,0 +1,7 @@ +.adf-name-location-cell { + display: grid; + &-location { + color: var(--theme-text-color); + font-size: 12px; + } +} diff --git a/lib/content-services/src/lib/content-node-selector/name-location-cell/name-location-cell.component.ts b/lib/content-services/src/lib/content-node-selector/name-location-cell/name-location-cell.component.ts index c9e0610f64..2fdc6850a9 100644 --- a/lib/content-services/src/lib/content-node-selector/name-location-cell/name-location-cell.component.ts +++ b/lib/content-services/src/lib/content-node-selector/name-location-cell/name-location-cell.component.ts @@ -24,6 +24,7 @@ import { DataRow } from '@alfresco/adf-core';
{{ name }}
{{ path }}
`, + styleUrls: ['./name-location-cell.component.scss'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'adf-name-location-cell adf-datatable-content-cell' } diff --git a/lib/content-services/src/lib/content-node-selector/name-location-cell/name-location-cell.theme.scss b/lib/content-services/src/lib/content-node-selector/name-location-cell/name-location-cell.theme.scss deleted file mode 100644 index 27c895864b..0000000000 --- a/lib/content-services/src/lib/content-node-selector/name-location-cell/name-location-cell.theme.scss +++ /dev/null @@ -1,11 +0,0 @@ -@mixin adf-name-location-cell-theme($theme) { - $foreground: map-get($theme, foreground); - - .adf-name-location-cell { - display: grid; - &-location { - color: mat-color($foreground, base, 0.54); - font-size: 12px; - } - } -} diff --git a/lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss b/lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss new file mode 100644 index 0000000000..476359e57d --- /dev/null +++ b/lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss @@ -0,0 +1,69 @@ +.adf-float-label { + padding-top: 20px; +} + +.adf-share-link-dialog { + + .adf-share-link { + &__dialog-content { + display: flex; + flex-direction: column; + } + + &__label, + &__title, + &__info { + letter-spacing: -0.4px; + line-height: 2; + font-weight: normal; + font-style: normal; + font-stretch: normal; + font-size: 16px; + color: var(--theme-text-bold-color); + } + + &__label { + flex: 1 1 auto; + } + + &__info { + color: var(--theme-text-color); + font-size: 13px; + } + + &--row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + } + + &__input { + color: var(--theme-text-bold-color); + } + } + + .adf-input-action { + cursor: pointer; + } + + .adf-full-width { + width: 100%; + } + + .mat-form-field-infix { + border-top: unset; + } + + .mat-dialog-actions { + justify-content: flex-end; + + & > button { + text-transform: uppercase; + } + } + + .mat-form-field-flex { + align-items: center; + } +} diff --git a/lib/content-services/src/lib/content-node-share/content-node-share.dialog.theme.scss b/lib/content-services/src/lib/content-node-share/content-node-share.dialog.theme.scss deleted file mode 100644 index ed0a0509f4..0000000000 --- a/lib/content-services/src/lib/content-node-share/content-node-share.dialog.theme.scss +++ /dev/null @@ -1,75 +0,0 @@ -@mixin adf-share-link-typography($foreground) { - letter-spacing: -0.4px; - line-height: 2; - font-weight: normal; - font-style: normal; - font-stretch: normal; - font-size: 16px; - color: mat-color($foreground, text, 0.87); -} -@mixin adf-content-node-share-theme($theme) { - $foreground: map-get($theme, foreground); - - .adf-float-label { - padding-top: 20px; - } - .adf-share-link-dialog { - - .adf-share-link { - &__dialog-content { - display: flex; - flex-direction: column; - } - - &__label { - @include adf-share-link-typography($foreground); - flex: 1 1 auto; - } - - &__title { - @include adf-share-link-typography($foreground); - } - - &__info { - @include adf-share-link-typography($foreground); - color: mat-color($foreground, text, 0.54); - font-size: 13px; - } - - &--row { - display: flex; - flex-direction: row; - flex-wrap: wrap; - align-items: center; - } - - &__input { - color: mat-color($foreground, text, 0.87); - } - } - - .adf-input-action { - cursor: pointer; - } - - .adf-full-width { - width: 100%; - } - - .mat-form-field-infix { - border-top: unset; - } - - .mat-dialog-actions { - justify-content: flex-end; - - & > button { - text-transform: uppercase; - } - } - - .mat-form-field-flex { - align-items: center; - } - } -} diff --git a/lib/content-services/src/lib/content-node-share/content-node-share.dialog.ts b/lib/content-services/src/lib/content-node-share/content-node-share.dialog.ts index 0cc82735b9..831cbce4d6 100644 --- a/lib/content-services/src/lib/content-node-share/content-node-share.dialog.ts +++ b/lib/content-services/src/lib/content-node-share/content-node-share.dialog.ts @@ -45,6 +45,7 @@ type DatePickerType = 'date' | 'time' | 'month' | 'datetime'; @Component({ selector: 'adf-share-dialog', templateUrl: './content-node-share.dialog.html', + styleUrls: ['./content-node-share.dialog.scss'], host: { class: 'adf-share-dialog' }, encapsulation: ViewEncapsulation.None }) diff --git a/lib/content-services/src/lib/content-type/content-type-dialog.component.scss b/lib/content-services/src/lib/content-type/content-type-dialog.component.scss new file mode 100644 index 0000000000..2c9f78f05e --- /dev/null +++ b/lib/content-services/src/lib/content-type/content-type-dialog.component.scss @@ -0,0 +1,32 @@ +.adf { + + &-content-type-dialog { + .mat-expansion-panel { + margin-bottom: 10px; + } + } + + &-content-type-accordion { + margin: 10px; + } + + &-content-type-dialog-title { + font-size: large; + font-weight: 200; + margin-top: 0; + } + + &-content-type-dialog-description { + font-size: small; + line-height: normal; + } + + &-content-type-table { + width: 100%; + } + + &-content-type-dialog-apply-button { + color: var(--theme-primary-color); + } + +} diff --git a/lib/content-services/src/lib/content-type/content-type-dialog.component.ts b/lib/content-services/src/lib/content-type/content-type-dialog.component.ts index 5f0362298f..e12b970ef6 100644 --- a/lib/content-services/src/lib/content-type/content-type-dialog.component.ts +++ b/lib/content-services/src/lib/content-type/content-type-dialog.component.ts @@ -24,6 +24,7 @@ import { ContentTypeService } from './content-type.service'; @Component({ selector: 'adf-content-type-dialog', templateUrl: './content-type-dialog.component.html', + styleUrls: ['./content-type-dialog.component.scss'], encapsulation: ViewEncapsulation.None }) export class ContentTypeDialogComponent implements OnInit { diff --git a/lib/content-services/src/lib/content-type/content-type-dialog.theme.scss b/lib/content-services/src/lib/content-type/content-type-dialog.theme.scss deleted file mode 100644 index 90da676ebe..0000000000 --- a/lib/content-services/src/lib/content-type/content-type-dialog.theme.scss +++ /dev/null @@ -1,36 +0,0 @@ -@mixin adf-content-type-dialog-theme($theme) { - $primary: map-get($theme, primary); - - .adf { - - &-content-type-dialog { - .mat-expansion-panel { - margin-bottom: 10px; - } - } - - &-content-type-accordion { - margin: 10px; - } - - &-content-type-dialog-title { - font-size: large; - font-weight: 200; - margin-top: 0; - } - - &-content-type-dialog-description { - font-size: small; - line-height: normal; - } - - &-content-type-table { - width: 100%; - } - - &-content-type-dialog-apply-button { - color: mat-color($primary); - } - - } -} diff --git a/lib/content-services/src/lib/dialogs/folder.dialog.scss b/lib/content-services/src/lib/dialogs/folder.dialog.scss new file mode 100644 index 0000000000..ef6940f119 --- /dev/null +++ b/lib/content-services/src/lib/dialogs/folder.dialog.scss @@ -0,0 +1,36 @@ + +.adf-fill-remaining-space { + flex: 1 1 auto; +} + +.adf-full-width { + width: 100%; +} + +.adf-lock-file-name { + .mat-checkbox-layout { + width: 100%; + } + + .mat-checkbox-label { + text-overflow: ellipsis; + overflow: hidden; + } + + .mat-checkbox-inner-container { + margin: auto 8px auto 0; + } +} + +.adf-dialog-buttons button { + text-transform: uppercase; +} + +.adf-dialog-action-button:enabled { + color: var(--theme-primary-color); +} + +.adf-dialog-action-button:disabled > span { + color: var(--theme-text-color); +} + diff --git a/lib/content-services/src/lib/dialogs/folder.dialog.theme.scss b/lib/content-services/src/lib/dialogs/folder.dialog.theme.scss deleted file mode 100644 index f0411fddb7..0000000000 --- a/lib/content-services/src/lib/dialogs/folder.dialog.theme.scss +++ /dev/null @@ -1,40 +0,0 @@ -@mixin adf-dialog-theme($theme) { - - $primary: map-get($theme, primary); - $foreground: map-get($theme, foreground); - - .adf-fill-remaining-space { - flex: 1 1 auto; - } - - .adf-full-width { - width: 100%; - } - - .adf-lock-file-name { - .mat-checkbox-layout { - width: 100%; - } - - .mat-checkbox-label { - text-overflow: ellipsis; - overflow: hidden; - } - - .mat-checkbox-inner-container { - margin: auto 8px auto 0; - } - } - - .adf-dialog-buttons button { - text-transform: uppercase; - } - - .adf-dialog-action-button:enabled { - color: mat-color($primary); - } - - .adf-dialog-action-button:disabled > span { - color: mat-color($foreground, text, 0.54); - } -} diff --git a/lib/content-services/src/lib/dialogs/folder.dialog.ts b/lib/content-services/src/lib/dialogs/folder.dialog.ts index 36b16efd50..cdafb9870d 100644 --- a/lib/content-services/src/lib/dialogs/folder.dialog.ts +++ b/lib/content-services/src/lib/dialogs/folder.dialog.ts @@ -29,6 +29,7 @@ import { forbidEndingDot, forbidOnlySpaces, forbidSpecialCharacters } from './fo @Component({ selector: 'adf-folder-dialog', templateUrl: './folder.dialog.html', + styleUrls: ['./folder.dialog.scss'], encapsulation: ViewEncapsulation.None }) export class FolderDialogComponent implements OnInit { diff --git a/lib/content-services/src/lib/document-list/components/document-list.component.scss b/lib/content-services/src/lib/document-list/components/document-list.component.scss new file mode 100644 index 0000000000..d63e3dd458 --- /dev/null +++ b/lib/content-services/src/lib/document-list/components/document-list.component.scss @@ -0,0 +1,200 @@ +.adf-document-list { + min-height: 0; + height: 100%; + background-color: var(--theme-background-color); +} + +.mat-icon.adf-datatable-selected { + height: 100%; + width: 100%; + margin-left: -2px; + margin-top: 2px; +} + +.adf-sticky-document-list { + height: 310px; + overflow-y: auto; +} + +.adf-datatable-card { + .adf-datatable-selected > svg { + fill: var(--theme-accent-color); + width: 30px; + height: 30px; + position: absolute; + top: 10px; + } +} + +.adf-datatable-list { + .adf-datatable-selected > svg { + fill: var(--theme-accent-color); + width: 30px; + height: 30px; + } +} + +.adf-document-list_empty_template { + text-align: center; + margin-top: 20px; + margin-bottom: 20px; +} + +.adf-no-permission__template { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + width: 100%; + height: 100%; + min-height: 300px; + + mat-icon { + font-size: 52px; + height: 52px; + width: 52px; + } + + &--text { + color: var(--theme-text-fg-color); + font-size: 16px; + } +} + +.adf-document-list__this-space-is-empty { + height: 32px; + opacity: 0.26; + font-size: 24px; + line-height: 1.33; + letter-spacing: -1px; + color: var(--theme-text-fg-color); +} + +.adf-document-list__drag-drop { + height: 56px; + opacity: 0.54; + font-size: 56px; + line-height: 1; + letter-spacing: -2px; + color: var(--theme-text-fg-color); + margin-top: 40px; +} + +.adf-document-list__any-files-here-to-add { + height: 24px; + opacity: 0.54; + font-size: 16px; + line-height: 1.5; + letter-spacing: -0.4px; + color: var(--theme-text-fg-color); + margin-top: 17px; +} + +.adf-document-list__empty_doc_lib { + width: 565px; + height: 161px; + object-fit: contain; + margin-top: 17px; +} + +.adf-document-list-loading-margin { + margin: auto; +} + +.adf-document-list-loading-container { + min-height: 300px; + display: flex; + flex-direction: row; + height: 100%; +} + +.adf-empty-list-header { + height: 32px; + opacity: 0.26 !important; + font-size: 24px; + line-height: 1.33; + letter-spacing: -1px; + color: var(--theme-text-fg-color); +} + +.adf-documentlist-pagination { + color: var(--theme-text-fg-color); + + .adf-pagination__block { + border-right: none; + } +} + +.adf-empty-folder { + + &-this-space-is-empty { + height: 32px; + font-size: 24px; + line-height: 1.33; + letter-spacing: -1px; + color: var(--theme-text-color); + } + + &-drag-drop { + min-height: 56px; + font-size: 53px; + line-height: 1; + letter-spacing: -2px; + color: var(--theme-foreground-text-color); + margin-top: 40px; + word-break: break-all; + white-space: pre-line; + + @media screen and (max-width: 599px) { + font-size: 48px; + } + } + + &-any-files-here-to-add { + min-height: 24px; + font-size: 16px; + line-height: 1.5; + letter-spacing: -0.4px; + color: var(--theme-foreground-text-color); + margin-top: 17px; + word-break: break-all; + white-space: pre-line; + } + + &-image { + width: 565px; + max-width: 100%; + object-fit: contain; + margin-top: 17px; + + @media screen and (max-width: 599px) { + width: 250px; + } + } +} + +.adf-datatable-gallery-thumbnails { + .adf-datatable-card .adf-datatable-row { + height: 300px !important; + + img { + height: 130px; + } + + .adf-datatable-cell { + overflow: visible; + } + + .adf-datatable-cell.adf-datatable-cell--image { + flex: 0 0 auto; + display: flex; + flex-direction: column-reverse; + justify-content: space-between; + + .adf-cell-value { + display: flex; + justify-content: center; + } + } + } +} diff --git a/lib/content-services/src/lib/document-list/components/document-list.component.ts b/lib/content-services/src/lib/document-list/components/document-list.component.ts index f581beac8d..f91ff680ca 100644 --- a/lib/content-services/src/lib/document-list/components/document-list.component.ts +++ b/lib/content-services/src/lib/document-list/components/document-list.component.ts @@ -66,6 +66,7 @@ import { takeUntil } from 'rxjs/operators'; @Component({ selector: 'adf-document-list', templateUrl: './document-list.component.html', + styleUrls: ['./document-list.component.scss'], encapsulation: ViewEncapsulation.None, host: { class: 'adf-document-list' } }) diff --git a/lib/content-services/src/lib/document-list/components/document-list.theme.scss b/lib/content-services/src/lib/document-list/components/document-list.theme.scss deleted file mode 100644 index a4f838e042..0000000000 --- a/lib/content-services/src/lib/document-list/components/document-list.theme.scss +++ /dev/null @@ -1,210 +0,0 @@ -@mixin adf-document-list-theme($theme) { - $foreground: map-get($theme, foreground); - $background: map-get($theme, background); - $accent: map-get($theme, accent); - $primary: map-get($theme, primary); - - $document-list-selection-color: mat-color($accent) !default; - $document-list-background: mat-color($background, background) !default; - - .adf-document-list { - min-height: 0; - height: 100%; - background-color: $document-list-background; - } - - .mat-icon.adf-datatable-selected { - height: 100%; - width: 100%; - margin-left: -2px; - margin-top: 2px; - } - - .adf-sticky-document-list { - height: 310px; - overflow-y: auto; - } - - .adf-datatable-card { - .adf-datatable-selected > svg { - fill: $document-list-selection-color; - width: 30px; - height: 30px; - position: absolute; - top: 10px; - } - } - - .adf-datatable-list { - .adf-datatable-selected > svg { - fill: $document-list-selection-color; - width: 30px; - height: 30px; - } - } - - .adf-document-list_empty_template { - text-align: center; - margin-top: 20px; - margin-bottom: 20px; - } - - .adf-no-permission__template { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - width: 100%; - height: 100%; - min-height: 300px; - - mat-icon { - font-size: 52px; - height: 52px; - width: 52px; - } - - &--text { - color: mat-color($foreground, text); - font-size: 16px; - } - } - - .adf-document-list__this-space-is-empty { - height: 32px; - opacity: 0.26; - font-size: 24px; - line-height: 1.33; - letter-spacing: -1px; - color: mat-color($foreground, text); - } - - .adf-document-list__drag-drop { - height: 56px; - opacity: 0.54; - font-size: 56px; - line-height: 1; - letter-spacing: -2px; - color: mat-color($foreground, text); - margin-top: 40px; - } - - .adf-document-list__any-files-here-to-add { - height: 24px; - opacity: 0.54; - font-size: 16px; - line-height: 1.5; - letter-spacing: -0.4px; - color: mat-color($foreground, text) 0; - margin-top: 17px; - } - - .adf-document-list__empty_doc_lib { - width: 565px; - height: 161px; - object-fit: contain; - margin-top: 17px; - } - - .adf-document-list-loading-margin { - margin: auto; - } - - .adf-document-list-loading-container { - min-height: 300px; - display: flex; - flex-direction: row; - height: 100%; - } - - .adf-empty-list-header { - height: 32px; - opacity: 0.26 !important; - font-size: 24px; - line-height: 1.33; - letter-spacing: -1px; - color: mat-color($foreground, text); - } - - .adf-documentlist-pagination { - color: mat-color($foreground, text); - - .adf-pagination__block { - border-right: none; - } - } - - .adf-empty-folder { - - &-this-space-is-empty { - height: 32px; - font-size: 24px; - line-height: 1.33; - letter-spacing: -1px; - color: mat-color($foreground, text, 0.54); - } - - &-drag-drop { - min-height: 56px; - font-size: 53px; - line-height: 1; - letter-spacing: -2px; - color: mat-color($foreground, text, 0.72); - margin-top: 40px; - word-break: break-all; - white-space: pre-line; - - @media screen and (max-width: 599px) { - font-size: 48px; - } - } - - &-any-files-here-to-add { - min-height: 24px; - font-size: 16px; - line-height: 1.5; - letter-spacing: -0.4px; - color: mat-color($foreground, text, 0.72); - margin-top: 17px; - word-break: break-all; - white-space: pre-line; - } - - &-image { - width: 565px; - max-width: 100%; - object-fit: contain; - margin-top: 17px; - - @media screen and (max-width: 599px) { - width: 250px; - } - } - } - - .adf-datatable-gallery-thumbnails { - .adf-datatable-card .adf-datatable-row { - height: 300px !important; - - img { - height: 130px; - } - - .adf-datatable-cell { - overflow: visible; - } - - .adf-datatable-cell.adf-datatable-cell--image { - flex: 0 0 auto; - display: flex; - flex-direction: column-reverse; - justify-content: space-between; - - .adf-cell-value { - display: flex; - justify-content: center; - } - } - } - } -} diff --git a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.scss b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.scss new file mode 100644 index 0000000000..1471faeac8 --- /dev/null +++ b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.scss @@ -0,0 +1,72 @@ +.adf-add-permission-dialog { + + .mat-dialog-title { + margin-left: 24px; + margin-right: 24px; + font-size: 20px; + font-weight: 600; + font-style: normal; + font-stretch: normal; + line-height: 1.6; + letter-spacing: -0.5px; + color: var(--theme-text-bold-color); + } + + .mat-dialog-container { + padding-left: 0; + padding-right: 0; + } + + .mat-dialog-content { + margin: 0; + overflow: hidden; + flex-grow: 1; + height: 80vh; + + .adf-new-permission-table { + height: 90%; + } + + .adf-search-container { + height: 100%; + } + } + + .mat-dialog-actions { + padding: 0 24px; + background-color: var(--theme-background-color); + display: flex; + justify-content: flex-end; + color: var(--theme-foreground-text-color); + + button { + text-transform: uppercase; + font-weight: normal; + } + + .adf-choose-action { + + &[disabled] { + color: var(--theme-secondary-text-color); + } + + &:enabled { + color: var(--theme-primary-color); + } + } + } + + .adf { + &-search-user-button { + width: 100%; + .mat-button-wrapper { + display: flex; + align-items: center; + } + } + + &-add-member-action { + padding: 0 15px; + } + } +} diff --git a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.ts b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.ts index d2231d4549..4ec5a90667 100644 --- a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.ts +++ b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.ts @@ -24,6 +24,7 @@ import { MemberModel } from '../../models/member.model'; @Component({ selector: 'adf-add-permission-dialog', templateUrl: './add-permission-dialog.component.html', + styleUrls: ['./add-permission-dialog.component.scss'], encapsulation: ViewEncapsulation.None }) export class AddPermissionDialogComponent { diff --git a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.theme.scss b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.theme.scss deleted file mode 100644 index 916a8a2b11..0000000000 --- a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.theme.scss +++ /dev/null @@ -1,79 +0,0 @@ -@mixin adf-add-permission-dialog-theme($theme) { - - $primary: map-get($theme, primary); - $foreground: map-get($theme, foreground); - $background: map-get($theme, background); - - .adf-add-permission-dialog { - - .mat-dialog-title { - margin-left: 24px; - margin-right: 24px; - font-size: 20px; - font-weight: 600; - font-style: normal; - font-stretch: normal; - line-height: 1.6; - letter-spacing: -0.5px; - color: mat-color($foreground, text, 0.87); - } - - .mat-dialog-container { - padding-left: 0; - padding-right: 0; - } - - .mat-dialog-content { - margin: 0; - overflow: hidden; - flex-grow: 1; - height: 80vh; - - .adf-new-permission-table { - height: 90%; - } - - .adf-search-container { - height: 100%; - } - } - - .mat-dialog-actions { - padding: 0 24px; - background-color: mat-color($background, background); - display: flex; - justify-content: flex-end; - color: mat-color($foreground, text, 0.72); - - button { - text-transform: uppercase; - font-weight: normal; - } - - .adf-choose-action { - - &[disabled] { - color: mat-color($foreground, secondary-text); - } - - &:enabled { - color: mat-color($primary); - } - } - } - - .adf { - &-search-user-button { - width: 100%; - .mat-button-wrapper { - display: flex; - align-items: center; - } - } - - &-add-member-action { - padding: 0 15px; - } - } - } -} diff --git a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.scss b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.scss new file mode 100644 index 0000000000..fd8846a6ab --- /dev/null +++ b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.scss @@ -0,0 +1,75 @@ +$search-result-height: calc(100% - 75px); + +.adf { + + &-permission-result-list { + display: flex; + height: $search-result-height; + overflow: auto; + border: 2px solid var(--theme-border-color); + + &-elements { + width: 100%; + } + + &-search { + display: none; + } + } + + &-permission-start-message { + display: flex; + align-items: center; + justify-content: space-around; + height: $search-result-height; + overflow: auto; + border: 2px solid var(--theme-border-color); + } + + &-permission-no-result { + display: flex; + align-items: center; + justify-content: space-around; + width: 100%; + } + + &-permission-search { + &-input { + width: 100%; + + &-icon { + color: var(--theme-selected-button-bg-color); + cursor: pointer; + + &:hover { + color: var(--theme-fg-base-color); + } + } + } + } + + &-list-option-item { + mat-pseudo-checkbox { + display: none; + } + + .mat-list-text { + display: flex; + flex-direction: row !important; + align-items: center; + + .adf-result-name { + padding-left: 16px !important; + } + } + } + + &-permission-action { + &[disabled] { + opacity: 0.6; + } + &:enabled { + color: var(--theme-primary-color); + } + } +} diff --git a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.ts b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.ts index 9bf41f6b3e..5420568b0f 100644 --- a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.ts +++ b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.ts @@ -27,6 +27,7 @@ import { MatSelectionList } from '@angular/material/list'; @Component({ selector: 'adf-add-permission-panel', templateUrl: './add-permission-panel.component.html', + styleUrls: ['./add-permission-panel.component.scss'], encapsulation: ViewEncapsulation.None, providers: [ { provide: SearchConfigurationService, useClass: SearchPermissionConfigurationService }, diff --git a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.theme.scss b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.theme.scss deleted file mode 100644 index 75174785d7..0000000000 --- a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.theme.scss +++ /dev/null @@ -1,80 +0,0 @@ -@mixin adf-add-permission-panel-theme($theme) { - $foreground: map-get($theme, foreground); - $primary: map-get($theme, primary); - $mat-menu-border-radius: 2px !default; - $search-result-height: calc(100% - 75px); - - .adf { - - &-permission-result-list { - display: flex; - height: $search-result-height; - overflow: auto; - border: 2px solid mat-color($foreground, base, 0.07); - - &-elements { - width: 100%; - } - - &-search { - display: none; - } - } - - &-permission-start-message { - display: flex; - align-items: center; - justify-content: space-around; - height: $search-result-height; - overflow: auto; - border: 2px solid mat-color($foreground, base, 0.07); - } - - &-permission-no-result { - display: flex; - align-items: center; - justify-content: space-around; - width: 100%; - } - - &-permission-search { - &-input { - width: 100%; - - &-icon { - color: mat-color($foreground, disabled-button); - cursor: pointer; - - &:hover { - color: mat-color($foreground, base); - } - } - } - } - - &-list-option-item { - mat-pseudo-checkbox { - display: none; - } - - .mat-list-text { - display: flex; - flex-direction: row !important; - align-items: center; - - .adf-result-name { - padding-left: 16px !important; - } - } - } - - &-permission-action { - &[disabled] { - opacity: 0.6; - } - &:enabled { - color: mat-color($primary); - } - } - } -} diff --git a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission.component.scss b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission.component.scss new file mode 100644 index 0000000000..ef9c68798b --- /dev/null +++ b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission.component.scss @@ -0,0 +1,10 @@ +.adf { + &-permission-action { + &[disabled] { + opacity: 0.6; + } + &:enabled { + color: var(--theme-primary-color); + } + } +} diff --git a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission.component.ts b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission.component.ts index 8107e9674d..f36de1b5c0 100644 --- a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission.component.ts +++ b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission.component.ts @@ -24,6 +24,7 @@ import { RoleModel } from '../../models/role.model'; @Component({ selector: 'adf-add-permission', templateUrl: './add-permission.component.html', + styleUrls: ['./add-permission.component.scss'], encapsulation: ViewEncapsulation.None }) /* diff --git a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission.theme.scss b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission.theme.scss deleted file mode 100644 index c3324845cd..0000000000 --- a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission.theme.scss +++ /dev/null @@ -1,16 +0,0 @@ -@mixin adf-add-permission-theme($theme) { - - $primary: map-get($theme, primary); - - .adf { - - &-permission-action { - &[disabled] { - opacity: 0.6; - } - &:enabled { - color: mat-color($primary); - } - } - } -} diff --git a/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.scss b/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.scss new file mode 100644 index 0000000000..7f7971676d --- /dev/null +++ b/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.scss @@ -0,0 +1,94 @@ +.adf { + &-permission-card { + height: 100%; + box-sizing: border-box; + display: flex !important; + flex-direction: column; + overflow: hidden; + } + + &-permission-loader { + margin-left: 45%; + overflow: hidden; + } + + &-permission-container { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + padding: 10px 15px; + border: 1px solid var(--theme-border-color); + } + + &-inherit-container { + display: flex; + flex-direction: row; + align-items: center; + + &-header { + margin-bottom: 10px; + margin-top: 10px; + } + } + + &-inherit-toggle { + padding-left: 30px; + } + + &-inherit-subtitle { + padding-bottom: 5px; + } + + &-permission-content-header { + display: flex; + flex-direction: row; + align-items: center; + padding: 5px 15px; + } + + &-permission-role-column-header { + position: relative !important; + height: 40px; + .mat-form-field-infix { + border: none; + } + } + + &-permission-header { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + overflow: hidden; + min-height: 0; + } + + &-permission-list { + display: flex; + height: calc(100% - 63px); + } + + &-local-permission-container { + overflow: hidden; + flex: 1 1 auto; + } +} + +[aria-sort='Ascending'] adf-user-role-column, +[aria-sort='Descending'] adf-user-role-column { + padding-left: 10px; + padding-right: 10px; +} + +.adf-permission-pop-over { + padding-right: 15px; + width: 100%; + + .adf-pop-over-card { + width: 100%; + overflow: hidden; + box-shadow: 0 8px 9px -5px var(--theme-fg-divider), + 0 15px 22px 2px var(--theme-fg-divider); + } +} diff --git a/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.ts b/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.ts index ec5ece85d0..37b5da8d6b 100644 --- a/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.ts +++ b/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.ts @@ -24,6 +24,7 @@ import { PermissionListService } from './permission-list.service'; @Component({ selector: 'adf-permission-list', templateUrl: './permission-list.component.html', + styleUrls: ['./permission-list.component.scss'], encapsulation: ViewEncapsulation.None }) export class PermissionListComponent { diff --git a/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.theme.scss b/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.theme.scss deleted file mode 100644 index c86ed82136..0000000000 --- a/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.theme.scss +++ /dev/null @@ -1,93 +0,0 @@ -@mixin adf-permission-list-theme($theme) { - $foreground: map-get($theme, foreground); - - .adf { - &-permission-card { - height: 100%; - box-sizing: border-box; - display: flex !important; - flex-direction: column; - overflow: hidden; - } - - &-permission-loader { - margin-left: 45%; - overflow: hidden; - } - - &-permission-container { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - padding: 10px 15px; - border: 1px solid mat-color($foreground, base, 0.07); - } - - &-inherit-container { - display: flex; - flex-direction: row; - align-items: center; - - &-header { - margin-bottom: 10px; - margin-top: 10px; - } - } - - &-inherit-toggle { - padding-left: 30px; - } - - &-inherit-subtitle { - padding-bottom: 5px; - } - - &-permission-content-header { - display: flex; - flex-direction: row; - align-items: center; - padding: 5px 15px; - } - - &-permission-role-column-header { - position: relative !important; - height: 40px; - .mat-form-field-infix { - border: none; - } - } - - &-permission-header { - @include flex-column; - } - - &-permission-list { - display: flex; - height: calc(100% - 63px); - } - - &-local-permission-container { - overflow: hidden; - flex: 1 1 auto; - } - } - - [aria-sort='Ascending'] adf-user-role-column, - [aria-sort='Descending'] adf-user-role-column { - padding-left: 10px; - padding-right: 10px; - } - - .adf-permission-pop-over { - padding-right: 15px; - width: 100%; - - .adf-pop-over-card { - width: 100%; - overflow: hidden; - box-shadow: 0 8px 9px -5px mat-color($foreground, divider), - 0 15px 22px 2px mat-color($foreground, divider); - } - } -} diff --git a/lib/content-services/src/lib/permission-manager/components/user-icon-column/user-icon-column.component.scss b/lib/content-services/src/lib/permission-manager/components/user-icon-column/user-icon-column.component.scss new file mode 100644 index 0000000000..e460b652d1 --- /dev/null +++ b/lib/content-services/src/lib/permission-manager/components/user-icon-column/user-icon-column.component.scss @@ -0,0 +1,35 @@ +.adf { + &-people-initial { + background: var(--theme-primary-color); + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + width: 40px; + height: 40px; + color: var(--theme-primary-color-default-contrast) !important; + font-weight: bolder; + font-size: 18px; + text-transform: uppercase; + } + + &-group-icon { + height: 20px !important; + width: 20px !important; + background: var(--theme-primary-color); + border-radius: 50%; + padding: 10px; + color: var(--theme-primary-color-default-contrast) !important; + font-weight: bolder; + font-size: 20px; + } + + &-people-select-icon { + margin: 0 !important; + svg { + fill: var(--theme-accent-color); + width: 40px; + height: 40px; + } + } +} diff --git a/lib/content-services/src/lib/permission-manager/components/user-icon-column/user-icon-column.component.ts b/lib/content-services/src/lib/permission-manager/components/user-icon-column/user-icon-column.component.ts index e13e453ade..a5be85104f 100644 --- a/lib/content-services/src/lib/permission-manager/components/user-icon-column/user-icon-column.component.ts +++ b/lib/content-services/src/lib/permission-manager/components/user-icon-column/user-icon-column.component.ts @@ -17,7 +17,7 @@ import { User } from '@alfresco/adf-core'; import { NodeEntry } from '@alfresco/js-api'; -import { Component, Input, OnInit } from '@angular/core'; +import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core'; import { BehaviorSubject } from 'rxjs'; import { NodePermissionService } from '../../services/node-permission.service'; @@ -34,6 +34,8 @@ import { NodePermissionService } from '../../services/node-permission.service'; `, + styleUrls: ['./user-icon-column.component.scss'], + encapsulation: ViewEncapsulation.None, host: { class: 'adf-user-icon-column adf-datatable-content-cell' } }) export class UserIconColumnComponent implements OnInit { diff --git a/lib/content-services/src/lib/permission-manager/components/user-icon-column/user-icon-column.theme.scss b/lib/content-services/src/lib/permission-manager/components/user-icon-column/user-icon-column.theme.scss deleted file mode 100644 index 6e99d09a1d..0000000000 --- a/lib/content-services/src/lib/permission-manager/components/user-icon-column/user-icon-column.theme.scss +++ /dev/null @@ -1,39 +0,0 @@ -@mixin adf-user-icon-column-theme($theme) { - $primary: map-get($theme, primary); - - .adf { - &-people-initial { - background: mat-color($primary); - border-radius: 50%; - display: flex; - justify-content: center; - align-items: center; - width: 40px; - height: 40px; - color: mat-color($primary, default-contrast) !important; - font-weight: bolder; - font-size: 18px; - text-transform: uppercase; - } - - &-group-icon { - height: 20px !important; - width: 20px !important; - background: mat-color($primary); - border-radius: 50%; - padding: 10px; - color: mat-color($primary, default-contrast) !important; - font-weight: bolder; - font-size: 20px; - } - - &-people-select-icon { - margin: 0 !important; - svg { - fill: mat-color($accent); - width: 40px; - height: 40px; - } - } - } -} diff --git a/lib/content-services/src/lib/permission-manager/components/user-name-column/user-name-column.component.scss b/lib/content-services/src/lib/permission-manager/components/user-name-column/user-name-column.component.scss new file mode 100644 index 0000000000..4570f061c8 --- /dev/null +++ b/lib/content-services/src/lib/permission-manager/components/user-name-column/user-name-column.component.scss @@ -0,0 +1,13 @@ +.adf-user { + &-name-column { + font-weight: 600; + font-size: 14px; + } + + &-email-column { + font-size: 14px; + letter-spacing: -0.2px; + line-height: 1.43; + color: var(--theme-foreground-text-color); + } +} diff --git a/lib/content-services/src/lib/permission-manager/components/user-name-column/user-name-column.component.ts b/lib/content-services/src/lib/permission-manager/components/user-name-column/user-name-column.component.ts index 5c02d009b8..4c98f5f539 100644 --- a/lib/content-services/src/lib/permission-manager/components/user-name-column/user-name-column.component.ts +++ b/lib/content-services/src/lib/permission-manager/components/user-name-column/user-name-column.component.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core'; import { BehaviorSubject } from 'rxjs'; import { Group, NodeEntry } from '@alfresco/js-api'; import { NodePermissionService } from '../../services/node-permission.service'; @@ -32,6 +32,8 @@ import { EcmUserModel } from '@alfresco/adf-core'; `, + styleUrls: ['./user-name-column.component.scss'], + encapsulation: ViewEncapsulation.None, host: { class: 'adf-user-name-column adf-datatable-content-cell adf-expand-cell-5 adf-ellipsis-cell' } }) export class UserNameColumnComponent implements OnInit { diff --git a/lib/content-services/src/lib/permission-manager/components/user-name-column/user-name-column.theme.scss b/lib/content-services/src/lib/permission-manager/components/user-name-column/user-name-column.theme.scss deleted file mode 100644 index bd0e0fa521..0000000000 --- a/lib/content-services/src/lib/permission-manager/components/user-name-column/user-name-column.theme.scss +++ /dev/null @@ -1,17 +0,0 @@ -@mixin user-name-column-theme($theme) { - $foreground: map-get($theme, foreground); - - .adf-user { - &-name-column { - font-weight: 600; - font-size: 14px; - } - - &-email-column { - font-size: 14px; - letter-spacing: -0.2px; - line-height: 1.43; - color: mat-color($foreground, text, 0.72); - } - } -} diff --git a/lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.scss b/lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.scss new file mode 100644 index 0000000000..d1e581d6a9 --- /dev/null +++ b/lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.scss @@ -0,0 +1,9 @@ +.mat-chip:focus { + color: var(--theme-accent-color-default-contrast); + background-color: var(--theme-accent-color); + + .mat-chip-remove { + color: var(--theme-accent-color-default-contrast); + opacity: 1; + } +} diff --git a/lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.ts b/lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.ts index 8cf846d967..d27be716aa 100644 --- a/lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.ts +++ b/lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.component.ts @@ -22,6 +22,7 @@ import { SearchFacetFiltersService } from '../../services/search-facet-filters.s @Component({ selector: 'adf-search-chip-list', templateUrl: './search-chip-list.component.html', + styleUrls: ['./search-chip-list.component.scss'], encapsulation: ViewEncapsulation.None, host: { class: 'adf-search-chip-list' } }) diff --git a/lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.theme.scss b/lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.theme.scss deleted file mode 100644 index 7cccd0a46b..0000000000 --- a/lib/content-services/src/lib/search/components/search-chip-list/search-chip-list.theme.scss +++ /dev/null @@ -1,13 +0,0 @@ -@mixin adf-search-chip-list-theme($theme) { - $accent: map-get($theme, accent); - - .mat-chip:focus { - color: mat-color($accent, default-contrast); - background-color: mat-color($accent); - - .mat-chip-remove { - color: mat-color($accent, default-contrast); - opacity: 1; - } - } -} diff --git a/lib/content-services/src/lib/search/components/search-control.component.scss b/lib/content-services/src/lib/search/components/search-control.component.scss new file mode 100644 index 0000000000..d5931cd488 --- /dev/null +++ b/lib/content-services/src/lib/search/components/search-control.component.scss @@ -0,0 +1,42 @@ +@import '~@angular/material/theming'; + +$mat-menu-overlay-min-width: 112px !default; // 56 * 2 +$mat-menu-overlay-max-width: 280px !default; // 56 * 5 + +.adf { + + &-search-result-autocomplete { + @include mat-overridable-elevation(2); + + min-width: $mat-menu-overlay-min-width; + max-width: $mat-menu-overlay-max-width; + overflow: auto; + -webkit-overflow-scrolling: touch; + + transform-origin: top left; + transform:translateX(-40px); + position: absolute; + max-height: 400px; + margin-left: 45px; + margin-top: -22px; + font-size: 15px; + z-index: 5; + color: var(--theme-text-fg-color); + background-color: var(--theme-card-bg-color); + border-radius: 2px; + + @media screen and (max-width: 959px) { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + } + + &-search-autocomplete-item { + + &:hover { + background-color: var(--theme-bg-hover-color); + opacity: 1; + } + } +} diff --git a/lib/content-services/src/lib/search/components/search-control.component.ts b/lib/content-services/src/lib/search/components/search-control.component.ts index 97f7862ff2..a9eb8d59e1 100644 --- a/lib/content-services/src/lib/search/components/search-control.component.ts +++ b/lib/content-services/src/lib/search/components/search-control.component.ts @@ -27,6 +27,7 @@ import { EmptySearchResultComponent } from './empty-search-result.component'; @Component({ selector: 'adf-search-control', templateUrl: './search-control.component.html', + styleUrls: ['./search-control.component.scss'], encapsulation: ViewEncapsulation.None, host: { class: 'adf-search-control' } }) diff --git a/lib/content-services/src/lib/search/components/search-control.theme.scss b/lib/content-services/src/lib/search/components/search-control.theme.scss deleted file mode 100644 index 648e298342..0000000000 --- a/lib/content-services/src/lib/search/components/search-control.theme.scss +++ /dev/null @@ -1,45 +0,0 @@ -@mixin adf-search-control-theme($theme) { - $background: map-get($theme, background); - $foreground: map-get($theme, foreground); - $mat-menu-border-radius: 2px !default; - $mat-menu-overlay-min-width: 112px !default; // 56 * 2 - $mat-menu-overlay-max-width: 280px !default; // 56 * 5 - - .adf { - - &-search-result-autocomplete { - @include mat-overridable-elevation(2); - - min-width: $mat-menu-overlay-min-width; - max-width: $mat-menu-overlay-max-width; - overflow: auto; - -webkit-overflow-scrolling: touch; - - transform-origin: top left; - transform:translateX(-40px); - position: absolute; - max-height: 400px; - margin-left: 45px; - margin-top: -22px; - font-size: 15px; - z-index: 5; - color: mat-color($foreground, text); - background-color: mat-color($background, card); - border-radius: $mat-menu-border-radius; - - @media screen and (max-width: 959px) { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - } - - &-search-autocomplete-item { - - &:hover { - background-color: mat-color($background, 'hover'); - opacity: 1; - } - } - } -} diff --git a/lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.scss b/lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.scss new file mode 100644 index 0000000000..06d1068e68 --- /dev/null +++ b/lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.scss @@ -0,0 +1,87 @@ +.adf-search-filter-facet { + .adf-checklist { + display: flex; + flex-direction: column; + max-height: 180px; + padding: 5px 0; + overflow-y: auto; + + .mat-checkbox-label { + text-overflow: ellipsis; + overflow: hidden; + width: 100%; + } + + .mat-checkbox-layout { + width: 100%; + } + + .adf-facet-label { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + + .mat-checkbox { + margin: 5px; + + &.mat-checkbox-checked .mat-checkbox-label { + font-weight: bold; + } + } + } + + .adf-facet-result-filter { + padding-bottom: 16px; + + .adf-facet-search-container { + border-radius: 6px; + background: var(--theme-background-color); + display: flex; + height: 32px; + + .adf-facet-search-icon { + width: 27px; + margin-top: -4px; + .mat-icon { + font-size: 15px; + } + } + + .adf-facet-search-field { + padding: 2px; + flex: 1; + margin-top: -16px; + font-size: 14px; + line-height: 24px; + letter-spacing: 0.25px; + + .mat-form-field-underline { + display: none; + } + + .mat-form-field-suffix { + padding-right: 1px; + } + } + } + } + + .adf-facet-buttons { + text-align: right; + + .mat-button { + text-transform: uppercase; + } + + &--topSpace { + padding-top: 15px; + } + } + + .mat-checkbox-label, + .mat-radio-label { + color: var(--theme-text-color); + } + +} diff --git a/lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.ts b/lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.ts index 6aa8460eee..419d64c38a 100644 --- a/lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.ts +++ b/lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.ts @@ -29,6 +29,7 @@ import { Subject } from 'rxjs'; @Component({ selector: 'adf-search-facet-field', templateUrl: './search-facet-field.component.html', + styleUrls: ['./search-facet-field.component.scss'], encapsulation: ViewEncapsulation.None }) export class SearchFacetFieldComponent implements FacetWidget { diff --git a/lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.theme.scss b/lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.theme.scss deleted file mode 100644 index b418493278..0000000000 --- a/lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.theme.scss +++ /dev/null @@ -1,92 +0,0 @@ -@mixin adf-search-filter-field-theme($theme) { - $foreground: map-get($theme, foreground); - $background: map-get($theme, background); - - .adf-search-filter-facet { - .adf-checklist { - display: flex; - flex-direction: column; - max-height: 180px; - padding: 5px 0; - overflow-y: auto; - - .mat-checkbox-label { - text-overflow: ellipsis; - overflow: hidden; - width: 100%; - } - - .mat-checkbox-layout { - width: 100%; - } - - .adf-facet-label { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } - - .mat-checkbox { - margin: 5px; - - &.mat-checkbox-checked .mat-checkbox-label { - font-weight: bold; - } - } - } - - .adf-facet-result-filter { - padding-bottom: 16px; - - .adf-facet-search-container { - border-radius: 6px; - background: mat-color($background, background); - display: flex; - height: 32px; - - .adf-facet-search-icon { - width: 27px; - margin-top: -4px; - .mat-icon { - font-size: 15px; - } - } - - .adf-facet-search-field { - padding: 2px; - flex: 1; - margin-top: -16px; - font-size: 14px; - line-height: 24px; - letter-spacing: 0.25px; - - .mat-form-field-underline { - display: none; - } - - .mat-form-field-suffix { - padding-right: 1px; - } - } - } - } - - .adf-facet-buttons { - text-align: right; - - .mat-button { - text-transform: uppercase; - } - - &--topSpace { - padding-top: 15px; - } - } - - .mat-checkbox-label, - .mat-radio-label { - color: mat-color($foreground, text, 0.54); - } - - } -} diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss new file mode 100644 index 0000000000..8f3036a0cf --- /dev/null +++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss @@ -0,0 +1,58 @@ +@import '~@angular/material/theming'; + +.adf-search-filter-chip { + + &.mat-chip { + border: 2px solid transparent; + transition : border 500ms ease-in-out; + max-width: 320px; + text-overflow: ellipsis; + overflow: hidden; + background: var(--theme-unselected-chip-bg-color); + + &:focus { + color: unset; + } + + &.mat-standard-chip::after { + background: var(--theme-unselected-chip-bg-color); + color: unset; + } + + &.mat-chip-list-wrapper { + margin: 4px 6px; + } + } + + &.adf-search-toggle-chip { + background: var(--theme-card-bg-color); + border: 2px solid var(--theme-accent-color); + + &.mat-chip::after { + background: unset; + } + } + + .adf-search-filter-placeholder { + flex: 1 1 auto; + white-space: nowrap; + color: var(--theme-disabled-text-color); + } + + .adf-search-filter-ellipsis { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .mat-icon { + padding-top: 5px; + padding-left: 5px; + } + + &-menu + * .cdk-overlay-pane .mat-menu-panel { + min-width: 320px; + border-radius: 12px; + @include mat-elevation(2); + } +} diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.ts b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.ts index 3ccd9d3c81..23c09b316a 100644 --- a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.ts +++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.ts @@ -23,6 +23,7 @@ import { SearchQueryBuilderService } from '../../services/search-query-builder.s @Component({ selector: 'adf-search-filter-chips', templateUrl: './search-filter-chips.component.html', + styleUrls: ['./search-filter-chips.component.scss'], encapsulation: ViewEncapsulation.None }) export class SearchFilterChipsComponent { diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.theme.scss b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.theme.scss deleted file mode 100644 index 3f92fd20a6..0000000000 --- a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.theme.scss +++ /dev/null @@ -1,66 +0,0 @@ -@mixin adf-search-filter-chips-theme($theme) { - $accent: map-get($theme, accent); - $background: map-get($theme, background); - $foreground: map-get($theme, foreground); - $unselected-background: mat-color($background, unselected-chip); - $unselected-foreground: mat-color($foreground, text); - $selected-chip-background: mat-color($background, card); - $chip-placeholder: mat-color($foreground, disabled-text); - - .adf-search-filter-chip { - - &.mat-chip { - border: 2px solid transparent; - transition : border 500ms ease-in-out; - max-width: 320px; - text-overflow: ellipsis; - overflow: hidden; - background: $unselected-background; - - &:focus { - color: unset; - } - - &.mat-standard-chip::after { - background: $unselected-background; - color: unset; - } - - &.mat-chip-list-wrapper { - margin: 4px 6px; - } - } - - &.adf-search-toggle-chip { - background: $selected-chip-background; - border: 2px solid mat-color($accent); - - &.mat-chip::after { - background: unset; - } - } - - .adf-search-filter-placeholder { - flex: 1 1 auto; - white-space: nowrap; - color: $chip-placeholder; - } - - .adf-search-filter-ellipsis { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - .mat-icon { - padding-top: 5px; - padding-left: 5px; - } - - &-menu + * .cdk-overlay-pane .mat-menu-panel { - min-width: 320px; - border-radius: 12px; - @include mat-elevation(2); - } - } -} diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.scss b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.scss new file mode 100644 index 0000000000..cc84374fa3 --- /dev/null +++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.scss @@ -0,0 +1,34 @@ +.adf-search-filter-menu-card { + color: var(--theme-text-fg-color); + background: var(--theme-card-bg-color); + + .adf-search-filter-title { + padding: 16px 12px; + height: 32px; + flex: 1 1 auto; + font-size: 14px; + letter-spacing: 0.15px; + line-height: 24px; + font-weight: bold; + font-style: inherit; + + &-action { + float: right; + } + } + + .adf-search-filter-content { + padding: 16px 12px; + overflow: auto; + } + + .adf-search-filter-actions { + padding: 16px 12px; + display: flex; + justify-content: space-between; + + .adf-search-action-button { + border-radius: 6px; + } + } +} diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.ts b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.ts index 42874e2d3f..fc78728b65 100644 --- a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.ts +++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.ts @@ -15,11 +15,13 @@ * limitations under the License. */ -import { Component, EventEmitter, Output } from '@angular/core'; +import { Component, EventEmitter, Output, ViewEncapsulation } from '@angular/core'; @Component({ selector: 'adf-search-filter-menu-card', - templateUrl: './search-filter-menu-card.component.html' + templateUrl: './search-filter-menu-card.component.html', + styleUrls: ['./search-filter-menu-card.component.scss'], + encapsulation: ViewEncapsulation.None }) export class SearchFilterMenuCardComponent { @Output() diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.theme.scss b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.theme.scss deleted file mode 100644 index 5a8f0c2be1..0000000000 --- a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.theme.scss +++ /dev/null @@ -1,39 +0,0 @@ -@mixin adf-search-filter-menu-card($theme) { - $foreground: map-get($theme, foreground); - $background: map-get($theme, background); - - .adf-search-filter-menu-card { - color: mat-color($foreground, text); - background: mat-color($background, card); - - .adf-search-filter-title { - padding: 16px 12px; - height: 32px; - flex: 1 1 auto; - font-size: 14px; - letter-spacing: 0.15px; - line-height: 24px; - font-weight: bold; - font-style: inherit; - - &-action { - float: right; - } - } - - .adf-search-filter-content { - padding: 16px 12px; - overflow: auto; - } - - .adf-search-filter-actions { - padding: 16px 12px; - display: flex; - justify-content: space-between; - - .adf-search-action-button { - border-radius: 6px; - } - } - } -} diff --git a/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.scss b/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.scss new file mode 100644 index 0000000000..40cf066293 --- /dev/null +++ b/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.scss @@ -0,0 +1,73 @@ +.adf-filter { + + &-button { + margin-left: -7px !important; + + .adf-icon { + opacity: 1; + color: var(--theme-icon-fg-color); + + &-active { + color: var(--theme-primary-color); + } + + .mat-badge-active { + border: 2px solid var(--theme-card-bg-color) !important; + } + } + + .mat-icon { + height: 18px; + width: 18px; + } + + .mat-badge-content { + width: 10px; + height: 10px; + top: -3px !important; + right: -6px !important; + } + } + + &-container { + display: flex; + flex-direction: column; + padding: 15px 15px 10px; + color: var(--theme-text-bold-color) !important; + + .adf-facet-buttons { + display: none; + } + + .adf-search-check-list { + padding: 5px 0; + } + + input { + background: 2px solid var(--theme-card-bg-color) !important; + } + } + + &-title { + font-size: 1.1em; + padding-bottom: 5px; + color: var(--theme-text-bold-color); + } + + &-actions { + display: flex; + justify-content: flex-end; + padding: 15px; + background-color: var(--theme-hover-bg-color); + + > button { + font-size: 0.9em; + color: var(--theme-text-bold-color); + } + } +} + +.mat-menu-panel.adf-filter-menu .mat-menu-content { + min-width: 260px; + padding: 0; +} diff --git a/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.ts b/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.ts index 1794ff179d..02318992cf 100644 --- a/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.ts +++ b/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.ts @@ -39,6 +39,7 @@ import { MatMenuTrigger } from '@angular/material/menu'; @Component({ selector: 'adf-search-filter-container', templateUrl: './search-filter-container.component.html', + styleUrls: ['./search-filter-container.component.scss'], encapsulation: ViewEncapsulation.None }) export class SearchFilterContainerComponent implements OnInit, OnDestroy { diff --git a/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.theme.scss b/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.theme.scss deleted file mode 100644 index 8594e38e00..0000000000 --- a/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.theme.scss +++ /dev/null @@ -1,79 +0,0 @@ -@mixin adf-filter-menu-theme($theme) { - $primary: map-get($theme, primary); - $foreground: map-get($theme, foreground); - $background: map-get($theme, background); - - .adf-filter { - - &-button { - margin-left: -7px !important; - - .adf-icon { - opacity: 1; - color: mat-color($foreground, icon); - - &-active { - color: mat-color($primary); - } - - .mat-badge-active { - border: 2px solid mat-color($background, card) !important; - } - } - - .mat-icon { - height: 18px; - width: 18px; - } - - .mat-badge-content { - width: 10px; - height: 10px; - top: -3px !important; - right: -6px !important; - } - } - - &-container { - display: flex; - flex-direction: column; - padding: 15px 15px 10px; - color: mat-color($foreground, text, 0.87) !important; - - .adf-facet-buttons { - display: none; - } - - .adf-search-check-list { - padding: 5px 0; - } - - input { - background: 2px solid mat-color($background, card) !important; - } - } - - &-title { - font-size: 1.1em; - padding-bottom: 5px; - color: mat-color($foreground, text, 0.87); - } - - &-actions { - display: flex; - justify-content: flex-end; - padding: 15px; - background-color: mat-color($background, hover); - - > button { - font-size: 0.9em; - color: mat-color($foreground, text, 0.87); - } - } - } - - .mat-menu-panel.adf-filter-menu .mat-menu-content { - min-width: 260px; - padding: 0; - } -} diff --git a/lib/content-services/src/lib/search/components/search-filter/search-filter.component.scss b/lib/content-services/src/lib/search/components/search-filter/search-filter.component.scss new file mode 100644 index 0000000000..bacffe7508 --- /dev/null +++ b/lib/content-services/src/lib/search/components/search-filter/search-filter.component.scss @@ -0,0 +1,11 @@ +.adf-search-filter { + .mat-expansion-panel-header-title { + font-size: 14px; + color: var(--theme-text-bold-color); + } + + .mat-checkbox-label, + .mat-radio-label { + color: var(--theme-text-color); + } +} diff --git a/lib/content-services/src/lib/search/components/search-filter/search-filter.component.ts b/lib/content-services/src/lib/search/components/search-filter/search-filter.component.ts index 840f22d83e..01bdda25fc 100644 --- a/lib/content-services/src/lib/search/components/search-filter/search-filter.component.ts +++ b/lib/content-services/src/lib/search/components/search-filter/search-filter.component.ts @@ -25,6 +25,7 @@ import { SearchFacetFiltersService } from '../../services/search-facet-filters.s @Component({ selector: 'adf-search-filter', templateUrl: './search-filter.component.html', + styleUrls: ['./search-filter.component.scss'], encapsulation: ViewEncapsulation.None, host: { class: 'adf-search-filter' } }) diff --git a/lib/content-services/src/lib/search/components/search-filter/search-filter.theme.scss b/lib/content-services/src/lib/search/components/search-filter/search-filter.theme.scss deleted file mode 100644 index f08bd8e1e8..0000000000 --- a/lib/content-services/src/lib/search/components/search-filter/search-filter.theme.scss +++ /dev/null @@ -1,15 +0,0 @@ -@mixin adf-search-filter-theme($theme) { - $foreground: map-get($theme, foreground); - - .adf-search-filter { - .mat-expansion-panel-header-title { - font-size: 14px; - color: mat-color($foreground, text, 0.87); - } - - .mat-checkbox-label, - .mat-radio-label { - color: mat-color($foreground, text, 0.54); - } - } -} diff --git a/lib/content-services/src/lib/search/components/search-form/search-form.component.scss b/lib/content-services/src/lib/search/components/search-form/search-form.component.scss new file mode 100644 index 0000000000..c21dd64efc --- /dev/null +++ b/lib/content-services/src/lib/search/components/search-form/search-form.component.scss @@ -0,0 +1,47 @@ +@import '~@angular/material/theming'; + +.adf-search-form { + &.mat-button { + height: 35px; + max-width: 190px; + min-width: 190px; + align-content: center; + overflow: hidden; + + .mat-button-wrapper { + display: flex; + align-items: center; + } + } + + &-title { + max-width: 120px; + min-width: 120px; + font-weight: bold; + font-size: 14px; + line-height: 24px; + padding-right: 12px; + text-overflow: ellipsis; + overflow: hidden; + text-align: left; + } + + &-icon { + border: 2px solid transparent; + border-radius: 6px; + transition: border 500ms ease-out; + } + + &-icon-selected { + border-color: var(--theme-accent-color); + } + + &-menu + * .mat-menu-panel { + @include mat-elevation(2); + border-radius: 6px; + + .mat-menu-content { + padding: 0; + } + } +} diff --git a/lib/content-services/src/lib/search/components/search-form/search-form.component.ts b/lib/content-services/src/lib/search/components/search-form/search-form.component.ts index 8402722e0f..61c21beeee 100644 --- a/lib/content-services/src/lib/search/components/search-form/search-form.component.ts +++ b/lib/content-services/src/lib/search/components/search-form/search-form.component.ts @@ -23,6 +23,7 @@ import { SEARCH_QUERY_SERVICE_TOKEN } from '../../search-query-service.token'; @Component({ selector: 'adf-search-form', templateUrl: './search-form.component.html', + styleUrls: ['./search-form.component.scss'], encapsulation: ViewEncapsulation.None }) export class SearchFormComponent { diff --git a/lib/content-services/src/lib/search/components/search-form/search-form.theme.scss b/lib/content-services/src/lib/search/components/search-form/search-form.theme.scss deleted file mode 100644 index 6751ce1f57..0000000000 --- a/lib/content-services/src/lib/search/components/search-form/search-form.theme.scss +++ /dev/null @@ -1,49 +0,0 @@ -@mixin adf-search-forms-theme($theme) { - $accent: map-get($theme, accent); - - .adf-search-form { - &.mat-button { - height: 35px; - max-width: 190px; - min-width: 190px; - align-content: center; - overflow: hidden; - - .mat-button-wrapper { - display: flex; - align-items: center; - } - } - - &-title { - max-width: 120px; - min-width: 120px; - font-weight: bold; - font-size: 14px; - line-height: 24px; - padding-right: 12px; - text-overflow: ellipsis; - overflow: hidden; - text-align: left; - } - - &-icon { - border: 2px solid transparent; - border-radius: 6px; - transition: border 500ms ease-out; - } - - &-icon-selected { - border-color: mat-color($accent); - } - - &-menu + * .mat-menu-panel { - @include mat-elevation(2); - border-radius: 6px; - - .mat-menu-content { - padding: 0; - } - } - } -} diff --git a/lib/content-services/src/lib/search/components/search-sorting-picker/search-sorting-picker.component.scss b/lib/content-services/src/lib/search/components/search-sorting-picker/search-sorting-picker.component.scss new file mode 100644 index 0000000000..5fea2fddcf --- /dev/null +++ b/lib/content-services/src/lib/search/components/search-sorting-picker/search-sorting-picker.component.scss @@ -0,0 +1,5 @@ +.adf-search-sorting-picker { + .mat-icon-button { + color: var(--theme-text-color); + } +} diff --git a/lib/content-services/src/lib/search/components/search-sorting-picker/search-sorting-picker.component.ts b/lib/content-services/src/lib/search/components/search-sorting-picker/search-sorting-picker.component.ts index b9d7dea390..1b573388a6 100644 --- a/lib/content-services/src/lib/search/components/search-sorting-picker/search-sorting-picker.component.ts +++ b/lib/content-services/src/lib/search/components/search-sorting-picker/search-sorting-picker.component.ts @@ -23,6 +23,7 @@ import { SEARCH_QUERY_SERVICE_TOKEN } from '../../search-query-service.token'; @Component({ selector: 'adf-search-sorting-picker', templateUrl: './search-sorting-picker.component.html', + styleUrls: ['./search-sorting-picker.component.scss'], encapsulation: ViewEncapsulation.None, host: { class: 'adf-search-sorting-picker' } }) diff --git a/lib/content-services/src/lib/search/components/search-sorting-picker/search-sorting-picker.theme.scss b/lib/content-services/src/lib/search/components/search-sorting-picker/search-sorting-picker.theme.scss deleted file mode 100644 index f83b1b64e2..0000000000 --- a/lib/content-services/src/lib/search/components/search-sorting-picker/search-sorting-picker.theme.scss +++ /dev/null @@ -1,9 +0,0 @@ -@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/lib/content-services/src/lib/styles/_index.scss b/lib/content-services/src/lib/styles/_index.scss deleted file mode 100644 index 8a1da56289..0000000000 --- a/lib/content-services/src/lib/styles/_index.scss +++ /dev/null @@ -1,67 +0,0 @@ -@import '../breadcrumb/breadcrumb.theme'; -@import '../breadcrumb/dropdown-breadcrumb.theme'; -@import '../content-node-selector/content-node-selector-panel.theme'; -@import '../content-node-selector/name-location-cell/name-location-cell.theme'; -@import '../document-list/components/document-list.theme'; - -@import '../upload/components/file-uploading-list-row.theme'; -@import '../upload/components/file-uploading-dialog.theme'; -@import '../upload/components/upload-drag-area.theme'; - -@import '../search/components/search-control.theme'; -@import '../search/components/search-sorting-picker/search-sorting-picker.theme'; -@import '../search/components/search-filter/search-filter.theme'; -@import '../search/components/search-chip-list/search-chip-list.theme'; -@import '../search/components/search-filter-container/search-filter-container.theme'; - -@import '../dialogs/folder.dialog.theme'; - -@import '../content-node-selector/content-node-selector.theme'; -@import '../content-node-share/content-node-share.dialog.theme'; -@import '../content-metadata/content-metadata.theme'; -@import '../permission-manager/components/permission-list/permission-list.theme'; -@import '../permission-manager/components/add-permission/add-permission.theme'; -@import '../permission-manager/components/add-permission/add-permission-dialog.theme'; -@import '../permission-manager/components/add-permission/add-permission-panel.theme'; -@import '../version-manager/version-comparison.theme'; -@import '../content-type/content-type-dialog.theme'; -@import '../aspect-list/aspect-list.theme'; -@import '../permission-manager/components/user-icon-column/user-icon-column.theme'; -@import '../permission-manager/components/user-name-column/user-name-column.theme'; -@import '../search/components/search-filter-chips/search-filter-chips.theme'; -@import '../search/components/search-facet-field/search-facet-field.theme'; -@import '../search/components/search-form/search-form.theme'; -@import '../search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.theme'; - -@mixin adf-content-services-theme($theme) { - @include adf-breadcrumb-theme($theme); - @include adf-breadcrumb-dropdown-theme($theme); - @include adf-content-node-selector-theme($theme); - @include adf-content-node-share-theme($theme); - @include adf-name-location-cell-theme($theme); - @include adf-document-list-theme($theme) ; - @include adf-file-uploading-row-theme($theme); - @include adf-upload-dialog-theme($theme); - @include adf-upload-drag-area-theme($theme); - @include adf-search-control-theme($theme); - @include adf-search-sorting-picker-theme($theme); - @include adf-filter-menu-theme($theme); - @include adf-dialog-theme($theme); - @include adf-content-node-selector-dialog-theme($theme); - @include adf-content-metadata-module-theme($theme); - @include adf-permission-list-theme($theme); - @include adf-user-icon-column-theme($theme); - @include user-name-column-theme($theme); - @include adf-add-permission-theme($theme); - @include adf-add-permission-dialog-theme($theme); - @include adf-add-permission-panel-theme($theme); - @include adf-search-filter-theme($theme); - @include adf-search-chip-list-theme($theme); - @include adf-version-comparison-theme($theme); - @include adf-content-type-dialog-theme($theme); - @include adf-aspect-list-theme($theme); - @include adf-search-filter-chips-theme($theme); - @include adf-search-filter-field-theme($theme); - @include adf-search-forms-theme($theme); - @include adf-search-filter-menu-card($theme); -} diff --git a/lib/content-services/src/lib/tag/tag-actions.component.html b/lib/content-services/src/lib/tag/tag-actions.component.html index a35772a505..3f6c41f004 100644 --- a/lib/content-services/src/lib/tag/tag-actions.component.html +++ b/lib/content-services/src/lib/tag/tag-actions.component.html @@ -1,9 +1,7 @@
-
- {{currentEntry.entry.tag}} -
+
{{currentEntry.entry.tag}}
delete
@@ -12,19 +10,25 @@ - + {{errorMsg}} - + diff --git a/lib/content-services/src/lib/tag/tag-actions.component.scss b/lib/content-services/src/lib/tag/tag-actions.component.scss index 7e78efe32a..46a8d35668 100644 --- a/lib/content-services/src/lib/tag/tag-actions.component.scss +++ b/lib/content-services/src/lib/tag/tag-actions.component.scss @@ -1,18 +1,20 @@ -.adf-full-width { - width: 100%; -} +.adf-tag-node-actions-list { + .adf-full-width { + width: 100%; + } -.adf-tag-actions-delete-icon { - float: right; - cursor: pointer; -} + .adf-tag-actions-delete-icon { + float: right; + cursor: pointer; + } -.adf-tag-actions-delete-text { - font-size: 16px; - float: left; -} + .adf-tag-actions-delete-text { + font-size: 16px; + float: left; + } -.adf-tag-actions-container { - padding: 8px 0; - height: 20px; + .adf-tag-actions-container { + padding: 8px 0; + height: 20px; + } } diff --git a/lib/content-services/src/lib/tag/tag-actions.component.ts b/lib/content-services/src/lib/tag/tag-actions.component.ts index 0b906201f2..97eedd3097 100644 --- a/lib/content-services/src/lib/tag/tag-actions.component.ts +++ b/lib/content-services/src/lib/tag/tag-actions.component.ts @@ -31,7 +31,8 @@ import { takeUntil } from 'rxjs/operators'; selector: 'adf-tag-node-actions-list', templateUrl: './tag-actions.component.html', styleUrls: ['./tag-actions.component.scss'], - encapsulation: ViewEncapsulation.None + encapsulation: ViewEncapsulation.None, + host: { class: 'adf-tag-node-actions-list' } }) export class TagActionsComponent implements OnChanges, OnInit, OnDestroy { diff --git a/lib/content-services/src/lib/tag/tag-list.component.html b/lib/content-services/src/lib/tag/tag-list.component.html index 942cc215e1..9c9d678ca9 100644 --- a/lib/content-services/src/lib/tag/tag-list.component.html +++ b/lib/content-services/src/lib/tag/tag-list.component.html @@ -1,6 +1,6 @@
- + {{currentEntry.entry.tag}}
diff --git a/lib/content-services/src/lib/tag/tag-list.component.scss b/lib/content-services/src/lib/tag/tag-list.component.scss index a0164cf897..679e5c4226 100644 --- a/lib/content-services/src/lib/tag/tag-list.component.scss +++ b/lib/content-services/src/lib/tag/tag-list.component.scss @@ -1,20 +1,31 @@ -.adf-tag-chips-list { - display: flex; - flex-direction: column; - - & div { +.adf-tag-list { + .adf-tag-chips-list { display: flex; flex-direction: column; + + & div { + display: flex; + flex-direction: column; + } + + .adf-list-tag { + display: block; + font-size: 16px; + + .mat-chip { + color: var(--theme-primary-color-default-contrast); + background-color: var(--theme-primary-color); + + .mat-icon { + color: var(--theme-primary-color-default-contrast); + } + } + } + } + + .adf-tag-list-controls { + margin-top: 30px; + display: flex; + justify-content: center; } } - -.adf-list-tag { - display: block; - font-size: 16px; -} - -.adf-tag-list-controls { - margin-top: 30px; - display: flex; - justify-content: center; -} diff --git a/lib/content-services/src/lib/tag/tag-list.component.ts b/lib/content-services/src/lib/tag/tag-list.component.ts index 0132acff1e..a270ec1793 100644 --- a/lib/content-services/src/lib/tag/tag-list.component.ts +++ b/lib/content-services/src/lib/tag/tag-list.component.ts @@ -29,7 +29,8 @@ import { TagEntry } from '@alfresco/js-api'; selector: 'adf-tag-list', templateUrl: './tag-list.component.html', styleUrls: ['./tag-list.component.scss'], - encapsulation: ViewEncapsulation.None + encapsulation: ViewEncapsulation.None, + host: { class: 'adf-tag-list' } }) export class TagListComponent implements OnInit, OnDestroy { diff --git a/lib/content-services/src/lib/tag/tag-node-list.component.html b/lib/content-services/src/lib/tag/tag-node-list.component.html index 4e9e9019c6..641115cb71 100644 --- a/lib/content-services/src/lib/tag/tag-node-list.component.html +++ b/lib/content-services/src/lib/tag/tag-node-list.component.html @@ -1,9 +1,9 @@ - {{currentEntry.entry.tag}} cancel + class="adf-tag-chips-delete-icon" matChipRemove>cancel diff --git a/lib/content-services/src/lib/tag/tag-node-list.component.scss b/lib/content-services/src/lib/tag/tag-node-list.component.scss index 04879b50ab..58f6faf0a6 100644 --- a/lib/content-services/src/lib/tag/tag-node-list.component.scss +++ b/lib/content-services/src/lib/tag/tag-node-list.component.scss @@ -1,20 +1,28 @@ -.adf-tag-chips-delete { - overflow: visible; - cursor: pointer; - height: 17px; - width: 20px; - float: right; - border: 0; - background: none; - padding: 0; - margin: -1px 0 0 10px; -} +.adf-tag-node-list { + .adf-tag-chips { + color: var(--theme-primary-color-default-contrast); + background-color: var(--theme-primary-color); + } -.adf-tag-chips-delete-icon { - font-size: 20px; - background-repeat: no-repeat; - display: inline-block; - fill: currentColor; - height: 20px; - width: 20px; + .adf-tag-chips-delete { + overflow: visible; + cursor: pointer; + height: 17px; + width: 20px; + float: right; + border: 0; + background: none; + padding: 0; + margin: -1px 0 0 10px; + } + + .adf-tag-chips-delete-icon { + font-size: 20px; + background-repeat: no-repeat; + display: inline-block; + fill: currentColor; + height: 20px; + width: 20px; + color: var(--theme-primary-color-default-contrast) !important; + } } diff --git a/lib/content-services/src/lib/tag/tag-node-list.component.ts b/lib/content-services/src/lib/tag/tag-node-list.component.ts index ea20fe5917..4571dd48a0 100644 --- a/lib/content-services/src/lib/tag/tag-node-list.component.ts +++ b/lib/content-services/src/lib/tag/tag-node-list.component.ts @@ -30,7 +30,8 @@ import { takeUntil } from 'rxjs/operators'; selector: 'adf-tag-node-list', templateUrl: './tag-node-list.component.html', styleUrls: ['./tag-node-list.component.scss'], - encapsulation: ViewEncapsulation.None + encapsulation: ViewEncapsulation.None, + host: { class: 'adf-tag-node-list' } }) export class TagNodeListComponent implements OnChanges, OnDestroy, OnInit { /** The identifier of a node. */ diff --git a/lib/content-services/src/lib/upload/components/file-uploading-dialog.component.scss b/lib/content-services/src/lib/upload/components/file-uploading-dialog.component.scss new file mode 100644 index 0000000000..1193ddc75e --- /dev/null +++ b/lib/content-services/src/lib/upload/components/file-uploading-dialog.component.scss @@ -0,0 +1,81 @@ +.adf-upload-dialog { + background: var(--theme-dialog-bg-color); + color: var(--theme-text-color); + position: fixed; + bottom: 20px; + width: 40%; + box-shadow: 1px 5px 15px #888888; + z-index: 999; + + &--padding { + padding: 1em; + } + + &--hide { + display: none !important; + } + + &--minimized { + width: 20%; + + .adf-upload-dialog__content { + display: none; + } + } + + &__header { + padding: 1em; + display: flex; + align-items: center; + + button { + min-width: 0; + padding: 0; + line-height: 0; + color: var(--theme-text-color) !important; + } + } + + &__title { + margin-left: 0.5em; + flex: 1 1 auto; + } + + &__info { + padding: 0 1em 1em; + } + + &__content { + overflow: auto; + max-height: 194px; + border-top: 1px solid var(--adf-upload-border-color); + border-bottom: 1px solid var(--adf-upload-border-color); + } + + &__confirmation { + padding: 0 0.5em; + } + + &__confirmation--title { + font-size: 16px; + line-height: 1.5; + letter-spacing: -0.4px; + color: var(--theme-text-bold-color); + } + + &__confirmation--text { + margin-bottom: 0; + } + + &__actions { + display: flex; + justify-content: flex-end; + padding: 1em; + + & > button { + text-transform: uppercase; + } + } +} +[adfUploadDialogLeft] .adf-upload-dialog { left: 25px; } +[adfUploadDialogRight] .adf-upload-dialog { right: 25px;} diff --git a/lib/content-services/src/lib/upload/components/file-uploading-dialog.component.ts b/lib/content-services/src/lib/upload/components/file-uploading-dialog.component.ts index 228277c22f..ce2db4d9d3 100644 --- a/lib/content-services/src/lib/upload/components/file-uploading-dialog.component.ts +++ b/lib/content-services/src/lib/upload/components/file-uploading-dialog.component.ts @@ -16,7 +16,7 @@ */ import { FileModel, FileUploadStatus, UploadService, UserPreferencesService, FileUploadDeleteEvent, FileUploadCompleteEvent } from '@alfresco/adf-core'; -import { ChangeDetectorRef, Component, Input, Output, EventEmitter, OnDestroy, OnInit, ViewChild, HostBinding, ElementRef } from '@angular/core'; +import { ChangeDetectorRef, Component, Input, Output, EventEmitter, OnDestroy, OnInit, ViewChild, HostBinding, ElementRef, ViewEncapsulation } from '@angular/core'; import { Subscription, merge, Subject } from 'rxjs'; import { FileUploadingListComponent } from './file-uploading-list.component'; import { Direction } from '@angular/cdk/bidi'; @@ -24,7 +24,9 @@ import { takeUntil, delay } from 'rxjs/operators'; @Component({ selector: 'adf-file-uploading-dialog', - templateUrl: './file-uploading-dialog.component.html' + templateUrl: './file-uploading-dialog.component.html', + styleUrls: ['./file-uploading-dialog.component.scss'], + encapsulation: ViewEncapsulation.None }) export class FileUploadingDialogComponent implements OnInit, OnDestroy { /** Dialog direction. Can be 'ltr' or 'rtl. */ diff --git a/lib/content-services/src/lib/upload/components/file-uploading-dialog.theme.scss b/lib/content-services/src/lib/upload/components/file-uploading-dialog.theme.scss deleted file mode 100644 index a9c4a17a7d..0000000000 --- a/lib/content-services/src/lib/upload/components/file-uploading-dialog.theme.scss +++ /dev/null @@ -1,86 +0,0 @@ -@mixin adf-upload-dialog-theme($theme) { - $foreground: map-get($theme, foreground); - $background: map-get($theme, background); - - .adf-upload-dialog { - background: mat-color($background, dialog); - color: mat-color($foreground, text, 0.54); - position: fixed; - bottom: 20px; - width: 40%; - box-shadow: 1px 5px 15px #888888; - z-index: 999; - - &--padding { - padding: 1em; - } - - &--hide { - display: none !important; - } - - &--minimized { - width: 20%; - - .adf-upload-dialog__content { - display: none; - } - } - - &__header { - padding: 1em; - display: flex; - align-items: center; - - button { - min-width: 0; - padding: 0; - line-height: 0; - color: mat-color($foreground, text, 0.54) !important; - } - } - - &__title { - margin-left: 0.5em; - flex: 1 1 auto; - } - - &__info { - padding: 0 1em 1em; - } - - &__content { - overflow: auto; - max-height: 194px; - border-top: 1px solid mat-color($foreground, text, 0.14); - border-bottom: 1px solid mat-color($foreground, text, 0.14); - } - - &__confirmation { - padding: 0 0.5em; - } - - &__confirmation--title { - font-size: 16px; - line-height: 1.5; - letter-spacing: -0.4px; - color: $black-87-opacity; - } - - &__confirmation--text { - margin-bottom: 0; - } - - &__actions { - display: flex; - justify-content: flex-end; - padding: 1em; - - & > button { - text-transform: uppercase; - } - } - } - [adfUploadDialogLeft] .adf-upload-dialog { left: 25px; } - [adfUploadDialogRight] .adf-upload-dialog { right: 25px;} -} diff --git a/lib/content-services/src/lib/upload/components/file-uploading-list-row.component.scss b/lib/content-services/src/lib/upload/components/file-uploading-list-row.component.scss new file mode 100644 index 0000000000..bfe8745a18 --- /dev/null +++ b/lib/content-services/src/lib/upload/components/file-uploading-list-row.component.scss @@ -0,0 +1,58 @@ +$file-uploading-row-hover-color: #eeeeee !default; + +adf-file-uploading-list-row:not(:first-child) { + display: block; + border-top: 1px solid var(--adf-upload-border-color); +} + +.adf-file-uploading-row { + display: flex; + align-items: center; + padding: 0.3em 1em; + cursor: default; + + &:hover { + background: $file-uploading-row-hover-color; + } + + &__name { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + flex: 1 1 auto; + padding: 0 1em 0 0.5em; + } + + &__group, &__block, &__file-version { + min-width: 100px; + display: flex !important; + justify-content: flex-end; + line-height: 40px; + height: 40px; + align-items: center; + } + + &__group--toggle { + cursor: pointer; + display:flex; + align-items: center; + height: 40px; + line-height: 40px; + } + + &__status--done { + color: var(--theme-accent-color); + } + + &__status--error { + color: var(--theme-warn-color); + } + + &__action--cancel { + color: var(--theme-warn-color); + } + + &__action--remove { + color: var(--theme-warn-color); + } +} diff --git a/lib/content-services/src/lib/upload/components/file-uploading-list-row.component.ts b/lib/content-services/src/lib/upload/components/file-uploading-list-row.component.ts index bfd8d004ec..017152ed31 100644 --- a/lib/content-services/src/lib/upload/components/file-uploading-list-row.component.ts +++ b/lib/content-services/src/lib/upload/components/file-uploading-list-row.component.ts @@ -16,11 +16,13 @@ */ import { FileModel, FileUploadStatus } from '@alfresco/adf-core'; -import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core'; @Component({ selector: 'adf-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 FileUploadingListRowComponent { @Input() diff --git a/lib/content-services/src/lib/upload/components/file-uploading-list-row.theme.scss b/lib/content-services/src/lib/upload/components/file-uploading-list-row.theme.scss deleted file mode 100644 index fdf44a2bdd..0000000000 --- a/lib/content-services/src/lib/upload/components/file-uploading-list-row.theme.scss +++ /dev/null @@ -1,66 +0,0 @@ -@mixin adf-file-uploading-row-theme($theme) { - $background: map-get($theme, background); - $foreground: map-get($theme, foreground); - $primary: map-get($theme, primary); - $accent: map-get($theme, accent); - $warn: map-get($theme, warn); - - $file-uploading-row-hover-color: #eeeeee !default; - - adf-file-uploading-list-row:not(:first-child) { - display: block; - border-top: 1px solid mat-color($foreground, text, 0.14); - } - - .adf-file-uploading-row { - display: flex; - align-items: center; - padding: 0.3em 1em; - cursor: default; - - &:hover { - background: $file-uploading-row-hover-color; - } - - &__name { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - flex: 1 1 auto; - padding: 0 1em 0 0.5em; - } - - &__group, &__block, &__file-version { - min-width: 100px; - display: flex !important; - justify-content: flex-end; - line-height: 40px; - height: 40px; - align-items: center; - } - - &__group--toggle { - cursor: pointer; - display:flex; - align-items: center; - height: 40px; - line-height: 40px; - } - - &__status--done { - color: mat-color($accent); - } - - &__status--error { - color: mat-color($warn); - } - - &__action--cancel { - color: mat-color($warn); - } - - &__action--remove { - color: mat-color($warn); - } - } -} diff --git a/lib/content-services/src/lib/upload/components/upload-drag-area.component.scss b/lib/content-services/src/lib/upload/components/upload-drag-area.component.scss new file mode 100644 index 0000000000..142cfdc369 --- /dev/null +++ b/lib/content-services/src/lib/upload/components/upload-drag-area.component.scss @@ -0,0 +1,95 @@ +$adf-upload-dragging-color: #2196f3 !default; +$adf-upload-dragging-border: 1px dashed #2196f3 !default; +$adf-upload-dragging-background: #e3f2fd !default; +$adf-upload-dragging-level1-color: #2196f3 !default; +$adf-upload-dragging-level1-border: 1px dashed #2196f3 !default; + +@mixin file-draggable__input-focus($text-color, $border) { + color: $text-color; + border: $border !important; + margin-left: 0 !important; +} + +adf-upload-drag-area { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + overflow: hidden; + min-height: 0; + + .adf-upload-border { + display: flex; + flex-direction: column; + height: 100%; + overflow: hidden; + min-height: 0; + vertical-align: unset; + text-align: unset; + width: 100%; + box-sizing: border-box; + } + + .adf-file-draggable__input-focus { + color: $adf-upload-dragging-color; + border: $adf-upload-dragging-border; + + adf-document-list { + background: $adf-upload-dragging-background; + adf-datatable > table { + background: inherit; + } + } + } + + .adf-upload__dragging { + background: $adf-upload-dragging-background; + color: $adf-upload-dragging-color; + } + + .adf-upload__dragging td { + border-top: $adf-upload-dragging-border !important; + border-bottom: $adf-upload-dragging-border !important; + + &:first-child { + border-left: $adf-upload-dragging-border !important; + } + + &:last-child { + 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 + ); + } + } + } + } +} diff --git a/lib/content-services/src/lib/upload/components/upload-drag-area.component.ts b/lib/content-services/src/lib/upload/components/upload-drag-area.component.ts index 8128a1f9ec..65371c8150 100644 --- a/lib/content-services/src/lib/upload/components/upload-drag-area.component.ts +++ b/lib/content-services/src/lib/upload/components/upload-drag-area.component.ts @@ -25,6 +25,7 @@ import { UploadBase } from './base-upload/upload-base'; @Component({ selector: 'adf-upload-drag-area', templateUrl: './upload-drag-area.component.html', + styleUrls: ['./upload-drag-area.component.scss'], host: {'class': 'adf-upload-drag-area'}, viewProviders: [ {provide: EXTENDIBLE_COMPONENT, useExisting: forwardRef(() => UploadDragAreaComponent)} diff --git a/lib/content-services/src/lib/upload/components/upload-drag-area.theme.scss b/lib/content-services/src/lib/upload/components/upload-drag-area.theme.scss deleted file mode 100644 index b498c0a741..0000000000 --- a/lib/content-services/src/lib/upload/components/upload-drag-area.theme.scss +++ /dev/null @@ -1,92 +0,0 @@ -$adf-upload-dragging-color: #2196f3 !default; -$adf-upload-dragging-border: 1px dashed #2196f3 !default; -$adf-upload-dragging-background: #e3f2fd !default; -$adf-upload-dragging-level1-color: #2196f3 !default; -$adf-upload-dragging-level1-border: 1px dashed #2196f3 !default; - -@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) { - adf-upload-drag-area { - @include flex-column; - - .adf-upload-border { - display: flex; - flex-direction: column; - height: 100%; - overflow: hidden; - min-height: 0; - vertical-align: unset; - text-align: unset; - width: 100%; - box-sizing: border-box; - } - - .adf-file-draggable__input-focus { - color: $adf-upload-dragging-color; - border: $adf-upload-dragging-border; - - adf-document-list { - background: $adf-upload-dragging-background; - adf-datatable > table { - background: inherit; - } - } - } - - .adf-upload__dragging { - background: $adf-upload-dragging-background; - color: $adf-upload-dragging-color; - } - - .adf-upload__dragging td { - border-top: $adf-upload-dragging-border !important; - border-bottom: $adf-upload-dragging-border !important; - - &:first-child { - border-left: $adf-upload-dragging-border !important; - } - - &:last-child { - 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 - ); - } - } - } - } - } -} diff --git a/lib/content-services/src/lib/version-manager/version-comparison.component.scss b/lib/content-services/src/lib/version-manager/version-comparison.component.scss new file mode 100644 index 0000000000..776d0b9921 --- /dev/null +++ b/lib/content-services/src/lib/version-manager/version-comparison.component.scss @@ -0,0 +1,28 @@ +.adf-version-comparison-content { + display: flex; + align-items: center; + align-content: center; + justify-content: space-around; +} + +.adf-version-current, .adf-version-new { + display: flex; + flex-direction: column; + align-items: center; +} + +.adf-version-current img, .adf-version-new img { + width: 100px; +} + +.adf-version-arrow-icon { + font-size: var(--theme-display-4-font-size); +} + +.adf-version-comparison-node-name, .adf-version-comparison-file-name { + width: 120px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + text-align: center; +} diff --git a/lib/content-services/src/lib/version-manager/version-comparison.component.ts b/lib/content-services/src/lib/version-manager/version-comparison.component.ts index e2810ad4a6..975615b7ab 100644 --- a/lib/content-services/src/lib/version-manager/version-comparison.component.ts +++ b/lib/content-services/src/lib/version-manager/version-comparison.component.ts @@ -15,13 +15,15 @@ * limitations under the License. */ -import { Component, Input } from '@angular/core'; +import { Component, Input, ViewEncapsulation } from '@angular/core'; import { Node } from '@alfresco/js-api'; import { ThumbnailService } from '@alfresco/adf-core'; @Component({ selector: 'adf-version-comparison', - templateUrl: './version-comparison.component.html' + templateUrl: './version-comparison.component.html', + styleUrls: ['./version-comparison.component.scss'], + encapsulation: ViewEncapsulation.None }) export class VersionComparisonComponent { diff --git a/lib/content-services/src/lib/version-manager/version-comparison.theme.scss b/lib/content-services/src/lib/version-manager/version-comparison.theme.scss deleted file mode 100644 index ecd0e98830..0000000000 --- a/lib/content-services/src/lib/version-manager/version-comparison.theme.scss +++ /dev/null @@ -1,33 +0,0 @@ -@mixin adf-version-comparison-theme($theme) { - - $config: mat-typography-config(); - - .adf-version-comparison-content { - display: flex; - align-items: center; - align-content: center; - justify-content: space-around; - } - - .adf-version-current, .adf-version-new { - display: flex; - flex-direction: column; - align-items: center; - } - - .adf-version-current img, .adf-version-new img { - width: 100px; - } - - .adf-version-arrow-icon { - font-size: mat-font-size($config, display-4); - } - - .adf-version-comparison-node-name, .adf-version-comparison-file-name { - width: 120px; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - text-align: center; - } -} diff --git a/lib/core/card-view/card-view.theme.scss b/lib/core/card-view/card-view.theme.scss deleted file mode 100644 index f40626f003..0000000000 --- a/lib/core/card-view/card-view.theme.scss +++ /dev/null @@ -1,17 +0,0 @@ -@import './components/card-view-arrayitem/card-view-arrayitem.theme'; -@import './components/card-view-dateitem/card-view-dateitem.theme'; -@import './components/card-view-textitem/card-view-textitem.theme'; -@import './components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.theme'; -@import './components/card-view/card-view.component.theme'; -@import './components/card-view-selectitem/select-filter-input/select-filter-input.theme'; -@import '~@mat-datetimepicker/core/datetimepicker/datetimepicker-theme.scss'; - -@mixin adf-card-view-module-theme($theme) { - @include adf-card-view-dateitem-theme($theme); - @include adf-card-view-textitem-theme($theme); - @include adf-card-view-keyvaluepairsitem-theme($theme); - @include adf-card-view-theme($theme); - @include mat-datetimepicker-theme($theme); - @include adf-card-view-array-item-theme($theme); - @include adf-select-filter-input-theme($theme); -} diff --git a/lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss b/lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss new file mode 100644 index 0000000000..61c4a5a625 --- /dev/null +++ b/lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss @@ -0,0 +1,55 @@ +.adf { + &-array-item-icon { + font-size: 16px; + padding-top: 8px; + } + + &-array-item-action { + color: var(--adf-card-view-text-color); + } + + &-array-item-action:hover, &-array-item-action:focus { + color: var(--theme-text-fg-color); + } + + &-card-array-item-default { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: block; + } + + &-array-item-more-chip-container { + &.mat-card { + box-shadow: none; + } + + &.mat-card { + max-height: 300px; + overflow-y: auto; + } + + .mat-chip { + cursor: pointer; + } + } + + &-property-value { + .mat-chip-list { + width: 100%; + padding-top: 6px; + cursor: pointer; + } + .mat-chip { + cursor: pointer; + } + } + + &-card-view-array-item-container { + flex-direction: row; + box-sizing: border-box; + display: flex; + place-content: center space-between; + align-items: center; + } +} diff --git a/lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.ts b/lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.ts index 440fef3fbc..903391086f 100644 --- a/lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.ts +++ b/lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.component.ts @@ -15,14 +15,16 @@ * limitations under the License. */ -import { Component } from '@angular/core'; +import { Component, ViewEncapsulation } from '@angular/core'; import { CardViewArrayItemModel } from '../../models/card-view-arrayitem.model'; import { CardViewUpdateService } from '../../services/card-view-update.service'; import { BaseCardView } from '../base-card-view'; @Component({ selector: 'adf-card-view-arrayitem', - templateUrl: './card-view-arrayitem.component.html' + templateUrl: './card-view-arrayitem.component.html', + styleUrls: ['./card-view-arrayitem.component.scss'], + encapsulation: ViewEncapsulation.None }) export class CardViewArrayItemComponent extends BaseCardView { diff --git a/lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.theme.scss b/lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.theme.scss deleted file mode 100644 index 5de373ca90..0000000000 --- a/lib/core/card-view/components/card-view-arrayitem/card-view-arrayitem.theme.scss +++ /dev/null @@ -1,59 +0,0 @@ -@mixin adf-card-view-array-item-theme($theme) { - $foreground: map-get($theme, foreground); - - .adf { - &-array-item-icon { - font-size: 16px; - padding-top: 8px; - } - - &-array-item-action { - color: mat-color($foreground, text, 0.25); - } - - &-array-item-action:hover, &-array-item-action:focus { - color: mat-color($foreground, text); - } - - &-card-array-item-default { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - display: block; - } - - &-array-item-more-chip-container { - &.mat-card { - box-shadow: none; - } - - &.mat-card { - max-height: 300px; - overflow-y: auto; - } - - .mat-chip { - cursor: pointer; - } - } - - &-property-value { - .mat-chip-list { - width: 100%; - padding-top: 6px; - cursor: pointer; - } - .mat-chip { - cursor: pointer; - } - } - - &-card-view-array-item-container { - flex-direction: row; - box-sizing: border-box; - display: flex; - place-content: center space-between; - align-items: center; - } - } -} diff --git a/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.scss b/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.scss new file mode 100644 index 0000000000..25225cdb22 --- /dev/null +++ b/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.scss @@ -0,0 +1,75 @@ +.adf { + &-invisible-date-input { + height: 2px; + width: 0; + overflow: hidden; + opacity: 0; + border: none; + margin: 0; + padding: 0; + float: right; + } + + &-dateitem-chip-list-container.adf-property-field { + margin-bottom: -7px !important; + border-bottom: 0; + cursor: pointer; + + .adf-dateitem-editable-controls { + margin-top: 15px; + } + + .mat-datetimepicker-toggle { + position: absolute; + right: 0; + top: -20px; + } + } + + &-dateitem-editable { + cursor: pointer; + border-bottom: 1px solid var(--adf-card-view-datetime-border-color); + padding-bottom: 6px; + + &-controls { + display: flex; + align-items: center; + justify-content: space-between; + + button.mat-icon-button { + line-height: 20px; + height: 20px; + width: 20px; + } + + mat-icon { + width: 16px; + height: 16px; + opacity: 0.5; + } + + &:hover mat-icon { + opacity: 1; + } + + .adf-datepicker-toggle { + flex: 1 0 auto; + } + + mat-icon.adf-date-reset-icon { + line-height: 10px; + font-size: 16px; + width: 16px; + height: 16px; + position: relative; + top: 4px; + padding-left: 8px; + opacity: 0.3; + } + + &:hover mat-icon.adf-date-reset-icon { + opacity: 1; + } + } + } +} diff --git a/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.ts b/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.ts index d2faeaba40..e95c5bc205 100644 --- a/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.ts +++ b/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'; +import { Component, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core'; import { DatetimeAdapter, MAT_DATETIME_FORMATS, MatDatetimepicker } from '@mat-datetimepicker/core'; import { MAT_MOMENT_DATETIME_FORMATS, MomentDatetimeAdapter } from '@mat-datetimepicker/moment'; @@ -41,7 +41,9 @@ import { TranslationService } from '../../../services/translation.service'; { provide: MAT_DATETIME_FORMATS, useValue: MAT_MOMENT_DATETIME_FORMATS } ], selector: 'adf-card-view-dateitem', - templateUrl: './card-view-dateitem.component.html' + templateUrl: './card-view-dateitem.component.html', + styleUrls: ['./card-view-dateitem.component.scss'], + encapsulation: ViewEncapsulation.None }) export class CardViewDateItemComponent extends BaseCardView implements OnInit, OnDestroy { diff --git a/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.theme.scss b/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.theme.scss deleted file mode 100644 index bc56b67270..0000000000 --- a/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.theme.scss +++ /dev/null @@ -1,79 +0,0 @@ -@mixin adf-card-view-dateitem-theme($theme) { - $foreground: map-get($theme, foreground); - - .adf { - &-invisible-date-input { - height: 2px; - width: 0; - overflow: hidden; - opacity: 0; - border: none; - margin: 0; - padding: 0; - float: right; - } - - &-dateitem-chip-list-container.adf-property-field { - margin-bottom: -7px !important; - border-bottom: 0; - cursor: pointer; - - .adf-dateitem-editable-controls { - margin-top: 15px; - } - - .mat-datetimepicker-toggle { - position: absolute; - right: 0; - top: -20px; - } - } - - &-dateitem-editable { - cursor: pointer; - border-bottom: 1px solid mat-color($foreground, text, 0.42); - padding-bottom: 6px; - - &-controls { - display: flex; - align-items: center; - justify-content: space-between; - - button.mat-icon-button { - line-height: 20px; - height: 20px; - width: 20px; - } - - mat-icon { - width: 16px; - height: 16px; - opacity: 0.5; - } - - &:hover mat-icon { - opacity: 1; - } - - .adf-datepicker-toggle { - flex: 1 0 auto; - } - - mat-icon.adf-date-reset-icon { - line-height: 10px; - font-size: 16px; - width: 16px; - height: 16px; - position: relative; - top: 4px; - padding-left: 8px; - opacity: 0.3; - } - - &:hover mat-icon.adf-date-reset-icon { - opacity: 1; - } - } - } - } -} diff --git a/lib/core/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.scss b/lib/core/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.scss new file mode 100644 index 0000000000..6990362d3c --- /dev/null +++ b/lib/core/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.scss @@ -0,0 +1,42 @@ +.adf-card-view { + &__key-value-pairs { + &__row { + display: flex; + justify-content: center; + } + + &__col { + width: 50%; + + .mat-form-field { + width: 100%; + font-size: 14px; + } + + .mat-form-field-appearance-legacy .mat-form-field-label { + color: var(--adf-card-view-label-color) !important; + } + } + + &__add-btn-container { + display: flex; + justify-content: center; + } + + &__add-btn.mat-button { + margin-bottom: 20px; + } + + &__read-only { + padding-bottom: 20px; + + .mat-table { + box-shadow: none; + } + + .mat-header-row, .mat-row { + padding: 0; + } + } + } +} diff --git a/lib/core/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.ts b/lib/core/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.ts index b101efb628..39ba357eb9 100644 --- a/lib/core/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.ts +++ b/lib/core/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { Component, Input, OnChanges } from '@angular/core'; +import { Component, Input, OnChanges, ViewEncapsulation } from '@angular/core'; import { CardViewUpdateService } from '../../services/card-view-update.service'; import { CardViewKeyValuePairsItemModel } from '../../models/card-view.models'; import { CardViewKeyValuePairsItemType } from '../../interfaces/card-view.interfaces'; @@ -24,7 +24,9 @@ import { BaseCardView } from '../base-card-view'; @Component({ selector: 'adf-card-view-boolitem', - templateUrl: './card-view-keyvaluepairsitem.component.html' + templateUrl: './card-view-keyvaluepairsitem.component.html', + styleUrls: ['./card-view-keyvaluepairsitem.component.scss'], + encapsulation: ViewEncapsulation.None }) export class CardViewKeyValuePairsItemComponent extends BaseCardView implements OnChanges { diff --git a/lib/core/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.theme.scss b/lib/core/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.theme.scss deleted file mode 100644 index b29fe1510d..0000000000 --- a/lib/core/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.theme.scss +++ /dev/null @@ -1,46 +0,0 @@ -@mixin adf-card-view-keyvaluepairsitem-theme($theme) { - $foreground: map-get($theme, foreground); - - .adf-card-view { - &__key-value-pairs { - &__row { - display: flex; - justify-content: center; - } - - &__col { - width: 50%; - - .mat-form-field { - width: 100%; - font-size: 14px; - } - - .mat-form-field-appearance-legacy .mat-form-field-label { - color: mat-color($foreground, text, 0.4) !important; - } - } - - &__add-btn-container { - display: flex; - justify-content: center; - } - - &__add-btn.mat-button { - margin-bottom: 20px; - } - - &__read-only { - padding-bottom: 20px; - - .mat-table { - box-shadow: none; - } - - .mat-header-row, .mat-row { - padding: 0; - } - } - } - } -} diff --git a/lib/core/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.component.scss b/lib/core/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.component.scss new file mode 100644 index 0000000000..f1321d1ee8 --- /dev/null +++ b/lib/core/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.component.scss @@ -0,0 +1,30 @@ +$select-filter-height: 4em !default; + +.adf-select-filter-input { + height: $select-filter-height; + display: flex; + + .adf-select-filter-input-container { + position: absolute; + top: 0; + width: 100%; + display: flex; + z-index: 100; + font-size: 14px; + color: var(--theme-text-bold-color); + line-height: 3em; + height: $select-filter-height; + padding: 5px 16px 0; + background: var(--theme-card-bg-color); + } + + .mat-form-field { + width: 100%; + } +} + +.mat-select-panel.adf-select-filter { + transform: none !important; + overflow-x: hidden !important; + max-height: calc(256px + #{$select-filter-height}); +} diff --git a/lib/core/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.component.ts b/lib/core/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.component.ts index 634622335d..ec17755c07 100644 --- a/lib/core/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.component.ts +++ b/lib/core/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.component.ts @@ -24,6 +24,7 @@ import { takeUntil } from 'rxjs/operators'; @Component({ selector: 'adf-select-filter-input', templateUrl: './select-filter-input.component.html', + styleUrls: ['./select-filter-input.component.scss'], host: { 'class': 'adf-select-filter-input' }, encapsulation: ViewEncapsulation.None }) diff --git a/lib/core/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.theme.scss b/lib/core/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.theme.scss deleted file mode 100644 index e8bc44a75c..0000000000 --- a/lib/core/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.theme.scss +++ /dev/null @@ -1,35 +0,0 @@ -@mixin adf-select-filter-input-theme($theme) { - $mat-select-panel-max-height: 256px !default; - $select-filter-height: 4em !default; - $background: map-get($theme, background); - $foreground: map-get($theme, foreground); - - .adf-select-filter-input { - height: $select-filter-height; - display: flex; - - .adf-select-filter-input-container { - position: absolute; - top: 0; - width: 100%; - display: flex; - z-index: 100; - font-size: 14px; - color: mat-color($foreground, text, 0.87); - line-height: 3em; - height: $select-filter-height; - padding: 5px 16px 0; - background: mat-color($background, card); - } - - .mat-form-field { - width: 100%; - } - } - - .mat-select-panel.adf-select-filter { - transform: none !important; - overflow-x: hidden !important; - max-height: calc(#{$mat-select-panel-max-height} + #{$select-filter-height}); - } -} diff --git a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.scss b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.scss new file mode 100644 index 0000000000..85038bd427 --- /dev/null +++ b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.scss @@ -0,0 +1,181 @@ +.adf { + &-textitem-edit-icon.mat-icon { + font-size: 16px; + width: 16px; + height: 16px; + color: var(--adf-card-view-text-color); + } + + &-textitem-action.mat-icon-button { + width: 20px; + height: 20px; + line-height: 20px; + color: var(--adf-card-view-text-color); + } + + &-textitem-action:hover, + &-textitem-action:focus { + color: var(--theme-text-fg-color); + } + + &-update-icon { + padding-left: 13px; + } + + &-textitem-readonly { + cursor: pointer !important; + + &:hover .adf-textitem-action, + &:focus .adf-textitem-action { + color: var(--theme-text-fg-color); + } + } + + &-textitem-chip-list-container { + margin-bottom: 25px !important; + margin-top: 6px; + + .mat-form-field-label { + margin-top: 6px; + } + } + + &-textitem-clickable { + cursor: pointer !important; + padding-top: 3px; + + .adf-textitem-edit-icon.mat-icon { + line-height: 16px; + } + + &:hover .adf-textitem-action { + color: var(--theme-text-fg-color); + } + } + + &-textitem-clickable-value { + cursor: pointer !important; + color: var(--theme-primary-color) !important; + } + + &-textitem-editable { + &-controls { + display: flex; + align-items: center; + + mat-icon:not(.adf-button-disabled):hover { + color: var(--theme-text-fg-color); + cursor: pointer !important; + } + + mat-form-field { + width: 100%; + } + + input:focus, + textarea:focus { + border: 1px solid var(--theme-accent-color-a200); + } + } + + &-error { + font-size: 12px; + padding-top: 4px; + + ul { + margin: 0; + padding: 0; + list-style-type: none; + + li { + margin: 0; + padding: 0; + } + } + } + } + + &-textitem-default-value { + color: var(--theme-text-color); + } + + &-textitem-editable .mat-form-field-wrapper { + margin: 0; + padding-bottom: 0; + } + + &-textitem-editable .mat-form-field-underline { + display: none; + } + + &-textitem-editable .mat-form-field-infix { + padding: 0; + border-top: none; + } + + &-textitem-editable .mat-form-field-label-wrapper { + padding-top: 2em; + position: static; + } + + &-textitem-editable .mat-form-field-label { + top: 4px; + } + + &-textitem-editable .mat-input-element { + font-family: inherit; + position: relative; + padding-top: 6px; + } + + &-textitem-editable .mat-input-element:focus { + padding: 5px; + left: -6px; + top: 0; + } + + &-textitem-editable input.mat-input-element { + margin-bottom: 2px; + } + + &-textitem-editable input.mat-input-element:focus { + margin-bottom: -8px; + } + + &-textitem-scroll { + overflow-x: auto; + white-space: nowrap; + display: block; + + &::-webkit-scrollbar { + height: 5px; + } + + &:hover::-webkit-scrollbar-thumb { + display: block; + background-color: var(--adf-card-view-text-color); + border-radius: 2px; + } + } + + &-textitem-multiline { + display: block; + } + + &-property-field .adf-property-clear-value { + display: none; + } + + &-property-field.adf-card-textitem-field:hover { + .adf-textitem-edit-icon { + display: none; + } + .adf-property-clear-value { + color: var(--adf-card-view-text-color); + display: inline; + } + .adf-property-clear-value:hover { + color: var(--theme-text-fg-color); + } + } +} diff --git a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts index 661b9035a4..e6defba1dc 100644 --- a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts +++ b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { ChangeDetectorRef, Component, Input, OnChanges, SimpleChanges } from '@angular/core'; +import { ChangeDetectorRef, Component, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core'; import { CardViewTextItemModel } from '../../models/card-view-textitem.model'; import { CardViewUpdateService } from '../../services/card-view-update.service'; import { BaseCardView } from '../base-card-view'; @@ -38,7 +38,9 @@ const templateTypes = { @Component({ selector: 'adf-card-view-textitem', - templateUrl: './card-view-textitem.component.html' + templateUrl: './card-view-textitem.component.html', + styleUrls: ['./card-view-textitem.component.scss'], + encapsulation: ViewEncapsulation.None }) export class CardViewTextItemComponent extends BaseCardView implements OnChanges { diff --git a/lib/core/card-view/components/card-view-textitem/card-view-textitem.theme.scss b/lib/core/card-view/components/card-view-textitem/card-view-textitem.theme.scss deleted file mode 100644 index 526845656d..0000000000 --- a/lib/core/card-view/components/card-view-textitem/card-view-textitem.theme.scss +++ /dev/null @@ -1,188 +0,0 @@ -@mixin adf-card-view-textitem-theme($theme) { - $primary: map-get($theme, primary); - $accent: map-get($theme, accent); - $foreground: map-get($theme, foreground); - $outline: 1px solid mat-color($accent, A200) !default; - - .adf { - &-textitem-edit-icon.mat-icon { - font-size: 16px; - width: 16px; - height: 16px; - color: mat-color($foreground, text, 0.25); - } - - &-textitem-action.mat-icon-button { - width: 20px; - height: 20px; - line-height: 20px; - color: mat-color($foreground, text, 0.25); - } - - &-textitem-action:hover, - &-textitem-action:focus { - color: mat-color($foreground, text); - } - - &-update-icon { - padding-left: 13px; - } - - &-textitem-readonly { - cursor: pointer !important; - - &:hover .adf-textitem-action, - &:focus .adf-textitem-action { - color: mat-color($foreground, text); - } - } - - &-textitem-chip-list-container { - margin-bottom: 25px !important; - margin-top: 6px; - - .mat-form-field-label { - margin-top: 6px; - } - } - - &-textitem-clickable { - cursor: pointer !important; - padding-top: 3px; - - .adf-textitem-edit-icon.mat-icon { - line-height: 16px; - } - - &:hover .adf-textitem-action { - color: mat-color($foreground, text); - } - } - - &-textitem-clickable-value { - cursor: pointer !important; - color: mat-color($primary) !important; - } - - &-textitem-editable { - &-controls { - display: flex; - align-items: center; - - mat-icon:not(.adf-button-disabled):hover { - color: mat-color($foreground, text); - cursor: pointer !important; - } - - mat-form-field { - width: 100%; - } - - input:focus, - textarea:focus { - border: $outline; - } - } - - &-error { - font-size: 12px; - padding-top: 4px; - - ul { - margin: 0; - padding: 0; - list-style-type: none; - - li { - margin: 0; - padding: 0; - } - } - } - } - - &-textitem-default-value { - color: mat-color($foreground, text, 0.54); - } - - &-textitem-editable .mat-form-field-wrapper { - margin: 0; - padding-bottom: 0; - } - - &-textitem-editable .mat-form-field-underline { - display: none; - } - - &-textitem-editable .mat-form-field-infix { - padding: 0; - border-top: none; - } - - &-textitem-editable .mat-form-field-label-wrapper { - padding-top: 2em; - position: static; - } - - &-textitem-editable .mat-form-field-label { - top: 4px; - } - - &-textitem-editable .mat-input-element { - font-family: inherit; - position: relative; - padding-top: 6px; - } - - &-textitem-editable .mat-input-element:focus { - padding: 5px; - left: -6px; - top: 0; - } - - &-textitem-editable input.mat-input-element { - margin-bottom: 2px; - } - - &-textitem-editable input.mat-input-element:focus { - margin-bottom: -8px; - } - - &-textitem-scroll { - overflow-x: auto; - white-space: nowrap; - display: block; - - &::-webkit-scrollbar { - height: 5px; - } - - &:hover::-webkit-scrollbar-thumb { - display: block; - background-color: mat-color($foreground, text, 0.25); - border-radius: 2px; - } - } - - &-textitem-multiline { - display: block; - } - - &-property-field .adf-property-clear-value { - display: none; - } - - &-property-field.adf-card-textitem-field:hover { - .adf-textitem-edit-icon { - display: none; - } - .adf-property-clear-value { - color: mat-color($foreground, text, 0.25); - display: inline; - } - .adf-property-clear-value:hover { - color: mat-color($foreground, text, 1); - } - } - } -} diff --git a/lib/core/card-view/components/card-view/card-view.component.scss b/lib/core/card-view/components/card-view/card-view.component.scss new file mode 100644 index 0000000000..88e8ec788a --- /dev/null +++ b/lib/core/card-view/components/card-view/card-view.component.scss @@ -0,0 +1,46 @@ +.adf-property-list { + .adf-property { + margin-bottom: 20px; + + .adf-property-value-padding-top { + margin-top: 6px; + } + + .adf-property-field { + width: 100%; + margin-bottom: -25px; + + .mat-form-field-infix { + border-top-width: 0; + } + + .mat-form-field-label { + margin-top: 6px; + } + + .adf-property-read-only { + .mat-form-field-underline { + display: none; + } + } + } + + .adf-property-read-only { + .mat-form-field-underline { + display: none; + } + } + + .adf-property-label { + font-size: 12px; + color: var(--theme-text-color); + word-wrap: break-word; + } + + .adf-property-value, + .mat-form-field-label { + font-size: 14px; + color: var(--theme-text-bold-color); + } + } +} diff --git a/lib/core/card-view/components/card-view/card-view.component.theme.scss b/lib/core/card-view/components/card-view/card-view.component.theme.scss deleted file mode 100644 index 16cb391334..0000000000 --- a/lib/core/card-view/components/card-view/card-view.component.theme.scss +++ /dev/null @@ -1,50 +0,0 @@ -@mixin adf-card-view-theme($theme) { - $foreground: map-get($theme, foreground); - - .adf-property-list { - .adf-property { - margin-bottom: 20px; - - .adf-property-value-padding-top { - margin-top: 6px; - } - - .adf-property-field { - width: 100%; - margin-bottom: -25px; - - .mat-form-field-infix { - border-top-width: 0; - } - - .mat-form-field-label { - margin-top: 6px; - } - - .adf-property-read-only { - .mat-form-field-underline { - display: none; - } - } - } - - .adf-property-read-only { - .mat-form-field-underline { - display: none; - } - } - - .adf-property-label { - font-size: 12px; - color: mat-color($foreground, text, 0.54); - word-wrap: break-word; - } - - .adf-property-value, - .mat-form-field-label { - font-size: 14px; - color: mat-color($foreground, text, 0.87); - } - } - } -} diff --git a/lib/core/card-view/components/card-view/card-view.component.ts b/lib/core/card-view/components/card-view/card-view.component.ts index fea8fc7ab2..78a41fcb92 100644 --- a/lib/core/card-view/components/card-view/card-view.component.ts +++ b/lib/core/card-view/components/card-view/card-view.component.ts @@ -15,13 +15,15 @@ * limitations under the License. */ -import { Component, Input } from '@angular/core'; +import { Component, Input, ViewEncapsulation } from '@angular/core'; import { CardViewItem } from '../../interfaces/card-view-item.interface'; import { DEFAULT_SEPARATOR } from '../card-view-textitem/card-view-textitem.component'; @Component({ selector: 'adf-card-view', - templateUrl: './card-view.component.html' + templateUrl: './card-view.component.html', + styleUrls: ['./card-view.component.scss'], + encapsulation: ViewEncapsulation.None }) export class CardViewComponent { /** (**required**) Items to show in the card view. */ diff --git a/lib/core/clipboard/clipboard.theme.scss b/lib/core/clipboard/clipboard.theme.scss index 1c42383b65..1012989a95 100644 --- a/lib/core/clipboard/clipboard.theme.scss +++ b/lib/core/clipboard/clipboard.theme.scss @@ -1,24 +1,19 @@ -@mixin adf-clipboard-theme($theme) { - $primary: map-get($theme, primary); - $config: mat-typography-config(); +.adf-copy-tooltip { + position: absolute; + background: var(--theme-primary-color); + color: var(--theme-primary-color-default-contrast) !important; + font-size: var(--theme-caption-font-size); + padding: 2px 5px; + border-radius: 5px; + bottom: 93%; + left:0; + z-index: 1001; + min-height: 20px; +} +.adf-sticky-header { .adf-copy-tooltip { - position: absolute; - background: mat-color($primary); - color: mat-color($primary, default-contrast) !important; - font-size: mat-font-size($config, caption); - padding: 2px 5px; - border-radius: 5px; - bottom: 93%; - left:0; - z-index: 1001; - min-height: 20px; - } - - .adf-sticky-header { - .adf-copy-tooltip { - top:85% !important; - bottom:0 !important; - } + top:85% !important; + bottom:0 !important; } } diff --git a/lib/core/comments/comment-list.component.scss b/lib/core/comments/comment-list.component.scss new file mode 100644 index 0000000000..67b93b0c7a --- /dev/null +++ b/lib/core/comments/comment-list.component.scss @@ -0,0 +1,95 @@ +.adf-is-selected { + background: var(--adf-comment-list-primary-color); +} + +.adf { + + &-comment-img-container { + float: left; + width: 40px; + height: 100%; + display: flex; + align-self: flex-start; + padding-top: 18px; + } + + &-comment-list-item { + /* stylelint-disable */ + white-space: initial; + /* stylelint-enable */ + display: table-row-group; + padding-top: 12px; + overflow: hidden; + height: 100% !important; + transition: background 0.8s; + background-position: center; + + &:hover { + background: var(--adf-comment-list-primary-color) + radial-gradient(circle, transparent 1%, var(--adf-comment-list-primary-color) 1%) + center/15000%; + } + &:active { + background-color: var(--adf-comment-list-ripple-color); + background-size: 100%; + transition: background 0s; + } + } + + &-comment-user-icon { + padding: 10px 5px; + width: 30px; + background-color: var(--theme-primary-color); + color: var(--theme-primary-color-default-contrast); + border-radius: 50%; + font-size: 16px; + text-align: center; + height: 20px; + background-size: cover; + } + + &-comment-user-name { + float: left; + width: calc(100% - 10%); + padding: 2px 10px; + font-weight: 600; + font-size: 14px; + } + + &-comment-message { + float: left; + width: calc(100% - 10px); + padding: 2px 10px; + font-style: italic; + /* stylelint-disable */ + white-space: initial !important; + /* stylelint-enable */ + font-size: 14px; + letter-spacing: -0.2px; + line-height: 1.43; + color: var(--theme-foreground-text-color); + } + + &-comment-message-time { + float: left; + width: calc(100% - 10%); + padding: 2px 10px; + font-size: 12px !important; + color: var(--theme-foreground-text-color); + } + + &-comment-contents { + width: calc(100% - 10px); + padding-top: 12px; + padding-bottom: 12px; + padding-left: 5px; + } + + &-people-img { + border-radius: 90%; + width: 40px; + height: 40px; + vertical-align: middle; + } + +} diff --git a/lib/core/comments/comment-list.component.ts b/lib/core/comments/comment-list.component.ts index 84d6b9ec30..3adc575eec 100644 --- a/lib/core/comments/comment-list.component.ts +++ b/lib/core/comments/comment-list.component.ts @@ -26,6 +26,7 @@ import { takeUntil } from 'rxjs/operators'; @Component({ selector: 'adf-comment-list', templateUrl: './comment-list.component.html', + styleUrls: ['./comment-list.component.scss'], encapsulation: ViewEncapsulation.None }) diff --git a/lib/core/comments/comment-list.theme.scss b/lib/core/comments/comment-list.theme.scss deleted file mode 100644 index 2164756f62..0000000000 --- a/lib/core/comments/comment-list.theme.scss +++ /dev/null @@ -1,102 +0,0 @@ -@mixin adf-task-list-comment-list-theme($theme) { - $primary: map-get($theme, primary); - $foreground: map-get($theme, foreground); - $primaryColor: mat-color($primary, 100); - $rippleColor: mat-color($primary, 300); - - .adf-is-selected { - background: mat-color($primary, 100); - } - - .adf { - - &-comment-img-container { - float: left; - width: 40px; - height: 100%; - display: flex; - align-self: flex-start; - padding-top: 18px; - } - - &-comment-list-item { - /* stylelint-disable */ - white-space: initial; - /* stylelint-enable */ - display: table-row-group; - padding-top: 12px; - overflow: hidden; - height: 100% !important; - transition: background 0.8s; - background-position: center; - - &:hover { - background: $primaryColor - radial-gradient(circle, transparent 1%, $primaryColor 1%) - center/15000%; - } - &:active { - background-color: $rippleColor; - background-size: 100%; - transition: background 0s; - } - } - - &-comment-user-icon { - padding: 10px 5px; - width: 30px; - background-color: mat-color($primary); - color: mat-color($primary, default-contrast); - border-radius: 50%; - font-size: 16px; - text-align: center; - height: 20px; - background-size: cover; - } - - &-comment-user-name { - float: left; - width: calc(100% - 10%); - padding: 2px 10px; - font-weight: 600; - font-size: 14px; - } - - &-comment-message { - float: left; - width: calc(100% - 10px); - padding: 2px 10px; - font-style: italic; - /* stylelint-disable */ - white-space: initial !important; - /* stylelint-enable */ - font-size: 14px; - letter-spacing: -0.2px; - line-height: 1.43; - color: mat-color($foreground, text, 0.72); - } - - &-comment-message-time { - float: left; - width: calc(100% - 10%); - padding: 2px 10px; - font-size: 12px !important; - color: mat-color($foreground, text, 0.72); - } - - &-comment-contents { - width: calc(100% - 10px); - padding-top: 12px; - padding-bottom: 12px; - padding-left: 5px; - } - - &-people-img { - border-radius: 90%; - width: 40px; - height: 40px; - vertical-align: middle; - } - - } -} diff --git a/lib/core/comments/comments.component.scss b/lib/core/comments/comments.component.scss new file mode 100644 index 0000000000..993ab003da --- /dev/null +++ b/lib/core/comments/comments.component.scss @@ -0,0 +1,39 @@ +.adf-comments-container { + height: 100%; + width: 100%; + overflow: auto; +} + +.adf-comments-header { + padding: 10px 20px; + font-size: 14px; + font-weight: 600; + border-bottom: 1px solid var(--theme-fg-divider); +} + +.adf-comments-input-container { + width: calc(100% - 30px); + padding: 8px 15px 0; + border-bottom: 1px solid var(--theme-fg-divider); + + textarea { + resize: vertical; + } +} + +.adf-comments-input-actions { + display: flex; + justify-content: flex-end; + margin-bottom: 10px; +} + +.adf-full-width { + width: 100%; +} + +adf-comment-list { + float: left; + overflow: auto; + height: calc(100% - 101px); + width: 100%; +} diff --git a/lib/core/comments/comments.component.ts b/lib/core/comments/comments.component.ts index e7d7c564ab..3cbaf6eb11 100644 --- a/lib/core/comments/comments.component.ts +++ b/lib/core/comments/comments.component.ts @@ -18,13 +18,15 @@ import { CommentProcessService } from '../services/comment-process.service'; import { CommentContentService } from '../services/comment-content.service'; import { CommentModel } from '../models/comment.model'; -import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core'; +import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewEncapsulation } from '@angular/core'; import { Observable, Observer } from 'rxjs'; import { share } from 'rxjs/operators'; @Component({ selector: 'adf-comments', - templateUrl: './comments.component.html' + templateUrl: './comments.component.html', + styleUrls: ['./comments.component.scss'], + encapsulation: ViewEncapsulation.None }) export class CommentsComponent implements OnChanges { diff --git a/lib/core/comments/comments.theme.scss b/lib/core/comments/comments.theme.scss deleted file mode 100644 index e194ef450d..0000000000 --- a/lib/core/comments/comments.theme.scss +++ /dev/null @@ -1,45 +0,0 @@ -@mixin adf-task-list-comment-theme($theme) { - $foreground: map-get($theme, foreground); - $header-border: 1px solid mat-color($foreground, divider); - - .adf-comments-container { - height: 100%; - width: 100%; - overflow: auto; - } - - .adf-comments-header { - padding: 10px 20px; - font-size: 14px; - font-weight: 600; - border-bottom: $header-border; - } - - .adf-comments-input-container { - width: calc(100% - 30px); - padding: 8px 15px 0; - border-bottom: $header-border; - - textarea { - resize: vertical; - } - } - - .adf-comments-input-actions { - display: flex; - justify-content: flex-end; - margin-bottom: 10px; - } - - .adf-full-width { - width: 100%; - } - - adf-comment-list { - float: left; - overflow: auto; - height: calc(100% - 101px); - width: 100%; - } - -} diff --git a/lib/core/datatable/components/datatable/datatable.component.scss b/lib/core/datatable/components/datatable/datatable.component.scss new file mode 100644 index 0000000000..b1c0223878 --- /dev/null +++ b/lib/core/datatable/components/datatable/datatable.component.scss @@ -0,0 +1,676 @@ +@import '~@angular/material/theming'; +@import '../../../styles/mixins'; + +$data-table-header-font-size: 12px !default; +$data-table-header-sort-icon-size: 16px !default; +$data-table-row-height: 56px !default; +$data-table-column-spacing: 36px !default; +$data-table-column-padding: $data-table-column-spacing / 2; +$data-table-card-padding: 24px !default; +$data-table-cell-top: $data-table-card-padding / 2; +$data-table-thumbnail-width: 50px !default; +$data-table-cell-min-width: 50px !default; +$data-table-cell-min-width--no-grow: 100px !default; +$data-table-cell-min-width--fileSize: $data-table-cell-min-width !default; + +.adf-datatable { + overflow-y: scroll; + height: 100%; +} + +.adf-datatable-card { + border: 1px solid var(--theme-fg-divider); + + .adf-datatable-body { + flex-flow: row wrap; + display: flex; + + width: 100%; + + justify-content: space-evenly; + align-content: flex-start; + align-items: flex-start; + + .adf-datatable-row { + transition: all 0.3s ease; + position: relative; + display: flex; + flex-direction: column; + flex: 0 1 24%; + + width: 288px !important; + max-width: 288px !important; + min-width: 288px !important; + + height: 200px; + + overflow: hidden !important; + margin: 6px; + padding: 15px; + + @include mat-elevation-transition; + @include mat-overridable-elevation(2); + } + + .adf-datatable-row-empty-card { + height: 0 !important; + padding-top: 0; + padding-bottom: 0; + margin-top: 0; + margin-bottom: 0; + } + + .adf-is-selected { + background: var(--adf-datatable-selected-color); + padding-bottom: 31px; + } + + .adf-datatable-card-permission { + width: 100%; + min-height: 250px; + + .adf-datatable-cell { + height: 240px !important; + } + } + + .adf-datatable-card-loading { + width: 100%; + min-height: 250px; + + .adf-datatable-cell { + height: 240px !important; + } + } + + .adf-datatable-card-empty { + width: 100%; + min-height: 380px; + + .adf-datatable-cell { + height: 370px !important; + } + } + + .adf-datatable-cell--image { + margin-left: 8px; + } + + .adf-datatable-cell { + text-align: left; + flex: 0 1 24%; + height: 136px !important; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + outline: none; + + &::before { + margin-left: 10px; + text-align: left; + content: attr(title); + color: var(--theme-text-color); + float: left; + width: 140px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + + .adf-datatable-cell-value { + display: block; + overflow: hidden; + text-overflow: ellipsis; + } + } + + .adf-datatable__actions-cell { + position: absolute; + height: 42px !important; + width: 42px !important; + right: 0; + top: 4px; + } + + .adf-datatable-row:not(:hover) .adf-datatable-hide-actions-without-hover { + display: none; + } + + .adf-image-table-cell { + margin: 8px; + padding: 4px; + overflow: visible; + border-bottom: 1px solid var(--theme-fg-divider); + + .adf-datatable-cell-container { + float: left; + width: 42px; + } + + &::after { + margin: 2px; + content: attr(filename); + float: left; + width: 140px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + } + + .adf-datatable-checkbox { + margin: 8px; + } + + } + + .adf-datatable-header { + margin-right: 18px; + float: right; + } + +} + +.adf-datatable-list { + display: flex; + flex-direction: column; + background-color: var(--theme-card-bg-color); + border: 1px solid var(--theme-border-color); + box-sizing: border-box; + overflow-x: auto; + + @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { + .adf-datatable-center-size-column-ie { + padding-top: 17px; + } + + .adf-datatable-center-actions-column-ie { + padding-top: 7px !important; + } + + .adf-datatable-center-date-column-ie { + position: relative !important; + + .adf-datatable-cell-value { + width: 100%; + } + } + + .adf-datatable-center-img-ie { + padding:0; + min-width: 0; + width: 24px; + height: 56px; + } + } + + .adf-datatable-header { + display: flex; + flex-direction: column; + width: fit-content; + min-width: 100%; + box-sizing: border-box; + } + + .adf-datatable-cell { + color: var(--theme-text-fg-color); + } + + .adf-datatable-row { + &:hover, &:focus { + background-color: var(--theme-bg-hover-color); + } + + &:focus { + outline-offset: -1px; + outline: 1px solid var(--theme-accent-color-a200); + } + + .adf-cell-value, .adf-datatable-cell-header { + &:focus { + outline-offset: -1px; + outline: 1px solid var(--theme-accent-color-a200); + } + } + } + + .adf-datatable-body { + display: flex; + flex-direction: column; + background-color: inherit; + width: fit-content; + min-width: 100%; + + .adf-datatable-row { + @include material-animation-default(0.28s); + transition-property: background-color; + border-top: 1px solid var(--theme-border-color); + min-height: $data-table-row-height; + cursor: pointer; + + @include adf-no-select; + + &.adf-is-selected, &.adf-is-selected:hover { + background-color: var(--theme-selected-button-bg-color); + } + + &:last-child { + border-bottom: 1px solid var(--theme-border-color); + } + } + } + + .adf-datatable-row { + display: flex; + align-items: center; + padding-left: 15px; + padding-right: 15px; + + .adf-datatable-checkbox { + max-width: $data-table-thumbnail-width; + width: $data-table-thumbnail-width; + } + + /* query for Microsoft IE 11*/ + @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { + .adf-datatable-checkbox { + padding-top: 15px; + } + } + } + + .adf-datatable-cell, .adf-datatable-cell-header { + text-align: left; + box-sizing: border-box; + min-width: $data-table-cell-min-width; + + &--text { + text-align: left; + position: relative; + } + + &--date { + text-align: left; + } + + &--number { + text-align: right; + } + + &--image, + &--icon { + padding-left: 24px; + padding-right: 24px; + width: $data-table-thumbnail-width; + min-width: $data-table-thumbnail-width; + text-align: left; + } + + &--fileSize { + min-width: $data-table-cell-min-width--fileSize; + } + } + + .adf-datatable-cell-header { + @include adf-no-select; + cursor: pointer; + position: relative; + vertical-align: bottom; + text-overflow: ellipsis; + font-weight: bold; + line-height: 24px; + letter-spacing: 0; + min-height: $data-table-row-height !important; + font-size: $data-table-header-font-size; + color: var(--theme-text-fg-color); + padding-bottom: 8px; + box-sizing: border-box; + padding-top: 12px !important; + + &.adf-sortable { + @include adf-no-select; + &:hover { + cursor: pointer; + } + display: flex; + align-items: center; + } + + &.adf-datatable__header--sorted-asc, + &.adf-datatable__header--sorted-desc { + color: var(--theme-text-fg-color); + &::before { + @include typo-icon; + font-size: $data-table-header-sort-icon-size; + content: '\e5d8'; + left: 5px; + right: 5px; + position: relative; + vertical-align: sub; + } + } + &.adf-datatable__header--sorted-desc::before { + content: '\e5db'; + } + &.adf-datatable-cell--fileSize.adf-datatable__header--sorted-asc::before, + &.adf-datatable-cell--fileSize.adf-datatable__header--sorted-desc::before { + left: -3px; + right: -3px; + } + + &.adf-datatable-checkbox { + display: flex; + align-items: center; + } + } + + .adf-datatable-cell-header.adf-expand-cell-1, .adf-datatable-cell.adf-expand-cell-1 { + flex-grow: 1; + } + + .adf-datatable-cell-header.adf-expand-cell-2, .adf-datatable-cell.adf-expand-cell-2 { + flex-grow: 2; + } + + .adf-datatable-cell-header.adf-expand-cell-3, .adf-datatable-cell.adf-expand-cell-3 { + flex-grow: 3; + } + + .adf-datatable-cell-header.adf-expand-cell-4, .adf-datatable-cell.adf-expand-cell-4 { + flex-grow: 4; + } + + .adf-datatable-cell-header.adf-expand-cell-5, .adf-datatable-cell.adf-expand-cell-5 { + flex-grow: 5; + } + + .adf-datatable-cell-header.adf-no-grow-cell, .adf-datatable-cell.adf-no-grow-cell { + flex-grow: 0; + min-width: $data-table-cell-min-width--no-grow; + } + + .adf-datatable-cell, .adf-datatable-cell-header { + flex: 1; + padding: 0; + align-items: center; + display: flex; + min-height: inherit; + + .adf-datatable-cell-container { + overflow: hidden; + min-height: inherit; + align-items: center; + display: flex; + width: 100%; + } + + .adf-datatable-cell-value { + word-break: break-word; + padding: 10px; + display: block; + + @media screen and (-ms-high-contrast: active), + screen and (-ms-high-contrast: none) { + padding: 17px 10px 10px; + } + } + &--fileSize .adf-datatable-cell-value { + padding: 0 10px 0 0; + } + } + + .adf-cell-value { + display: flex; + min-height: inherit; + align-items: center; + word-break: break-all; + width: 100%; + } + + .adf-datatable__actions-cell, .adf-datatable-cell--image { + max-width: $data-table-thumbnail-width; + display: flex; + } + + .adf-datatable-row:not(:hover) .adf-datatable-hide-actions-without-hover { + display: none; + } + + .adf-datatable-cell--image { + max-width: $data-table-thumbnail-width; + } + + .adf-location-cell { + a { + text-decoration: none; + color: var(--theme-text-fg-color); + + &:hover { + color: var(--adf-datatable-cell-link-hover-color); + text-decoration: underline; + } + } + } + + /* [Accessibility] For screen reader only */ + .adf-sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; + } + + .adf-is-selected { + background: var(--adf-datatable-selected-color); + } + + .adf-datatable-link { + text-decoration: none; + color: var(--theme-text-fg-color); + + &:hover { + color: var(--adf-datatable-cell-link-hover-color); + text-decoration: underline; + } + } + + .adf-dynamic-column .adf-datatable-link:hover { + text-decoration: none; + + .adf-datatable-cell-value { + text-decoration: underline; + } + } + + .adf-datatable-cell, + .adf-datatable-cell-header { + .adf-datatable-link .adf-datatable-cell-value { + padding: 0 10px; + } + } + + .adf-ellipsis-cell { + position: sticky; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + padding: 0 4px; + + &.adf-datatable-cell-header, + .adf-datatable-content-cell { + max-width: calc(100% - 0.1px); + overflow: hidden; + text-overflow: ellipsis; + + .adf-datatable-cell-value { + overflow: hidden; + text-overflow: ellipsis; + } + } + .adf-datatable-content-cell { + overflow: unset; + position: absolute; + } + + /* query for Microsoft IE 11*/ + @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { + .adf-cell-value { + top: 100%; + } + } + + /* cell stretching content */ + & > div::after { + content: attr(title); + overflow: hidden; + height: 0; + display: block; + } + } + + /* Empty folder */ + .adf-no-content-container { + padding: 0 !important; + border: none !important; + width: 100%; + justify-content: center; + + & > img { + width: 100%; + } + } + + /* Loading folder */ + .adf-loading-content-container { + padding: 0 !important; + width: 100%; + + & > img { + width: 100%; + } + } + + .adf-no-permission { + &__row:hover { + cursor: default; + background-color: inherit; + } + + &__cell { + padding: 0 !important; + } + } + + /* Utils */ + .adf-hidden { + display: none; + } + + /* mobile phone */ + @media all and (max-width: 768px) { + .adf-desktop-only { + display: none !important; + } + } + + @media (max-device-width: 768px) { + .adf-desktop-only { + display: none !important; + } + } + +} + +/* [Accessibility] Material checkbox labels */ +.adf-checkbox-sr-only .mat-checkbox-label { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; +} + +.adf-sticky-header { + border-top: 0; + height: 100%; + + .adf-datatable-header { + display: block; + margin-right: 0; + border-top: 1px solid var(--theme-border-color); + border-bottom: 1px solid var(--theme-border-color); + } + + .adf-datatable-body { + display: block; + flex: 1; + overflow-y: scroll; + margin-top: -1px; + } +} + +.adf-upload__dragging { + & > div { + border-top: 1px dashed var(--theme-accent-color-a200) !important; + border-bottom: 1px dashed var(--theme-accent-color-a200) !important; + + &:first-child { + border-left: 1px dashed var(--theme-accent-color-a200); + } + + &:last-child { + border-right: 1px dashed var(--theme-accent-color-a200) !important; + } + } +} + +.adf-datatable--empty { + @include flex-column; + justify-content: center; + align-items: center; + height: inherit; + + .adf-datatable-body { + .adf-datatable-row { + height: 100%; + background-color: var(--theme-card-bg-color); + border: none !important; + + &:hover, &:focus { + background-color: unset; + cursor: default; + } + } + } +} + +.adf-datatable--empty--header-visible { + + .adf-datatable-header { + border: 1px solid var(--theme-border-color); + } + + .adf-datatable-body { + @include flex-column; + justify-content: center; + align-items: center; + + .adf-datatable-row { + height: 100%; + background-color: var(--theme-card-bg-color); + border: none !important; + + &:hover, &:focus { + background-color: unset; + cursor: default; + } + } + } +} diff --git a/lib/core/datatable/components/datatable/datatable.component.ts b/lib/core/datatable/components/datatable/datatable.component.ts index 49754ad36b..e883119382 100644 --- a/lib/core/datatable/components/datatable/datatable.component.ts +++ b/lib/core/datatable/components/datatable/datatable.component.ts @@ -53,6 +53,7 @@ export enum ShowHeaderMode { @Component({ selector: 'adf-datatable', templateUrl: './datatable.component.html', + styleUrls: ['./datatable.component.scss'], encapsulation: ViewEncapsulation.None, host: { class: 'adf-datatable' } }) diff --git a/lib/core/datatable/components/datatable/datatable.theme.scss b/lib/core/datatable/components/datatable/datatable.theme.scss deleted file mode 100644 index 28abad2865..0000000000 --- a/lib/core/datatable/components/datatable/datatable.theme.scss +++ /dev/null @@ -1,695 +0,0 @@ -@mixin adf-datatable-theme($theme) { - $foreground: map-get($theme, foreground); - $background: map-get($theme, background); - $primary: map-get($theme, primary); - $accent: map-get($theme, accent); - - $data-table-font-size: 14px !default; - $data-table-header-font-size: 12px !default; - $data-table-header-sort-icon-size: 16px !default; - $data-table-header-color: mat-color($foreground, text) !default; - $data-table-header-sorted-color: mat-color($foreground, text) !default; - $data-table-header-sorted-icon-hover-color: mat-color($foreground, disabled-text) !default; - $data-table-cell-text-color: mat-color($foreground, text) !default; - $data-table-cell-link-color: mat-color($foreground, text) !default; - $data-table-cell-link-hover-color: mat-color($accent, 500) !default; - $data-table-outline: 1px solid mat-color($accent, A200) !default; - $data-table-divider-color: mat-color($foreground, text, 0.07) !default; - $data-table-hover-color: mat-color($background, 'hover') !default; - $data-table-selection-color: mat-color($background, 'selected-button') !default; - $data-table-dividers: 1px solid $data-table-divider-color !default; - $data-table-dividers-edge-row: $data-table-dividers !default; - $data-table-dividers-wrapper-border: $data-table-dividers !default; - $data-table-row-height: 56px !default; - $data-table-column-spacing: 36px !default; - $data-table-column-padding: $data-table-column-spacing / 2; - $data-table-card-padding: 24px !default; - $data-table-cell-top: $data-table-card-padding / 2; - $data-table-drag-border: 1px dashed mat-color($accent, A200); - $data-table-thumbnail-width: 50px !default; - $data-table-cell-min-width: 50px !default; - $data-table-cell-min-width--no-grow: 100px !default; - $data-table-cell-min-width--fileSize: $data-table-cell-min-width !default; - - .adf-datatable { - overflow-y: scroll; - height: 100%; - } - - .adf-datatable-card { - border: 1px solid mat-color($foreground, divider); - - .adf-datatable-body { - flex-flow: row wrap; - display: flex; - - width: 100%; - - justify-content: space-evenly; - align-content: flex-start; - align-items: flex-start; - - .adf-datatable-row { - transition: all 0.3s ease; - position: relative; - display: flex; - flex-direction: column; - flex: 0 1 24%; - - width: 288px !important; - max-width: 288px !important; - min-width: 288px !important; - - height: 200px; - - overflow: hidden !important; - margin: 6px; - padding: 15px; - - @include mat-elevation-transition; - @include mat-overridable-elevation(2); - } - - .adf-datatable-row-empty-card { - height: 0 !important; - padding-top: 0; - padding-bottom: 0; - margin-top: 0; - margin-bottom: 0; - } - - .adf-is-selected { - background: mat-color($primary, 100); - padding-bottom: 31px; - } - - .adf-datatable-card-permission { - width: 100%; - min-height: 250px; - - .adf-datatable-cell { - height: 240px !important; - } - } - - .adf-datatable-card-loading { - width: 100%; - min-height: 250px; - - .adf-datatable-cell { - height: 240px !important; - } - } - - .adf-datatable-card-empty { - width: 100%; - min-height: 380px; - - .adf-datatable-cell { - height: 370px !important; - } - } - - .adf-datatable-cell--image { - margin-left: 8px; - } - - .adf-datatable-cell { - text-align: left; - flex: 0 1 24%; - height: 136px !important; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - outline: none; - - &::before { - margin-left: 10px; - text-align: left; - content: attr(title); - color: mat-color($foreground, text, 0.4); - float: left; - width: 140px; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - - .adf-datatable-cell-value { - display: block; - overflow: hidden; - text-overflow: ellipsis; - } - } - - .adf-datatable__actions-cell { - position: absolute; - height: 42px !important; - width: 42px !important; - right: 0; - top: 4px; - } - - .adf-datatable-row:not(:hover) .adf-datatable-hide-actions-without-hover { - display: none; - } - - .adf-image-table-cell { - margin: 8px; - padding: 4px; - overflow: visible; - border-bottom: 1px solid mat-color($foreground, divider); - - .adf-datatable-cell-container { - float: left; - width: 42px; - } - - &::after { - margin: 2px; - content: attr(filename); - float: left; - width: 140px; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - } - - .adf-datatable-checkbox { - margin: 8px; - } - - } - - .adf-datatable-header { - margin-right: 18px; - float: right; - } - - } - - .adf-datatable-list { - display: flex; - flex-direction: column; - background-color: mat-color($background, card); - border: $data-table-dividers-wrapper-border; - box-sizing: border-box; - overflow-x: auto; - - @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { - .adf-datatable-center-size-column-ie { - padding-top: 17px; - } - - .adf-datatable-center-actions-column-ie { - padding-top: 7px !important; - } - - .adf-datatable-center-date-column-ie { - position: relative !important; - - .adf-datatable-cell-value { - width: 100%; - } - } - - .adf-datatable-center-img-ie { - padding:0; - min-width: 0; - width: 24px; - height: 56px; - } - } - - .adf-datatable-header { - display: flex; - flex-direction: column; - width: fit-content; - min-width: 100%; - box-sizing: border-box; - } - - .adf-datatable-cell { - color: $data-table-cell-text-color; - } - - .adf-datatable-row { - &:hover, &:focus { - background-color: $data-table-hover-color; - } - - &:focus { - outline-offset: -1px; - outline: $data-table-outline; - } - - .adf-cell-value, .adf-datatable-cell-header { - &:focus { - outline-offset: -1px; - outline: $data-table-outline; - } - } - } - - .adf-datatable-body { - display: flex; - flex-direction: column; - background-color: inherit; - width: fit-content; - min-width: 100%; - - .adf-datatable-row { - @include material-animation-default(0.28s); - transition-property: background-color; - border-top: $data-table-dividers; - min-height: $data-table-row-height; - cursor: pointer; - - @include adf-no-select; - - &.adf-is-selected, &.adf-is-selected:hover { - background-color: $data-table-selection-color; - } - - &:last-child { - border-bottom: $data-table-dividers-edge-row; - } - } - } - - .adf-datatable-row { - display: flex; - align-items: center; - padding-left: 15px; - padding-right: 15px; - - .adf-datatable-checkbox { - max-width: $data-table-thumbnail-width; - width: $data-table-thumbnail-width; - } - - /* query for Microsoft IE 11*/ - @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { - .adf-datatable-checkbox { - padding-top: 15px; - } - } - } - - .adf-datatable-cell, .adf-datatable-cell-header { - text-align: left; - box-sizing: border-box; - min-width: $data-table-cell-min-width; - - &--text { - text-align: left; - position: relative; - } - - &--date { - text-align: left; - } - - &--number { - text-align: right; - } - - &--image, - &--icon { - padding-left: 24px; - padding-right: 24px; - width: $data-table-thumbnail-width; - min-width: $data-table-thumbnail-width; - text-align: left; - } - - &--fileSize { - min-width: $data-table-cell-min-width--fileSize; - } - } - - .adf-datatable-cell-header { - @include adf-no-select; - cursor: pointer; - position: relative; - vertical-align: bottom; - text-overflow: ellipsis; - font-weight: bold; - line-height: 24px; - letter-spacing: 0; - min-height: $data-table-row-height !important; - font-size: $data-table-header-font-size; - color: $data-table-header-color; - padding-bottom: 8px; - box-sizing: border-box; - padding-top: 12px !important; - - &.adf-sortable { - @include adf-no-select; - &:hover { - cursor: pointer; - } - display: flex; - align-items: center; - } - - &.adf-datatable__header--sorted-asc, - &.adf-datatable__header--sorted-desc { - color: $data-table-header-sorted-color; - &::before { - @include typo-icon; - font-size: $data-table-header-sort-icon-size; - content: '\e5d8'; - left: 5px; - right: 5px; - position: relative; - vertical-align: sub; - } - } - &.adf-datatable__header--sorted-desc::before { - content: '\e5db'; - } - &.adf-datatable-cell--fileSize.adf-datatable__header--sorted-asc::before, - &.adf-datatable-cell--fileSize.adf-datatable__header--sorted-desc::before { - left: -3px; - right: -3px; - } - - &.adf-datatable-checkbox { - display: flex; - align-items: center; - } - } - - .adf-datatable-cell-header.adf-expand-cell-1, .adf-datatable-cell.adf-expand-cell-1 { - flex-grow: 1; - } - - .adf-datatable-cell-header.adf-expand-cell-2, .adf-datatable-cell.adf-expand-cell-2 { - flex-grow: 2; - } - - .adf-datatable-cell-header.adf-expand-cell-3, .adf-datatable-cell.adf-expand-cell-3 { - flex-grow: 3; - } - - .adf-datatable-cell-header.adf-expand-cell-4, .adf-datatable-cell.adf-expand-cell-4 { - flex-grow: 4; - } - - .adf-datatable-cell-header.adf-expand-cell-5, .adf-datatable-cell.adf-expand-cell-5 { - flex-grow: 5; - } - - .adf-datatable-cell-header.adf-no-grow-cell, .adf-datatable-cell.adf-no-grow-cell { - flex-grow: 0; - min-width: $data-table-cell-min-width--no-grow; - } - - .adf-datatable-cell, .adf-datatable-cell-header { - flex: 1; - padding: 0; - align-items: center; - display: flex; - min-height: inherit; - - .adf-datatable-cell-container { - overflow: hidden; - min-height: inherit; - align-items: center; - display: flex; - width: 100%; - } - - .adf-datatable-cell-value { - word-break: break-word; - padding: 10px; - display: block; - - @media screen and (-ms-high-contrast: active), - screen and (-ms-high-contrast: none) { - padding: 17px 10px 10px; - } - } - &--fileSize .adf-datatable-cell-value { - padding: 0 10px 0 0; - } - } - - .adf-cell-value { - display: flex; - min-height: inherit; - align-items: center; - word-break: break-all; - width: 100%; - } - - .adf-datatable__actions-cell, .adf-datatable-cell--image { - max-width: $data-table-thumbnail-width; - display: flex; - } - - .adf-datatable-row:not(:hover) .adf-datatable-hide-actions-without-hover { - display: none; - } - - .adf-datatable-cell--image { - max-width: $data-table-thumbnail-width; - } - - .adf-location-cell { - a { - text-decoration: none; - color: $data-table-cell-link-color; - - &:hover { - color: $data-table-cell-link-hover-color; - text-decoration: underline; - } - } - } - - /* [Accessibility] For screen reader only */ - .adf-sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - border: 0; - } - - .adf-is-selected { - background: mat-color($primary, 100); - } - - .adf-datatable-link { - text-decoration: none; - color: $data-table-cell-link-color; - - &:hover { - color: $data-table-cell-link-hover-color; - text-decoration: underline; - } - } - - .adf-dynamic-column .adf-datatable-link:hover { - text-decoration: none; - - .adf-datatable-cell-value { - text-decoration: underline; - } - } - - .adf-datatable-cell, - .adf-datatable-cell-header { - .adf-datatable-link .adf-datatable-cell-value { - padding: 0 10px; - } - } - - .adf-ellipsis-cell { - position: sticky; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - padding: 0 4px; - - &.adf-datatable-cell-header, - .adf-datatable-content-cell { - max-width: calc(100% - 0.1px); - overflow: hidden; - text-overflow: ellipsis; - - .adf-datatable-cell-value { - overflow: hidden; - text-overflow: ellipsis; - } - } - .adf-datatable-content-cell { - overflow: unset; - position: absolute; - } - - /* query for Microsoft IE 11*/ - @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { - .adf-cell-value { - top: 100%; - } - } - - /* cell stretching content */ - & > div::after { - content: attr(title); - overflow: hidden; - height: 0; - display: block; - } - } - - /* Empty folder */ - .adf-no-content-container { - padding: 0 !important; - border: none !important; - width: 100%; - justify-content: center; - - & > img { - width: 100%; - } - } - - /* Loading folder */ - .adf-loading-content-container { - padding: 0 !important; - width: 100%; - - & > img { - width: 100%; - } - } - - .adf-no-permission { - &__row:hover { - cursor: default; - background-color: inherit; - } - - &__cell { - padding: 0 !important; - } - } - - /* Utils */ - .adf-hidden { - display: none; - } - - /* mobile phone */ - @media all and (max-width: 768px) { - .adf-desktop-only { - display: none !important; - } - } - - @media (max-device-width: 768px) { - .adf-desktop-only { - display: none !important; - } - } - - } - - /* [Accessibility] Material checkbox labels */ - .adf-checkbox-sr-only .mat-checkbox-label { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - border: 0; - } - - .adf-sticky-header { - border-top: 0; - height: 100%; - - .adf-datatable-header { - display: block; - margin-right: 0; - border-top: $data-table-dividers; - border-bottom: $data-table-dividers; - } - - .adf-datatable-body { - display: block; - flex: 1; - overflow-y: scroll; - margin-top: -1px; - } - } - - .adf-upload__dragging { - & > div { - border-top: $data-table-drag-border !important; - border-bottom: $data-table-drag-border !important; - - &:first-child { - border-left: $data-table-drag-border; - } - - &:last-child { - border-right: $data-table-drag-border !important; - } - } - } - - .adf-datatable--empty { - @include flex-column; - justify-content: center; - align-items: center; - height: inherit; - - .adf-datatable-body { - .adf-datatable-row { - height: 100%; - background-color: mat-color($background, card); - border: none !important; - - &:hover, &:focus { - background-color: unset; - cursor: default; - } - } - } - } - - .adf-datatable--empty--header-visible { - - .adf-datatable-header { - border: $data-table-dividers-wrapper-border; - } - - .adf-datatable-body { - @include flex-column; - justify-content: center; - align-items: center; - - .adf-datatable-row { - height: 100%; - background-color: mat-color($background, card); - border: none !important; - - &:hover, &:focus { - background-color: unset; - cursor: default; - } - } - } - } -} diff --git a/lib/core/directives/tooltip-card/tooltip-card.component.scss b/lib/core/directives/tooltip-card/tooltip-card.component.scss new file mode 100644 index 0000000000..b14906cf88 --- /dev/null +++ b/lib/core/directives/tooltip-card/tooltip-card.component.scss @@ -0,0 +1,32 @@ +@import '~@angular/material/theming'; + +:host { + display: block; +} + +div.adf-tooltip-card { + @include mat-elevation(8); + background-color: var(--theme-card-bg-color); + border: 1px solid var(--theme-primary-color); + padding: 12px; + border-radius: 6px; + + p, div { + font-size: var(--theme-caption-font-size); + color: var(--adf-tooltip-card-color); + margin: 0; + } + + hr { + border: 1px solid var(--theme-primary-color); + margin: 6px 0; + } + + img { + border-radius: 6px; + } +} + +::ng-deep .cdk-overlay-connected-position-bounding-box { + margin-top: 10px !important; +} diff --git a/lib/core/directives/tooltip-card/tooltip-card.component.ts b/lib/core/directives/tooltip-card/tooltip-card.component.ts index bbbc986271..96a07ba18d 100644 --- a/lib/core/directives/tooltip-card/tooltip-card.component.ts +++ b/lib/core/directives/tooltip-card/tooltip-card.component.ts @@ -21,6 +21,7 @@ import { DomSanitizer } from '@angular/platform-browser'; @Component({ selector: 'adf-tooltip-card-component', templateUrl: './tooltip-card.component.html', + styleUrls: ['./tooltip-card.component.scss'], animations: [ trigger('tooltip', [ transition(':enter', [ diff --git a/lib/core/directives/tooltip-card/tooltip-card.theme.scss b/lib/core/directives/tooltip-card/tooltip-card.theme.scss deleted file mode 100644 index 929a4ce219..0000000000 --- a/lib/core/directives/tooltip-card/tooltip-card.theme.scss +++ /dev/null @@ -1,36 +0,0 @@ -@mixin adf-tooltip-card-directive($theme) { - $primary: map-get($theme, primary); - $foreground: map-get($theme, foreground); - $background: map-get($theme, background); - - :host { - display: block; - } - - div.adf-tooltip-card { - @include mat-elevation(8); - background-color: mat-color($background, card); - border: 1px solid mat-color($primary); - padding: 12px; - border-radius: 6px; - - p, div { - font-size: mat-font-size($alfresco-typography, caption); - color: mat-color($foreground, text, 0.75); - margin: 0; - } - - hr { - border: 1px solid mat-color($primary); - margin: 6px 0; - } - - img { - border-radius: 6px; - } - } - - ::ng-deep .cdk-overlay-connected-position-bounding-box { - margin-top: 10px !important; - } -} diff --git a/lib/core/form/components/form-renderer.component.scss b/lib/core/form/components/form-renderer.component.scss new file mode 100644 index 0000000000..51f81acf44 --- /dev/null +++ b/lib/core/form/components/form-renderer.component.scss @@ -0,0 +1,121 @@ +.adf { + &-form-container { + max-width: 100% !important; + max-height: 100% !important; + + & .mat-card { + padding: 16px 24px; + overflow: hidden; + } + + & .mat-card-header-text { + margin: 0 !important; + } + + & .mat-tab-body-content { + overflow: hidden; + } + + & .mat-tab-label { + font-size: var(--theme-subheading-2-font-size); + line-height: var(--theme-headline-line-height); + letter-spacing: -0.4px; + text-align: left; + color: rgba(0, 0, 0, 0.54); + text-transform: uppercase; + } + + & .mat-ink-bar { + height: 4px; + } + + & .mat-form-field-wrapper { + margin: 0 12px 0 0; + } + + } + + &-form-title { + font-size: var(--theme-title-font-size); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + &-form-debug-container { + padding: 10px; + } + + &-form-debug-container .adf-debug-toggle-text { + padding-left: 15px; + cursor: pointer; + } + + &-form-debug-container .adf-debug-toggle-text:hover { + font-weight: bold; + } + + &-form-reload-button { + position: absolute; + right: 12px; + top: 30px; + } + + &-form-validation-button { + position: absolute; + right: 50px; + top: 39px; + color: var(--theme-accent-color); + + & .adf-invalid-color { + color: var(--theme-warn-color); + } + } + + &-form-hide-button { + display: none !important; + } + + &-task-title { + text-align: center; + } + + &-label { + width: 32px; + height: 16px; + font-size: var(--theme-caption-font-size); + line-height: var(--theme-headline-line-height); + text-align: left; + white-space: nowrap; + } + + &-form-mat-card-actions { + float: right; + padding-bottom: 25px !important; + padding-right: 25px !important; + + & .mat-button { + height: 36px; + border-radius: 5px; + + } + + & .mat-button-wrapper { + width: 58px; + height: 20px; + opacity: 0.54; + font-size: var(--theme-body-2-font-size); + font-weight: bold; + } + } +} + +form-field { + width: 100%; + + .mat-input-element { + font-size: var(--theme-body-2-font-size); + padding-top: 8px; + line-height: normal; + } +} diff --git a/lib/core/form/components/form-renderer.component.ts b/lib/core/form/components/form-renderer.component.ts index 4de6a38620..1deb4323fe 100644 --- a/lib/core/form/components/form-renderer.component.ts +++ b/lib/core/form/components/form-renderer.component.ts @@ -21,6 +21,7 @@ import { FormModel } from './widgets/core/form.model'; @Component({ selector: 'adf-form-renderer', templateUrl: './form-renderer.component.html', + styleUrls: ['./form-renderer.component.scss'], encapsulation: ViewEncapsulation.None }) export class FormRendererComponent { diff --git a/lib/core/form/components/form-renderer.theme.scss b/lib/core/form/components/form-renderer.theme.scss deleted file mode 100644 index 1634215e9b..0000000000 --- a/lib/core/form/components/form-renderer.theme.scss +++ /dev/null @@ -1,130 +0,0 @@ -@mixin adf-form-renderer-theme($theme) { - - $config: mat-typography-config(); - $warn: map-get($theme, warn); - $accent: map-get($theme, accent); - - .adf { - &-form-container { - max-width: 100% !important; - max-height: 100% !important; - - & .mat-card { - padding: 16px 24px; - overflow: hidden; - } - - & .mat-card-header-text { - margin: 0 !important; - } - - & .mat-tab-body-content { - overflow: hidden; - } - - & .mat-tab-label { - font-size: mat-font-size($config, subheading-2); - line-height: mat-line-height($config, headline); - letter-spacing: -0.4px; - text-align: left; - color: rgba(0, 0, 0, 0.54); - text-transform: uppercase; - } - - & .mat-ink-bar { - height: 4px; - } - - & .mat-form-field-wrapper { - margin: 0 12px 0 0; - } - - } - - &-form-title { - font-size: mat-font-size($alfresco-typography, title); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - &-form-debug-container { - padding: 10px; - } - - &-form-debug-container .adf-debug-toggle-text { - padding-left: 15px; - cursor: pointer; - } - - &-form-debug-container .adf-debug-toggle-text:hover { - font-weight: bold; - } - - &-form-reload-button { - position: absolute; - right: 12px; - top: 30px; - } - - &-form-validation-button { - position: absolute; - right: 50px; - top: 39px; - color: mat-color($accent); - - & .adf-invalid-color { - color: mat-color($warn); - } - } - - &-form-hide-button { - display: none !important; - } - - &-task-title { - text-align: center; - } - - &-label { - width: 32px; - height: 16px; - font-size: mat-font-size($config, caption); - line-height: mat-line-height($config, headline); - text-align: left; - white-space: nowrap; - } - - &-form-mat-card-actions { - float: right; - padding-bottom: 25px !important; - padding-right: 25px !important; - - & .mat-button { - height: 36px; - border-radius: 5px; - - } - - & .mat-button-wrapper { - width: 58px; - height: 20px; - opacity: 0.54; - font-size: mat-font-size($config, body-2); - font-weight: bold; - } - } - } - - form-field { - width: 100%; - - .mat-input-element { - font-size: mat-font-size($config, body-2); - padding-top: 8px; - line-height: normal; - } - } - -} - diff --git a/lib/core/form/components/widgets/amount/amount.theme.scss b/lib/core/form/components/widgets/amount/amount.theme.scss deleted file mode 100644 index 0366c8c393..0000000000 --- a/lib/core/form/components/widgets/amount/amount.theme.scss +++ /dev/null @@ -1,24 +0,0 @@ -@mixin adf-amount-widget-theme($theme) { - $foreground: map-get($theme, foreground); - - .adf { - &-amount-widget { - width: 100%; - margin-top: 15px; - } - - &-amount-widget__input { - margin-top: -15px; - - .mat-focused { - transition: none; - } - - &:not(.mat-focused):not(.mat-form-field-invalid) { - .adf-amount-widget__prefix-spacing { - color: mat-color($foreground, secondary-text); - } - } - } - } -} diff --git a/lib/core/form/components/widgets/amount/amount.widget.scss b/lib/core/form/components/widgets/amount/amount.widget.scss new file mode 100644 index 0000000000..0c244db504 --- /dev/null +++ b/lib/core/form/components/widgets/amount/amount.widget.scss @@ -0,0 +1,20 @@ +.adf { + &-amount-widget { + width: 100%; + margin-top: 15px; + } + + &-amount-widget__input { + margin-top: -15px; + + .mat-focused { + transition: none; + } + + &:not(.mat-focused):not(.mat-form-field-invalid) { + .adf-amount-widget__prefix-spacing { + color: var(--theme-secondary-text-color); + } + } + } +} diff --git a/lib/core/form/components/widgets/amount/amount.widget.ts b/lib/core/form/components/widgets/amount/amount.widget.ts index 7533e823a0..bb02836bbf 100644 --- a/lib/core/form/components/widgets/amount/amount.widget.ts +++ b/lib/core/form/components/widgets/amount/amount.widget.ts @@ -30,6 +30,7 @@ export const ADF_AMOUNT_SETTINGS = new InjectionToken('adf @Component({ selector: 'amount-widget', templateUrl: './amount.widget.html', + styleUrls: ['./amount.widget.scss'], host: { '(click)': 'event($event)', '(blur)': 'event($event)', diff --git a/lib/core/form/components/widgets/container/container.theme.scss b/lib/core/form/components/widgets/container/container.theme.scss deleted file mode 100644 index 461752310e..0000000000 --- a/lib/core/form/components/widgets/container/container.theme.scss +++ /dev/null @@ -1,119 +0,0 @@ -@mixin adf-form-container-widget-theme($theme) { - $primary: map-get($theme, primary); - - .adf-hidden { - display: none; - } - - .adf-container-widget__header-text { - border-bottom: 1px solid rgba(0, 0, 0, 0.87); - padding-bottom: 10px; - cursor: default; - user-select: none; - -webkit-user-select: none; - /* Chrome/Safari/Opera */ - -moz-user-select: none; - /* Firefox */ - -ms-user-select: none; - /* IE/Edge */ - -webkit-touch-callout: none; - /* iOS Safari */ - &.adf-collapsible { - cursor: pointer; - } - } - - .adf-field-list { - padding: 0; - list-style-type: none; - width: 100%; - height: 100%; - } - - container-widget { - .adf-grid-list-column-view { - display: flex; - align-items: flex-start; - margin-right: -1%; - } - - .adf-grid-list-single-column { - display: flex; - flex-direction: column; - align-items: flex-start; - flex: 1 1 auto; - } - - .adf-grid-list-column-view-item { - width: 100%; - flex-grow: 1; - box-sizing: border-box; - padding-left: 1%; - padding-right: 1%; - } - - .adf-grid-list { - display: grid; - } - - .adf-grid-list-item { - box-sizing: border-box; - padding-left: 3px; - padding-right: 3px; - } - - @media screen and (max-width: 959px) { - .adf-grid-list-item { - flex: 1 0 100%; - } - - .adf-grid-list--column-view { - flex-direction: column; - } - - .adf-grid-list-single-column { - width: 90% !important; - } - - .adf-grid-list-column-view-item { - flex: 1 0 auto; - } - } - - .mat-form-field { - width: 100%; - } - - mat-form-field { - width: 100%; - } - - .mat-input-placeholder { - top: 1.8em !important; - } - - .mat-focused { - - label { - transform: scaleX(1); - transition: transform 150ms linear, - background-color $swift-ease-in-duration $swift-ease-in-timing-function; - color: mat-color($primary); - } - - .mat-form-field-prefix { - color: mat-color($primary); - } - } - - .mat-grid-tile { - overflow: visible; - width: 80%; - } - - adf-form-field { - width: 100%; - } - - } -} diff --git a/lib/core/form/components/widgets/container/container.widget.scss b/lib/core/form/components/widgets/container/container.widget.scss new file mode 100644 index 0000000000..827dd3d055 --- /dev/null +++ b/lib/core/form/components/widgets/container/container.widget.scss @@ -0,0 +1,115 @@ +.adf-hidden { + display: none; +} + +.adf-container-widget__header-text { + border-bottom: 1px solid rgba(0, 0, 0, 0.87); + padding-bottom: 10px; + cursor: default; + user-select: none; + -webkit-user-select: none; + /* Chrome/Safari/Opera */ + -moz-user-select: none; + /* Firefox */ + -ms-user-select: none; + /* IE/Edge */ + -webkit-touch-callout: none; + /* iOS Safari */ + &.adf-collapsible { + cursor: pointer; + } +} + +.adf-field-list { + padding: 0; + list-style-type: none; + width: 100%; + height: 100%; +} + +container-widget { + .adf-grid-list-column-view { + display: flex; + align-items: flex-start; + margin-right: -1%; + } + + .adf-grid-list-single-column { + display: flex; + flex-direction: column; + align-items: flex-start; + flex: 1 1 auto; + } + + .adf-grid-list-column-view-item { + width: 100%; + flex-grow: 1; + box-sizing: border-box; + padding-left: 1%; + padding-right: 1%; + } + + .adf-grid-list { + display: grid; + } + + .adf-grid-list-item { + box-sizing: border-box; + padding-left: 3px; + padding-right: 3px; + } + + @media screen and (max-width: 959px) { + .adf-grid-list-item { + flex: 1 0 100%; + } + + .adf-grid-list--column-view { + flex-direction: column; + } + + .adf-grid-list-single-column { + width: 90% !important; + } + + .adf-grid-list-column-view-item { + flex: 1 0 auto; + } + } + + .mat-form-field { + width: 100%; + } + + mat-form-field { + width: 100%; + } + + .mat-input-placeholder { + top: 1.8em !important; + } + + .mat-focused { + + label { + transform: scaleX(1); + transition: transform 150ms linear; + background-color: 300ms cubic-bezier(0.55, 0, 0.55, 0.2); + color: var(--theme-primary-color); + } + + .mat-form-field-prefix { + color: var(--theme-primary-color); + } + } + + .mat-grid-tile { + overflow: visible; + width: 80%; + } + + adf-form-field { + width: 100%; + } + +} diff --git a/lib/core/form/components/widgets/container/container.widget.ts b/lib/core/form/components/widgets/container/container.widget.ts index 4d3d9009ac..027b581388 100644 --- a/lib/core/form/components/widgets/container/container.widget.ts +++ b/lib/core/form/components/widgets/container/container.widget.ts @@ -26,6 +26,7 @@ import { ContainerWidgetComponentModel } from './container.widget.model'; @Component({ selector: 'container-widget', templateUrl: './container.widget.html', + styleUrls: ['./container.widget.scss'], host: { '(click)': 'event($event)', '(blur)': 'event($event)', diff --git a/lib/core/form/components/widgets/dynamic-table/dynamic-table.theme.scss b/lib/core/form/components/widgets/dynamic-table/dynamic-table.theme.scss deleted file mode 100644 index 63f14eebda..0000000000 --- a/lib/core/form/components/widgets/dynamic-table/dynamic-table.theme.scss +++ /dev/null @@ -1,166 +0,0 @@ -@mixin adf-dynamic-table-theme($theme) { - $foreground: map-get($theme, foreground); - $dynamic-table-font-size: 14px !default; - $dynamic-table-header-font-size: 12px !default; - $dynamic-table-header-sort-icon-size: 16px !default; - $dynamic-table-header-color: mat-color($foreground, text) !default; - $dynamic-table-header-sorted-color: mat-color($foreground, text) !default; - $dynamic-table-header-sorted-icon-hover-color: mat-color($foreground, disabled-text) !default; - $dynamic-table-divider-color: mat-color($foreground, text, 0.07) !default; - $dynamic-table-hover-color: #eeeeee !default; - $dynamic-table-selection-color: #e0f7fa !default; - $dynamic-table-dividers: 1px solid $dynamic-table-divider-color !default; - $dynamic-table-row-height: 56px !default; - $dynamic-table-column-spacing: 36px !default; - $dynamic-table-column-padding: $dynamic-table-column-spacing / 2; - $dynamic-table-card-padding: 24px !default; - $dynamic-table-cell-top: $dynamic-table-card-padding / 2; - $dynamic-table-drag-border: 1px dashed rgb(68, 138, 255); - - dynamic-table-widget .adf-label { - width: auto; - height: auto; - } - - .adf { - - &-dynamic-table-scrolling { - overflow: auto; - } - - &-dynamic-table { - width: 100%; - position: relative; - border: $dynamic-table-dividers; - white-space: nowrap; - font-size: $dynamic-table-font-size; - - /* Firefox fixes */ - border-collapse: unset; - border-spacing: 0; - - thead { - padding-bottom: 3px; - } - - tbody { - tr { - position: relative; - height: $dynamic-table-row-height; - @include material-animation-default(0.28s); - transition-property: background-color; - - &:hover { - background-color: $dynamic-table-hover-color; - } - - &.adf-is-selected, &.adf-is-selected:hover { - background-color: $dynamic-table-selection-color; - } - - &:focus { - outline-offset: -1px; - outline: rgb(68, 138, 255) solid 1px; - } - } - } - - td, th { - padding: 0 $dynamic-table-column-padding 12px $dynamic-table-column-padding; - text-align: center; - - &:first-of-type { - padding-left: 24px; - } - - &:last-of-type { - padding-right: 24px; - } - } - - td { - color: mat-color($foreground, text); - position: relative; - vertical-align: middle; - height: $dynamic-table-row-height; - border-top: $dynamic-table-dividers; - border-bottom: $dynamic-table-dividers; - padding-top: $dynamic-table-cell-top; - box-sizing: border-box; - - @include adf-no-select; - cursor: default; - } - - th { - @include adf-no-select; - cursor: pointer; - position: relative; - vertical-align: bottom; - text-overflow: ellipsis; - font-weight: bold; - line-height: 24px; - letter-spacing: 0; - height: $dynamic-table-row-height; - font-size: $dynamic-table-header-font-size; - color: $dynamic-table-header-color; - padding-bottom: 8px; - box-sizing: border-box; - - &.adf-sortable { - @include adf-no-select; - &:hover { - cursor: pointer; - } - } - - &.adf-dynamic-table__header--sorted-asc, - &.adf-dynamic-table__header--sorted-desc { - color: $dynamic-table-header-sorted-color; - &::before { - @include typo-icon; - font-size: $dynamic-table-header-sort-icon-size; - content: '\e5d8'; - margin-right: 5px; - vertical-align: sub; - } - &:hover { - cursor: pointer; - &::before { - color: $dynamic-table-header-sorted-icon-hover-color; - } - } - } - &.adf-dynamic-table__header--sorted-desc::before { - content: '\e5db'; - } - } - - .adf-dynamic-table-cell { - text-align: left; - cursor: default; - - &--text { - text-align: left; - } - - &--number { - text-align: right; - } - - &--image { - text-align: left; - - img { - width: 24px; - height: 24px; - } - } - } - - .adf-full-width { - width: 100%; - } - } - } -} diff --git a/lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.scss b/lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.scss new file mode 100644 index 0000000000..bfc86895d4 --- /dev/null +++ b/lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.scss @@ -0,0 +1,161 @@ +@import '~@angular/material/theming'; +@import '../../../../styles/mixins'; + +$dynamic-table-font-size: 14px !default; +$dynamic-table-header-font-size: 12px !default; +$dynamic-table-header-sort-icon-size: 16px !default; +$dynamic-table-hover-color: #eeeeee !default; +$dynamic-table-selection-color: #e0f7fa !default; +$dynamic-table-row-height: 56px !default; +$dynamic-table-column-spacing: 36px !default; +$dynamic-table-column-padding: $dynamic-table-column-spacing / 2; +$dynamic-table-card-padding: 24px !default; +$dynamic-table-cell-top: $dynamic-table-card-padding / 2; +$dynamic-table-drag-border: 1px dashed rgb(68, 138, 255); + +dynamic-table-widget .adf-label { + width: auto; + height: auto; +} + +.adf { + + &-dynamic-table-scrolling { + overflow: auto; + } + + &-dynamic-table { + width: 100%; + position: relative; + border: 1px solid var(--theme-border-color); + white-space: nowrap; + font-size: $dynamic-table-font-size; + + /* Firefox fixes */ + border-collapse: unset; + border-spacing: 0; + + thead { + padding-bottom: 3px; + } + + tbody { + tr { + position: relative; + height: $dynamic-table-row-height; + @include material-animation-default(0.28s); + transition-property: background-color; + + &:hover { + background-color: $dynamic-table-hover-color; + } + + &.adf-is-selected, &.adf-is-selected:hover { + background-color: $dynamic-table-selection-color; + } + + &:focus { + outline-offset: -1px; + outline: rgb(68, 138, 255) solid 1px; + } + } + } + + td, th { + padding: 0 $dynamic-table-column-padding 12px $dynamic-table-column-padding; + text-align: center; + + &:first-of-type { + padding-left: 24px; + } + + &:last-of-type { + padding-right: 24px; + } + } + + td { + color: var(--theme-text-fg-color); + position: relative; + vertical-align: middle; + height: $dynamic-table-row-height; + border-top: 1px solid var(--theme-border-color); + border-bottom: 1px solid var(--theme-border-color); + padding-top: $dynamic-table-cell-top; + box-sizing: border-box; + + @include adf-no-select; + cursor: default; + } + + th { + @include adf-no-select; + cursor: pointer; + position: relative; + vertical-align: bottom; + text-overflow: ellipsis; + font-weight: bold; + line-height: 24px; + letter-spacing: 0; + height: $dynamic-table-row-height; + font-size: $dynamic-table-header-font-size; + color: var(--theme-text-fg-color); + padding-bottom: 8px; + box-sizing: border-box; + + &.adf-sortable { + @include adf-no-select; + &:hover { + cursor: pointer; + } + } + + &.adf-dynamic-table__header--sorted-asc, + &.adf-dynamic-table__header--sorted-desc { + color: var(--theme-text-fg-color); + &::before { + @include typo-icon; + font-size: $dynamic-table-header-sort-icon-size; + content: '\e5d8'; + margin-right: 5px; + vertical-align: sub; + } + &:hover { + cursor: pointer; + &::before { + color: var(--theme-disabled-text-color); + } + } + } + &.adf-dynamic-table__header--sorted-desc::before { + content: '\e5db'; + } + } + + .adf-dynamic-table-cell { + text-align: left; + cursor: default; + + &--text { + text-align: left; + } + + &--number { + text-align: right; + } + + &--image { + text-align: left; + + img { + width: 24px; + height: 24px; + } + } + } + + .adf-full-width { + width: 100%; + } + } +} diff --git a/lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.ts b/lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.ts index 6889f4ae75..c8fd997daf 100644 --- a/lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.ts +++ b/lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.ts @@ -29,6 +29,7 @@ import { DynamicTableModel } from './dynamic-table.widget.model'; @Component({ selector: 'dynamic-table-widget', templateUrl: './dynamic-table.widget.html', + styleUrls: ['./dynamic-table.widget.scss'], host: { '(click)': 'event($event)', '(blur)': 'event($event)', diff --git a/lib/core/form/components/widgets/form.theme.scss b/lib/core/form/components/widgets/form.theme.scss index 70692a4726..d9a67e8906 100644 --- a/lib/core/form/components/widgets/form.theme.scss +++ b/lib/core/form/components/widgets/form.theme.scss @@ -1,97 +1,86 @@ -@mixin adf-form-theme($theme) { - $primary: map-get($theme, primary); - $accent: map-get($theme, accent); - $warn: map-get($theme, warn); - - @include adf-hyperlink-widget-theme($theme); - - ul > li > form-field > .adf-focus { - .adf-label { - color: mat-color($primary); - } +ul > li > form-field > .adf-focus { + .adf-label { + color: var(--theme-primary-color); + } +} + +.adf { + + &-error-text-container { + height: 20px; + margin-top: -12px; + } + + &-error-text { + padding: 1px; + height: 16px; + font-size: 12px; + line-height: 1.33; + float: left; + color: var(--theme-warn-color); + } + + &-error-icon { + float: right; + font-size: 17px; + color: var(--theme-warn-color); + } + + &-label { + color: rgb(186, 186, 186);; + } + + &-invalid { + + .mat-form-field-underline { + background-color: #f44336 !important; + } + + .mat-checkbox { + color: var(--theme-warn-color); + .mat-checkbox-frame { + border-color: var(--theme-warn-color); + } + } + + .mat-select { + + &-value { + color: var(--theme-warn-color); + } + &-arrow { + color: var(--theme-warn-color); + } + + } + + .adf-file { + border-color: var(--theme-warn-color); + } + + .mat-form-field-prefix { + color: var(--theme-warn-color); + } + + .adf-input { + border-color: var(--theme-warn-color); + } + + .adf-label { + color: var(--theme-warn-color); + &::after { + background-color: var(--theme-warn-color); + } + } + } +} + + +/* query for Microsoft IE 11*/ +@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { + adf-form-field { + .mat-input-element, .mat-select, .mat-form-field { + display: block !important; + } } - - .adf { - - &-error-text-container { - height: 20px; - margin-top: -12px; - } - - &-error-text { - padding: 1px; - height: 16px; - font-size: 12px; - line-height: 1.33; - float: left; - color: mat-color($warn); - } - - &-error-icon { - float: right; - font-size: 17px; - color: mat-color($warn); - } - - &-label { - color: rgb(186, 186, 186);; - } - - &-invalid { - - .mat-form-field-underline { - background-color: #f44336 !important; - } - - .mat-checkbox { - color: mat-color($warn); - .mat-checkbox-frame { - border-color: mat-color($warn); - } - } - - .mat-select { - - &-value { - color: mat-color($warn); - } - &-arrow { - color: mat-color($warn); - } - - } - - .adf-file { - border-color: mat-color($warn); - } - - .mat-form-field-prefix { - color: mat-color($warn); - } - - .adf-input { - border-color: mat-color($warn); - } - - .adf-label { - color: mat-color($warn); - &::after { - background-color: mat-color($warn); - } - } - } - } - - - /* query for Microsoft IE 11*/ - @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { - adf-form-field { - .mat-input-element, .mat-select, .mat-form-field { - display: block !important; - } - } - } - - - } diff --git a/lib/core/form/components/widgets/hyperlink/hyperlink.theme.scss b/lib/core/form/components/widgets/hyperlink/hyperlink.theme.scss deleted file mode 100644 index 739c0a9ce5..0000000000 --- a/lib/core/form/components/widgets/hyperlink/hyperlink.theme.scss +++ /dev/null @@ -1,12 +0,0 @@ -@mixin adf-hyperlink-widget-theme($theme) { - $primary: map-get($theme, primary); - - .adf-hyperlink-widget { - padding: 0.4375em 0; - border-top: 0.84375em solid transparent; - - a { - color: mat-color($primary); - } - } -} diff --git a/lib/core/form/components/widgets/hyperlink/hyperlink.widget.scss b/lib/core/form/components/widgets/hyperlink/hyperlink.widget.scss new file mode 100644 index 0000000000..396e67a1fc --- /dev/null +++ b/lib/core/form/components/widgets/hyperlink/hyperlink.widget.scss @@ -0,0 +1,8 @@ +.adf-hyperlink-widget { + padding: 0.4375em 0; + border-top: 0.84375em solid transparent; + + a { + color: var(--theme-primary-color); + } +} diff --git a/lib/core/form/components/widgets/hyperlink/hyperlink.widget.ts b/lib/core/form/components/widgets/hyperlink/hyperlink.widget.ts index e6dea0b70b..32fd9d00bb 100644 --- a/lib/core/form/components/widgets/hyperlink/hyperlink.widget.ts +++ b/lib/core/form/components/widgets/hyperlink/hyperlink.widget.ts @@ -25,6 +25,7 @@ import { FormFieldModel } from '../core'; @Component({ selector: 'hyperlink-widget', templateUrl: './hyperlink.widget.html', + styleUrls: ['./hyperlink.widget.scss'], host: { '(click)': 'event($event)', '(blur)': 'event($event)', diff --git a/lib/core/form/components/widgets/people/people.theme.scss b/lib/core/form/components/widgets/people/people.theme.scss deleted file mode 100644 index 9f23320597..0000000000 --- a/lib/core/form/components/widgets/people/people.theme.scss +++ /dev/null @@ -1,60 +0,0 @@ -@mixin adf-form-people-widget-theme($theme) { - $primary: map-get($theme, primary); - $background: map-get($theme, background); - $foreground: map-get($theme, foreground); - - .adf { - - &-people-widget { - width: 100%; - - .mat-form-field-label-wrapper { - top: 10px; - } - } - - &-people-widget-list { - margin: 5px 0; - padding: 10px 0; - } - - &-people-widget-row { - display: flex; - align-items: center; - } - - &-people-widget-pic { - background: mat-color($primary); - display: flex; - justify-content: center; - align-items: center; - width: 40px; - height: 40px; - border-radius: 100px; - color: mat-color($foreground, text); - font-weight: bolder; - font-size: 18px; - text-transform: uppercase; - } - - &-people-widget-image { - margin-left: -44px; - left: 21px; - background: mat-color($background, dialog); - border-radius: 100px; - width: 40px; - height: 40px; - vertical-align: middle; - display: inline-block; - padding: 0; - } - - &-people-widget-image-row { - display: inline-block; - } - - &-people-label-name { - padding-left: 10px; - } - } -} diff --git a/lib/core/form/components/widgets/people/people.widget.scss b/lib/core/form/components/widgets/people/people.widget.scss new file mode 100644 index 0000000000..1f06496d0b --- /dev/null +++ b/lib/core/form/components/widgets/people/people.widget.scss @@ -0,0 +1,54 @@ +.adf { + + &-people-widget { + width: 100%; + + .mat-form-field-label-wrapper { + top: 10px; + } + } + + &-people-widget-list { + margin: 5px 0; + padding: 10px 0; + } + + &-people-widget-row { + display: flex; + align-items: center; + } + + &-people-widget-pic { + background: var(--theme-primary-color); + display: flex; + justify-content: center; + align-items: center; + width: 40px; + height: 40px; + border-radius: 100px; + color: var(--theme-text-fg-color); + font-weight: bolder; + font-size: 18px; + text-transform: uppercase; + } + + &-people-widget-image { + margin-left: -44px; + left: 21px; + background: var(--theme-dialog-bg-color); + border-radius: 100px; + width: 40px; + height: 40px; + vertical-align: middle; + display: inline-block; + padding: 0; + } + + &-people-widget-image-row { + display: inline-block; + } + + &-people-label-name { + padding-left: 10px; + } +} diff --git a/lib/core/form/components/widgets/people/people.widget.ts b/lib/core/form/components/widgets/people/people.widget.ts index 4b1901ad54..f3f55a5530 100644 --- a/lib/core/form/components/widgets/people/people.widget.ts +++ b/lib/core/form/components/widgets/people/people.widget.ts @@ -36,6 +36,7 @@ import { @Component({ selector: 'people-widget', templateUrl: './people.widget.html', + styleUrls: ['./people.widget.scss'], host: { '(click)': 'event($event)', '(blur)': 'event($event)', diff --git a/lib/core/info-drawer/info-drawer-layout.component.scss b/lib/core/info-drawer/info-drawer-layout.component.scss new file mode 100644 index 0000000000..b017d422bb --- /dev/null +++ b/lib/core/info-drawer/info-drawer-layout.component.scss @@ -0,0 +1,93 @@ +@import '../styles/mixins'; + +$adf-info-drawer-layout-title-font-size: 20px !default; +$adf-info-drawer-icon-size: 48px !default; + +.adf { + &-info-drawer { + @include flex-column; + } + + &-info-drawer-layout { + @include flex-column; + overflow: auto; + width: 100%; + background-color: var(--theme-background-color); + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27); + + & .mat-tab-label { + font-weight: bold; + text-align: left; + color: var(--theme-accent-color); + text-transform: uppercase; + opacity: 1; + + &-active { + color: var(--theme-primary-color); + } + } + + &-header { + padding: 13px 0 0 23px; + display: flex; + justify-content: space-between; + margin-bottom: 40px; + + &-buttons { + padding-right:18px; + mat-icon { + cursor: pointer; + } + } + + &-title { + width: 197px; + height: 32px; + font-size: $adf-info-drawer-layout-title-font-size; + line-height: 1.6; + letter-spacing: -0.5px; + text-align: left; + color: var(--theme-text-color); + + & > div { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + } + } + + &-content { + padding: 10px; + + > * { + margin-bottom: 20px; + display: block; + } + + > *:last-child { + margin-bottom: 0; + } + + .adf-info-drawer-tabs .mat-tab-body-content { + .adf-manage-versions-empty, + .adf-manage-versions-no-permission { + margin: 0; + padding: $adf-info-drawer-icon-size/2; + color: var(--theme-text-color); + text-align: center; + display: flex; + flex-direction: column; + + &-icon { + width: $adf-info-drawer-icon-size; + height: $adf-info-drawer-icon-size; + font-size: $adf-info-drawer-icon-size; + margin: 0 auto $adf-info-drawer-icon-size/2; + display: block; + } + } + } + } + } +} diff --git a/lib/core/info-drawer/info-drawer-layout.component.ts b/lib/core/info-drawer/info-drawer-layout.component.ts index 65fb795342..bc897f0f30 100644 --- a/lib/core/info-drawer/info-drawer-layout.component.ts +++ b/lib/core/info-drawer/info-drawer-layout.component.ts @@ -20,6 +20,7 @@ import { Component, Directive, Input, ViewEncapsulation } from '@angular/core'; @Component({ selector: 'adf-info-drawer-layout', templateUrl: './info-drawer-layout.component.html', + styleUrls: ['./info-drawer-layout.component.scss'], encapsulation: ViewEncapsulation.None, host: { 'class': 'adf-info-drawer-layout' } }) diff --git a/lib/core/info-drawer/info-drawer-layout.theme.scss b/lib/core/info-drawer/info-drawer-layout.theme.scss deleted file mode 100644 index 829dcc673c..0000000000 --- a/lib/core/info-drawer/info-drawer-layout.theme.scss +++ /dev/null @@ -1,99 +0,0 @@ -@mixin adf-info-drawer-theme($theme) { - $primary: map-get($theme, primary); - $accent: map-get($theme, accent); - $background: map-get($theme, background); - $foreground: map-get($theme, foreground); - $adf-info-drawer-layout-background-color: mat-color($background, background) !default; - $adf-info-drawer-layout-title-color: mat-color($foreground, text, 0.54) !default; - $adf-info-drawer-layout-title-font-size: 20px !default; - $adf-info-drawer-icon-size: 48px !default; - - .adf { - &-info-drawer { - @include flex-column; - } - - &-info-drawer-layout { - @include flex-column; - overflow: auto; - width: 100%; - background-color: $adf-info-drawer-layout-background-color; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27); - - & .mat-tab-label { - font-weight: bold; - text-align: left; - color: mat-color($accent); - text-transform: uppercase; - opacity: 1; - - &-active { - color: mat-color($primary); - } - } - - &-header { - padding: 13px 0 0 23px; - display: flex; - justify-content: space-between; - margin-bottom: 40px; - - &-buttons { - padding-right:18px; - mat-icon { - cursor: pointer; - } - } - - &-title { - width: 197px; - height: 32px; - font-size: $adf-info-drawer-layout-title-font-size; - line-height: 1.6; - letter-spacing: -0.5px; - text-align: left; - color: $adf-info-drawer-layout-title-color; - - & > div { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - } - } - - &-content { - padding: 10px; - - > * { - margin-bottom: 20px; - display: block; - } - - > *:last-child { - margin-bottom: 0; - } - - .adf-info-drawer-tabs .mat-tab-body-content { - .adf-manage-versions-empty, - .adf-manage-versions-no-permission { - margin: 0; - padding: $adf-info-drawer-icon-size/2; - color: mat-color($foreground, text, 0.54); - text-align: center; - display: flex; - flex-direction: column; - - &-icon { - width: $adf-info-drawer-icon-size; - height: $adf-info-drawer-icon-size; - font-size: $adf-info-drawer-icon-size; - margin: 0 auto $adf-info-drawer-icon-size/2; - display: block; - } - } - } - } - } - } -} diff --git a/lib/core/info-drawer/info-drawer.component.spec.ts b/lib/core/info-drawer/info-drawer.component.spec.ts index 7cba2eb77a..5804d378d8 100644 --- a/lib/core/info-drawer/info-drawer.component.spec.ts +++ b/lib/core/info-drawer/info-drawer.component.spec.ts @@ -20,7 +20,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { MatTabChangeEvent } from '@angular/material/tabs'; import { By } from '@angular/platform-browser'; import { InfoDrawerComponent } from './info-drawer.component'; -import { setupTestBed } from '../testing/setup-test-bed'; import { of } from 'rxjs'; import { TranslateService, TranslateModule } from '@ngx-translate/core'; import { CoreTestingModule } from '../testing/core.testing.module'; @@ -31,14 +30,13 @@ describe('InfoDrawerComponent', () => { let fixture: ComponentFixture; let translateService: TranslateService; - setupTestBed({ - imports: [ - TranslateModule.forRoot(), - CoreTestingModule - ] - }); - beforeEach(() => { + TestBed.configureTestingModule({ + imports: [ + TranslateModule.forRoot(), + CoreTestingModule + ] + }); translateService = TestBed.inject(TranslateService); spyOn(translateService, 'get').and.callFake((key) => of(key)); @@ -89,17 +87,16 @@ describe('Custom InfoDrawer', () => { let component: CustomInfoDrawerComponent; let translateService: TranslateService; - setupTestBed({ - imports: [ - TranslateModule.forRoot(), - CoreTestingModule - ], - declarations: [ - CustomInfoDrawerComponent - ] - }); - beforeEach(() => { + TestBed.configureTestingModule({ + imports: [ + TranslateModule.forRoot(), + CoreTestingModule + ], + declarations: [ + CustomInfoDrawerComponent + ] + }); translateService = TestBed.inject(TranslateService); spyOn(translateService, 'get').and.callFake((key) => of(key)); @@ -108,6 +105,10 @@ describe('Custom InfoDrawer', () => { component = fixture.componentInstance; }); + afterEach(() => { + fixture.destroy(); + }); + it('should render the title', () => { fixture.detectChanges(); const title: any = fixture.debugElement.queryAll(By.css('[info-drawer-title]')); @@ -119,7 +120,7 @@ describe('Custom InfoDrawer', () => { fixture.detectChanges(); const tab: any = fixture.debugElement.queryAll(By.css('.mat-tab-label-active')); expect(tab.length).toBe(1); - expect(tab[0].nativeElement.innerText).toContain('Tab1'); + expect(tab[0].nativeElement.innerText).toContain('TAB1'); }); it('should select the tab 2 (index 1)', () => { @@ -127,7 +128,7 @@ describe('Custom InfoDrawer', () => { fixture.detectChanges(); const tab: any = fixture.debugElement.queryAll(By.css('.mat-tab-label-active')); expect(tab.length).toBe(1); - expect(tab[0].nativeElement.innerText).toContain('Tab2'); + expect(tab[0].nativeElement.innerText).toContain('TAB2'); }); it('should render a tab with icon', () => { @@ -135,7 +136,7 @@ describe('Custom InfoDrawer', () => { fixture.detectChanges(); const tab: any = fixture.debugElement.queryAll(By.css('.mat-tab-label-active')); expect(tab[0].nativeElement.innerText).not.toBe('Tab3'); - expect(tab[0].nativeElement.innerText).toContain('tab-icon'); + expect(tab[0].nativeElement.innerText).toContain('TAB-ICON'); }); }); @@ -153,17 +154,16 @@ describe('Header visibility InfoDrawer', () => { let fixture: ComponentFixture; let component: VisibilityInfoDrawerComponent; - setupTestBed({ - imports: [ - TranslateModule.forRoot(), - CoreTestingModule - ], - declarations: [ - VisibilityInfoDrawerComponent - ] - }); - beforeEach(() => { + TestBed.configureTestingModule({ + imports: [ + TranslateModule.forRoot(), + CoreTestingModule + ], + declarations: [ + VisibilityInfoDrawerComponent + ] + }); fixture = TestBed.createComponent(VisibilityInfoDrawerComponent); fixture.detectChanges(); component = fixture.componentInstance; diff --git a/lib/core/info-drawer/info-drawer.component.ts b/lib/core/info-drawer/info-drawer.component.ts index 77419804c5..4ab41aa7a6 100644 --- a/lib/core/info-drawer/info-drawer.component.ts +++ b/lib/core/info-drawer/info-drawer.component.ts @@ -19,7 +19,8 @@ import { Component, ContentChildren, EventEmitter, HostListener, Input, Output, import { MatTabChangeEvent } from '@angular/material/tabs'; @Component({ selector: 'adf-info-drawer-tab', - template: '' + template: '', + encapsulation: ViewEncapsulation.None }) export class InfoDrawerTabComponent { /** The title of the tab (string or translation key). */ diff --git a/lib/core/layout/components/header/header.component.scss b/lib/core/layout/components/header/header.component.scss new file mode 100644 index 0000000000..ae0fcf73ee --- /dev/null +++ b/lib/core/layout/components/header/header.component.scss @@ -0,0 +1,108 @@ +adf-layout-header .mat-toolbar-single-row { + + color: var(--theme-primary-color-default-contrast) !important; + position: relative; + padding: 0 24px; + + .adf-menu-icon { + position: relative; + margin-right: 0; + + .mat-icon { + font-size: 29px; + padding: 0 5px 0 0; + } + } + + .adf-app-logo { + position: relative; + height: 28px; + width: 28px; + vertical-align: middle; + margin-top: -3px; + } + + .adf-app-title { + cursor: pointer; + letter-spacing: -0.3px; + font-weight: 100; + } + + .adf-toolbar-divider { + margin: 0 5px; + + & > div { + background-color: var(--theme-card-bg-color); + } + } + + .adf-header-delimiter { + height: 24px; + width: 2px; + background-color: var(--theme-primary-color-default-contrast); + } + + .adf-userinfo-container { + flex-direction: row; + padding: 0; + } + + @media screen and (max-width: 599px) { + .adf-app-logo, + .adf-app-title { + display: none; + } + } +} + +[dir='rtl'] adf-layout-header .mat-toolbar-single-row { + .adf-menu-icon { + margin-right: -11px; + } + + .adf-app-logo { + margin-right: 6px; + } + + .adf-app-title { + margin-right: 6px; + } + + .adf-header-delimiter { + margin-left: 16px; + } + + .adf-userinfo-container { + margin-left: 16px; + } + + .adf-userinfo-name { + padding-left: 8px; + } +} + +[dir='ltr'] adf-layout-header .mat-toolbar-single-row { + .adf-menu-icon { + margin-left: -11px; + } + + .adf-app-logo { + margin-left: 6px; + } + + .adf-app-title { + margin-left: 6px; + } + + .adf-header-delimiter { + margin-right: 16px; + } + + .adf-userinfo-container { + margin-right: 16px; + } + + .adf-userinfo-name { + padding-right: 8px; + } +} diff --git a/lib/core/layout/components/header/header.component.ts b/lib/core/layout/components/header/header.component.ts index 0565ed5aa0..f1ed1d6a46 100644 --- a/lib/core/layout/components/header/header.component.ts +++ b/lib/core/layout/components/header/header.component.ts @@ -21,6 +21,7 @@ import { ThemePalette } from '@angular/material/core'; @Component({ selector: 'adf-layout-header', templateUrl: './header.component.html', + styleUrls: ['./header.component.scss'], encapsulation: ViewEncapsulation.None, host: { class: 'adf-layout-header' } }) diff --git a/lib/core/layout/components/header/header.theme.scss b/lib/core/layout/components/header/header.theme.scss deleted file mode 100644 index 94470f2fdc..0000000000 --- a/lib/core/layout/components/header/header.theme.scss +++ /dev/null @@ -1,116 +0,0 @@ -@mixin adf-header-layout-theme($theme) { - $primary: map-get($theme, primary); - $accent: map-get($theme, accent); - $background: map-get($theme, background); - - adf-layout-header .mat-toolbar-single-row { - - color: mat-color($primary, default-contrast) !important; - position: relative; - padding: 0 24px; - - .adf-menu-icon { - position: relative; - margin-right: 0; - - .mat-icon { - font-size: 29px; - padding: 0 5px 0 0; - } - } - - .adf-app-logo { - position: relative; - height: 28px; - width: 28px; - vertical-align: middle; - margin-top: -3px; - } - - .adf-app-title { - cursor: pointer; - letter-spacing: -0.3px; - font-weight: 100; - } - - .adf-toolbar-divider { - margin: 0 5px; - - & > div { - background-color: mat-color($background, card, 1); - } - } - - .adf-header-delimiter { - height: 24px; - width: 2px; - background-color: mat-color($primary, default-contrast); - } - - .adf-userinfo-container { - flex-direction: row; - padding: 0; - } - - @media screen and (max-width: 599px) { - .adf-app-logo, - .adf-app-title { - display: none; - } - } - } - - [dir='rtl'] adf-layout-header .mat-toolbar-single-row { - .adf-menu-icon { - margin-right: -11px; - } - - .adf-app-logo { - margin-right: 6px; - } - - .adf-app-title { - margin-right: 6px; - } - - .adf-header-delimiter { - margin-left: 16px; - } - - .adf-userinfo-container { - margin-left: 16px; - } - - .adf-userinfo-name { - padding-left: 8px; - } - } - - [dir='ltr'] adf-layout-header .mat-toolbar-single-row { - .adf-menu-icon { - margin-left: -11px; - } - - .adf-app-logo { - margin-left: 6px; - } - - .adf-app-title { - margin-left: 6px; - } - - .adf-header-delimiter { - margin-right: 16px; - } - - .adf-userinfo-container { - margin-right: 16px; - } - - .adf-userinfo-name { - padding-right: 8px; - } - } -} - - diff --git a/lib/core/layout/components/layout-container/layout-container.component.scss b/lib/core/layout/components/layout-container/layout-container.component.scss new file mode 100644 index 0000000000..045aba1eb8 --- /dev/null +++ b/lib/core/layout/components/layout-container/layout-container.component.scss @@ -0,0 +1,55 @@ +adf-layout-container { + display: block; + width: 100%; + height: 100%; + overflow: hidden; +} + +.adf-container-full-width { + width: inherit; +} +/* query for Microsoft IE 11*/ +@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { + .adf-container-full-width { + width: 100%; + } +} + + +.adf-sidenav--hidden { + visibility: hidden !important; + width: 0 !important; + transform: unset !important; + opacity: 0 !important; +} + +.mat-sidenav-container { + display: block; + width: 100%; + height: 100%; + overflow: hidden; +} + +.mat-sidenav { + overflow: hidden; + border-right: 1px solid var(--theme-border-color); + background-color: var(--theme-background-color); +} + +mat-sidenav-content.mat-sidenav-content, +.mat-drawer-transition .mat-drawer-content { + margin-left: 0 !important; + transform: unset !important; + transition-property: unset !important; + transition-duration: unset !important; + transition-timing-function: unset !important; +} + +mat-sidenav-content > div { + display: flex; + height: 100%; + + > div { + flex: auto; + } +} diff --git a/lib/core/layout/components/layout-container/layout-container.component.ts b/lib/core/layout/components/layout-container/layout-container.component.ts index 2a5e25922c..aca3712d03 100644 --- a/lib/core/layout/components/layout-container/layout-container.component.ts +++ b/lib/core/layout/components/layout-container/layout-container.component.ts @@ -23,6 +23,7 @@ import { Direction } from '@angular/cdk/bidi'; @Component({ selector: 'adf-layout-container', templateUrl: './layout-container.component.html', + styleUrls: ['./layout-container.component.scss'], encapsulation: ViewEncapsulation.None, animations: [sidenavAnimation, contentAnimation] }) diff --git a/lib/core/layout/components/layout-container/layout-container.theme.scss b/lib/core/layout/components/layout-container/layout-container.theme.scss deleted file mode 100644 index 53a6772a5e..0000000000 --- a/lib/core/layout/components/layout-container/layout-container.theme.scss +++ /dev/null @@ -1,61 +0,0 @@ -@mixin adf-layout-container-theme($theme) { - $background: map-get($theme, background); - $foreground: map-get($theme, foreground); - $adf-layout-container-height: 100% !default; - - adf-layout-container { - display: block; - width: 100%; - height: $adf-layout-container-height; - overflow: hidden; - } - - .adf-container-full-width { - width: inherit; - } - /* query for Microsoft IE 11*/ - @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { - .adf-container-full-width { - width: 100%; - } - } - - - .adf-sidenav--hidden { - visibility: hidden !important; - width: 0 !important; - transform: unset !important; - opacity: 0 !important; - } - - .mat-sidenav-container { - display: block; - width: 100%; - height: 100%; - overflow: hidden; - } - - .mat-sidenav { - overflow: hidden; - border-right: 1px solid mat-color($foreground, text, 0.07); - background-color: mat-color($background, background); - } - - mat-sidenav-content.mat-sidenav-content, - .mat-drawer-transition .mat-drawer-content { - margin-left: 0 !important; - transform: unset !important; - transition-property: unset !important; - transition-duration: unset !important; - transition-timing-function: unset !important; - } - - mat-sidenav-content > div { - display: flex; - height: $adf-layout-container-height; - - > div { - flex: auto; - } - } -} diff --git a/lib/core/layout/components/sidebar-action/sidebar-action-menu.component.scss b/lib/core/layout/components/sidebar-action/sidebar-action-menu.component.scss new file mode 100644 index 0000000000..b6d4d46f66 --- /dev/null +++ b/lib/core/layout/components/sidebar-action/sidebar-action-menu.component.scss @@ -0,0 +1,56 @@ +@import '~@angular/material/theming'; + +.adf { + &-sidebar-action-menu { + & .mat-raised-button { + width: 100%; + display: block; + box-shadow: none !important; + height: 37.5px; + font-weight: bold; + background-color: var(--theme-primary-color); + color: var(--theme-primary-color-default-contrast) !important; + border-radius: 4px; + & mat-icon { + width: 24px; + height: 25px; + color: var(--theme-primary-color-default-contrast) !important; + } + } + &-text { + width: 100%; + height: 20px; + text-align: left; + } + } + &-sidebar-action-menu-icon { + margin: 18px 0 0 20px; + color: var(--theme-text-color); + cursor: pointer; + &:hover { + color: var(--theme-primary-color); + } + } + &-sidebar-action-menu-options { + text-align: left; + letter-spacing: -0.4px; + + .mat-menu-item { + font-size: 14px; + color: var(--theme-text-bold-color); + text-align: left; + line-height: 1.5; + letter-spacing: -0.4px; + } + .mat-menu-item:hover { + color: var(--theme-primary-color); + opacity: inherit; + } + } + &-sidebar-action-menu-panel { + margin-top: 7.5px; + border-radius: 2px; + + @include mat-elevation(2); + } +} diff --git a/lib/core/layout/components/sidebar-action/sidebar-action-menu.component.ts b/lib/core/layout/components/sidebar-action/sidebar-action-menu.component.ts index 5edda5bc57..556e963ec0 100644 --- a/lib/core/layout/components/sidebar-action/sidebar-action-menu.component.ts +++ b/lib/core/layout/components/sidebar-action/sidebar-action-menu.component.ts @@ -20,6 +20,7 @@ import { ChangeDetectionStrategy, Component, Directive, Input, ViewEncapsulation @Component({ selector: 'adf-sidebar-action-menu', templateUrl: './sidebar-action-menu.component.html', + styleUrls: ['./sidebar-action-menu.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'class': 'adf-sidebar-action-menu' } diff --git a/lib/core/layout/components/sidebar-action/sidebar-action-menu.theme.scss b/lib/core/layout/components/sidebar-action/sidebar-action-menu.theme.scss deleted file mode 100644 index 8b4757e27e..0000000000 --- a/lib/core/layout/components/sidebar-action/sidebar-action-menu.theme.scss +++ /dev/null @@ -1,66 +0,0 @@ -@mixin adf-sidebar-action-menu-theme($theme) { - - $primary: map-get($theme, primary); - $foreground: map-get($theme, foreground); - - $adf-sidebar-action-menu-button-height: 37.5px; - $adf-sidebar-action-menu-button-border-radius: 4px; - $adf-sidebar-action-menu-opacity: 0.54; - $adf-sidebar-action-menu-item-opacity: 0.87; - $adf-sidebar-action-menu-item-line-spacing: -0.4px; - $adf-sidebar-action-menu-item-font-size: 14px; - - .adf { - &-sidebar-action-menu { - & .mat-raised-button { - width: 100%; - display: block; - box-shadow: none !important; - height: $adf-sidebar-action-menu-button-height; - font-weight: bold; - background-color: mat-color($primary); - color: mat-color($primary, default-contrast) !important; - border-radius: $adf-sidebar-action-menu-button-border-radius; - & mat-icon { - width: 24px; - height: 25px; - color: mat-color($primary, default-contrast) !important; - } - } - &-text { - width: 100%; - height: 20px; - text-align: left; - } - } - &-sidebar-action-menu-icon { - margin: 18px 0 0 20px; - color: mat-color($foreground, text, $adf-sidebar-action-menu-opacity); - cursor: pointer; - &:hover { - color: mat-color($primary); - } - } - &-sidebar-action-menu-options { - text-align: left; - letter-spacing: $adf-sidebar-action-menu-item-line-spacing; - .mat-menu-item { - font-size: $adf-sidebar-action-menu-item-font-size; - color: mat-color($foreground, text, $adf-sidebar-action-menu-item-opacity); - text-align: left; - line-height: 1.5; - letter-spacing: $adf-sidebar-action-menu-item-line-spacing; - } - .mat-menu-item:hover { - color: mat-color($primary); - opacity: inherit; - } - } - &-sidebar-action-menu-panel { - margin-top: 7.5px; - border-radius: 2px; - - @include mat-elevation(2); - } - } -} diff --git a/lib/core/layout/components/sidenav-layout/sidenav-layout.component.scss b/lib/core/layout/components/sidenav-layout/sidenav-layout.component.scss new file mode 100644 index 0000000000..2dc508889a --- /dev/null +++ b/lib/core/layout/components/sidenav-layout/sidenav-layout.component.scss @@ -0,0 +1,39 @@ +@import '~@angular/flex-layout/mq'; +@import '../../../styles/mixins'; + +.adf-sidenav-layout { + + &-full-space { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + overflow: hidden; + min-height: 0; + width: 100%; + } + + @include flex-column; + width: 100%; + + .adf-layout__content { + flex: 1 1 auto; + } + + router-outlet { + flex: 0 0; + } + + @include layout-bp(lt-sm) { + .mat-drawer { + width: calc(-50px + 100vw) !important; + max-width: 300px !important; + } + } + + .mat-drawer-content { + @include flex-column; + position: unset; + overflow: auto; + } +} diff --git a/lib/core/layout/components/sidenav-layout/sidenav-layout.component.ts b/lib/core/layout/components/sidenav-layout/sidenav-layout.component.ts index 21346ba502..8e511eeb84 100644 --- a/lib/core/layout/components/sidenav-layout/sidenav-layout.component.ts +++ b/lib/core/layout/components/sidenav-layout/sidenav-layout.component.ts @@ -40,6 +40,7 @@ import { takeUntil } from 'rxjs/operators'; @Component({ selector: 'adf-sidenav-layout', templateUrl: './sidenav-layout.component.html', + styleUrls: ['./sidenav-layout.component.scss'], encapsulation: ViewEncapsulation.None, host: { class: 'adf-sidenav-layout' } }) diff --git a/lib/core/layout/components/sidenav-layout/sidenav-layout.theme.scss b/lib/core/layout/components/sidenav-layout/sidenav-layout.theme.scss deleted file mode 100644 index 63580d5172..0000000000 --- a/lib/core/layout/components/sidenav-layout/sidenav-layout.theme.scss +++ /dev/null @@ -1,39 +0,0 @@ -@mixin adf-sidenav-layout-theme($theme) { - .adf-sidenav-layout { - - &-full-space { - display: flex; - flex-direction: column; - flex: 1; - height: 100%; - overflow: hidden; - min-height: 0; - width: 100%; - } - - @include flex-column; - width: 100%; - - .adf-layout__content { - flex: 1 1 auto; - } - - router-outlet { - flex: 0 0; - } - - @include layout-bp(lt-sm) { - .mat-drawer { - width: calc(-50px + 100vw) !important; - max-width: 300px !important; - } - } - - .mat-drawer-content { - @include flex-column; - position: unset; - overflow: auto; - } - } - -} diff --git a/lib/core/login/components/login.component.scss b/lib/core/login/components/login.component.scss new file mode 100644 index 0000000000..8019913d5f --- /dev/null +++ b/lib/core/login/components/login.component.scss @@ -0,0 +1,274 @@ +@import '../../styles/mixins'; + +.adf-login { + @include flex-column; +} + +.adf-login-content { + background-size: cover; + background-position: center; + min-height: 100%; + min-width: 320px; + display: flex; + justify-content: center; + flex-direction: column; + + // IE11 vertical centering + @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { + & { + display: table; + width: 100%; + height: 100%; + } + } + + .adf-ie11FixerParent { + margin-top: 16px; + min-width: 320px; + + // IE11 vertical centering + @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { + display: table-cell; + vertical-align: middle; + width: 100%; + padding-top: 16px; + } + } + + // IE11 vertical centering + .adf-ie11FixerChild { + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + + .adf-show { + display: block !important; + } + + .adf-hide { + display: none !important; + } + + .adf-icon-inline { + position: absolute; + display: block; + top: 31%; + left: 82%; + width: 30px; + overflow: hidden; + } + + .adf-login-card-wide { + border-radius: 8px; + background-color: var(--theme-dialog-bg-color); + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12); + width: 450px; + min-width: 320px; + padding: 21px 64px 34px; + box-sizing: border-box; + } + + @media (max-width: 482px) { + .adf-login-card-wide { + width: calc(100% - 32px); + } + } + + .adf-error-container { + height: 45px; + } + + .adf-error-message { + display: flex; + box-orient: horizontal; + flex-direction: row; + justify-content: flex-start; + + color: var(--theme-warn-color); + padding: 0; + margin-bottom: 4px; + font-size: 13px; + } + + .adf-error-message .adf-error-icon { + margin-right: 10px; + } + + .mat-card-header-text { + margin: 0 auto; + } + + .adf-img-logo { + display: block; + margin-left: auto; + margin-right: auto; + } + + .adf-alfresco-logo { + padding: 24px 16px; + } + + .adf-alfresco-logo img { + max-height: 58px; + } + + .adf-login-button { + width: 100%; + height: 36px; + line-height: 38px; + box-shadow: none; + } + + .adf-login-button-label { + color: var(--theme-accent-color-default-contrast); + } + + .adf-login-button.adf-isChecking { + background-color: #e0f7fa; + } + + .adf-login-button.adf-isChecking .adf-login-button-label { + color: var(--theme-primary-color); + } + + .adf-login-button.adf-isWelcome { + background-color: var(--theme-primary-color); + color: var(--theme-primary-color-default-contrast); + } + + .adf-login-button.adf-isWelcome .adf-welcome-icon { + margin: 5px 0 0 10px; + } + + .adf-interactive-login-label { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + box-orient: horizontal; + flex-direction: row; + + -webkit-box-pack: center; + -moz-box-pack: center; + box-pack: center; + justify-content: center; + } + + .adf-login-spinner-container { + margin-left: 15px; + margin-top: 5px; + } + + .adf-login-checking-spinner > svg > circle { + stroke-width: 16% !important; + + } + + .adf-login-controls { + padding: 0 0 26px; + overflow: visible; + width: 100%; + } + + .adf-login-action { + margin-top: 20px; + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + box-orient: horizontal; + flex-direction: row; + + -webkit-box-pack: space-between; + -moz-box-pack: space-between; + box-pack: space-between; + justify-content: space-between; + } + + .adf-login-action-left a, .adf-login-action-right a { + text-decoration: none; + } + + .adf-is-active { + background-color: transparent; + font-size: 12px; + font-weight: normal; + line-height: 1.33; + color: var(--theme-warn-color); + } + + .adf-copyright { + min-width: 320px; + text-align: center; + padding: 16px 0; + font-size: 12px; + opacity: 0.54; + } + + .mat-form-field .adf-login-password-icon.mat-icon { + color: var(--theme-text-fg-color); + } + + .adf-login__field .mat-form-field-wrapper { + margin: 1em 0 0; + font-size: 16px; + } + + .adf-login__field input:-webkit-autofill { + -webkit-box-shadow: 0 0 0 1000px var(--theme-dialog-bg-color) inset; + -webkit-text-fill-color: var(--theme-text-fg-color) !important; + } + + .adf-login-validation { + background-color: transparent; + color: var(--theme-warn-color); + font-size: 12px; + } + + .adf-login-error { + color: var(--theme-warn-color); + position: absolute; + font-size: 12px; + margin-top: -12px; + display: block; + } + + .adf-full-width { + width: 100%; + } + + .adf-login__remember-me { + padding-top: 22px; + } + + .adf-login__remember-me .mat-checkbox-label { + opacity: 0.87; + } + + .adf-login__field { + display: block; + margin-left: auto; + margin-right: auto; + padding-bottom: 18px; + } + + .adf-login-remember-me { + color: var(--theme-text-fg-color) !important; + } + + .adf-login-action-container { + border-top: 1px solid rgba(0, 0, 0, 0.1); + margin-top: 23px; + } +} diff --git a/lib/core/login/components/login.component.ts b/lib/core/login/components/login.component.ts index 82d9100847..da5d25cf88 100644 --- a/lib/core/login/components/login.component.ts +++ b/lib/core/login/components/login.component.ts @@ -53,10 +53,9 @@ interface ValidationMessage { @Component({ selector: 'adf-login', templateUrl: './login.component.html', + styleUrls: ['./login.component.scss'], encapsulation: ViewEncapsulation.None, - host: { - class: 'adf-login' - } + host: { class: 'adf-login' } }) export class LoginComponent implements OnInit, OnDestroy { isPasswordShow: boolean = false; diff --git a/lib/core/login/components/login.theme.scss b/lib/core/login/components/login.theme.scss deleted file mode 100644 index 20d63382b6..0000000000 --- a/lib/core/login/components/login.theme.scss +++ /dev/null @@ -1,281 +0,0 @@ -@mixin adf-login-theme($theme) { - $primary: map-get($theme, primary); - $accent: map-get($theme, accent); - $warn: map-get($theme, warn); - $background: map-get($theme, background); - $foreground: map-get($theme, foreground); - $text-color-primary: mat-color($foreground, text); - - .adf-login { - @include flex-column; - } - - .adf-login-content { - background-size: cover; - background-position: center; - min-height: 100%; - min-width: 320px; - display: flex; - justify-content: center; - flex-direction: column; - - // IE11 vertical centering - @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { - & { - display: table; - width: 100%; - height: 100%; - } - } - - .adf-ie11FixerParent { - margin-top: 16px; - min-width: 320px; - - // IE11 vertical centering - @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { - display: table-cell; - vertical-align: middle; - width: 100%; - padding-top: 16px; - } - } - - // IE11 vertical centering - .adf-ie11FixerChild { - width: 100%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - } - - .adf-show { - display: block !important; - } - - .adf-hide { - display: none !important; - } - - .adf-icon-inline { - position: absolute; - display: block; - top: 31%; - left: 82%; - width: 30px; - overflow: hidden; - } - - .adf-login-card-wide { - border-radius: 8px; - background-color: mat-color($background, dialog); - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12); - width: 450px; - min-width: 320px; - padding: 21px 64px 34px; - box-sizing: border-box; - } - - @media (max-width: 482px) { - .adf-login-card-wide { - width: calc(100% - 32px); - } - } - - .adf-error-container { - height: 45px; - } - - .adf-error-message { - display: flex; - box-orient: horizontal; - flex-direction: row; - justify-content: flex-start; - - color: mat-color($warn); - padding: 0; - margin-bottom: 4px; - font-size: 13px; - } - - .adf-error-message .adf-error-icon { - margin-right: 10px; - } - - .mat-card-header-text { - margin: 0 auto; - } - - .adf-img-logo { - display: block; - margin-left: auto; - margin-right: auto; - } - - .adf-alfresco-logo { - padding: 24px 16px; - } - - .adf-alfresco-logo img { - max-height: 58px; - } - - .adf-login-button { - width: 100%; - height: 36px; - line-height: 38px; - box-shadow: none; - } - - .adf-login-button-label { - color: mat-contrast($accent, default); - } - - .adf-login-button.adf-isChecking { - background-color: #e0f7fa; - } - - .adf-login-button.adf-isChecking .adf-login-button-label { - color: mat-color($primary); - } - - .adf-login-button.adf-isWelcome { - background-color: mat-color($primary); - color: mat-contrast($primary, default); - } - - .adf-login-button.adf-isWelcome .adf-welcome-icon { - margin: 5px 0 0 10px; - } - - .adf-interactive-login-label { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; - box-orient: horizontal; - flex-direction: row; - - -webkit-box-pack: center; - -moz-box-pack: center; - box-pack: center; - justify-content: center; - } - - .adf-login-spinner-container { - margin-left: 15px; - margin-top: 5px; - } - - .adf-login-checking-spinner > svg > circle { - stroke-width: 16% !important; - - } - - .adf-login-controls { - padding: 0 0 26px; - overflow: visible; - width: 100%; - } - - .adf-login-action { - margin-top: 20px; - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; - box-orient: horizontal; - flex-direction: row; - - -webkit-box-pack: space-between; - -moz-box-pack: space-between; - box-pack: space-between; - justify-content: space-between; - } - - .adf-login-action-left a, .adf-login-action-right a { - text-decoration: none; - } - - .adf-is-active { - background-color: transparent; - font-size: 12px; - font-weight: normal; - line-height: 1.33; - color: mat-color($warn); - } - - .adf-copyright { - min-width: 320px; - text-align: center; - padding: 16px 0; - font-size: 12px; - opacity: 0.54; - } - - .mat-form-field .adf-login-password-icon.mat-icon { - color: $text-color-primary; - } - - .adf-login__field .mat-form-field-wrapper { - margin: 1em 0 0; - font-size: 16px; - } - - .adf-login__field input:-webkit-autofill { - -webkit-box-shadow: 0 0 0 1000px mat-color($background, dialog) inset; - -webkit-text-fill-color: $text-color-primary !important; - } - - .adf-login-validation { - background-color: transparent; - color: mat-color($warn); - font-size: 12px; - } - - .adf-login-error { - color: mat-color($warn); - position: absolute; - font-size: 12px; - margin-top: -12px; - display: block; - } - - .adf-full-width { - width: 100%; - } - - .adf-login__remember-me { - padding-top: 22px; - } - - .adf-login__remember-me .mat-checkbox-label { - opacity: 0.87; - } - - .adf-login__field { - display: block; - margin-left: auto; - margin-right: auto; - padding-bottom: 18px; - } - - .adf-login-remember-me { - color: $text-color-primary !important; - } - - .adf-login-action-container { - border-top: 1px solid rgba(0, 0, 0, 0.1); - margin-top: 23px; - } - } -} diff --git a/lib/core/notifications/components/notification-history.component.scss b/lib/core/notifications/components/notification-history.component.scss new file mode 100644 index 0000000000..8efec518ef --- /dev/null +++ b/lib/core/notifications/components/notification-history.component.scss @@ -0,0 +1,71 @@ +.adf { + &-notification-history-menu_button.mat-button { + margin-right: 0; + border-radius: 90%; + padding: 0; + min-width: 40px; + height: 40px; + } + + &-notification-history-list .mat-subheader { + justify-content: space-between; + } + + &-notification-history-menu { + &-item { + cursor: pointer; + } + + &-item:focus { + outline: none; + background: var(--theme-bg-hover-color); + } + + &-item:hover { + background-color: var(--theme-bg-hover-color); + } + + &-message, &-no-message { + font-size: 13px !important; + } + + &-date { + font-size: 12px !important; + } + + &-initiator { + margin: 4px; + } + + } + + &-notification-initiator-pic { + min-width: 40px; + background: var(--theme-accent-color); + display: inline-block; + height: 40px; + border-radius: 100px; + text-align: center; + font-weight: bolder; + font-size: 18px; + text-transform: uppercase; + vertical-align: middle; + line-height: 40px; + color: var(--theme-colors-mat-grey); + } + + &-notification-history-load-more { + display: flex; + justify-content: center; + padding: 10px; + } +} + +.mat-menu-panel.adf-notification-history-menu { + min-width: 320px; + max-height: 500px; + + .mat-menu-content { + padding: 0; + } +} diff --git a/lib/core/notifications/components/notification-history.component.ts b/lib/core/notifications/components/notification-history.component.ts index e2816a2c90..3e413c5105 100644 --- a/lib/core/notifications/components/notification-history.component.ts +++ b/lib/core/notifications/components/notification-history.component.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { Component, Input, ViewChild, OnDestroy, OnInit, AfterViewInit, ChangeDetectorRef } from '@angular/core'; +import { Component, Input, ViewChild, OnDestroy, OnInit, AfterViewInit, ChangeDetectorRef, ViewEncapsulation } from '@angular/core'; import { NotificationService } from '../services/notification.service'; import { NotificationModel, NOTIFICATION_TYPE } from '../models/notification.model'; import { MatMenuTrigger, MenuPositionX, MenuPositionY } from '@angular/material/menu'; @@ -26,7 +26,9 @@ import { Pagination } from '@alfresco/js-api'; @Component({ selector: 'adf-notification-history', - templateUrl: 'notification-history.component.html' + templateUrl: 'notification-history.component.html', + styleUrls: ['./notification-history.component.scss'], + encapsulation: ViewEncapsulation.None }) export class NotificationHistoryComponent implements OnDestroy, OnInit, AfterViewInit { diff --git a/lib/core/notifications/components/notification-history.theme.scss b/lib/core/notifications/components/notification-history.theme.scss deleted file mode 100644 index aa2c96d4c7..0000000000 --- a/lib/core/notifications/components/notification-history.theme.scss +++ /dev/null @@ -1,76 +0,0 @@ -@mixin adf-notification-history-theme($theme) { - $background: map-get($theme, background); - $accent: map-get($theme, accent); - - .adf { - &-notification-history-menu_button.mat-button { - margin-right: 0; - border-radius: 90%; - padding: 0; - min-width: 40px; - height: 40px; - } - - &-notification-history-list .mat-subheader { - justify-content: space-between; - } - - &-notification-history-menu { - &-item { - cursor: pointer; - } - - &-item:focus { - outline: none; - background: mat-color($background, 'hover'); - } - - &-item:hover { - background-color: mat-color($background, 'hover'); - } - - &-message, &-no-message { - font-size: 13px !important; - } - - &-date { - font-size: 12px !important; - } - - &-initiator { - margin: 4px; - } - - } - - &-notification-initiator-pic { - min-width: 40px; - background: mat-color($accent); - display: inline-block; - height: 40px; - border-radius: 100px; - text-align: center; - font-weight: bolder; - font-size: 18px; - text-transform: uppercase; - vertical-align: middle; - line-height: 40px; - color: mat-color($mat-grey, 50); - } - - &-notification-history-load-more { - display: flex; - justify-content: center; - padding: 10px; - } - } - - .mat-menu-panel.adf-notification-history-menu { - min-width: 320px; - max-height: 500px; - - .mat-menu-content { - padding: 0; - } - } -} diff --git a/lib/core/pagination/pagination.component.scss b/lib/core/pagination/pagination.component.scss new file mode 100644 index 0000000000..8d89c75e2b --- /dev/null +++ b/lib/core/pagination/pagination.component.scss @@ -0,0 +1,87 @@ +@import '~@angular/flex-layout/mq'; + +$adf-pagination--height: 48px !default; +$adf-pagination--icon-button-size: 32px !default; +$adf-pagination--border: none !default; +$adf-pagination__empty--height: 48px !default; +$adf-pagination__empty--border: none !default; + +.adf-pagination { + display: flex; + border-top: $adf-pagination--border; + height: $adf-pagination--height; + line-height: 20px; + color: var(--theme-text-fg-color); + + &__block { + display: flex; + align-items: center; + padding: 0 8px; + border-right: $adf-pagination--border; + + &:first-child { + flex: 1 1 auto; + padding-left: 24px; + } + + &:last-child { + border-right-width: 0; + } + } + + @include layout-bp(lt-sm) { + & { + flex-wrap: wrap; + padding: 0 16px; + justify-content: space-between; + } + + &__range-block, + &__perpage-block { + display: none; + } + + &__actualinfo-block { + border-right: none; + } + + &__controls-block { + padding-right: 0; + } + } + + &__max-items { + margin-left: 10px; + } + + &__max-items, &__current-page { + margin-right: 5px; + + &, & + button { + color: var(--theme-text-fg-color); + } + + & + button { + margin-left: -10px; + } + } + + &__previous-button, &__next-button { + margin: 0 5px; + } + + &__page-selector { + max-height: 250px !important; + } + + &.adf-pagination__empty { + border-top: $adf-pagination__empty--border; + height: $adf-pagination__empty--height; + } + + button[mat-icon-button] { + width: $adf-pagination--icon-button-size; + height: $adf-pagination--icon-button-size; + line-height: $adf-pagination--icon-button-size; + } +} diff --git a/lib/core/pagination/pagination.component.ts b/lib/core/pagination/pagination.component.ts index c419416219..ec6c75ad83 100644 --- a/lib/core/pagination/pagination.component.ts +++ b/lib/core/pagination/pagination.component.ts @@ -34,6 +34,7 @@ export type PaginationAction = selector: 'adf-pagination', host: { 'class': 'adf-pagination' }, templateUrl: './pagination.component.html', + styleUrls: ['./pagination.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None }) diff --git a/lib/core/pagination/pagination.theme.scss b/lib/core/pagination/pagination.theme.scss deleted file mode 100644 index ec5c585b13..0000000000 --- a/lib/core/pagination/pagination.theme.scss +++ /dev/null @@ -1,89 +0,0 @@ -@mixin adf-pagination-theme($theme) { - $foreground: map-get($theme, foreground); - - $adf-pagination--height: 48px !default; - $adf-pagination--icon-button-size: 32px !default; - $adf-pagination--border: none !default; - $adf-pagination__empty--height: 48px !default; - $adf-pagination__empty--border: none !default; - - .adf-pagination { - display: flex; - border-top: $adf-pagination--border; - height: $adf-pagination--height; - line-height: 20px; - color: mat-color($foreground, text); - - &__block { - display: flex; - align-items: center; - padding: 0 8px; - border-right: $adf-pagination--border; - - &:first-child { - flex: 1 1 auto; - padding-left: 24px; - } - - &:last-child { - border-right-width: 0; - } - } - - @include layout-bp(lt-sm) { - & { - flex-wrap: wrap; - padding: 0 16px; - justify-content: space-between; - } - - &__range-block, - &__perpage-block { - display: none; - } - - &__actualinfo-block { - border-right: none; - } - - &__controls-block { - padding-right: 0; - } - } - - &__max-items { - margin-left: 10px; - } - - &__max-items, &__current-page { - margin-right: 5px; - - &, & + button { - color: mat-color($foreground, text); - } - - & + button { - margin-left: -10px; - } - } - - &__previous-button, &__next-button { - margin: 0 5px; - } - - &__page-selector { - max-height: 250px !important; - } - - &.adf-pagination__empty { - border-top: $adf-pagination__empty--border; - height: $adf-pagination__empty--height; - } - - button[mat-icon-button] { - width: $adf-pagination--icon-button-size; - height: $adf-pagination--icon-button-size; - line-height: $adf-pagination--icon-button-size; - } - } -} diff --git a/lib/core/search-text/search-text-input.component.scss b/lib/core/search-text/search-text-input.component.scss new file mode 100644 index 0000000000..7e8088c2fb --- /dev/null +++ b/lib/core/search-text/search-text-input.component.scss @@ -0,0 +1,36 @@ +.adf-search-container { + overflow: hidden !important; +} + +.adf-search-button { + left: -13px; +} + +[dir='rtl'] .adf-search-button { + right: -13px; +} + +[dir='ltr'] .adf-search-button { + left: -13px; +} + +.adf { + + &-search-fixed-text { + line-height: normal; + } + + &-input-form-field-divider { + .mat-form-field-underline { + background-color: var(--adf-search-input-bg-color); + .mat-form-field-ripple { + background-color: var(--adf-search-input-bg-color); + } + } + font-size: 16px; + } +} + +.adf-highlight { + color: var(--adf-search-input-highlight-color); +} diff --git a/lib/core/search-text/search-text-input.component.ts b/lib/core/search-text/search-text-input.component.ts index 8aa7401b62..c3472c7edf 100644 --- a/lib/core/search-text/search-text-input.component.ts +++ b/lib/core/search-text/search-text-input.component.ts @@ -26,6 +26,7 @@ import { SearchTextStateEnum, SearchAnimationState, SearchAnimationDirection } f @Component({ selector: 'adf-search-text-input', templateUrl: './search-text-input.component.html', + styleUrls: ['./search-text-input.component.scss'], animations: [searchAnimation], encapsulation: ViewEncapsulation.None, host: { diff --git a/lib/core/search-text/search-text-input.theme.scss b/lib/core/search-text/search-text-input.theme.scss deleted file mode 100644 index ae89070c3a..0000000000 --- a/lib/core/search-text/search-text-input.theme.scss +++ /dev/null @@ -1,46 +0,0 @@ -@mixin adf-search-text-input-theme($theme) { - $background: map-get($theme, background); - $foreground: map-get($theme, foreground); - $primary: map-get($theme, primary); - $accent: map-get($theme, accent); - $mat-menu-border-radius: 2px !default; - $mat-menu-overlay-min-width: 112px !default; // 56 * 2 - $mat-menu-overlay-max-width: 280px !default; // 56 * 5 - - .adf-search-container { - overflow: hidden !important; - } - - .adf-search-button { - left: -13px; - } - - [dir='rtl'] .adf-search-button { - right: -13px; - } - - [dir='ltr'] .adf-search-button { - left: -13px; - } - - .adf { - - &-search-fixed-text { - line-height: normal; - } - - &-input-form-field-divider { - .mat-form-field-underline { - background-color: mat-color($primary, 50); - .mat-form-field-ripple { - background-color: mat-color($primary, 50); - } - } - font-size: 16px; - } - } - - .adf-highlight { - color: mat-color($primary, 900); - } -} diff --git a/lib/core/styles/_default-class.scss b/lib/core/styles/_default-class.scss index fd0e45942b..3afe0b48b9 100644 --- a/lib/core/styles/_default-class.scss +++ b/lib/core/styles/_default-class.scss @@ -1,14 +1,11 @@ -@mixin adf-default-class-theme($theme) { - - .adf-hide-small { - @media screen and (max-width: 959px) { - display: none !important; - } - } - - .adf-hide-xsmall { - @media screen and (max-width: 599px) { - display: none !important; - } +.adf-hide-small { + @media screen and (max-width: 959px) { + display: none !important; + } +} + +.adf-hide-xsmall { + @media screen and (max-width: 599px) { + display: none !important; } } diff --git a/lib/core/styles/_index.scss b/lib/core/styles/_index.scss index b3179ca28c..31e0f69f97 100644 --- a/lib/core/styles/_index.scss +++ b/lib/core/styles/_index.scss @@ -1,80 +1,102 @@ -@import './theme-colors'; @import './default-class'; @import './theming'; - -@import '../card-view/card-view.theme'; -@import '../datatable/components/datatable/datatable.theme'; -@import '../form/components/widgets/container/container.theme'; -@import '../form/components/widgets/dynamic-table/dynamic-table.theme'; @import '../form/components/widgets/form.theme'; -@import '../form/components/widgets/hyperlink/hyperlink.theme'; -@import '../form/components/widgets/amount/amount.theme'; -@import '../form/components/widgets/people/people.theme'; -@import '../info-drawer/info-drawer-layout.theme'; -@import '../login/components/login.theme'; -@import '../pagination/pagination.theme'; -@import '../toolbar/toolbar.theme'; -@import '../userinfo/components/user-info.theme'; -@import '../viewer/components/viewer.theme'; -@import '../viewer/components/pdf-viewer.theme'; -@import '../viewer/components/pdf-viewer-thumbnails.theme'; -@import '../viewer/components/pdf-viewer-password-dialog.theme.scss'; -@import '../viewer/components/txt-viewer.theme'; -@import '../viewer/components/img-viewer.theme'; -@import '../viewer/components/unknown-format/unknown-format.theme'; -@import '../form/components/form-renderer.theme'; -@import '../layout/components/sidebar-action/sidebar-action-menu.theme'; -@import '../layout/components/header/header.theme'; -@import '../comments/comment-list.theme'; -@import '../comments/comments.theme'; -@import '../layout/components/layout-container/layout-container.theme'; -@import '../layout/components/sidenav-layout/sidenav-layout.theme'; -@import '../templates/empty-content/empty-content.theme'; -@import '../templates/error-content/error-content.theme'; @import '../clipboard/clipboard.theme'; -@import '../search-text/search-text-input.theme'; @import './snackbar.theme'; -@import '../directives/tooltip-card/tooltip-card.theme'; -@import '../notifications/components/notification-history.theme'; +@import './material.theme'; +@import '~@mat-datetimepicker/core/datetimepicker/datetimepicker-theme.scss'; @mixin adf-core-theme($theme) { - @include adf-colors-theme($theme); - @include adf-default-class-theme($theme); - @include adf-card-view-module-theme($theme); - @include adf-datatable-theme($theme); - @include adf-form-container-widget-theme($theme); - @include adf-dynamic-table-theme($theme); - @include adf-form-theme($theme); - @include adf-hyperlink-widget-theme($theme); - @include adf-amount-widget-theme($theme); - @include adf-form-people-widget-theme($theme); - @include adf-info-drawer-theme($theme); - @include adf-login-theme($theme); - @include adf-pagination-theme($theme); - @include adf-toolbar-theme($theme); - @include adf-userinfo-theme($theme); - @include adf-viewer-theme($theme); - @include adf-pdf-viewer-theme($theme); - @include adf-pdf-thumbnails-theme($theme); - @include adf-pdf-viewer-password-dialog-theme($theme); - @include adf-image-viewer-theme($theme); - @include adf-unknown-viewer-theme($theme); - @include adf-text-viewer-theme($theme); - @include adf-form-renderer-theme($theme); - @include adf-sidebar-action-menu-theme($theme); - @include adf-task-list-comment-list-theme($theme); - @include adf-task-list-comment-theme($theme); - @include adf-layout-container-theme($theme); - @include adf-empty-content-theme($theme); - @include adf-error-content-theme($theme); - @include adf-header-layout-theme($theme); - @include adf-sidenav-layout-theme($theme); - @include adf-clipboard-theme($theme); - @include adf-snackbar-theme($theme); - @include mat-expansion-panel-theme--fix($theme); - @include mat-calendar-theme--fix($theme); - @include mat-datetimepicker-theme--fix($theme); - @include adf-search-text-input-theme($theme); - @include adf-tooltip-card-directive($theme); - @include adf-notification-history-theme($theme); + $foreground: map-get($theme, foreground); + $background: map-get($theme, background); + $warn: map-get($theme, warn); + $accent: map-get($theme, accent); + $primary: map-get($theme, primary); + + // map SCSS variables to expose as CSS variables + $defaults: ( + // material colors + --theme-primary-color: mat-color($primary), + --theme-primary-color-default-contrast: mat-color($primary, default-contrast), + --theme-warn-color: mat-color($warn), + --theme-warn-color-default-contrast: mat-color($warn, default-contrast), + --theme-accent-color: mat-color($accent), + --theme-accent-color-a200: mat-color($accent, A200), + --theme-accent-color-default-contrast: mat-color($accent, default-contrast), + + // component themes + --adf-snackbar-error-bg-color: mat-color($warn), + --adf-snackbar-error-action-color: white, + --adf-snackbar-warning-bg-color: mat-color($accent), + --adf-snackbar-warning-action-color: white, + --adf-snackbar-info-bg-color: mat-color($primary), + --adf-snackbar-info-action-color: white, + --adf-breadcrumb-item-active-color: mat-color($foreground, text, 0.87), + --adf-breadcrumb-item-active-hover-color: mat-color($foreground, text, 0.64), + --adf-node-selector-icon-color: mat-color($foreground, icon, 0.54), + --adf-node-selector-base-color: mat-color($foreground, base, 0.45), + --adf-node-selector-base-bold-color: mat-color($foreground, base, 0.65), + --adf-datatable-cell-link-hover-color: mat-color($accent, 500), + --adf-datatable-selected-color: mat-color($primary, 100), + --adf-user-info-color: mat-color($primary, 300), + --adf-comment-list-primary-color: mat-color($primary, 100), + --adf-comment-list-ripple-color: mat-color($primary, 300), + --adf-search-input-bg-color: mat-color($primary, 50), + --adf-search-input-highlight-color: mat-color($primary, 900), + --adf-tooltip-card-color: mat-color($foreground, text, 0.75), + --adf-card-view-text-color: mat-color($foreground, text, 0.25), + --adf-card-view-label-color: mat-color($foreground, text, 0.4), + --adf-card-view-datetime-border-color: mat-color($foreground, text, 0.42), + --adf-upload-border-color: mat-color($foreground, text, 0.14), + + --theme-hover-bg-color: mat-color($background, hover), + --theme-text-color: mat-color($foreground, text, 0.54), + --theme-text-bold-color: mat-color($foreground, text, 0.87), + --theme-background-color: mat-color($background, background), + --theme-text-fg-color: mat-color($foreground, text), + --theme-text-fg-shadow-color: mat-color($foreground, text, 0.27), + --theme-border-color: mat-color($foreground, text, 0.07), + --theme-card-bg-color: mat-color($background, card), + --theme-card-bg-bold-color: mat-color($background, card, 0.87), + --theme-foreground-text-color: mat-color($foreground, text, 0.72), + --theme-secondary-text-color: mat-color($foreground, secondary-text), + --theme-dialog-bg-color: mat-color($background, dialog), + --theme-bg-hover-color: mat-color($background, hover), + --theme-fg-base-color: mat-color($foreground, base), + --theme-fg-divider: mat-color($foreground, divider), + --theme-disabled-text-color: mat-color($foreground, disabled-text), + --theme-selected-button-bg-color: mat-color($background, selected-button), + --theme-icon-fg-color: mat-color($foreground, icon), + --theme-unselected-chip-bg-color: mat-color($background, unselected-chip), + --theme-status-bar-bg-color: mat-color($background, status-bar), + // fonts + --theme-font-family: mat-font-family($alfresco-typography), + --theme-body-1-font-size: mat-font-size($alfresco-typography, body-1), + --theme-body-2-font-size: mat-font-size($alfresco-typography, body-2), + --theme-body-1-line-height: mat-line-height($alfresco-typography, body-1), + --theme-display-1-font-size: mat-font-size($alfresco-typography, display-1), + --theme-display-3-font-size: mat-font-size($alfresco-typography, display-3), + --theme-display-4-font-size: mat-font-size($alfresco-typography, display-4), + --theme-caption-font-size: mat-font-size($alfresco-typography, caption), + --theme-title-font-size: mat-font-size($alfresco-typography, title), + --theme-subheading-2-font-size: mat-font-size($alfresco-typography, subheading-2), + --theme-button-font-size: mat-font-size($alfresco-typography, button), + --theme-headline-line-height: mat-line-height($alfresco-typography, headline), + + // specific colors + --theme-colors-mat-grey: mat-color($mat-grey, A200), + --theme-colors-mat-grey-dark: mat-color($mat-grey, A400), + --theme-colors-mag-grey-light: mat-color($mat-grey, 50), + ); + + // propagates SCSS variables into the CSS variables scope + :root { + @each $name, $value in $defaults { + #{$name}: #{$value}; + } + } + + @include mat-datetimepicker-theme($theme); + @include adf-snackbar-theme(); + @include adf-material-theme(); } diff --git a/lib/core/styles/_mixins.scss b/lib/core/styles/_mixins.scss index 590c79d0de..f22f71a777 100644 --- a/lib/core/styles/_mixins.scss +++ b/lib/core/styles/_mixins.scss @@ -1,6 +1,3 @@ -@import '~@angular/material/theming'; -@import 'variables'; - @mixin adf-no-select { -webkit-touch-callout: none; -webkit-user-select: none; @@ -27,27 +24,7 @@ @mixin material-animation-default($duration: 0.2s) { transition-duration: $duration; - transition-timing-function: $animation-curve-default; -} - -@mixin adf-line-clamp($line-height: 1.25, $lines: 3) { - position: relative; - line-height: $line-height; - padding: 0 !important; - overflow: hidden; - text-overflow: ellipsis; - - @supports (-webkit-line-clamp: 1) { - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: $lines; - height: calc(0.99em * #{$line-height} * #{$lines}); - } - - @supports not (-webkit-line-clamp: 1) { - white-space: nowrap; - width: 100%; - } + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } @mixin flex-column { @@ -66,72 +43,3 @@ height: 100%; overflow: hidden; } - -@mixin mat-expansion-panel-theme--fix($theme) { - $background: map-get($theme, background); - - .mat-expansion-panel { - & .mat-expansion-panel-header.cdk-keyboard-focused, - & .mat-expansion-panel-header.cdk-program-focused, - &:not(.mat-expanded) .mat-expansion-panel-header:hover { - &:not([aria-disabled='true']) { - background: mat-color($background, hover); - } - } - } -} - -@mixin mat-calendar-theme--fix($theme) { - $foreground: map-get($theme, foreground); - - .mat-calendar { - .mat-calendar-header { - button { - color: mat-color($foreground, text, 0.87); - - &:disabled { - color: mat-color($foreground, text, 0.54); - } - } - } - .mat-calendar-content { - .mat-calendar-table-header th { - color: mat-color($foreground, text, 0.54); - } - - .mat-calendar-body-disabled > div { - color: mat-color($foreground, text, 0.54) !important; - } - } - } -} - -@mixin mat-datetimepicker-theme--fix($theme) { - $foreground: map-get($theme, foreground); - - .mat-datetimepicker-calendar { - .mat-datetimepicker-calendar-header { - .mat-datetimepicker-calendar-header-year { - opacity: 1; - } - - .mat-datetimepicker-calendar-header-date { - opacity: 1; - } - - .mat-datetimepicker-calendar-header-time { - opacity: 1; - } - } - - .mat-datetimepicker-calendar-content { - .mat-datetimepicker-calendar-table-header th { - color: mat-color($foreground, text, 0.54); - } - - .mat-datetimepicker-calendar-body-disabled > div { - color: mat-color($foreground, text, 0.54); - } - } - } -} diff --git a/lib/core/styles/_theme-colors.scss b/lib/core/styles/_theme-colors.scss deleted file mode 100644 index 29ae4ebcd4..0000000000 --- a/lib/core/styles/_theme-colors.scss +++ /dev/null @@ -1,44 +0,0 @@ -@import '~@angular/material/theming'; - -@mixin adf-colors-theme($theme) { - - $primary: map-get($theme, primary); - $accent: map-get($theme, accent); - $warn: map-get($theme, warn); - $background: map-get($theme, background); - $foreground: map-get($theme, foreground); - - .adf-primary-color { - color: mat-color($primary) !important; - } - - .adf-accent-color { - color: mat-color($accent) !important; - } - - .adf-warn-color { - color: mat-color($warn) !important; - } - - .adf-dialog-background-color { - background: mat-color($background, dialog) !important; - } - - .adf-primary-background-color { - color: mat-color($primary, default-contrast) !important; - background: mat-color($primary) !important; - } - - .adf-accent-background-color { - color: mat-color($accent, default-contrast) !important; - background: mat-color($accent) !important; - } - - .adf-primary-contrast-text-color { - color: mat-color($primary, default-contrast) !important; - } - - .adf-accent-contrast-text-color { - color: mat-color($accent, default-contrast) !important; - } -} diff --git a/lib/core/styles/_theming.scss b/lib/core/styles/_theming.scss index 93d62014a9..78c9bc425c 100644 --- a/lib/core/styles/_theming.scss +++ b/lib/core/styles/_theming.scss @@ -1,7 +1,6 @@ @import '~@angular/material/theming'; @import '~@angular/flex-layout/mq'; @import './colors'; -@import './variables'; @import './mixins'; @import './typography'; diff --git a/lib/core/styles/_variables.scss b/lib/core/styles/_variables.scss deleted file mode 100644 index f783a374ac..0000000000 --- a/lib/core/styles/_variables.scss +++ /dev/null @@ -1,8 +0,0 @@ -@import './colors'; - -/* ANIMATION */ -$animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default; -$animation-curve-default: $animation-curve-fast-out-slow-in !default; - -$swift-ease-in-duration: 300ms !default; -$swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default; diff --git a/lib/core/styles/material.theme.scss b/lib/core/styles/material.theme.scss new file mode 100644 index 0000000000..3e35d6570e --- /dev/null +++ b/lib/core/styles/material.theme.scss @@ -0,0 +1,59 @@ +@mixin adf-material-theme() { + + .mat-expansion-panel { + & .mat-expansion-panel-header.cdk-keyboard-focused, + & .mat-expansion-panel-header.cdk-program-focused, + &:not(.mat-expanded) .mat-expansion-panel-header:hover { + &:not([aria-disabled='true']) { + background-color: var(--theme-hover-bg-color); + } + } + } + + .mat-calendar { + .mat-calendar-header { + button { + color: var(--theme-text-bold-color); + + &:disabled { + color: var(--theme-text-color); + } + } + } + .mat-calendar-content { + .mat-calendar-table-header th { + color: var(--theme-text-color); + } + + .mat-calendar-body-disabled > div { + color: var(--theme-text-color) !important; + } + } + } + + .mat-datetimepicker-calendar { + .mat-datetimepicker-calendar-header { + .mat-datetimepicker-calendar-header-year { + opacity: 1; + } + + .mat-datetimepicker-calendar-header-date { + opacity: 1; + } + + .mat-datetimepicker-calendar-header-time { + opacity: 1; + } + } + + .mat-datetimepicker-calendar-content { + .mat-datetimepicker-calendar-table-header th { + color: var(--theme-text-color); + } + + .mat-datetimepicker-calendar-body-disabled > div { + color: var(--theme-text-color); + } + } + } +} diff --git a/lib/core/styles/prebuilt/_all-theme.scss b/lib/core/styles/prebuilt/_all-theme.scss index c2261872c9..cc6755820e 100644 --- a/lib/core/styles/prebuilt/_all-theme.scss +++ b/lib/core/styles/prebuilt/_all-theme.scss @@ -1,13 +1,5 @@ -@import '../../../content-services/src/lib/styles/index'; -@import '../../../process-services/src/lib/styles/index'; -@import '../../../process-services-cloud/src/lib/styles/index'; @import '../../../core/styles/index'; -@import '../../../insights/src/lib/styles/index'; @mixin alfresco-material-theme($theme) { - @include adf-content-services-theme($theme); - @include adf-process-services-theme($theme); - @include adf-process-services-cloud-theme($theme); @include adf-core-theme($theme); - @include adf-insights-theme($theme); } diff --git a/lib/core/styles/snackbar.theme.scss b/lib/core/styles/snackbar.theme.scss index cc98a1b8e0..7e46dd3083 100644 --- a/lib/core/styles/snackbar.theme.scss +++ b/lib/core/styles/snackbar.theme.scss @@ -1,29 +1,25 @@ -@mixin adf-snackbar-theme($theme) { - $warn: map-get($theme, warn); - $accent: map-get($theme, accent); - $primary: map-get($theme, primary); - +@mixin adf-snackbar-theme() { .adf-error-snackbar { - background-color: mat-color($warn); + background-color: var(--adf-snackbar-error-bg-color); - .mat-simple-snackbar-action { - color: white; - } + .mat-simple-snackbar-action { + color: var(--adf-snackbar-error-action-color); + } } .adf-warning-snackbar { - background-color: mat-color($accent); + background-color: var(--adf-snackbar-warning-bg-color); - .mat-simple-snackbar-action { - color: white; - } + .mat-simple-snackbar-action { + color: var(--adf-snackbar-warning-action-color); + } } .adf-info-snackbar { - background-color: mat-color($primary); + background-color: var(--adf-snackbar-info-bg-color); - .mat-simple-snackbar-action { - color: white; - } + .mat-simple-snackbar-action { + color: var(--adf-snackbar-info-action-color); + } } - } +} diff --git a/lib/core/templates/empty-content/empty-content.component.scss b/lib/core/templates/empty-content/empty-content.component.scss new file mode 100644 index 0000000000..009ab8b921 --- /dev/null +++ b/lib/core/templates/empty-content/empty-content.component.scss @@ -0,0 +1,39 @@ +.adf-empty-content { + color: var(--theme-text-color); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; + width: 100%; + + &__icon { + .mat-icon { + font-size: var(--theme-display-3-font-size); + height: var(--theme-display-3-font-size) !important; + width: var(--theme-display-3-font-size) !important; + } + } + + &__title { + font-size: 18px; + font-weight: 600; + line-height: 0; + white-space: normal; + text-align: center; + margin: 10px 0; + } + + &__subtitle, + &__text { + font-size: 14px; + font-weight: 300; + line-height: inherit; + white-space: normal; + text-align: center; + } + + .adf-icon { + opacity: 0.6; + } +} diff --git a/lib/core/templates/empty-content/empty-content.component.ts b/lib/core/templates/empty-content/empty-content.component.ts index 09a12dae21..a8c099a700 100644 --- a/lib/core/templates/empty-content/empty-content.component.ts +++ b/lib/core/templates/empty-content/empty-content.component.ts @@ -20,6 +20,7 @@ import { Component, ChangeDetectionStrategy, ViewEncapsulation, Input } from '@a @Component({ selector: 'adf-empty-content', templateUrl: './empty-content.component.html', + styleUrls: ['./empty-content.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'adf-empty-content' } diff --git a/lib/core/templates/empty-content/empty-content.theme.scss b/lib/core/templates/empty-content/empty-content.theme.scss deleted file mode 100644 index e6c6edbef0..0000000000 --- a/lib/core/templates/empty-content/empty-content.theme.scss +++ /dev/null @@ -1,46 +0,0 @@ -@mixin adf-empty-content-theme($theme) { - - $config: mat-typography-config(); - $foreground: map-get($theme, foreground); - $adf-empty-content-icon-opacity: 0.6; - - .adf-empty-content { - color: mat-color($foreground, text, 0.54); - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100%; - width: 100%; - - &__icon { - .mat-icon { - font-size: mat-font-size($config, display-3); - height: mat-font-size($config, display-3) !important; - width: mat-font-size($config, display-3) !important; - } - } - - &__title { - font-size: 18px; - font-weight: 600; - line-height: 0; - white-space: normal; - text-align: center; - margin: 10px 0; - } - - &__subtitle, - &__text { - font-size: 14px; - font-weight: 300; - line-height: inherit; - white-space: normal; - text-align: center; - } - - .adf-icon { - opacity: $adf-empty-content-icon-opacity; - } - } -} diff --git a/lib/core/templates/error-content/error-content.component.scss b/lib/core/templates/error-content/error-content.component.scss new file mode 100644 index 0000000000..c8a3896709 --- /dev/null +++ b/lib/core/templates/error-content/error-content.component.scss @@ -0,0 +1,61 @@ +.adf-error-content { + color: var(--theme-text-color); + display: flex; + flex-direction: column; + align-items: center; + + + &-code { + font-size: 110px; + font-weight: 300; + margin-top: 200px; + margin-bottom: 45px; + } + + &-shadow { + width: 170px; + height: 3px; + opacity: 0.54; + box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.39); + } + + &-title { + font-size: 46px; + font-weight: normal; + margin-top: 40px; + margin-bottom: 10px; + } + + &-description { + font-size: 24px; + font-weight: normal; + text-align: center; + width: 50%; + min-width: 250px; + margin-bottom: 60px; + line-height: 30px; + } +} + +@media screen and (max-width: 959px) { + .adf-error-content { + + &-code { + margin-top: 100px; + font-size: 50px; + margin-bottom: 25px; + } + + &-shadow { + width: 100px; + } + + &-title { + font-size: 24px; + } + + &-description { + font-size: 17px; + } + } +} diff --git a/lib/core/templates/error-content/error-content.component.ts b/lib/core/templates/error-content/error-content.component.ts index b552dfcddf..c0f4698539 100644 --- a/lib/core/templates/error-content/error-content.component.ts +++ b/lib/core/templates/error-content/error-content.component.ts @@ -27,6 +27,7 @@ import { TranslationService } from '../../services/translation.service'; @Component({ selector: 'adf-error-content', templateUrl: './error-content.component.html', + styleUrls: ['./error-content.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'adf-error-content' } diff --git a/lib/core/templates/error-content/error-content.theme.scss b/lib/core/templates/error-content/error-content.theme.scss deleted file mode 100644 index d5c03d2276..0000000000 --- a/lib/core/templates/error-content/error-content.theme.scss +++ /dev/null @@ -1,65 +0,0 @@ -@mixin adf-error-content-theme($theme) { - $foreground: map-get($theme, foreground); - - .adf-error-content { - color: mat-color($foreground, text, 0.54); - display: flex; - flex-direction: column; - align-items: center; - - - &-code { - font-size: 110px; - font-weight: 300; - margin-top: 200px; - margin-bottom: 45px; - } - - &-shadow { - width: 170px; - height: 3px; - opacity: 0.54; - box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.39); - } - - &-title { - font-size: 46px; - font-weight: normal; - margin-top: 40px; - margin-bottom: 10px; - } - - &-description { - font-size: 24px; - font-weight: normal; - text-align: center; - width: 50%; - min-width: 250px; - margin-bottom: 60px; - line-height: 30px; - } - } - - @media screen and (max-width: 959px) { - .adf-error-content { - - &-code { - margin-top: 100px; - font-size: 50px; - margin-bottom: 25px; - } - - &-shadow { - width: 100px; - } - - &-title { - font-size: 24px; - } - - &-description { - font-size: 17px; - } - } - } -} diff --git a/lib/core/toolbar/toolbar.component.scss b/lib/core/toolbar/toolbar.component.scss new file mode 100644 index 0000000000..bd8290c789 --- /dev/null +++ b/lib/core/toolbar/toolbar.component.scss @@ -0,0 +1,36 @@ +.adf-toolbar { + &--spacer { + flex: 1 1 auto; + } + + &-title { + overflow: hidden; + display: flex; + width: 100%; + } + + .mat-toolbar { + min-height: 48px; + border: 1px solid var(--theme-border-color); + color: var(--theme-text-color); + } + + .mat-toolbar-row { + height: 48px; + font-size: 14px; + white-space: normal; + } + + .mat-toolbar-single-row { + padding: 0 16px; + height: 64px; + } + + &.adf-toolbar--inline { + .mat-toolbar { + background-color: inherit; + border: none !important; + padding: 0; + } + } +} diff --git a/lib/core/toolbar/toolbar.component.ts b/lib/core/toolbar/toolbar.component.ts index 831efda48f..79bd5fd225 100644 --- a/lib/core/toolbar/toolbar.component.ts +++ b/lib/core/toolbar/toolbar.component.ts @@ -21,6 +21,7 @@ import { ThemePalette } from '@angular/material/core'; @Component({ selector: 'adf-toolbar', templateUrl: './toolbar.component.html', + styleUrls: ['./toolbar.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'class': 'adf-toolbar' } diff --git a/lib/core/toolbar/toolbar.theme.scss b/lib/core/toolbar/toolbar.theme.scss deleted file mode 100644 index 1f85cb8d6a..0000000000 --- a/lib/core/toolbar/toolbar.theme.scss +++ /dev/null @@ -1,45 +0,0 @@ -@mixin adf-toolbar-theme($theme) { - $foreground: map-get($theme, foreground); - $adf-toolbar-height: 48px !default; - $adf-toolbar-single-row-height: 64px !default; - $adf-toolbar-font-size: 14px !default; - $adf-toolbar-padding: 16px !default; - $adf-toolbar-icon-color: mat-color($foreground, text, 0.54) !default; - - .adf-toolbar { - &--spacer { - flex: 1 1 auto; - } - - &-title { - overflow: hidden; - display: flex; - width: 100%; - } - - .mat-toolbar { - min-height: $adf-toolbar-height; - border: 1px solid mat-color($foreground, text, 0.07); - color: $adf-toolbar-icon-color; - } - - .mat-toolbar-row { - height: $adf-toolbar-height; - font-size: $adf-toolbar-font-size; - white-space: normal; - } - - .mat-toolbar-single-row { - padding: 0 $adf-toolbar-padding; - height: $adf-toolbar-single-row-height; - } - - &.adf-toolbar--inline { - .mat-toolbar { - background-color: inherit; - border: none !important; - padding: 0; - } - } - } -} diff --git a/lib/core/userinfo/components/user-info.component.scss b/lib/core/userinfo/components/user-info.component.scss new file mode 100644 index 0000000000..d3ea58ba3a --- /dev/null +++ b/lib/core/userinfo/components/user-info.component.scss @@ -0,0 +1,193 @@ +.adf { + + &-userinfo-container { + display: flex; + align-items: center; + padding: 0 5px; + } + + &-userinfo-name-right { + flex-direction: row-reverse; + } + + &-userinfo-name { + padding: 0 5px; + + @media screen and (max-width: 959px) { + display: none; + } + } + + &-userinfo-pic { + background: var(--adf-user-info-color); + display: inline-block; + width: 40px; + height: 40px; + border-radius: 100px; + text-align: center; + font-weight: bolder; + font-size: 18px; + text-transform: uppercase; + vertical-align: middle; + line-height: 40px; + } + + &-userinfo-profile-image { + background: var(--adf-user-info-color); + text-align: center; + border-radius: 90%; + width: 40px; + height: 40px; + margin-right: 0; + cursor: pointer; + vertical-align: middle; + margin-left: 0; + } + + &-userinfo-profile-container { + display: inline-block; + } + + &-userinfo-menu_button.mat-button { + margin-right: 0; + border-radius: 90%; + padding: 0; + min-width: 40px; + height: 40px; + } + + &-userinfo-tab .mat-tab-header { + align-self: center; + width: 100%; + min-width: 250px; + } + + &-userinfo-tab .mat-tab-label { + flex: auto; + font-weight: 500; + font-size: 14px; + text-transform: uppercase; + line-height: 48px; + text-align: center; + } + + &-userinfo-card-header { + align-items: center; + display: flex; + justify-content: stretch; + line-height: normal; + height: 100px; + box-sizing: border-box; + } + + &-userinfo-card.mat-card { + padding: 0; + } + + &-userinfo-supporting-text { + font-size: 14px; + font-weight: 400; + letter-spacing: 0; + line-height: 18px; + overflow: hidden; + padding: 32px; + -webkit-column-count: 2; + -moz-column-count: 2; + column-count: 2; + display: flex; + justify-content: space-between; + + @media screen and (max-width: 599px) { + padding: 10px; + } + } + + &-userinfo-title { + font-size: 21px; + } + + &-userinfo__detail-profile { + align-items: flex-start; + font-size: 14px; + font-weight: 400; + letter-spacing: 0; + line-height: 18px; + display: block; + padding: 0; + margin: 0; + } + + &-userinfo__detail-title { + text-overflow: ellipsis; + font-size: 16px; + font-weight: 400; + letter-spacing: 0.04em; + line-height: 20px; + align-items: flex-start; + } + + &-userinfo__secondary-info { + font-size: 14px; + font-weight: 400; + letter-spacing: 0; + line-height: 18px; + align-items: flex-end; + } + + &-userinfo-profile-picture { + background: var(--adf-user-info-color); + background-size: cover; + border-radius: 50%; + height: 80px; + width: 80px; + margin-left: 0; + margin-right: 8px; + } + + &-userinfo-profile-initials { + text-transform: uppercase; + background-size: cover; + background: var(--adf-user-info-color); + border-radius: 50%; + height: 80px; + width: 80px; + margin-left: 0; + margin-right: 8px; + font-size: 35px; + font-weight: 400; + letter-spacing: 0; + line-height: 78px; + overflow: hidden; + display: flex; + justify-content: space-around; + } + + &-userinfo-button-profile { + display: inline-block; + border: 0; + vertical-align: middle; + } + + &-userinfo-detail { + text-align: left; + } + + &-hide-tab .mat-tab-label-active { + display: none !important; + } + +} + +@media only screen and (min-device-width: 480px) { + .mat-menu-panel.adf-userinfo-menu { + max-height: 450px; + min-width: 450px; + overflow: auto; + padding: 0; + } +} + +.mat-menu-panel.adf-userinfo-menu .mat-menu-content { + padding: 0; +} + diff --git a/lib/core/userinfo/components/user-info.component.ts b/lib/core/userinfo/components/user-info.component.ts index 8b4d47283c..772658917f 100644 --- a/lib/core/userinfo/components/user-info.component.ts +++ b/lib/core/userinfo/components/user-info.component.ts @@ -29,6 +29,7 @@ import { MatMenuTrigger, MenuPositionX, MenuPositionY } from '@angular/material/ @Component({ selector: 'adf-userinfo', templateUrl: './user-info.component.html', + styleUrls: ['./user-info.component.scss'], encapsulation: ViewEncapsulation.None }) export class UserInfoComponent implements OnInit { diff --git a/lib/core/userinfo/components/user-info.theme.scss b/lib/core/userinfo/components/user-info.theme.scss deleted file mode 100644 index 2a1a48ae3e..0000000000 --- a/lib/core/userinfo/components/user-info.theme.scss +++ /dev/null @@ -1,197 +0,0 @@ -@mixin adf-userinfo-theme($theme) { - $primary: map-get($theme, primary); - - .adf { - - &-userinfo-container { - display: flex; - align-items: center; - padding: 0 5px; - } - - &-userinfo-name-right { - flex-direction: row-reverse; - } - - &-userinfo-name { - padding: 0 5px; - - @media screen and (max-width: 959px) { - display: none; - } - } - - &-userinfo-pic { - background: mat-color($primary, 300); - display: inline-block; - width: 40px; - height: 40px; - border-radius: 100px; - text-align: center; - font-weight: bolder; - font-size: 18px; - text-transform: uppercase; - vertical-align: middle; - line-height: 40px; - } - - &-userinfo-profile-image { - background: mat-color($primary, 300); - text-align: center; - border-radius: 90%; - width: 40px; - height: 40px; - margin-right: 0; - cursor: pointer; - vertical-align: middle; - margin-left: 0; - } - - &-userinfo-profile-container { - display: inline-block; - } - - &-userinfo-menu_button.mat-button { - margin-right: 0; - border-radius: 90%; - padding: 0; - min-width: 40px; - height: 40px; - } - - &-userinfo-tab .mat-tab-header { - align-self: center; - width: 100%; - min-width: 250px; - } - - &-userinfo-tab .mat-tab-label { - flex: auto; - font-weight: 500; - font-size: 14px; - text-transform: uppercase; - line-height: 48px; - text-align: center; - } - - &-userinfo-card-header { - align-items: center; - display: flex; - justify-content: stretch; - line-height: normal; - height: 100px; - box-sizing: border-box; - } - - &-userinfo-card.mat-card { - padding: 0; - } - - &-userinfo-supporting-text { - font-size: 14px; - font-weight: 400; - letter-spacing: 0; - line-height: 18px; - overflow: hidden; - padding: 32px; - -webkit-column-count: 2; - -moz-column-count: 2; - column-count: 2; - display: flex; - justify-content: space-between; - - @media screen and (max-width: 599px) { - padding: 10px; - } - } - - &-userinfo-title { - font-size: 21px; - } - - &-userinfo__detail-profile { - align-items: flex-start; - font-size: 14px; - font-weight: 400; - letter-spacing: 0; - line-height: 18px; - display: block; - padding: 0; - margin: 0; - } - - &-userinfo__detail-title { - text-overflow: ellipsis; - font-size: 16px; - font-weight: 400; - letter-spacing: 0.04em; - line-height: 20px; - align-items: flex-start; - } - - &-userinfo__secondary-info { - font-size: 14px; - font-weight: 400; - letter-spacing: 0; - line-height: 18px; - align-items: flex-end; - } - - &-userinfo-profile-picture { - background: mat-color($primary, 300); - background-size: cover; - border-radius: 50%; - height: 80px; - width: 80px; - margin-left: 0; - margin-right: 8px; - } - - &-userinfo-profile-initials { - text-transform: uppercase; - background-size: cover; - background: mat-color($primary, 300); - border-radius: 50%; - height: 80px; - width: 80px; - margin-left: 0; - margin-right: 8px; - font-size: 35px; - font-weight: 400; - letter-spacing: 0; - line-height: 78px; - overflow: hidden; - display: flex; - justify-content: space-around; - } - - &-userinfo-button-profile { - display: inline-block; - border: 0; - vertical-align: middle; - } - - &-userinfo-detail { - text-align: left; - } - - &-hide-tab .mat-tab-label-active { - display: none !important; - } - - } - - @media only screen and (min-device-width: 480px) { - .mat-menu-panel.adf-userinfo-menu { - max-height: 450px; - min-width: 450px; - overflow: auto; - padding: 0; - } - } - - .mat-menu-panel.adf-userinfo-menu .mat-menu-content { - padding: 0; - } -} - diff --git a/lib/core/viewer/components/img-viewer.component.scss b/lib/core/viewer/components/img-viewer.component.scss new file mode 100644 index 0000000000..294b24270b --- /dev/null +++ b/lib/core/viewer/components/img-viewer.component.scss @@ -0,0 +1,50 @@ +.adf-image-viewer { + width: 100%; + + .adf-image-container { + &:focus { + outline-offset: -1px; + outline: 1px solid var(--theme-accent-color-a200); + } + display: flex; + height: 90vh; + align-items: center; + justify-content: center; + img { + max-height: 100%; + max-width: 100%; + } + /* query for Microsoft IE 11*/ + @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { + img { + height: 100%; + } + } + } + + &__toolbar { + position: absolute; + bottom: 5px; + + left: 50%; + transform: translateX(-50%); + + .adf-toolbar .mat-toolbar { + max-height: 48px; + background-color: var(--theme-card-bg-color); + border-width: 0; + border-radius: 2px; + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12); + } + + .adf-main-toolbar { + display: inline-block; + } + + .adf-secondary-toolbar { + display: inline-block; + margin-left: 10px; + } + + } +} diff --git a/lib/core/viewer/components/img-viewer.component.ts b/lib/core/viewer/components/img-viewer.component.ts index 54e82416d8..fe9353a213 100644 --- a/lib/core/viewer/components/img-viewer.component.ts +++ b/lib/core/viewer/components/img-viewer.component.ts @@ -32,6 +32,7 @@ import Cropper from 'cropperjs'; @Component({ selector: 'adf-img-viewer', templateUrl: './img-viewer.component.html', + styleUrls: ['./img-viewer.component.scss'], host: { 'class': 'adf-image-viewer' }, encapsulation: ViewEncapsulation.None }) diff --git a/lib/core/viewer/components/img-viewer.theme.scss b/lib/core/viewer/components/img-viewer.theme.scss deleted file mode 100644 index a8826c33eb..0000000000 --- a/lib/core/viewer/components/img-viewer.theme.scss +++ /dev/null @@ -1,56 +0,0 @@ -@mixin adf-image-viewer-theme($theme) { - $accent: map-get($theme, accent); - $background: map-get($theme, background); - $viewer-image-outline: 1px solid mat-color($accent, A200) !default; - - .adf-image-viewer { - width: 100%; - - .adf-image-container { - &:focus { - outline-offset: -1px; - outline: $viewer-image-outline; - } - display: flex; - height: 90vh; - align-items: center; - justify-content: center; - img { - max-height: 100%; - max-width: 100%; - } - /* query for Microsoft IE 11*/ - @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { - img { - height: 100%; - } - } - } - - &__toolbar { - position: absolute; - bottom: 5px; - - left: 50%; - transform: translateX(-50%); - - .adf-toolbar .mat-toolbar { - max-height: 48px; - background-color: mat-color($background, card); - border-width: 0; - border-radius: 2px; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12); - } - - .adf-main-toolbar { - display: inline-block; - } - - .adf-secondary-toolbar { - display: inline-block; - margin-left: 10px; - } - - } - } -} diff --git a/lib/core/viewer/components/pdf-viewer-password-dialog.scss b/lib/core/viewer/components/pdf-viewer-password-dialog.scss new file mode 100644 index 0000000000..5ef520cbd3 --- /dev/null +++ b/lib/core/viewer/components/pdf-viewer-password-dialog.scss @@ -0,0 +1,15 @@ +.adf-fill-remaining-space { + flex: 1 1 auto; +} + +.adf-full-width { + width: 100%; +} + +.adf-dialog-buttons button { + text-transform: uppercase; +} + +.adf-dialog-action-button:enabled { + color: var(--theme-primary-color); +} diff --git a/lib/core/viewer/components/pdf-viewer-password-dialog.theme.scss b/lib/core/viewer/components/pdf-viewer-password-dialog.theme.scss deleted file mode 100644 index 3b5d7d3dec..0000000000 --- a/lib/core/viewer/components/pdf-viewer-password-dialog.theme.scss +++ /dev/null @@ -1,19 +0,0 @@ -@mixin adf-pdf-viewer-password-dialog-theme($theme) { - .adf-fill-remaining-space { - flex: 1 1 auto; - } - - .adf-full-width { - width: 100%; - } - - $primary: map-get($theme, primary); - - .adf-dialog-buttons button { - text-transform: uppercase; - } - - .adf-dialog-action-button:enabled { - color: mat-color($primary); - } -} diff --git a/lib/core/viewer/components/pdf-viewer-password-dialog.ts b/lib/core/viewer/components/pdf-viewer-password-dialog.ts index ff1fd0eaf5..498da77b64 100644 --- a/lib/core/viewer/components/pdf-viewer-password-dialog.ts +++ b/lib/core/viewer/components/pdf-viewer-password-dialog.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { Component, Inject, OnInit } from '@angular/core'; +import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core'; import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { FormControl, Validators } from '@angular/forms'; @@ -23,7 +23,9 @@ declare const pdfjsLib: any; @Component({ selector: 'adf-pdf-viewer-password-dialog', - templateUrl: './pdf-viewer-password-dialog.html' + templateUrl: './pdf-viewer-password-dialog.html', + styleUrls: ['./pdf-viewer-password-dialog.scss'], + encapsulation: ViewEncapsulation.None }) export class PdfPasswordDialogComponent implements OnInit { passwordFormControl: FormControl; diff --git a/lib/core/viewer/components/pdf-viewer-thumbnails.component.scss b/lib/core/viewer/components/pdf-viewer-thumbnails.component.scss new file mode 100644 index 0000000000..03c6a64514 --- /dev/null +++ b/lib/core/viewer/components/pdf-viewer-thumbnails.component.scss @@ -0,0 +1,30 @@ +.adf-pdf-thumbnails { + display: block; + overflow: hidden; + overflow-y: auto; + height: 100%; + position: relative; + + &__content { + top: 5px; + left: 50%; + height: 0; + position: absolute; + } + + &__thumb { + cursor: pointer; + display: block; + width: 91px; + background: var(--theme-background-color); + margin-bottom: 15px; + } + + &__thumb:hover { + box-shadow: 0 0 5px 0 var(--theme-text-bold-color); + } + + &__thumb--selected { + border: 2px solid var(--theme-accent-color-a200); + } +} diff --git a/lib/core/viewer/components/pdf-viewer-thumbnails.component.spec.ts b/lib/core/viewer/components/pdf-viewer-thumbnails.component.spec.ts index 9139feed7f..5feef6084d 100644 --- a/lib/core/viewer/components/pdf-viewer-thumbnails.component.spec.ts +++ b/lib/core/viewer/components/pdf-viewer-thumbnails.component.spec.ts @@ -78,8 +78,11 @@ describe('PdfThumbListComponent', () => { fixture.nativeElement.style.display = 'block'; fixture.nativeElement.style.height = '700px'; fixture.nativeElement.style.overflow = 'scroll'; - fixture.debugElement.query(By.css('.adf-pdf-thumbnails__content')) - .nativeElement.style.height = '2000px'; + + const content = fixture.debugElement.query(By.css('.adf-pdf-thumbnails__content')).nativeElement; + + content.style.height = '2000px'; + content.style.position = 'unset'; }); it('should render initial rage of items', () => { diff --git a/lib/core/viewer/components/pdf-viewer-thumbnails.component.ts b/lib/core/viewer/components/pdf-viewer-thumbnails.component.ts index e664bf4cef..4442d01862 100644 --- a/lib/core/viewer/components/pdf-viewer-thumbnails.component.ts +++ b/lib/core/viewer/components/pdf-viewer-thumbnails.component.ts @@ -28,6 +28,7 @@ import { delay } from 'rxjs/operators'; @Component({ selector: 'adf-pdf-thumbnails', templateUrl: './pdf-viewer-thumbnails.component.html', + styleUrls: ['./pdf-viewer-thumbnails.component.scss'], host: { class: 'adf-pdf-thumbnails' }, encapsulation: ViewEncapsulation.None }) diff --git a/lib/core/viewer/components/pdf-viewer-thumbnails.theme.scss b/lib/core/viewer/components/pdf-viewer-thumbnails.theme.scss deleted file mode 100644 index 696bd589d0..0000000000 --- a/lib/core/viewer/components/pdf-viewer-thumbnails.theme.scss +++ /dev/null @@ -1,35 +0,0 @@ -@mixin adf-pdf-thumbnails-theme($theme) { - $accent: map-get($theme, accent); - $background: map-get($theme, background); - - .adf-pdf-thumbnails { - display: block; - overflow: hidden; - overflow-y: auto; - height: 100%; - position: relative; - - &__content { - top: 5px; - left: 50%; - height: 0; - position: absolute; - } - - &__thumb { - cursor: pointer; - display: block; - width: 91px; - background: mat-color($background, background); - margin-bottom: 15px; - } - - &__thumb:hover { - box-shadow: 0 0 5px 0 $black-87-opacity; - } - - &__thumb--selected { - border: 2px solid mat-color($accent, A200); - } - } -} diff --git a/lib/core/viewer/components/pdf-viewer.component.scss b/lib/core/viewer/components/pdf-viewer.component.scss new file mode 100644 index 0000000000..6e6e44a7c9 --- /dev/null +++ b/lib/core/viewer/components/pdf-viewer.component.scss @@ -0,0 +1,98 @@ +.adf-viewer-content-container { + width: 100%; + height: 100%; +} + +.adf-pdf-viewer { + width: 100%; + height: 100%; + margin: 0; + + .adf-loader-container { + display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ + display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ + display: -webkit-flex; /* NEW - Chrome */ + display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ + -webkit-box-flex-direction: row; + -moz-box-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; + height:100%; + } + + &__thumbnails { + position: relative; + height: 100%; + width: 190px; + background-color: rgba(0, 0, 0, 0.12); + } + + .adf-thumbnails-template { + &__container { + display: flex; + flex-direction: column; + height: 100%; + } + + &__buttons { + height: 45px; + justify-content: flex-end; + align-items: flex-end; + display: flex; + color: var(--theme-text-color); + } + } + + &__container { + display: flex; + height: 100vh; + } + + &__content { + flex: 1 1 auto; + position: relative; + } + + .adf-loader-item { + margin: auto; + max-height:100px; + max-width:300px; + } + + &__toolbar { + position: absolute; + bottom: 5px; + + left: 50%; + transform: translateX(-50%); + + .adf-toolbar .mat-toolbar { + max-height: 48px; + background-color: var(--theme-card-bg-color); + border-width: 0; + border-radius: 2px; + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12); + } + + &-page-selector { + padding-left: 10px; + padding-right: 10px; + font-size: 14px; + + & > input { + border: 1px solid var(--theme-border-color); + background-color: var(--theme-card-bg-color); + color: inherit; + font-size: 14px; + padding: 5px; + height: 24px; + line-height: 24px; + text-align: right; + width: 33px; + margin-right: 4px; + outline-width: 1px; + outline-color: gray; + } + } + } +} diff --git a/lib/core/viewer/components/pdf-viewer.component.ts b/lib/core/viewer/components/pdf-viewer.component.ts index 54ebe6d405..b54ba3eb0c 100644 --- a/lib/core/viewer/components/pdf-viewer.component.ts +++ b/lib/core/viewer/components/pdf-viewer.component.ts @@ -42,7 +42,7 @@ declare const pdfjsViewer: any; @Component({ selector: 'adf-pdf-viewer', templateUrl: './pdf-viewer.component.html', - styleUrls: ['./pdf-viewer-host.component.scss'], + styleUrls: ['./pdf-viewer-host.component.scss', './pdf-viewer.component.scss'], providers: [RenderingQueueServices], host: { 'class': 'adf-pdf-viewer' }, encapsulation: ViewEncapsulation.None diff --git a/lib/core/viewer/components/pdf-viewer.theme.scss b/lib/core/viewer/components/pdf-viewer.theme.scss deleted file mode 100644 index 1abf2ec5f4..0000000000 --- a/lib/core/viewer/components/pdf-viewer.theme.scss +++ /dev/null @@ -1,101 +0,0 @@ -@mixin adf-pdf-viewer-theme($theme) { - $background: map-get($theme, background); - $foreground: map-get($theme, foreground); - - .adf-viewer-content-container { - width: 100%; - } - - .adf-pdf-viewer { - width: 100%; - margin: 0; - - .adf-loader-container { - display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ - display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ - display: -webkit-flex; /* NEW - Chrome */ - display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ - -webkit-box-flex-direction: row; - -moz-box-flex-direction: row; - -webkit-flex-direction: row; - flex-direction: row; - height:100%; - } - - &__thumbnails { - position: relative; - height: 100%; - width: 190px; - background-color: rgba(0, 0, 0, 0.12); - } - - .adf-thumbnails-template { - &__container { - display: flex; - flex-direction: column; - height: 100%; - } - - &__buttons { - height: 45px; - justify-content: flex-end; - align-items: flex-end; - display: flex; - color: mat-color($foreground, text, 0.54); - } - } - - &__container { - display: flex; - height: 100%; - } - - &__content { - flex: 1 1 auto; - position: relative; - } - - .adf-loader-item { - margin: auto; - max-height:100px; - max-width:300px; - } - - &__toolbar { - position: absolute; - bottom: 5px; - - left: 50%; - transform: translateX(-50%); - - .adf-toolbar .mat-toolbar { - max-height: 48px; - background-color: mat-color($background, card); - border-width: 0; - border-radius: 2px; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12); - } - - &-page-selector { - padding-left: 10px; - padding-right: 10px; - font-size: 14px; - - & > input { - border: 1px solid mat-color($foreground, text, 0.07); - background-color: mat-color($background, card); - color: inherit; - font-size: 14px; - padding: 5px; - height: 24px; - line-height: 24px; - text-align: right; - width: 33px; - margin-right: 4px; - outline-width: 1px; - outline-color: gray; - } - } - } - } -} diff --git a/lib/core/viewer/components/txt-viewer.component.scss b/lib/core/viewer/components/txt-viewer.component.scss new file mode 100644 index 0000000000..968faafd49 --- /dev/null +++ b/lib/core/viewer/components/txt-viewer.component.scss @@ -0,0 +1,6 @@ +.adf-txt-viewer { + background-color: var(--theme-background-color); + overflow: auto; + height: 100%; + width: 100%; +} diff --git a/lib/core/viewer/components/txt-viewer.component.ts b/lib/core/viewer/components/txt-viewer.component.ts index 43e360cf20..9866ddc6d0 100644 --- a/lib/core/viewer/components/txt-viewer.component.ts +++ b/lib/core/viewer/components/txt-viewer.component.ts @@ -22,6 +22,7 @@ import { AppConfigService } from './../../app-config/app-config.service'; @Component({ selector: 'adf-txt-viewer', templateUrl: './txt-viewer.component.html', + styleUrls: ['./txt-viewer.component.scss'], host: { 'class': 'adf-txt-viewer' }, encapsulation: ViewEncapsulation.None }) diff --git a/lib/core/viewer/components/txt-viewer.theme.scss b/lib/core/viewer/components/txt-viewer.theme.scss deleted file mode 100644 index cff0395612..0000000000 --- a/lib/core/viewer/components/txt-viewer.theme.scss +++ /dev/null @@ -1,10 +0,0 @@ -@mixin adf-text-viewer-theme($theme) { - $background: map-get($theme, background); - - .adf-txt-viewer { - background-color: mat-color($background, background); - overflow: auto; - height: 100%; - width: 100%; - } -} diff --git a/lib/core/viewer/components/unknown-format/unknown-format.component.scss b/lib/core/viewer/components/unknown-format/unknown-format.component.scss new file mode 100644 index 0000000000..7543a3caff --- /dev/null +++ b/lib/core/viewer/components/unknown-format/unknown-format.component.scss @@ -0,0 +1,9 @@ +.adf-viewer__unknown-format-view { + height: 90vh; + text-align: center; + display: flex; + flex: 1; + flex-direction: column; + justify-content: center; + color: var(--theme-text-fg-color); +} diff --git a/lib/core/viewer/components/unknown-format/unknown-format.component.ts b/lib/core/viewer/components/unknown-format/unknown-format.component.ts index 4523b4cd90..1102576848 100644 --- a/lib/core/viewer/components/unknown-format/unknown-format.component.ts +++ b/lib/core/viewer/components/unknown-format/unknown-format.component.ts @@ -15,11 +15,13 @@ * limitations under the License. */ -import { Component } from '@angular/core'; +import { Component, ViewEncapsulation } from '@angular/core'; @Component({ selector: 'adf-viewer-unknown-format', - templateUrl: './unknown-format.component.html' + templateUrl: './unknown-format.component.html', + styleUrls: ['./unknown-format.component.scss'], + encapsulation: ViewEncapsulation.None }) export class UnknownFormatComponent { } diff --git a/lib/core/viewer/components/unknown-format/unknown-format.theme.scss b/lib/core/viewer/components/unknown-format/unknown-format.theme.scss deleted file mode 100644 index 6f5fc3123c..0000000000 --- a/lib/core/viewer/components/unknown-format/unknown-format.theme.scss +++ /dev/null @@ -1,13 +0,0 @@ -@mixin adf-unknown-viewer-theme($theme) { - $foreground: map-get($theme, foreground); - - .adf-viewer__unknown-format-view { - height: 90vh; - text-align: center; - display: flex; - flex: 1; - flex-direction: column; - justify-content: center; - color: mat-color($foreground, text); - } -} diff --git a/lib/core/viewer/components/viewer.component.scss b/lib/core/viewer/components/viewer.component.scss new file mode 100644 index 0000000000..0d7f6d7af3 --- /dev/null +++ b/lib/core/viewer/components/viewer.component.scss @@ -0,0 +1,204 @@ +.adf-full-screen { + width: 100%; + height: 100%; + background-color: var(--theme-card-bg-color); +} + +.adf-viewer { + + position: absolute; + width: 100%; + height: 100%; + + .mat-toolbar { + color: var(--theme-text-color); + + .adf-toolbar-title { + width: auto; + } + } + + &-main { + width: 0; + } + + &__mimeicon { + vertical-align: middle; + height: 18px; + width: 18px; + } + + &-toolbar { + .mat-toolbar { + background-color: var(--theme-card-bg-bold-color); + } + } + + &__file-title { + text-align: center; + } + + &__display-name { + font-size: 16px; + opacity: 0.87; + line-height: 1.5; + letter-spacing: -0.4px; + font-weight: normal; + font-style: normal; + font-stretch: normal; + + max-width: 400px; + text-overflow: ellipsis; + overflow: hidden; + display: inline-block; + vertical-align: middle; + color: var(--theme-text-fg-color); + } + + &-container { + .adf-viewer-layout-content { + @extend .adf-full-screen; + position: relative; + overflow-y: hidden; + overflow-x: hidden; + z-index: 1; + background-color: var(--theme-background-color); + + display: flex; + flex-direction: row; + flex-wrap: wrap; + flex: 1; + + & > div { + display: flex; + flex-flow: row wrap; + margin: 0 auto; + align-items: stretch; + height: 100%; + } + } + + .adf-viewer-layout { + @extend .adf-full-screen; + + display: flex; + flex-direction: row; + overflow-y: auto; + overflow-x: hidden; + position: relative; + } + + .adf-viewer-content { + @extend .adf-full-screen; + flex: 1; + + & > div { + height: 0; // Firefox + } + } + } + + &-overlay-container { + .adf-viewer-content { + position: fixed; + top: 0; + left: 0; + z-index: 1000; + } + } + + &-inline-container { + @extend .adf-full-screen; + } + + &-content-container { + display: flex; + justify-content: center; + } + + &-custom-content { + width: 100vw; + } + + &-unknown-content { + align-items: center; + display: flex; + } + + &__loading-screen { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + height: 85vh; + + .mat-spinner { + margin: 0 auto; + } + } + + &__sidebar { + width: 350px; + display: block; + padding: 0; + background-color: var(--theme-background-color); + box-shadow: 0 2px 4px 0 var(--theme-text-fg-shadow-color); + overflow: auto; + + &__right { + border-left: 1px solid var(--theme-border-color); + } + + &__left { + border-right: 1px solid var(--theme-border-color); + } + } + + &__thumbnails { + width: 180px; + display: flex; + flex-direction: column; + padding: 0; + background: #e6e6e6; + + .adf-info-drawer-layout { + display: flex; + flex-direction: column; + flex: 1; + background: #e6e6e6; + } + + .adf-info-drawer-layout-header { + margin-bottom: 0; + } + + .adf-info-drawer-layout-content { + padding: 0; + height: 100%; + overflow: hidden; + } + + .adf-info-drawer-content { + height: 100%; + } + + .adf-info-drawer-layout-content > *:last-child { + height: 100%; + overflow: hidden; + } + } + + &__toolbar { + &-page-scale { + cursor: default; + width: 79px; + height: 24px; + font-size: 14px; + border: 1px solid var(--theme-border-color); + text-align: center; + line-height: 24px; + margin-left: 4px; + margin-right: 4px; + } + } +} diff --git a/lib/core/viewer/components/viewer.component.ts b/lib/core/viewer/components/viewer.component.ts index 26d3fb60c8..0e21fcbeb5 100644 --- a/lib/core/viewer/components/viewer.component.ts +++ b/lib/core/viewer/components/viewer.component.ts @@ -48,6 +48,7 @@ import { FileModel } from '../../models'; @Component({ selector: 'adf-viewer', templateUrl: './viewer.component.html', + styleUrls: ['./viewer.component.scss'], host: { 'class': 'adf-viewer' }, encapsulation: ViewEncapsulation.None }) diff --git a/lib/core/viewer/components/viewer.theme.scss b/lib/core/viewer/components/viewer.theme.scss deleted file mode 100644 index 6937f3f370..0000000000 --- a/lib/core/viewer/components/viewer.theme.scss +++ /dev/null @@ -1,210 +0,0 @@ -@mixin adf-viewer-theme($theme) { - $background: map-get($theme, background); - $foreground: map-get($theme, foreground); - $adf-viewer-background-color: mat-color($background, card); - - .adf-full-screen { - width: 100%; - height: 100%; - background-color: $adf-viewer-background-color; - } - - .adf-viewer { - - position: absolute; - width: 100%; - height: 100%; - - .mat-toolbar { - color: mat-color($foreground, text, 0.54); - - .adf-toolbar-title { - width: auto; - } - } - - &-main { - width: 0; - } - - &__mimeicon { - vertical-align: middle; - height: 18px; - width: 18px; - } - - &-toolbar { - .mat-toolbar { - background-color: mat-color($background, card, 0.87); - } - } - - &__file-title { - text-align: center; - } - - &__display-name { - font-size: 16px; - opacity: 0.87; - line-height: 1.5; - letter-spacing: -0.4px; - font-weight: normal; - font-style: normal; - font-stretch: normal; - - max-width: 400px; - text-overflow: ellipsis; - overflow: hidden; - display: inline-block; - vertical-align: middle; - color: mat-color($foreground, text); - } - - &-container { - .adf-viewer-layout-content { - @extend .adf-full-screen; - position: relative; - overflow-y: hidden; - overflow-x: hidden; - z-index: 1; - background-color: mat-color($background, background); - - display: flex; - flex-direction: row; - flex-wrap: wrap; - flex: 1; - - & > div { - display: flex; - flex-flow: row wrap; - margin: 0 auto; - align-items: stretch; - height: 100%; - } - } - - .adf-viewer-layout { - @extend .adf-full-screen; - - display: flex; - flex-direction: row; - overflow-y: auto; - overflow-x: hidden; - position: relative; - } - - .adf-viewer-content { - @extend .adf-full-screen; - flex: 1; - - & > div { - height: 0; // Firefox - } - } - } - - &-overlay-container { - .adf-viewer-content { - position: fixed; - top: 0; - left: 0; - z-index: 1000; - } - } - - &-inline-container { - @extend .adf-full-screen; - } - - &-content-container { - display: flex; - justify-content: center; - } - - &-custom-content { - width: 100vw; - } - - &-unknown-content { - align-items: center; - display: flex; - } - - &__loading-screen { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - height: 85vh; - - .mat-spinner { - margin: 0 auto; - } - } - - &__sidebar { - width: 350px; - display: block; - padding: 0; - background-color: mat-color($background, background); - box-shadow: 0 2px 4px 0 mat-color($foreground, text, 0.27); - overflow: auto; - - &__right { - border-left: 1px solid mat-color($foreground, text, 0.07); - } - - &__left { - border-right: 1px solid mat-color($foreground, text, 0.07); - } - } - - &__thumbnails { - width: 180px; - display: flex; - flex-direction: column; - padding: 0; - background: #e6e6e6; - - .adf-info-drawer-layout { - display: flex; - flex-direction: column; - flex: 1; - background: #e6e6e6; - } - - .adf-info-drawer-layout-header { - margin-bottom: 0; - } - - .adf-info-drawer-layout-content { - padding: 0; - height: 100%; - overflow: hidden; - } - - .adf-info-drawer-content { - height: 100%; - } - - .adf-info-drawer-layout-content > *:last-child { - height: 100%; - overflow: hidden; - } - } - - &__toolbar { - &-page-scale { - cursor: default; - width: 79px; - height: 24px; - font-size: 14px; - border: 1px solid mat-color($foreground, text, 0.07); - text-align: center; - line-height: 24px; - margin-left: 4px; - margin-right: 4px; - } - } - } -} diff --git a/lib/insights/src/lib/analytics-process/components/analytics-report-list.component.scss b/lib/insights/src/lib/analytics-process/components/analytics-report-list.component.scss new file mode 100644 index 0000000000..48ed131cc0 --- /dev/null +++ b/lib/insights/src/lib/analytics-process/components/analytics-report-list.component.scss @@ -0,0 +1,93 @@ +.adf-analytics-report-list { + + .adf-activiti-filters__entry { + cursor: pointer; + } + + .adf-activiti-filters__entry-icon { + position: relative; + top: 5px; + } + + .adf-activiti-filters__label { + white-space: nowrap; + overflow: hidden; + } + + .mat-nav-list .mat-list-item .mat-list-item-content { + line-height: 48px; + } + + .adf-activiti-filters__entry.adf-active { + color: var(--theme-primary-color); + } + + .adf-activiti-filters__entry.adf-active .adf-activiti-filters__entry-icon { + color: var(--theme-primary-color); + } + + .adf-report-card-grids { + display: flex; + padding: 8px; + flex-flow: row wrap; + margin: 0 auto; + align-items: stretch; + } + + .adf-report-card { + margin: 8px; + width: calc(33.3333333333% - 16px); + position: relative; + min-height: 200px; + overflow: hidden; + background-color: var(--theme-background-color); + display: flex; + flex-direction: column; + cursor: pointer; + + &-logo { + position: absolute; + right: 20px; + top: 35px; + z-index: 6; + + &-icon { + font-size: 70px; + color: var(--theme-accent-color); + width: 1em; + height: 1em; + display: inline-block; + } + } + + &-title { + padding: 16px; + z-index: 7; + + .adf-application-title { + font-size: 24px; + margin: 0; + } + } + + &-content { + padding: 16px; + flex-grow: 1; + } + + &-actions { + border-top: 1px solid var(--theme-fg-divider); + padding: 8px; + box-sizing: border-box; + height: 40px; + + &-icon { + color: var(--theme-text-color); + + &:hover { + color: var(--theme-text-bold-color); + } + } + } + } +} diff --git a/lib/insights/src/lib/analytics-process/components/analytics-report-list.component.ts b/lib/insights/src/lib/analytics-process/components/analytics-report-list.component.ts index 255efcc653..9c5c86b365 100644 --- a/lib/insights/src/lib/analytics-process/components/analytics-report-list.component.ts +++ b/lib/insights/src/lib/analytics-process/components/analytics-report-list.component.ts @@ -24,6 +24,7 @@ import { share } from 'rxjs/operators'; @Component({ selector: 'adf-analytics-report-list', templateUrl: './analytics-report-list.component.html', + styleUrls: ['./analytics-report-list.component.scss'], encapsulation: ViewEncapsulation.None }) export class AnalyticsReportListComponent implements OnInit { diff --git a/lib/insights/src/lib/analytics-process/components/analytics-report-list.theme.scss b/lib/insights/src/lib/analytics-process/components/analytics-report-list.theme.scss deleted file mode 100644 index a721c45663..0000000000 --- a/lib/insights/src/lib/analytics-process/components/analytics-report-list.theme.scss +++ /dev/null @@ -1,101 +0,0 @@ -@mixin adf-analytics-report-list-theme($theme) { - $primary: map-get($theme, primary); - $accent: map-get($theme, accent ); - $background: map-get($theme, background); - $foreground: map-get($theme, foreground); - - .adf-analytics-report-list { - - .adf-activiti-filters__entry { - cursor: pointer; - } - - .adf-activiti-filters__entry-icon { - position: relative; - top: 5px; - } - - .adf-activiti-filters__label { - white-space: nowrap; - overflow: hidden; - } - - .mat-nav-list .mat-list-item .mat-list-item-content { - line-height: 48px; - } - - .adf-activiti-filters__entry.adf-active { - color: mat-color($primary); - } - - .adf-activiti-filters__entry.adf-active .adf-activiti-filters__entry-icon { - color: mat-color($primary); - } - - .adf-report-card-grids { - display: flex; - padding: 8px; - flex-flow: row wrap; - margin: 0 auto; - align-items: stretch; - } - - .adf-report-card { - margin: 8px; - width: calc(33.3333333333% - 16px); - position: relative; - min-height: 200px; - overflow: hidden; - background-color: mat-color($background, background); - display: flex; - flex-direction: column; - cursor: pointer; - - &-logo { - position: absolute; - right: 20px; - top: 35px; - z-index: 6; - - &-icon { - font-size: 70px; - color: mat-color($accent); - width: 1em; - height: 1em; - display: inline-block; - } - } - - &-title { - padding: 16px; - z-index: 7; - - .adf-application-title { - font-size: 24px; - margin: 0; - } - } - - &-content { - padding: 16px; - flex-grow: 1; - } - - &-actions { - border-top: 1px solid mat-color($foreground, divider); - padding: 8px; - box-sizing: border-box; - height: 40px; - - &-icon { - color: mat-color($primary, 50); - - &:hover { - color: mat-color($primary, 100); - } - } - } - } - } - -} diff --git a/lib/insights/src/lib/analytics-process/components/analytics-report-parameters.component.scss b/lib/insights/src/lib/analytics-process/components/analytics-report-parameters.component.scss new file mode 100644 index 0000000000..8617ec273c --- /dev/null +++ b/lib/insights/src/lib/analytics-process/components/analytics-report-parameters.component.scss @@ -0,0 +1,102 @@ +.adf-dropdown-widget { + width: 100%; +} + +.adf-dropdown-widget__select { + width: 100%; +} + +.adf-dropdown-widget__invalid .adf-dropdown-widget__select { + border-color: var(--theme-warn-color); +} + +.adf-dropdown-widget__invalid .adf-dropdown-widget__label { + color: var(--theme-warn-color); +} + +.adf-dropdown-widget__invalid .adf-dropdown-widget__label::after { + background-color: var(--theme-warn-color); +} + +.adf-edit-report-title { + float: left; + font-size: 20px!important; + padding-top: 19px; +} + +.adf-report-icon { + float: left; + padding: 5px 5px 0 0; + visibility: hidden; +} + +.adf-report-title-container { + cursor: pointer; + width: 100%; + margin-bottom: 12px; + + :hover .adf-report-icon { + color: var(--theme-primary-color); + visibility: visible; + } +} + +.adf-report-title { + padding-top: 10px; +} + +.adf-full-width-input { + width: 100%; +} + +.adf-is-hide { + height: 0; + overflow: hidden; + transition: height 0.5s; +} + +.adf-report-report-container { + border-bottom: solid 1px var(--theme-fg-divider); + padding-top: 10px; + + .mat-toolbar { + border: 0 !important; + padding: 0 !important; + } +} + +.adf-report-container-setting { + padding-left: 10px; +} + +.adf-option_button_details { + padding-top: 20px; +} + +.adf-export-message { + background-color: var(--theme-background-color); +} + +.adf-save-export-input { + width: 100%; +} + +.adf-delete-parameter { + position: absolute; + margin-left: 60%; + padding-top: 5px; +} + +.adf-hide { + display: none; +} + +.adf-report-dialog { + .mat-form-field { + width: 100%; + } + + .mat-dialog-actions { + justify-content: flex-end; + } +} diff --git a/lib/insights/src/lib/analytics-process/components/analytics-report-parameters.component.ts b/lib/insights/src/lib/analytics-process/components/analytics-report-parameters.component.ts index d6b093f1c2..1895545e59 100644 --- a/lib/insights/src/lib/analytics-process/components/analytics-report-parameters.component.ts +++ b/lib/insights/src/lib/analytics-process/components/analytics-report-parameters.component.ts @@ -43,6 +43,7 @@ import { takeUntil } from 'rxjs/operators'; @Component({ selector: 'adf-analytics-report-parameters', templateUrl: './analytics-report-parameters.component.html', + styleUrls: ['./analytics-report-parameters.component.scss'], encapsulation: ViewEncapsulation.None }) export class AnalyticsReportParametersComponent implements OnInit, OnChanges, OnDestroy, AfterContentChecked { diff --git a/lib/insights/src/lib/analytics-process/components/analytics-report-parameters.theme.scss b/lib/insights/src/lib/analytics-process/components/analytics-report-parameters.theme.scss deleted file mode 100644 index cbd08a8bff..0000000000 --- a/lib/insights/src/lib/analytics-process/components/analytics-report-parameters.theme.scss +++ /dev/null @@ -1,110 +0,0 @@ -@mixin adf-analytics-report-parameters-theme($theme) { - $primary: map-get($theme, primary); - $accent: map-get($theme, accent); - $warn: map-get($theme, warn); - $foreground: map-get($theme, foreground); - $background: map-get($theme, background); - - .adf-dropdown-widget { - width: 100%; - } - - .adf-dropdown-widget__select { - width: 100%; - } - - .adf-dropdown-widget__invalid .adf-dropdown-widget__select { - border-color: mat-color($warn); - } - - .adf-dropdown-widget__invalid .adf-dropdown-widget__label { - color: mat-color($warn); - } - - .adf-dropdown-widget__invalid .adf-dropdown-widget__label::after { - background-color: mat-color($warn); - } - - .adf-edit-report-title { - float: left; - font-size: 20px!important; - padding-top: 19px; - } - - .adf-report-icon { - float: left; - padding: 5px 5px 0 0; - visibility: hidden; - } - - .adf-report-title-container { - cursor: pointer; - width: 100%; - margin-bottom: 12px; - - :hover .adf-report-icon { - color: mat-color($primary); - visibility: visible; - } - } - - .adf-report-title { - padding-top: 10px; - } - - .adf-full-width-input { - width: 100%; - } - - .adf-is-hide { - height: 0; - overflow: hidden; - transition: height 0.5s; - } - - .adf-report-report-container { - border-bottom: solid 1px mat-color($foreground, divider); - padding-top: 10px; - - .mat-toolbar { - border: 0 !important; - padding: 0 !important; - } - } - - .adf-report-container-setting { - padding-left: 10px; - } - - .adf-option_button_details { - padding-top: 20px; - } - - .adf-export-message { - background-color: mat-color($background, background); - } - - .adf-save-export-input { - width: 100%; - } - - .adf-delete-parameter { - position: absolute; - margin-left: 60%; - padding-top: 5px; - } - - .adf-hide { - display: none; - } - - .adf-report-dialog { - .mat-form-field { - width: 100%; - } - - .mat-dialog-actions { - justify-content: flex-end; - } - } -} diff --git a/lib/insights/src/lib/analytics-process/components/widgets/date-range/date-range.theme.scss b/lib/insights/src/lib/analytics-process/components/widgets/date-range/date-range.theme.scss deleted file mode 100644 index f3b014368f..0000000000 --- a/lib/insights/src/lib/analytics-process/components/widgets/date-range/date-range.theme.scss +++ /dev/null @@ -1,7 +0,0 @@ -@mixin adf-analytics-date-range-widget-theme($theme) { - $warn: map-get($theme, warn); - - .adf-date-range-analytics-text-danger { - color: mat-color($warn); - } -} diff --git a/lib/insights/src/lib/analytics-process/components/widgets/date-range/date-range.widget.scss b/lib/insights/src/lib/analytics-process/components/widgets/date-range/date-range.widget.scss new file mode 100644 index 0000000000..380f5ee7bf --- /dev/null +++ b/lib/insights/src/lib/analytics-process/components/widgets/date-range/date-range.widget.scss @@ -0,0 +1,3 @@ +.adf-date-range-analytics-text-danger { + color: var(--theme-warn-color); +} diff --git a/lib/insights/src/lib/analytics-process/components/widgets/date-range/date-range.widget.ts b/lib/insights/src/lib/analytics-process/components/widgets/date-range/date-range.widget.ts index 9a16fb7006..6eb41771cf 100644 --- a/lib/insights/src/lib/analytics-process/components/widgets/date-range/date-range.widget.ts +++ b/lib/insights/src/lib/analytics-process/components/widgets/date-range/date-range.widget.ts @@ -29,6 +29,7 @@ import { takeUntil } from 'rxjs/operators'; @Component({ selector: 'adf-date-range-widget', templateUrl: './date-range.widget.html', + styleUrls: ['./date-range.widget.scss'], providers: [ {provide: DateAdapter, useClass: MomentDateAdapter}, {provide: MAT_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS}], diff --git a/lib/insights/src/lib/styles/_index.scss b/lib/insights/src/lib/styles/_index.scss deleted file mode 100644 index 16bac1a332..0000000000 --- a/lib/insights/src/lib/styles/_index.scss +++ /dev/null @@ -1,9 +0,0 @@ -@import '../analytics-process/components/analytics-report-parameters.theme'; -@import '../analytics-process/components/analytics-report-list.theme'; -@import '../analytics-process/components/widgets/date-range/date-range.theme'; - -@mixin adf-insights-theme($theme) { - @include adf-analytics-report-list-theme($theme); - @include adf-analytics-date-range-widget-theme($theme); - @include adf-analytics-report-parameters-theme($theme); -} diff --git a/lib/process-services-cloud/src/lib/app/components/app-details-cloud.component.scss b/lib/process-services-cloud/src/lib/app/components/app-details-cloud.component.scss new file mode 100644 index 0000000000..b741ac0900 --- /dev/null +++ b/lib/process-services-cloud/src/lib/app/components/app-details-cloud.component.scss @@ -0,0 +1,134 @@ +@mixin adf-line-clamp($line-height: 1.25, $lines: 3) { + position: relative; + line-height: $line-height; + padding: 0 !important; + overflow: hidden; + text-overflow: ellipsis; + + @supports (-webkit-line-clamp: 1) { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: $lines; + height: calc(0.99em * #{$line-height} * #{$lines}); + } + + @supports not (-webkit-line-clamp: 1) { + white-space: nowrap; + width: 100%; + } +} + +$tile-themes: ( + theme-1: (bg: #269abc, color: #168aac), + theme-2: (bg: #7da9b0, color: #6d99a0), + theme-3: (bg: #7689ab, color: #66799b), + theme-4: (bg: #c74e3e, color: #b73e2e), + theme-5: (bg: #fab96c, color: #eaa95c), + theme-6: (bg: #759d4c, color: #658d3c), + theme-7: (bg: #b1b489, color: #a1a479), + theme-8: (bg: #a17299, color: #916289), + theme-9: (bg: #696c67, color: #595c57), + theme-10: (bg: #cabb33, color: #baab23) +); + +.adf-app-listgrid { + padding: 8px; + + &-item { + outline: none; + padding: 8px; + box-sizing: border-box; + + &-card { + + @for $i from 1 through 10 { + &.theme-#{$i} { + $tile-theme: map-get($tile-themes, theme-#{$i}); + background-color: map-get($tile-theme, bg); + } + } + + outline: none; + transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), + box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); + min-height: 200px; + padding: 0 !important; + + &:hover { + box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), + 0 3px 14px 2px rgba(0, 0, 0, 0.12), + 0 5px 5px -3px rgba(0, 0, 0, 0.2); + cursor: pointer; + transform: scale(1.015); + } + + &-logo { + position: absolute; + right: 20px; + top: 20px; + padding: 16px; + z-index: 9; + + &-icon { + font-size: 70px; + width: 1em !important; + height: 1em !important; + + @for $i from 1 through 10 { + .theme-#{$i} & { + $tile-theme: map-get($tile-themes, theme-#{$i}); + color: map-get($tile-theme, color); + } + } + } + } + + &-title { + padding: 16px; + margin-bottom: 0 !important; + z-index: 9999; + + h1 { + color: white; + width: 80%; + font-size: 24px; + margin: 0; + line-height: normal; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + } + + &-subtitle { + color: white; + z-index: 9999; + padding: 16px; + + .adf-line-clamp { + @include adf-line-clamp(1.25, 3); + } + } + + &-actions { + padding: 0 16px 16px !important; + border-top: 1px solid rgba(0, 0, 0, 0.1); + min-height: 48px; + box-sizing: border-box; + + &-icon { + color: #e9f1f3; + } + + &.mat-card-actions { + margin-left: 0; + margin-right: 0; + + &:last-child { + margin-bottom: 0 !important; + } + } + } + } + } +} diff --git a/lib/process-services-cloud/src/lib/app/components/app-details-cloud.component.ts b/lib/process-services-cloud/src/lib/app/components/app-details-cloud.component.ts index 8d3def7f17..f2f43ad4bf 100644 --- a/lib/process-services-cloud/src/lib/app/components/app-details-cloud.component.ts +++ b/lib/process-services-cloud/src/lib/app/components/app-details-cloud.component.ts @@ -15,12 +15,14 @@ * limitations under the License. */ -import { Component, Input, Output, EventEmitter } from '@angular/core'; +import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core'; import { ApplicationInstanceModel, DEFAULT_APP_INSTANCE_ICON, DEFAULT_APP_INSTANCE_THEME } from '../models/application-instance.model'; @Component({ selector: 'adf-cloud-app-details', - templateUrl: './app-details-cloud.component.html' + templateUrl: './app-details-cloud.component.html', + styleUrls: ['./app-details-cloud.component.scss'], + encapsulation: ViewEncapsulation.None }) export class AppDetailsCloudComponent { diff --git a/lib/process-services-cloud/src/lib/app/components/app-details-cloud.theme.scss b/lib/process-services-cloud/src/lib/app/components/app-details-cloud.theme.scss deleted file mode 100644 index dd0700a30b..0000000000 --- a/lib/process-services-cloud/src/lib/app/components/app-details-cloud.theme.scss +++ /dev/null @@ -1,117 +0,0 @@ -@mixin adf-cloud-app-details-theme($theme) { - - $tile-themes: ( - theme-1: (bg: #269abc, color: #168aac), - theme-2: (bg: #7da9b0, color: #6d99a0), - theme-3: (bg: #7689ab, color: #66799b), - theme-4: (bg: #c74e3e, color: #b73e2e), - theme-5: (bg: #fab96c, color: #eaa95c), - theme-6: (bg: #759d4c, color: #658d3c), - theme-7: (bg: #b1b489, color: #a1a479), - theme-8: (bg: #a17299, color: #916289), - theme-9: (bg: #696c67, color: #595c57), - theme-10: (bg: #cabb33, color: #baab23) - ); - - .adf-app-listgrid { - padding: 8px; - - &-item { - outline: none; - padding: 8px; - box-sizing: border-box; - - &-card { - - @for $i from 1 through 10 { - &.theme-#{$i} { - $tile-theme: map-get($tile-themes, theme-#{$i}); - background-color: map-get($tile-theme, bg); - } - } - - outline: none; - transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), - box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); - min-height: 200px; - padding: 0 !important; - - &:hover { - box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), - 0 3px 14px 2px rgba(0, 0, 0, 0.12), - 0 5px 5px -3px rgba(0, 0, 0, 0.2); - cursor: pointer; - transform: scale(1.015); - } - - &-logo { - position: absolute; - right: 20px; - top: 20px; - padding: 16px; - z-index: 9; - - &-icon { - font-size: 70px; - width: 1em !important; - height: 1em !important; - - @for $i from 1 through 10 { - .theme-#{$i} & { - $tile-theme: map-get($tile-themes, theme-#{$i}); - color: map-get($tile-theme, color); - } - } - } - } - - &-title { - padding: 16px; - margin-bottom: 0 !important; - z-index: 9999; - - h1 { - color: white; - width: 80%; - font-size: 24px; - margin: 0; - line-height: normal; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - } - - &-subtitle { - color: white; - z-index: 9999; - padding: 16px; - - .adf-line-clamp { - @include adf-line-clamp(1.25, 3); - } - } - - &-actions { - padding: 0 16px 16px !important; - border-top: 1px solid rgba(0, 0, 0, 0.1); - min-height: 48px; - box-sizing: border-box; - - &-icon { - color: #e9f1f3; - } - - &.mat-card-actions { - margin-left: 0; - margin-right: 0; - - &:last-child { - margin-bottom: 0 !important; - } - } - } - } - } - } -} diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.theme.scss b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.scss similarity index 91% rename from lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.theme.scss rename to lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.scss index bf0bab6f7e..e7f5bb98bd 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.theme.scss +++ b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.scss @@ -1,6 +1,3 @@ -@mixin adf-cloud-attach-file-cloud-widget($theme) { - $primary: map-get($theme, primary); - .adf { &-attach-widget-container { margin-bottom: 15px; @@ -81,10 +78,9 @@ &-attach-selected-file-row { div.mat-list-item-content { .adf-datatable-selected { - color: mat-color($primary); + color: var(--theme-primary-color); padding-right: 6px; } } } } -} diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.ts b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.ts index 16a17a14bc..4599ae390e 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.ts +++ b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.ts @@ -40,6 +40,7 @@ import { ContentNodeSelectorPanelService } from '@alfresco/adf-content-services' @Component({ selector: 'adf-cloud-attach-file-cloud-widget', templateUrl: './attach-file-cloud-widget.component.html', + styleUrls: ['./attach-file-cloud-widget.component.scss'], host: { '(click)': 'event($event)', '(blur)': 'event($event)', diff --git a/lib/process-services-cloud/src/lib/group/components/group-cloud.component.scss b/lib/process-services-cloud/src/lib/group/components/group-cloud.component.scss new file mode 100644 index 0000000000..3576d86ec0 --- /dev/null +++ b/lib/process-services-cloud/src/lib/group/components/group-cloud.component.scss @@ -0,0 +1,58 @@ +.adf { + &-cloud-group-list { + margin: 5px 0; + padding: 10px 0; + } + + &-cloud-group { + width: 100%; + + &-option-not-active { + background: inherit !important; + } + + .mat-form-field { + width: 100%; + } + + &-error { + margin-top: -10px; + } + + &-error { + position: absolute; + height: 20px; + + &-message { + padding-right: 8px; + height: 16px; + font-size: 12px; + line-height: 1.33; + color: var(--theme-warn-color); + width: auto; + } + + &-icon { + font-size: 17px; + color: var(--theme-warn-color); + } + } + } +} + + +.mat-autocomplete-panel .mat-fab { + background: var(--theme-primary-color); + width: 40px; + height: 40px; + font-weight: bolder; + font-size: 18px; +} + +.mat-autocomplete-panel .mat-fab { + box-shadow: none !important; +} + +.mat-autocomplete-panel .mat-fab .mat-button-wrapper { + display: inline !important; +} diff --git a/lib/process-services-cloud/src/lib/group/components/group-cloud.component.ts b/lib/process-services-cloud/src/lib/group/components/group-cloud.component.ts index 661cf1a0bb..8a97465f95 100644 --- a/lib/process-services-cloud/src/lib/group/components/group-cloud.component.ts +++ b/lib/process-services-cloud/src/lib/group/components/group-cloud.component.ts @@ -40,6 +40,7 @@ import { ComponentSelectionMode } from '../../types'; @Component({ selector: 'adf-cloud-group', templateUrl: './group-cloud.component.html', + styleUrls: ['./group-cloud.component.scss'], animations: [ trigger('transitionMessages', [ state('enter', style({ opacity: 1, transform: 'translateY(0%)' })), diff --git a/lib/process-services-cloud/src/lib/group/components/group-cloud.theme.scss b/lib/process-services-cloud/src/lib/group/components/group-cloud.theme.scss deleted file mode 100644 index 71d5549d76..0000000000 --- a/lib/process-services-cloud/src/lib/group/components/group-cloud.theme.scss +++ /dev/null @@ -1,66 +0,0 @@ -@mixin adf-cloud-group-theme($theme) { - - $warn: map-get($theme, warn); - $primary: map-get($theme, primary); - $background: map-get($theme, background); - $foreground: map-get($theme, foreground); - - .adf { - &-cloud-group-list { - margin: 5px 0; - padding: 10px 0; - } - - &-cloud-group { - width: 100%; - - &-option-not-active { - background: inherit !important; - } - - .mat-form-field { - width: 100%; - } - - &-error { - margin-top: -10px; - } - - &-error { - position: absolute; - height: 20px; - - &-message { - padding-right: 8px; - height: 16px; - font-size: 12px; - line-height: 1.33; - color: mat-color($warn); - width: auto; - } - - &-icon { - font-size: 17px; - color: mat-color($warn); - } - } - } - } - - - .mat-autocomplete-panel .mat-fab { - background: mat-color($primary); - width: 40px; - height: 40px; - font-weight: bolder; - font-size: 18px; - } - - .mat-autocomplete-panel .mat-fab { - box-shadow: none !important; - } - - .mat-autocomplete-panel .mat-fab .mat-button-wrapper { - display: inline !important; - } -} diff --git a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.scss b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.scss new file mode 100644 index 0000000000..3db415c024 --- /dev/null +++ b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.scss @@ -0,0 +1,57 @@ +.adf { + + &-people-cloud { + width: 100%; + + &-option-not-active { + background: inherit !important; + } + } + + &-people-cloud-list { + margin: 5px 0; + padding: 10px 0; + } + + &-people-cloud-row { + display: flex; + align-items: center; + } + + &-people-cloud-pic { + background: var(--theme-primary-color); + display: flex; + justify-content: center; + align-items: center; + width: 40px; + height: 40px; + border-radius: 100px; + color: var(--theme-text-fg-color); + font-weight: bolder; + font-size: 18px; + text-transform: uppercase; + } + + &-start-task-cloud-error { + margin-top: -10px; + } + + &-start-task-cloud-error { + position: absolute; + height: 20px; + + &-message { + padding-right: 8px; + height: 16px; + font-size: 12px; + line-height: 1.33; + color: var(--theme-warn-color); + width: auto; + } + + &-icon { + font-size: 17px; + color: var(--theme-warn-color); + } + } +} diff --git a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.ts b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.ts index 2967502407..f3feec5197 100644 --- a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.ts +++ b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.ts @@ -43,6 +43,7 @@ import { ComponentSelectionMode } from '../../types'; @Component({ selector: 'adf-cloud-people', templateUrl: './people-cloud.component.html', + styleUrls: ['./people-cloud.component.scss'], animations: [ trigger('transitionMessages', [ state('enter', style({ opacity: 1, transform: 'translateY(0%)' })), diff --git a/lib/process-services-cloud/src/lib/people/components/people-cloud.theme.scss b/lib/process-services-cloud/src/lib/people/components/people-cloud.theme.scss deleted file mode 100644 index 8504eb4a1f..0000000000 --- a/lib/process-services-cloud/src/lib/people/components/people-cloud.theme.scss +++ /dev/null @@ -1,65 +0,0 @@ -@mixin adf-cloud-people-theme($theme) { - $warn: map-get($theme, warn); - $primary: map-get($theme, primary); - $background: map-get($theme, background); - $foreground: map-get($theme, foreground); - - .adf { - - &-people-cloud { - width: 100%; - - &-option-not-active { - background: inherit !important; - } - } - - &-people-cloud-list { - margin: 5px 0; - padding: 10px 0; - } - - &-people-cloud-row { - display: flex; - align-items: center; - } - - &-people-cloud-pic { - background: mat-color($primary); - display: flex; - justify-content: center; - align-items: center; - width: 40px; - height: 40px; - border-radius: 100px; - color: mat-color($foreground, text); - font-weight: bolder; - font-size: 18px; - text-transform: uppercase; - } - - &-start-task-cloud-error { - margin-top: -10px; - } - - &-start-task-cloud-error { - position: absolute; - height: 20px; - - &-message { - padding-right: 8px; - height: 16px; - font-size: 12px; - line-height: 1.33; - color: mat-color($warn); - width: auto; - } - - &-icon { - font-size: 17px; - color: mat-color($warn); - } - } - - } -} diff --git a/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.scss b/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.scss new file mode 100644 index 0000000000..2e6847b1df --- /dev/null +++ b/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.scss @@ -0,0 +1,34 @@ +.adf-edit-process-filter-date-error-container { + position: absolute; + height: 20px; + margin-top: 12px; + width: 100%; + + & > div { + display: flex; + flex-flow: row; + justify-content: flex-start; + } + + .adf-error-text { + padding-right: 8px; + height: 16px; + font-size: 11px; + line-height: 1.33; + color: var(--theme-warn-color); + width: auto; + } + + .adf-error-icon { + font-size: 16px; + color: var(--theme-warn-color); + } +} + +.adf { + + &-cloud-edit-process-filter-loading-margin { + margin-left: calc((100% - 100px) / 2); + margin-right: calc((100% - 100px) / 2); + } +} diff --git a/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.ts b/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.ts index bc1d9eac55..fa6051f413 100644 --- a/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.ts +++ b/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { Component, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges, OnDestroy } from '@angular/core'; +import { Component, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges, OnDestroy, ViewEncapsulation } from '@angular/core'; import { FormGroup, FormBuilder, AbstractControl } from '@angular/forms'; import { DateAdapter } from '@angular/material/core'; import { MatDialog } from '@angular/material/dialog'; @@ -38,7 +38,9 @@ export interface DropdownOption { @Component({ selector: 'adf-cloud-edit-process-filter', - templateUrl: './edit-process-filter-cloud.component.html' + templateUrl: './edit-process-filter-cloud.component.html', + styleUrls: ['./edit-process-filter-cloud.component.scss'], + encapsulation: ViewEncapsulation.None }) export class EditProcessFilterCloudComponent implements OnInit, OnChanges, OnDestroy { diff --git a/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.theme.scss b/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.theme.scss deleted file mode 100644 index 63a7de9a7e..0000000000 --- a/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.theme.scss +++ /dev/null @@ -1,39 +0,0 @@ -@mixin adf-cloud-edit-process-filter-theme($theme) { - - $warn: map-get($theme, warn); - - .adf-edit-process-filter-date-error-container { - position: absolute; - height: 20px; - margin-top: 12px; - width: 100%; - - & > div { - display: flex; - flex-flow: row; - justify-content: flex-start; - } - - .adf-error-text { - padding-right: 8px; - height: 16px; - font-size: 11px; - line-height: 1.33; - color: mat-color($warn); - width: auto; - } - - .adf-error-icon { - font-size: 16px; - color: mat-color($warn); - } - } - - .adf { - - &-cloud-edit-process-filter-loading-margin { - margin-left: calc((100% - 100px) / 2); - margin-right: calc((100% - 100px) / 2); - } - } -} diff --git a/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.scss b/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.scss new file mode 100644 index 0000000000..620c04d329 --- /dev/null +++ b/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.scss @@ -0,0 +1,28 @@ +.adf { + &-filters__entry { + padding: 12px 0 !important; + height: 24px; + width: 100%; + cursor: pointer; + font-size: 14px !important; + font-weight: bold; + opacity: 0.54; + + .adf-full-width { + display: flex; + width: 100%; + } + + .adf-filter-action-button .adf-filter-action-button__label { + padding-left: 20px; + margin: 0 8px !important; + } + } + &-filters__entry { + &.adf-active, + &:hover { + color: var(--theme-primary-color); + opacity: 1; + } + } +} diff --git a/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.ts b/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.ts index 70bbca414b..119511127a 100644 --- a/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.ts +++ b/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, OnDestroy, OnInit } from '@angular/core'; +import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; import { Observable, Subject } from 'rxjs'; import { ProcessFilterCloudService } from '../services/process-filter-cloud.service'; import { ProcessFilterCloudModel } from '../models/process-filter-cloud.model'; @@ -25,7 +25,9 @@ import { takeUntil } from 'rxjs/operators'; @Component({ selector: 'adf-cloud-process-filters', - templateUrl: './process-filters-cloud.component.html' + templateUrl: './process-filters-cloud.component.html', + styleUrls: ['./process-filters-cloud.component.scss'], + encapsulation: ViewEncapsulation.None }) export class ProcessFiltersCloudComponent implements OnInit, OnChanges, OnDestroy { diff --git a/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.theme.scss b/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.theme.scss deleted file mode 100644 index cda90a6bf9..0000000000 --- a/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.theme.scss +++ /dev/null @@ -1,32 +0,0 @@ -@mixin adf-cloud-process-filters-theme($theme) { - $primary: map-get($theme, primary); - - .adf { - &-filters__entry { - padding: 12px 0 !important; - height: 24px; - width: 100%; - cursor: pointer; - font-size: 14px !important; - font-weight: bold; - opacity: 0.54; - - .adf-full-width { - display: flex; - width: 100%; - } - - .adf-filter-action-button .adf-filter-action-button__label { - padding-left: 20px; - margin: 0 8px !important; - } - } - &-filters__entry { - &.adf-active, - &:hover { - color: mat-color($primary); - opacity: 1; - } - } - } -} diff --git a/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.scss b/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.scss new file mode 100755 index 0000000000..82cdcb604e --- /dev/null +++ b/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.scss @@ -0,0 +1,50 @@ +.adf { + &-start-process { + + mat-form-field { + width: 100%; + } + + .mat-form-field-label { + color: var(--theme-colors-mat-grey-dark); + } + + mat-card-actions { + text-align: right; + + .mat-button { + text-transform: uppercase !important; + } + } + } + &-title { + padding-bottom: 1.25em; + } + + &-process-input-container { + mat-form-field { + width: 100%; + } + } + + &-process-input-autocomplete { + display: flex; + + button { + position: absolute; + right: -14px; + top: 0; + } + } + + &-start-form-container { + .mat-card { + box-shadow: none !important; + padding: 0 !important; + } + } + + &-start-form-actions { + text-align: right !important; + } +} diff --git a/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.ts b/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.ts index 34c2cfc512..7cec2e49ea 100755 --- a/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.ts +++ b/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.ts @@ -34,6 +34,7 @@ import { ProcessNameCloudPipe } from '../../../pipes/process-name-cloud.pipe'; @Component({ selector: 'adf-cloud-start-process', templateUrl: './start-process-cloud.component.html', + styleUrls: ['./start-process-cloud.component.scss'], encapsulation: ViewEncapsulation.None }) export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy { diff --git a/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.theme.scss b/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.theme.scss deleted file mode 100755 index e32cfbda50..0000000000 --- a/lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.theme.scss +++ /dev/null @@ -1,53 +0,0 @@ -@mixin adf-cloud-start-service-theme($theme) { - .adf { - &-start-process { - - mat-form-field { - width: 100%; - } - - .mat-form-field-label { - color: mat-color($mat-grey, A400); - } - - mat-card-actions { - text-align: right; - - .mat-button { - text-transform: uppercase !important; - } - } - } - &-title { - padding-bottom: 1.25em; - } - - &-process-input-container { - mat-form-field { - width: 100%; - } - } - - &-process-input-autocomplete { - display: flex; - - button { - position: absolute; - right: -14px; - top: 0; - } - } - - &-start-form-container { - .mat-card { - box-shadow: none !important; - padding: 0 !important; - } - } - - &-start-form-actions { - text-align: right !important; - } - } - -} diff --git a/lib/process-services-cloud/src/lib/styles/_index.scss b/lib/process-services-cloud/src/lib/styles/_index.scss deleted file mode 100644 index 6ec8a363e0..0000000000 --- a/lib/process-services-cloud/src/lib/styles/_index.scss +++ /dev/null @@ -1,28 +0,0 @@ -@import '../app/components/app-details-cloud.theme'; -@import '../group/components/group-cloud.theme'; -@import '../people/components/people-cloud.theme'; -@import '../process/process-filters/components/edit-process-filter-cloud.theme'; -@import '../process/start-process/components/start-process-cloud.theme'; -@import '../process/process-filters/components/process-filters-cloud.theme'; -@import '../task/task-form/components/task-form-cloud.theme'; -@import '../task/start-task/components/start-task-cloud.theme'; -@import '../task/task-filters/components/edit-task-filters/base-edit-task-filter-cloud.theme'; -@import '../task/task-filters/components/base-task-filters-cloud.theme'; -@import '../task/task-header/components/task-header-cloud.theme'; -@import '../form/components/widgets/attach-file/attach-file-cloud-widget.theme'; - - -@mixin adf-process-services-cloud-theme($theme) { - @include adf-cloud-app-details-theme($theme); - @include adf-cloud-task-filters-theme($theme); - @include adf-cloud-edit-task-filters-theme($theme); - @include adf-cloud-edit-process-filter-theme($theme); - @include adf-cloud-start-task-theme($theme); - @include adf-cloud-people-theme($theme); - @include adf-cloud-group-theme($theme); - @include adf-cloud-task-form-theme($theme); - @include adf-cloud-start-service-theme($theme); - @include adf-cloud-attach-file-cloud-widget($theme); - @include adf-task-list-header-theme($theme); - @include adf-cloud-process-filters-theme($theme); -} diff --git a/lib/process-services-cloud/src/lib/task/start-task/components/start-task-cloud.component.scss b/lib/process-services-cloud/src/lib/task/start-task/components/start-task-cloud.component.scss new file mode 100644 index 0000000000..05ba69a528 --- /dev/null +++ b/lib/process-services-cloud/src/lib/task/start-task/components/start-task-cloud.component.scss @@ -0,0 +1,57 @@ +.adf-cloud-start-task-heading { + border-bottom: 1px solid var(--theme-fg-divider); + margin-bottom: 10px; + + .mat-card-title { + font-weight: bold; + font-size: 18px; + } +} + +.adf-cloud-priority-container { + padding-top: 1.1em; +} + +.adf-cloud-date-error-container { + position: absolute; + height: 20px; + margin-top: 12px; + width: 100%; + + & > div { + display: flex; + flex-flow: row; + justify-content: flex-start; + } + + .adf-error-text { + padding-right: 8px; + height: 16px; + font-size: 12px; + line-height: 1.33; + color: var(--theme-warn-color); + width: auto; + } + + .adf-error-icon { + font-size: 17px; + color: var(--theme-warn-color); + } +} + +.adf-cloud-start-task-footer { + padding: 4px; + font-size: 18px; + border-top: 1px solid #eee; +} + +adf-cloud-start-task { + .adf { + + &-cloud-start-task-footer { + .mat-button { + text-transform: uppercase !important; + } + } + } +} diff --git a/lib/process-services-cloud/src/lib/task/start-task/components/start-task-cloud.component.ts b/lib/process-services-cloud/src/lib/task/start-task/components/start-task-cloud.component.ts index fee3a77902..dddce8c71d 100644 --- a/lib/process-services-cloud/src/lib/task/start-task/components/start-task-cloud.component.ts +++ b/lib/process-services-cloud/src/lib/task/start-task/components/start-task-cloud.component.ts @@ -38,6 +38,7 @@ import { TaskPriorityOption } from '../../models/task.model'; @Component({ selector: 'adf-cloud-start-task', templateUrl: './start-task-cloud.component.html', + styleUrls: ['./start-task-cloud.component.scss'], providers: [ { provide: DateAdapter, useClass: MomentDateAdapter }, { provide: MAT_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS }], diff --git a/lib/process-services-cloud/src/lib/task/start-task/components/start-task-cloud.theme.scss b/lib/process-services-cloud/src/lib/task/start-task/components/start-task-cloud.theme.scss deleted file mode 100644 index 405f4f868b..0000000000 --- a/lib/process-services-cloud/src/lib/task/start-task/components/start-task-cloud.theme.scss +++ /dev/null @@ -1,63 +0,0 @@ -@mixin adf-cloud-start-task-theme($theme) { - $warn: map-get($theme, warn); - $foreground: map-get($theme, foreground); - $header-border: 1px solid mat-color($foreground, divider); - - .adf-cloud-start-task-heading { - border-bottom: $header-border; - margin-bottom: 10px; - - .mat-card-title { - font-weight: bold; - font-size: 18px; - } - } - - .adf-cloud-priority-container { - padding-top: 1.1em; - } - - .adf-cloud-date-error-container { - position: absolute; - height: 20px; - margin-top: 12px; - width: 100%; - - & > div { - display: flex; - flex-flow: row; - justify-content: flex-start; - } - - .adf-error-text { - padding-right: 8px; - height: 16px; - font-size: 12px; - line-height: 1.33; - color: mat-color($warn); - width: auto; - } - - .adf-error-icon { - font-size: 17px; - color: mat-color($warn); - } - } - - .adf-cloud-start-task-footer { - padding: 4px; - font-size: 18px; - border-top: 1px solid #eee; - } - - adf-cloud-start-task { - .adf { - - &-cloud-start-task-footer { - .mat-button { - text-transform: uppercase !important; - } - } - } - } -} diff --git a/lib/process-services-cloud/src/lib/task/task-filters/components/base-task-filters-cloud.component.scss b/lib/process-services-cloud/src/lib/task/task-filters/components/base-task-filters-cloud.component.scss new file mode 100644 index 0000000000..4b7da591de --- /dev/null +++ b/lib/process-services-cloud/src/lib/task/task-filters/components/base-task-filters-cloud.component.scss @@ -0,0 +1,59 @@ +.adf { + &-task-filters__entry { + display: flex; + padding: 12px 0 !important; + height: 24px; + width: 100%; + font-size: 14px !important; + font-weight: bold; + opacity: 1; + + .adf-full-width { + display: flex; + width: 100%; + } + + .adf-filter-action-button { + opacity: 0.54; + padding: 16px; + cursor: pointer; + + .adf-filter-action-button__label { + padding-left: 20px; + margin: 0 8px !important; + } + } + + .adf-filter-action-button__counter { + opacity: 0.54; + margin-left: 10px; + margin-top: 6px; + padding: 0 5px; + + &.adf-active { + margin-left: 8px; + margin-top: 5px; + padding: 0 5px; + border-radius: 15px; + background-color: var(--theme-accent-color); + color: var(--theme-colors-mag-grey-light); + font-size: smaller; + } + } + + + &:hover { + color: var(--theme-primary-color); + + .adf-filter-action-button__counter, + .adf-filter-action-button { + opacity: 1; + } + } + + .adf-active { + color: var(--theme-primary-color); + opacity: 1; + } + } +} diff --git a/lib/process-services-cloud/src/lib/task/task-filters/components/base-task-filters-cloud.theme.scss b/lib/process-services-cloud/src/lib/task/task-filters/components/base-task-filters-cloud.theme.scss deleted file mode 100644 index 70221f5c12..0000000000 --- a/lib/process-services-cloud/src/lib/task/task-filters/components/base-task-filters-cloud.theme.scss +++ /dev/null @@ -1,65 +0,0 @@ -@mixin adf-cloud-task-filters-theme($theme) { - $primary: map-get($theme, primary); - $accent: map-get($theme, accent); - $background: map-get($theme, background); - - .adf { - &-task-filters__entry { - display: flex; - padding: 12px 0 !important; - height: 24px; - width: 100%; - font-size: 14px !important; - font-weight: bold; - opacity: 1; - - .adf-full-width { - display: flex; - width: 100%; - } - - .adf-filter-action-button { - opacity: 0.54; - padding: 16px; - cursor: pointer; - - .adf-filter-action-button__label { - padding-left: 20px; - margin: 0 8px !important; - } - } - - .adf-filter-action-button__counter { - opacity: 0.54; - margin-left: 10px; - margin-top: 6px; - padding: 0 5px; - - &.adf-active { - margin-left: 8px; - margin-top: 5px; - padding: 0 5px; - border-radius: 15px; - background-color: mat-color($accent); - color: mat-color($mat-grey, 50); - font-size: smaller; - } - } - - - &:hover { - color: mat-color($primary); - - .adf-filter-action-button__counter, - .adf-filter-action-button { - opacity: 1; - } - } - - .adf-active { - color: mat-color($primary); - opacity: 1; - } - } - } -} diff --git a/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/base-edit-task-filter-cloud.component.scss b/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/base-edit-task-filter-cloud.component.scss new file mode 100644 index 0000000000..1e94dd637f --- /dev/null +++ b/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/base-edit-task-filter-cloud.component.scss @@ -0,0 +1,44 @@ +.adf-edit-task-filter-checkbox { + font-size: 16px; + padding-top: 10px; + text-align: center; + flex: 1 23%; +} + +.adf-edit-task-filter-date-error-container { + position: absolute; + height: 20px; + margin-top: 12px; + width: 100%; + + & > div { + display: flex; + flex-flow: row; + justify-content: flex-start; + } + + .adf-error-text { + padding-right: 8px; + height: 16px; + font-size: 10px; + line-height: 1.33; + color: var(--theme-warn-color); + width: auto; + } + + .adf-error-icon { + font-size: 16px; + color: var(--theme-warn-color); + } +} + +.adf-edit-task-filter-dateRange mat-grid-list { + width: 450px; +} + +.adf { + &-cloud-edit-task-filter-loading-margin { + margin-left: calc((100% - 100px) / 2); + margin-right: calc((100% - 100px) / 2); + } +} diff --git a/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/base-edit-task-filter-cloud.theme.scss b/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/base-edit-task-filter-cloud.theme.scss deleted file mode 100644 index 31070d7058..0000000000 --- a/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/base-edit-task-filter-cloud.theme.scss +++ /dev/null @@ -1,49 +0,0 @@ -@mixin adf-cloud-edit-task-filters-theme($theme) { - - $warn: map-get($theme, warn); - - .adf-edit-task-filter-checkbox { - font-size: 16px; - padding-top: 10px; - text-align: center; - flex: 1 23%; - } - - .adf-edit-task-filter-date-error-container { - position: absolute; - height: 20px; - margin-top: 12px; - width: 100%; - - & > div { - display: flex; - flex-flow: row; - justify-content: flex-start; - } - - .adf-error-text { - padding-right: 8px; - height: 16px; - font-size: 10px; - line-height: 1.33; - color: mat-color($warn); - width: auto; - } - - .adf-error-icon { - font-size: 16px; - color: mat-color($warn); - } - } - - .adf-edit-task-filter-dateRange mat-grid-list { - width: 450px; - } - - .adf { - &-cloud-edit-task-filter-loading-margin { - margin-left: calc((100% - 100px) / 2); - margin-right: calc((100% - 100px) / 2); - } - } -} diff --git a/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-service-task-filter-cloud.component.ts b/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-service-task-filter-cloud.component.ts index c18e15dc93..214e63885c 100644 --- a/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-service-task-filter-cloud.component.ts +++ b/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-service-task-filter-cloud.component.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { Component } from '@angular/core'; +import { Component, ViewEncapsulation } from '@angular/core'; import { FormBuilder } from '@angular/forms'; import { DateAdapter } from '@angular/material/core'; import { MatDialog } from '@angular/material/dialog'; @@ -32,7 +32,9 @@ import { BaseEditTaskFilterCloudComponent, DropdownOption } from './base-edit-ta @Component({ selector: 'adf-cloud-edit-service-task-filter', - templateUrl: './base-edit-task-filter-cloud.component.html' + templateUrl: './base-edit-task-filter-cloud.component.html', + styleUrls: ['./base-edit-task-filter-cloud.component.scss'], + encapsulation: ViewEncapsulation.None }) export class EditServiceTaskFilterCloudComponent extends BaseEditTaskFilterCloudComponent { constructor( diff --git a/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-task-filter-cloud.component.ts b/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-task-filter-cloud.component.ts index 774a021897..9c29c63406 100644 --- a/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-task-filter-cloud.component.ts +++ b/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-task-filter-cloud.component.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { Component } from '@angular/core'; +import { Component, ViewEncapsulation } from '@angular/core'; import { FormBuilder } from '@angular/forms'; import { DateAdapter } from '@angular/material/core'; import { MatDialog } from '@angular/material/dialog'; @@ -34,7 +34,9 @@ import { BaseEditTaskFilterCloudComponent, DropdownOption } from './base-edit-ta @Component({ selector: 'adf-cloud-edit-task-filter', - templateUrl: './base-edit-task-filter-cloud.component.html' + templateUrl: './base-edit-task-filter-cloud.component.html', + styleUrls: ['./base-edit-task-filter-cloud.component.scss'], + encapsulation: ViewEncapsulation.None }) export class EditTaskFilterCloudComponent extends BaseEditTaskFilterCloudComponent { constructor( diff --git a/lib/process-services-cloud/src/lib/task/task-filters/components/service-task-filters-cloud.component.ts b/lib/process-services-cloud/src/lib/task/task-filters/components/service-task-filters-cloud.component.ts index dd376b49cc..51d8e8d657 100644 --- a/lib/process-services-cloud/src/lib/task/task-filters/components/service-task-filters-cloud.component.ts +++ b/lib/process-services-cloud/src/lib/task/task-filters/components/service-task-filters-cloud.component.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { Component, EventEmitter, OnChanges, Output, SimpleChanges, OnInit } from '@angular/core'; +import { Component, EventEmitter, OnChanges, Output, SimpleChanges, OnInit, ViewEncapsulation } from '@angular/core'; import { Observable } from 'rxjs'; import { FilterParamsModel, ServiceTaskFilterCloudModel } from '../models/filter-cloud.model'; import { TranslationService } from '@alfresco/adf-core'; @@ -25,7 +25,9 @@ import { ServiceTaskFilterCloudService } from '../services/service-task-filter-c @Component({ selector: 'adf-cloud-service-task-filters', - templateUrl: './base-task-filters-cloud.component.html' + templateUrl: './base-task-filters-cloud.component.html', + styleUrls: ['./base-task-filters-cloud.component.scss'], + encapsulation: ViewEncapsulation.None }) export class ServiceTaskFiltersCloudComponent extends BaseTaskFiltersCloudComponent implements OnInit, OnChanges { diff --git a/lib/process-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.ts b/lib/process-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.ts index fdffb7c5f4..a152e60532 100644 --- a/lib/process-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.ts +++ b/lib/process-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { Component, EventEmitter, OnChanges, Output, SimpleChanges, OnInit } from '@angular/core'; +import { Component, EventEmitter, OnChanges, Output, SimpleChanges, OnInit, ViewEncapsulation } from '@angular/core'; import { Observable } from 'rxjs'; import { TaskFilterCloudService } from '../services/task-filter-cloud.service'; import { TaskFilterCloudModel, FilterParamsModel } from '../models/filter-cloud.model'; @@ -27,7 +27,9 @@ import { TaskCloudEngineEvent } from '../../../models/engine-event-cloud.model'; @Component({ selector: 'adf-cloud-task-filters', - templateUrl: './base-task-filters-cloud.component.html' + templateUrl: './base-task-filters-cloud.component.html', + styleUrls: ['./base-task-filters-cloud.component.scss'], + encapsulation: ViewEncapsulation.None }) export class TaskFiltersCloudComponent extends BaseTaskFiltersCloudComponent implements OnInit, OnChanges { diff --git a/lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud.component.scss b/lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud.component.scss new file mode 100644 index 0000000000..c3dc247b88 --- /dev/null +++ b/lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud.component.scss @@ -0,0 +1,25 @@ +.adf-task-form { + &-container { + overflow: hidden; + } + + &-actions { + float: right; + padding-bottom: 25px !important; + padding-right: 25px !important; + + & .mat-button { + height: 36px; + border-radius: 5px; + + } + + & .mat-button-wrapper { + width: 58px; + height: 20px; + opacity: 0.54; + font-size: var(--theme-body-2-font-size); + font-weight: bold; + } + } +} diff --git a/lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud.component.ts b/lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud.component.ts index e79ea82b1f..17379c7afa 100644 --- a/lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud.component.ts +++ b/lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud.component.ts @@ -17,7 +17,7 @@ import { Component, EventEmitter, Input, OnChanges, - Output, SimpleChanges, OnInit, HostListener + Output, SimpleChanges, OnInit, HostListener, ViewEncapsulation } from '@angular/core'; import { TaskDetailsCloudModel } from '../../start-task/models/task-details-cloud.model'; import { TaskCloudService } from '../../services/task-cloud.service'; @@ -28,7 +28,9 @@ import { DateCloudWidgetComponent } from '../../../form/components/widgets/date/ @Component({ selector: 'adf-cloud-task-form', - templateUrl: './task-form-cloud.component.html' + templateUrl: './task-form-cloud.component.html', + styleUrls: ['./task-form-cloud.component.scss'], + encapsulation: ViewEncapsulation.None }) export class TaskFormCloudComponent implements OnInit, OnChanges { diff --git a/lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud.theme.scss b/lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud.theme.scss deleted file mode 100644 index b54b91bfe5..0000000000 --- a/lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud.theme.scss +++ /dev/null @@ -1,32 +0,0 @@ -@mixin adf-cloud-task-form-theme($theme) { - - $config: mat-typography-config(); - - .adf-task-form { - &-container { - overflow: hidden; - } - - &-actions { - float: right; - padding-bottom: 25px !important; - padding-right: 25px !important; - - & .mat-button { - height: 36px; - border-radius: 5px; - - } - - & .mat-button-wrapper { - width: 58px; - height: 20px; - opacity: 0.54; - font-size: mat-font-size($config, body-2); - font-weight: bold; - } - } - } - - -} diff --git a/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.scss b/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.scss new file mode 100644 index 0000000000..e615f24a17 --- /dev/null +++ b/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.scss @@ -0,0 +1,40 @@ +.adf { + &-controls { + display: flex; + justify-content: space-between; + } + + &-edit-controls { + display: flex; + justify-content: flex-end; + margin-left: auto; + } + + &-switch-to-edit-mode, + &-save-edit-mode { + color: var(--theme-primary-color); + } + + &-cancel-edit-mode, + &-claim-controls { + color: rgb(131, 131, 131); + } + + &-task-header-loading { + display: flex; + justify-content: center; + } +} + +@media screen and (max-width: 959px) { + adf-card-view .adf-property-value { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } +} + +.adf-task-header-loading { + display: flex; + justify-content: center; +} diff --git a/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.ts b/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.ts index 4a6273c76c..057bf4c8fd 100644 --- a/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.ts +++ b/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { Component, Input, EventEmitter, Output, OnDestroy, OnChanges, OnInit } from '@angular/core'; +import { Component, Input, EventEmitter, Output, OnDestroy, OnChanges, OnInit, ViewEncapsulation } from '@angular/core'; import { takeUntil, concatMap, catchError, finalize } from 'rxjs/operators'; import { Subject, of, forkJoin } from 'rxjs'; import { @@ -37,7 +37,9 @@ import { TaskCloudService } from '../../services/task-cloud.service'; @Component({ selector: 'adf-cloud-task-header', - templateUrl: './task-header-cloud.component.html' + templateUrl: './task-header-cloud.component.html', + styleUrls: ['./task-header-cloud.component.scss'], + encapsulation: ViewEncapsulation.None }) export class TaskHeaderCloudComponent implements OnInit, OnDestroy, OnChanges { diff --git a/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.theme.scss b/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.theme.scss deleted file mode 100644 index 0c9d0b7445..0000000000 --- a/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.theme.scss +++ /dev/null @@ -1,44 +0,0 @@ -@mixin adf-task-list-header-theme($theme) { - $primary: map-get($theme, primary); - - .adf { - &-controls { - display: flex; - justify-content: space-between; - } - - &-edit-controls { - display: flex; - justify-content: flex-end; - margin-left: auto; - } - - &-switch-to-edit-mode, - &-save-edit-mode { - color: mat-color($primary); - } - - &-cancel-edit-mode, - &-claim-controls { - color: rgb(131, 131, 131); - } - - &-task-header-loading { - display: flex; - justify-content: center; - } - } - - @media screen and (max-width: 959px) { - adf-card-view .adf-property-value { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } - } -} - -.adf-task-header-loading { - display: flex; - justify-content: center; -} diff --git a/lib/process-services/src/lib/app-list/apps-list.component.scss b/lib/process-services/src/lib/app-list/apps-list.component.scss new file mode 100644 index 0000000000..dbe5b7637d --- /dev/null +++ b/lib/process-services/src/lib/app-list/apps-list.component.scss @@ -0,0 +1,154 @@ +@mixin adf-line-clamp($line-height: 1.25, $lines: 3) { + position: relative; + line-height: $line-height; + padding: 0 !important; + overflow: hidden; + text-overflow: ellipsis; + + @supports (-webkit-line-clamp: 1) { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: $lines; + height: calc(0.99em * #{$line-height} * #{$lines}); + } + + @supports not (-webkit-line-clamp: 1) { + white-space: nowrap; + width: 100%; + } +} + +.adf-apps { + width: 100%; +} + +.adf-app-list-item { + cursor: pointer; +} + +$tile-themes: ( + theme-1: (bg: #269abc, color: #168aac), + theme-2: (bg: #7da9b0, color: #6d99a0), + theme-3: (bg: #7689ab, color: #66799b), + theme-4: (bg: #c74e3e, color: #b73e2e), + theme-5: (bg: #fab96c, color: #eaa95c), + theme-6: (bg: #759d4c, color: #658d3c), + theme-7: (bg: #b1b489, color: #a1a479), + theme-8: (bg: #a17299, color: #916289), + theme-9: (bg: #696c67, color: #595c57), + theme-10: (bg: #cabb33, color: #baab23) +); + +.adf-app-list-spinner, .adf-app-list-empty { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + height: 85vh; + .mat-spinner { + margin: 0 auto; + } +} + +.adf-app-listgrid { + padding: 8px; + + &-item { + outline: none; + padding: 8px; + box-sizing: border-box; + + &-card { + + @for $i from 1 through 10 { + &.theme-#{$i} { + $tile-theme: map-get($tile-themes, theme-#{$i}); + background-color: map-get($tile-theme, bg); + } + } + + outline: none; + transition: + transform 280ms cubic-bezier(0.4, 0, 0.2, 1), + box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); + min-height: 200px; + padding: 0 !important; + + &:hover { + box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), + 0 3px 14px 2px rgba(0, 0, 0, 0.12), + 0 5px 5px -3px rgba(0, 0, 0, 0.2); + cursor: pointer; + transform: scale(1.015); + } + + &-logo { + position: absolute; + right: 20px; + top: 20px; + padding: 16px; + z-index: 9; + + &-icon { + font-size: 70px; + width: 1em !important; + height: 1em !important; + + @for $i from 1 through 10 { + .theme-#{$i} & { + $tile-theme: map-get($tile-themes, theme-#{$i}); + color: map-get($tile-theme, color); + } + } + } + } + + &-title { + padding: 16px; + margin-bottom: 0 !important; + z-index: 9999; + + h1 { + color: white; + width: 80%; + font-size: 24px; + margin: 0; + line-height: normal; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + } + + &-subtitle { + color: white; + z-index: 9999; + padding: 16px; + + .adf-line-clamp { + @include adf-line-clamp(1.25, 3); + } + } + + &-actions { + padding: 0 16px 16px !important; + border-top: 1px solid rgba(0, 0, 0, 0.1); + min-height: 48px; + box-sizing: border-box; + + &-icon { + color: #e9f1f3; + } + + &.mat-card-actions { + margin-left: 0; + margin-right: 0; + + &:last-child { + margin-bottom: 0 !important; + } + } + } + } + } +} diff --git a/lib/process-services/src/lib/app-list/apps-list.component.ts b/lib/process-services/src/lib/app-list/apps-list.component.ts index 31a303aa0a..de9ca61c80 100644 --- a/lib/process-services/src/lib/app-list/apps-list.component.ts +++ b/lib/process-services/src/lib/app-list/apps-list.component.ts @@ -16,7 +16,7 @@ */ import { AppsProcessService, TranslationService, CustomEmptyContentTemplateDirective } from '@alfresco/adf-core'; -import { AfterContentInit, Component, EventEmitter, Input, OnInit, Output, ContentChild, OnDestroy } from '@angular/core'; +import { AfterContentInit, Component, EventEmitter, Input, OnInit, Output, ContentChild, OnDestroy, ViewEncapsulation } from '@angular/core'; import { Observable, Observer, of, Subject } from 'rxjs'; import { AppDefinitionRepresentationModel } from '../task-list'; import { IconModel } from './icon.model'; @@ -24,7 +24,10 @@ import { share, takeUntil, finalize } from 'rxjs/operators'; @Component({ selector: 'adf-apps', - templateUrl: './apps-list.component.html' + templateUrl: './apps-list.component.html', + styleUrls: ['./apps-list.component.scss'], + encapsulation: ViewEncapsulation.None, + host: { class: 'adf-apps' } }) export class AppsListComponent implements OnInit, AfterContentInit, OnDestroy { diff --git a/lib/process-services/src/lib/app-list/apps-list.theme.scss b/lib/process-services/src/lib/app-list/apps-list.theme.scss deleted file mode 100644 index c27cd76f34..0000000000 --- a/lib/process-services/src/lib/app-list/apps-list.theme.scss +++ /dev/null @@ -1,137 +0,0 @@ -@mixin adf-apps-theme($theme) { - - :host { - width: 100%; - } - - .adf-app-list-item { - cursor: pointer; - } - - $tile-themes: ( - theme-1: (bg: #269abc, color: #168aac), - theme-2: (bg: #7da9b0, color: #6d99a0), - theme-3: (bg: #7689ab, color: #66799b), - theme-4: (bg: #c74e3e, color: #b73e2e), - theme-5: (bg: #fab96c, color: #eaa95c), - theme-6: (bg: #759d4c, color: #658d3c), - theme-7: (bg: #b1b489, color: #a1a479), - theme-8: (bg: #a17299, color: #916289), - theme-9: (bg: #696c67, color: #595c57), - theme-10: (bg: #cabb33, color: #baab23) - ); - - .adf-app-list-spinner, .adf-app-list-empty { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - height: 85vh; - .mat-spinner { - margin: 0 auto; - } - } - - .adf-app-listgrid { - padding: 8px; - - &-item { - outline: none; - padding: 8px; - box-sizing: border-box; - - &-card { - - @for $i from 1 through 10 { - &.theme-#{$i} { - $tile-theme: map-get($tile-themes, theme-#{$i}); - background-color: map-get($tile-theme, bg); - } - } - - outline: none; - transition: - transform 280ms cubic-bezier(0.4, 0, 0.2, 1), - box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); - min-height: 200px; - padding: 0 !important; - - &:hover { - box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), - 0 3px 14px 2px rgba(0, 0, 0, 0.12), - 0 5px 5px -3px rgba(0, 0, 0, 0.2); - cursor: pointer; - transform: scale(1.015); - } - - &-logo { - position: absolute; - right: 20px; - top: 20px; - padding: 16px; - z-index: 9; - - &-icon { - font-size: 70px; - width: 1em !important; - height: 1em !important; - - @for $i from 1 through 10 { - .theme-#{$i} & { - $tile-theme: map-get($tile-themes, theme-#{$i}); - color: map-get($tile-theme, color); - } - } - } - } - - &-title { - padding: 16px; - margin-bottom: 0 !important; - z-index: 9999; - - h1 { - color: white; - width: 80%; - font-size: 24px; - margin: 0; - line-height: normal; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - } - - &-subtitle { - color: white; - z-index: 9999; - padding: 16px; - - .adf-line-clamp { - @include adf-line-clamp(1.25, 3); - } - } - - &-actions { - padding: 0 16px 16px !important; - border-top: 1px solid rgba(0, 0, 0, 0.1); - min-height: 48px; - box-sizing: border-box; - - &-icon { - color: #e9f1f3; - } - - &.mat-card-actions { - margin-left: 0; - margin-right: 0; - - &:last-child { - margin-bottom: 0 !important; - } - } - } - } - } - } -} diff --git a/lib/process-services/src/lib/content-widget/attach-file-widget-dialog.component.scss b/lib/process-services/src/lib/content-widget/attach-file-widget-dialog.component.scss new file mode 100644 index 0000000000..c2ae4a38fb --- /dev/null +++ b/lib/process-services/src/lib/content-widget/attach-file-widget-dialog.component.scss @@ -0,0 +1,23 @@ +.adf-attach-file-widget-dialog { + .mat-dialog-actions { + background-color: var(--theme-background-color); + display: flex; + justify-content: flex-end; + color: var(--theme-foreground-text-color); + + button { + text-transform: uppercase; + font-weight: normal; + } + + .adf-choose-action { + &[disabled] { + color: var(--theme-secondary-text-color); + } + + &:enabled { + color: var(--theme-primary-color); + } + } + } +} diff --git a/lib/process-services/src/lib/content-widget/attach-file-widget-dialog.component.ts b/lib/process-services/src/lib/content-widget/attach-file-widget-dialog.component.ts index 4546d3d2e7..9cef5a4e2c 100644 --- a/lib/process-services/src/lib/content-widget/attach-file-widget-dialog.component.ts +++ b/lib/process-services/src/lib/content-widget/attach-file-widget-dialog.component.ts @@ -25,6 +25,7 @@ import { Node } from '@alfresco/js-api'; @Component({ selector: 'adf-attach-file-widget-dialog', templateUrl: './attach-file-widget-dialog.component.html', + styleUrls: ['./attach-file-widget-dialog.component.scss'], encapsulation: ViewEncapsulation.None, providers: [ AuthenticationService, diff --git a/lib/process-services/src/lib/content-widget/attach-file-widget-dialog.theme.scss b/lib/process-services/src/lib/content-widget/attach-file-widget-dialog.theme.scss deleted file mode 100644 index c10797440b..0000000000 --- a/lib/process-services/src/lib/content-widget/attach-file-widget-dialog.theme.scss +++ /dev/null @@ -1,32 +0,0 @@ -@mixin adf-attach-file-widget-dialog-component-theme($theme) { - $primary: map-get($theme, primary); - $foreground: map-get($theme, foreground); - $background: map-get($theme, background); - - .adf-attach-file-widget-dialog { - - .mat-dialog-actions { - - background-color: mat-color($background, background); - display: flex; - justify-content: flex-end; - color: mat-color($foreground, text, 0.72); - - button { - text-transform: uppercase; - font-weight: normal; - } - - .adf-choose-action { - - &[disabled] { - color: mat-color($foreground, secondary-text); - } - - &:enabled { - color: mat-color($primary); - } - } - } - } -} diff --git a/lib/process-services/src/lib/form/start-form.component.scss b/lib/process-services/src/lib/form/start-form.component.scss new file mode 100644 index 0000000000..726e8cc2ce --- /dev/null +++ b/lib/process-services/src/lib/form/start-form.component.scss @@ -0,0 +1,122 @@ +.adf { + &-form-container { + max-width: 100% !important; + max-height: 100% !important; + + & .mat-card { + padding: 16px 24px; + overflow: hidden; + } + + & .mat-card-header-text { + margin: 0 !important; + } + + & .mat-tab-body-content { + overflow: hidden; + } + + & .mat-tab-label { + font-size: var(--theme-subheading-2-font-size); + line-height: var(--theme-headline-line-height); + letter-spacing: -0.4px; + text-align: left; + color: var(--theme-text-color); + text-transform: uppercase; + } + + & .mat-ink-bar { + height: 4px; + } + + & .mat-form-field-wrapper { + margin: 0 12px 0 0; + } + } + + &-form-title { + font-size: var(--theme-title-font-size); + } + + &-form-debug-container { + padding: 10px; + } + + &-form-debug-container .adf-debug-toggle-text { + padding-left: 15px; + cursor: pointer; + } + + &-form-debug-container .adf-debug-toggle-text:hover { + font-weight: bold; + } + + &-form-reload-button { + position: absolute; + right: 12px; + top: 30px; + } + + &-form-validation-button { + position: absolute; + right: 50px; + top: 39px; + color: var(--theme-accent-color); + + & .adf-invalid-color { + color: var(--theme-warn-color); + } + } + + &-form-hide-button { + display: none !important; + } + + &-task-title { + text-align: center; + } + + &-label { + width: 32px; + height: 16px; + font-size: var(--theme-caption-font-size); + line-height: var(--theme-headline-line-height); + text-align: left; + white-space: nowrap; + } + + &-form-mat-card-actions { + float: right; + padding-bottom: 25px !important; + padding-right: 25px !important; + + & .mat-button { + height: 36px; + border-radius: 5px; + + } + + & .mat-button-wrapper { + width: 58px; + height: 20px; + opacity: 0.54; + font-size: var(--theme-body-2-font-size); + font-weight: bold; + } + } +} + +form-field { + width: 100%; + + .mat-input-element { + font-size: var(--theme-body-2-font-size); + padding-top: 8px; + line-height: normal; + } +} + +[dir='rtl'] .adf-form-validation-button { + left: 50px; + right: unset; +} diff --git a/lib/process-services/src/lib/form/start-form.component.ts b/lib/process-services/src/lib/form/start-form.component.ts index e16673dcf5..bbc29b256c 100644 --- a/lib/process-services/src/lib/form/start-form.component.ts +++ b/lib/process-services/src/lib/form/start-form.component.ts @@ -34,6 +34,7 @@ import { ContentLinkModel, FormService, WidgetVisibilityService, FormOutcomeMode @Component({ selector: 'adf-start-form', templateUrl: './start-form.component.html', + styleUrls: ['./start-form.component.scss'], encapsulation: ViewEncapsulation.None }) export class StartFormComponent extends FormComponent implements OnChanges, OnInit, OnDestroy { diff --git a/lib/process-services/src/lib/form/start-form.theme.scss b/lib/process-services/src/lib/form/start-form.theme.scss deleted file mode 100644 index 2e468728ee..0000000000 --- a/lib/process-services/src/lib/form/start-form.theme.scss +++ /dev/null @@ -1,130 +0,0 @@ -@mixin adf-start-form-component-theme($theme) { - - $config: mat-typography-config(); - $warn: map-get($theme, warn); - $accent: map-get($theme, accent); - - .adf { - &-form-container { - max-width: 100% !important; - max-height: 100% !important; - - & .mat-card { - padding: 16px 24px; - overflow: hidden; - } - - & .mat-card-header-text { - margin: 0 !important; - } - - & .mat-tab-body-content { - overflow: hidden; - } - - & .mat-tab-label { - font-size: mat-font-size($config, subheading-2); - line-height: mat-line-height($config, headline); - letter-spacing: -0.4px; - text-align: left; - color: rgba(0, 0, 0, 0.54); - text-transform: uppercase; - } - - & .mat-ink-bar { - height: 4px; - } - - & .mat-form-field-wrapper { - margin: 0 12px 0 0; - } - } - - &-form-title { - font-size: mat-font-size($alfresco-typography, title); - } - - &-form-debug-container { - padding: 10px; - } - - &-form-debug-container .adf-debug-toggle-text { - padding-left: 15px; - cursor: pointer; - } - - &-form-debug-container .adf-debug-toggle-text:hover { - font-weight: bold; - } - - &-form-reload-button { - position: absolute; - right: 12px; - top: 30px; - } - - &-form-validation-button { - position: absolute; - right: 50px; - top: 39px; - color: mat-color($accent); - - & .adf-invalid-color { - color: mat-color($warn); - } - } - - &-form-hide-button { - display: none !important; - } - - &-task-title { - text-align: center; - } - - &-label { - width: 32px; - height: 16px; - font-size: mat-font-size($config, caption); - line-height: mat-line-height($config, headline); - text-align: left; - white-space: nowrap; - } - - &-form-mat-card-actions { - float: right; - padding-bottom: 25px !important; - padding-right: 25px !important; - - & .mat-button { - height: 36px; - border-radius: 5px; - - } - - & .mat-button-wrapper { - width: 58px; - height: 20px; - opacity: 0.54; - font-size: mat-font-size($config, body-2); - font-weight: bold; - } - } - } - - form-field { - width: 100%; - - .mat-input-element { - font-size: mat-font-size($config, body-2); - padding-top: 8px; - line-height: normal; - } - } - - [dir='rtl'] .adf-form-validation-button { - left: 50px; - right: unset; - } - -} diff --git a/lib/process-services/src/lib/people/components/people-search-field/people-search-field.component.scss b/lib/process-services/src/lib/people/components/people-search-field/people-search-field.component.scss new file mode 100644 index 0000000000..fa5af0d920 --- /dev/null +++ b/lib/process-services/src/lib/people/components/people-search-field/people-search-field.component.scss @@ -0,0 +1,41 @@ +.adf-people-search-field { + width: 100%; + + .adf-search-text-container { + width: 100%; + + input { + line-height: normal; + } + } + + .adf-search-list-container { + max-height: 152px; + width: 100%; + overflow-y: auto; + } + + adf-people-list ::ng-deep adf-datatable ::ng-deep thead { + display: none; + } + + .adf-people-pic { + background: var(--theme-primary-color); + width: 30px; + padding: 10px 5px; + border-radius: 90%; + color: #fff; + text-align: center; + font-weight: bolder; + font-size: 18px; + text-transform: uppercase; + vertical-align: text-bottom; + } + + .adf-people-img { + border-radius: 90%; + width: 40px; + height: 40px; + vertical-align: middle; + } +} diff --git a/lib/process-services/src/lib/people/components/people-search-field/people-search-field.component.ts b/lib/process-services/src/lib/people/components/people-search-field/people-search-field.component.ts index b71622bb03..4bd3fc8031 100644 --- a/lib/process-services/src/lib/people/components/people-search-field/people-search-field.component.ts +++ b/lib/process-services/src/lib/people/components/people-search-field/people-search-field.component.ts @@ -26,6 +26,7 @@ import { getDisplayUser } from '../../helpers/get-display-user'; @Component({ selector: 'adf-people-search-field', templateUrl: './people-search-field.component.html', + styleUrls: ['./people-search-field.component.scss'], host: { 'class': 'adf-people-search-field' }, encapsulation: ViewEncapsulation.None }) diff --git a/lib/process-services/src/lib/people/components/people-search-field/people-search-field.theme.scss b/lib/process-services/src/lib/people/components/people-search-field/people-search-field.theme.scss deleted file mode 100644 index d87accedfd..0000000000 --- a/lib/process-services/src/lib/people/components/people-search-field/people-search-field.theme.scss +++ /dev/null @@ -1,47 +0,0 @@ -@mixin adf-task-list-people-search-field-theme($theme) { - $primary: map-get($theme, primary); - $accent: map-get($theme, accent); - $warn: map-get($theme, warn); - - .adf-people-search-field { - width: 100%; - - .adf-search-text-container { - width: 100%; - - input { - line-height: normal; - } - } - - .adf-search-list-container { - max-height: 152px; - width: 100%; - overflow-y: auto; - } - - adf-people-list ::ng-deep adf-datatable ::ng-deep thead { - display: none; - } - - .adf-people-pic { - background: mat-color($primary); - width: 30px; - padding: 10px 5px; - border-radius: 90%; - color: #fff; - text-align: center; - font-weight: bolder; - font-size: 18px; - text-transform: uppercase; - vertical-align: text-bottom; - } - - .adf-people-img { - border-radius: 90%; - width: 40px; - height: 40px; - vertical-align: middle; - } - } -} diff --git a/lib/process-services/src/lib/people/components/people-search/people-search.component.scss b/lib/process-services/src/lib/people/components/people-search/people-search.component.scss new file mode 100644 index 0000000000..ecd0a5be49 --- /dev/null +++ b/lib/process-services/src/lib/people/components/people-search/people-search.component.scss @@ -0,0 +1,30 @@ +.adf-people-search { + width: 100%; + + .adf-activiti-label { + font-weight: bolder; + } + + .adf-fix-element-user-list { + padding: 0; + } + + .adf-search-text-header { + font-weight: bold; + opacity: 0.54; + } + + .adf-search-list-action-container { + border-top: 1px solid #eee; + text-align: right; + padding: 5px 0; + margin-top: 5px; + > button { + opacity: 0.54; + font-weight: bolder; + &:hover { + color: var(--theme-primary-color); + } + } + } +} diff --git a/lib/process-services/src/lib/people/components/people-search/people-search.component.ts b/lib/process-services/src/lib/people/components/people-search/people-search.component.ts index 37fd9e8206..0df384017f 100644 --- a/lib/process-services/src/lib/people/components/people-search/people-search.component.ts +++ b/lib/process-services/src/lib/people/components/people-search/people-search.component.ts @@ -24,6 +24,7 @@ import { map } from 'rxjs/operators'; @Component({ selector: 'adf-people-search', templateUrl: './people-search.component.html', + styleUrls: ['./people-search.component.scss'], host: { 'class': 'adf-people-search' }, diff --git a/lib/process-services/src/lib/people/components/people-search/people-search.theme.scss b/lib/process-services/src/lib/people/components/people-search/people-search.theme.scss deleted file mode 100644 index 89279e9657..0000000000 --- a/lib/process-services/src/lib/people/components/people-search/people-search.theme.scss +++ /dev/null @@ -1,36 +0,0 @@ -@mixin adf-task-list-people-search-theme($theme) { - $primary: map-get($theme, primary); - $accent: map-get($theme, accent); - $warn: map-get($theme, warn); - - .adf-people-search { - width: 100%; - - .adf-activiti-label { - font-weight: bolder; - } - - .adf-fix-element-user-list { - padding: 0; - } - - .adf-search-text-header { - font-weight: bold; - opacity: 0.54; - } - - .adf-search-list-action-container { - border-top: 1px solid #eee; - text-align: right; - padding: 5px 0; - margin-top: 5px; - > button { - opacity: 0.54; - font-weight: bolder; - &:hover { - color: mat-color($primary); - } - } - } - } -} diff --git a/lib/process-services/src/lib/people/components/people/people.component.scss b/lib/process-services/src/lib/people/components/people/people.component.scss new file mode 100644 index 0000000000..b6da60f0de --- /dev/null +++ b/lib/process-services/src/lib/people/components/people/people.component.scss @@ -0,0 +1,95 @@ +.adf-assignment-header { + border-bottom: 1px solid var(--theme-fg-divider); + padding: 6px 20px; +} + +.adf-assignment-count { + float: left; + padding: 10px 0; + font-weight: bolder; + opacity: 0.54; + margin: 13px; +} + +.adf-add-people { + margin: 13px; + float: right; + padding: 8px; + height: 26px; + opacity: 0.54; + cursor: pointer; + &:hover { + color: var(--theme-primary-color); + } +} + +.adf-assignment-top-container.mat-card { + border-top: 1px solid var(--theme-fg-divider); + margin: 0; + padding: 0; + display: flex; + flex-flow: row wrap; + align-items: stretch; +} + +.adf-assignment-top-container-content { + display: flex; + flex-flow: column; + align-items: stretch; + flex: 1 0 auto; + max-width: 100%; +} + +.adf-assignment-container { + padding: 10px 20px; + border-bottom: 1px solid var(--theme-fg-divider); + max-width: 100%; +} + +.adf-assignment-list-container { + padding: 0; +} + +adf-people-list adf-datatable { + thead { + display: none; + } + + .adf-datatable-cell { + margin: 13px; + } + + .adf-datatable .adf-datatable-cell .adf-cell-container { + flex-direction: column; + align-items: left; + } + + .adf-people-email { + opacity: 0.54; + } +} + +.adf-people-img { + border-radius: 90%; + width: 40px; + height: 40px; + vertical-align: middle; +} + +.adf-people-search-people-pic { + background: var(--theme-primary-color); + width: 30px; + padding: 10px 5px; + border-radius: 100px; + color: #fff; + text-align: center; + font-weight: bolder; + font-size: 18px; + text-transform: uppercase; + vertical-align: text-bottom; +} + +.adf-people-user-info { + flex-direction: column; + text-align: center; +} diff --git a/lib/process-services/src/lib/people/components/people/people.component.ts b/lib/process-services/src/lib/people/components/people/people.component.ts index bb1959560e..d7b135acc8 100644 --- a/lib/process-services/src/lib/people/components/people/people.component.ts +++ b/lib/process-services/src/lib/people/components/people/people.component.ts @@ -16,7 +16,7 @@ */ import { LogService, UserProcessModel, PeopleProcessService } from '@alfresco/adf-core'; -import { Component, Input, ViewChild } from '@angular/core'; +import { Component, Input, ViewChild, ViewEncapsulation } from '@angular/core'; import { Observable, Observer } from 'rxjs'; import { UserEventModel } from '../../../task-list/models/user-event.model'; import { PeopleSearchComponent } from '../people-search/people-search.component'; @@ -24,7 +24,9 @@ import { share } from 'rxjs/operators'; @Component({ selector: 'adf-people', - templateUrl: './people.component.html' + templateUrl: './people.component.html', + styleUrls: ['./people.component.scss'], + encapsulation: ViewEncapsulation.None }) export class PeopleComponent { diff --git a/lib/process-services/src/lib/people/components/people/people.theme.scss b/lib/process-services/src/lib/people/components/people/people.theme.scss deleted file mode 100644 index f72d8b8811..0000000000 --- a/lib/process-services/src/lib/people/components/people/people.theme.scss +++ /dev/null @@ -1,101 +0,0 @@ -@mixin adf-task-list-people-theme($theme) { - $primary: map-get($theme, primary); - $foreground: map-get($theme, foreground); - $header-border: 1px solid mat-color($foreground, divider); - - .adf-assignment-header { - border-bottom: $header-border; - padding: 6px 20px; - } - - .adf-assignment-count { - float: left; - padding: 10px 0; - font-weight: bolder; - opacity: 0.54; - margin: 13px; - } - - .adf-add-people { - margin: 13px; - float: right; - padding: 8px; - height: 26px; - opacity: 0.54; - cursor: pointer; - &:hover { - color: mat-color($primary); - } - } - - .adf-assignment-top-container.mat-card { - border-top: $header-border; - margin: 0; - padding: 0; - display: flex; - flex-flow: row wrap; - align-items: stretch; - } - - .adf-assignment-top-container-content { - display: flex; - flex-flow: column; - align-items: stretch; - flex: 1 0 auto; - max-width: 100%; - } - - .adf-assignment-container { - padding: 10px 20px; - border-bottom: $header-border; - max-width: 100%; - } - - .adf-assignment-list-container { - padding: 0; - } - - adf-people-list adf-datatable { - thead { - display: none; - } - - .adf-datatable-cell { - margin: 13px; - } - - .adf-datatable .adf-datatable-cell .adf-cell-container { - flex-direction: column; - align-items: left; - } - - .adf-people-email { - opacity: 0.54; - } - } - - .adf-people-img { - border-radius: 90%; - width: 40px; - height: 40px; - vertical-align: middle; - } - - .adf-people-search-people-pic { - background: mat-color($primary); - width: 30px; - padding: 10px 5px; - border-radius: 100px; - color: #fff; - text-align: center; - font-weight: bolder; - font-size: 18px; - text-transform: uppercase; - vertical-align: text-bottom; - } - - .adf-people-user-info { - flex-direction: column; - text-align: center; - } -} diff --git a/lib/process-services/src/lib/people/people.theme.scss b/lib/process-services/src/lib/people/people.theme.scss deleted file mode 100644 index 0dfe4659e0..0000000000 --- a/lib/process-services/src/lib/people/people.theme.scss +++ /dev/null @@ -1,9 +0,0 @@ -@import './components/people-search/people-search.theme'; -@import './components/people-search-field/people-search-field.theme'; -@import './components/people/people.theme'; - -@mixin adf-people-module-theme($theme) { - @include adf-task-list-people-search-theme($theme); - @include adf-task-list-people-search-field-theme($theme); - @include adf-task-list-people-theme($theme); -} diff --git a/lib/process-services/src/lib/process-comments/process-comments.component.scss b/lib/process-services/src/lib/process-comments/process-comments.component.scss new file mode 100644 index 0000000000..a404c67aea --- /dev/null +++ b/lib/process-services/src/lib/process-comments/process-comments.component.scss @@ -0,0 +1,56 @@ +.adf-process-instance-comments { + width: 100%; +} + +.adf-activiti-label { + font-weight: bolder; + vertical-align: top; +} + +.adf-activiti-label + .adf-icon { + position: relative; + top: -2px; +} + +.adf-list-wrap { + word-wrap: break-word; + word-break: break-all; + -moz-hyphens: auto; + -webkit-hyphens: auto; + -o-hyphens: auto; + hyphens: auto; +} + +.adf-hide-long-names { + overflow: auto; +} + +.adf-comments-container { + height: 100%; + width: 100%; + overflow: auto; +} + +.adf-comments-header { + padding: 10px 20px; + font-size: 14px; + font-weight: 600; + border-bottom: 1px solid var(--theme-fg-divider); +} + +.adf-comments-input-container { + width: calc(100% - 30px); + padding: 8px 15px 0; + border-bottom: 1px solid var(--theme-fg-divider); +} + +.adf-full-width { + width: 100%; +} + +adf-comment-list { + float: left; + overflow: auto; + height: calc(100% - 101px); + width: 100%; +} diff --git a/lib/process-services/src/lib/process-comments/process-comments.component.ts b/lib/process-services/src/lib/process-comments/process-comments.component.ts index e472befb51..6e4b80eba1 100644 --- a/lib/process-services/src/lib/process-comments/process-comments.component.ts +++ b/lib/process-services/src/lib/process-comments/process-comments.component.ts @@ -16,13 +16,16 @@ */ import { CommentModel, CommentProcessService } from '@alfresco/adf-core'; -import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, OnDestroy } from '@angular/core'; +import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, OnDestroy, ViewEncapsulation } from '@angular/core'; import { Observable, Observer, Subject } from 'rxjs'; import { share, takeUntil } from 'rxjs/operators'; @Component({ selector: 'adf-process-instance-comments', - templateUrl: './process-comments.component.html' + templateUrl: './process-comments.component.html', + styleUrls: ['./process-comments.component.scss'], + encapsulation: ViewEncapsulation.None, + host: { class: 'adf-process-instance-comments' } }) export class ProcessCommentsComponent implements OnChanges, OnDestroy { diff --git a/lib/process-services/src/lib/process-comments/process-comments.theme.scss b/lib/process-services/src/lib/process-comments/process-comments.theme.scss deleted file mode 100644 index b2ed605749..0000000000 --- a/lib/process-services/src/lib/process-comments/process-comments.theme.scss +++ /dev/null @@ -1,61 +0,0 @@ -@mixin adf-process-comment-theme($theme) { - $foreground: map-get($theme, foreground); - $header-border: 1px solid mat-color($foreground, divider); - - :host { - width: 100%; - } - - .adf-activiti-label { - font-weight: bolder; - vertical-align: top; - } - - .adf-activiti-label + .adf-icon { - position: relative; - top: -2px; - } - - .adf-list-wrap { - word-wrap: break-word; - word-break: break-all; - -moz-hyphens: auto; - -webkit-hyphens: auto; - -o-hyphens: auto; - hyphens: auto; - } - - .adf-hide-long-names { - overflow: auto; - } - - .adf-comments-container { - height: 100%; - width: 100%; - overflow: auto; - } - - .adf-comments-header { - padding: 10px 20px; - font-size: 14px; - font-weight: 600; - border-bottom: $header-border; - } - - .adf-comments-input-container { - width: calc(100% - 30px); - padding: 8px 15px 0; - border-bottom: $header-border; - } - - .adf-full-width { - width: 100%; - } - - adf-comment-list { - float: left; - overflow: auto; - height: calc(100% - 101px); - width: 100%; - } -} diff --git a/lib/process-services/src/lib/process-list/components/process-filters.component.scss b/lib/process-services/src/lib/process-list/components/process-filters.component.scss new file mode 100644 index 0000000000..620c04d329 --- /dev/null +++ b/lib/process-services/src/lib/process-list/components/process-filters.component.scss @@ -0,0 +1,28 @@ +.adf { + &-filters__entry { + padding: 12px 0 !important; + height: 24px; + width: 100%; + cursor: pointer; + font-size: 14px !important; + font-weight: bold; + opacity: 0.54; + + .adf-full-width { + display: flex; + width: 100%; + } + + .adf-filter-action-button .adf-filter-action-button__label { + padding-left: 20px; + margin: 0 8px !important; + } + } + &-filters__entry { + &.adf-active, + &:hover { + color: var(--theme-primary-color); + opacity: 1; + } + } +} diff --git a/lib/process-services/src/lib/process-list/components/process-filters.component.ts b/lib/process-services/src/lib/process-list/components/process-filters.component.ts index fa807c4118..8b1831d902 100644 --- a/lib/process-services/src/lib/process-list/components/process-filters.component.ts +++ b/lib/process-services/src/lib/process-list/components/process-filters.component.ts @@ -16,7 +16,7 @@ */ import { AppsProcessService } from '@alfresco/adf-core'; -import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; +import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewEncapsulation } from '@angular/core'; import { ProcessInstanceFilterRepresentation, UserProcessInstanceFilterRepresentation } from '@alfresco/js-api'; import { Observable } from 'rxjs'; import { FilterProcessRepresentationModel } from '../models/filter-process.model'; @@ -25,7 +25,9 @@ import { IconModel } from '../../app-list/icon.model'; @Component({ selector: 'adf-process-instance-filters', - templateUrl: './process-filters.component.html' + templateUrl: './process-filters.component.html', + styleUrls: ['./process-filters.component.scss'], + encapsulation: ViewEncapsulation.None }) export class ProcessFiltersComponent implements OnInit, OnChanges { diff --git a/lib/process-services/src/lib/process-list/components/process-filters.theme.scss b/lib/process-services/src/lib/process-list/components/process-filters.theme.scss deleted file mode 100644 index e81f02c83f..0000000000 --- a/lib/process-services/src/lib/process-list/components/process-filters.theme.scss +++ /dev/null @@ -1,32 +0,0 @@ -@mixin adf-process-filters-theme($theme) { - $primary: map-get($theme, primary); - - .adf { - &-filters__entry { - padding: 12px 0 !important; - height: 24px; - width: 100%; - cursor: pointer; - font-size: 14px !important; - font-weight: bold; - opacity: 0.54; - - .adf-full-width { - display: flex; - width: 100%; - } - - .adf-filter-action-button .adf-filter-action-button__label { - padding-left: 20px; - margin: 0 8px !important; - } - } - &-filters__entry { - &.adf-active, - &:hover { - color: mat-color($primary); - opacity: 1; - } - } - } -} diff --git a/lib/process-services/src/lib/process-list/components/start-process.component.scss b/lib/process-services/src/lib/process-list/components/start-process.component.scss new file mode 100644 index 0000000000..21bb1c14de --- /dev/null +++ b/lib/process-services/src/lib/process-list/components/start-process.component.scss @@ -0,0 +1,71 @@ +.adf { + &-start-process { + width: 96%; + margin-left: auto; + margin-right: auto; + margin-top: 10px; + mat-form-field { + width: 100%; + } + .mat-form-field-label { + color: var(--theme-colors-mat-grey-dark); + } + .mat-content-actions { + text-align: right; + } + .mat-button { + text-transform: uppercase !important; + } + } + &-title { + padding-bottom: 1.25em; + } + &-process-input-container { + mat-form-field { + width: 100%; + } + } + &-process-input-autocomplete { + display: flex; + button { + position: absolute; + right: -14px; + top: 0; + } + mat-spinner { + position: absolute; + right: -1px; + top: 0; + } + } + &-start-form-container { + .mat-card { + box-shadow: none !important; + padding: 0 !important; + } + } + &-start-form-actions { + text-align: right !important; + } + &-start-process-definition-container { + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: baseline; + } + &-start-process-app-list { + margin-right: 10px; + } +} +@media (max-width: 600px) { + .adf-start-process { + width: 90%; + margin-left: auto; + margin-right: auto; + } +} + +.adf-start-process-loading { + margin-left: calc((100% - 100px) / 2); + margin-right: calc((100% - 100px) / 2); +} diff --git a/lib/process-services/src/lib/process-list/components/start-process.component.ts b/lib/process-services/src/lib/process-list/components/start-process.component.ts index f9e77f8d88..9cdbc86122 100644 --- a/lib/process-services/src/lib/process-list/components/start-process.component.ts +++ b/lib/process-services/src/lib/process-list/components/start-process.component.ts @@ -43,6 +43,7 @@ import { ProcessNamePipe } from '../../pipes/process-name.pipe'; @Component({ selector: 'adf-start-process', templateUrl: './start-process.component.html', + styleUrls: ['./start-process.component.scss'], encapsulation: ViewEncapsulation.None }) export class StartProcessInstanceComponent implements OnChanges, OnInit, OnDestroy { diff --git a/lib/process-services/src/lib/process-list/components/start-process.theme.scss b/lib/process-services/src/lib/process-list/components/start-process.theme.scss deleted file mode 100644 index ee132b087d..0000000000 --- a/lib/process-services/src/lib/process-list/components/start-process.theme.scss +++ /dev/null @@ -1,73 +0,0 @@ -@mixin adf-process-services-create-theme($theme) { - .adf { - &-start-process { - width: 96%; - margin-left: auto; - margin-right: auto; - margin-top: 10px; - mat-form-field { - width: 100%; - } - .mat-form-field-label { - color: mat-color($mat-grey, A400); - } - .mat-content-actions { - text-align: right; - } - .mat-button { - text-transform: uppercase !important; - } - } - &-title { - padding-bottom: 1.25em; - } - &-process-input-container { - mat-form-field { - width: 100%; - } - } - &-process-input-autocomplete { - display: flex; - button { - position: absolute; - right: -14px; - top: 0; - } - mat-spinner { - position: absolute; - right: -1px; - top: 0; - } - } - &-start-form-container { - .mat-card { - box-shadow: none !important; - padding: 0 !important; - } - } - &-start-form-actions { - text-align: right !important; - } - &-start-process-definition-container { - display: flex; - flex-direction: row; - justify-content: space-around; - align-items: baseline; - } - &-start-process-app-list { - margin-right: 10px; - } - } - @media (max-width: 600px) { - .adf-start-process { - width: 90%; - margin-left: auto; - margin-right: auto; - } - } - - .adf-start-process-loading { - margin-left: calc((100% - 100px) / 2); - margin-right: calc((100% - 100px) / 2); - } -} diff --git a/lib/process-services/src/lib/styles/_index.scss b/lib/process-services/src/lib/styles/_index.scss deleted file mode 100644 index b1a60505cb..0000000000 --- a/lib/process-services/src/lib/styles/_index.scss +++ /dev/null @@ -1,27 +0,0 @@ -@import '../process-list/components/process-filters.theme'; -@import '../process-comments/process-comments.theme'; -@import '../people/people.theme'; -@import '../task-list/components/start-task.theme'; -@import '../task-list/components/task-filters.theme'; -@import '../task-list/components/task-header.theme'; -@import '../task-list/components/task-standalone.theme'; -@import '../app-list/apps-list.theme'; -@import '../content-widget/attach-file-widget-dialog.theme'; -@import '../form/start-form.theme'; -@import '../process-list/components/start-process.theme'; -@import '../task-list/components/task-form/task-form.theme'; - -@mixin adf-process-services-theme($theme) { - @include adf-process-filters-theme($theme); - @include adf-process-comment-theme($theme); - @include adf-task-list-start-task-theme($theme); - @include adf-people-module-theme($theme); - @include adf-task-list-filters-task-theme($theme); - @include adf-task-list-header-theme($theme); - @include adf-apps-theme($theme); - @include adf-task-standalone-component-theme($theme); - @include adf-attach-file-widget-dialog-component-theme($theme); - @include adf-start-form-component-theme($theme); - @include adf-process-services-create-theme($theme); - @include adf-task-form-theme($theme); - } diff --git a/lib/process-services/src/lib/task-list/components/start-task.component.scss b/lib/process-services/src/lib/task-list/components/start-task.component.scss new file mode 100644 index 0000000000..f29dcebaa3 --- /dev/null +++ b/lib/process-services/src/lib/task-list/components/start-task.component.scss @@ -0,0 +1,115 @@ +.adf-new-task-heading { + padding-top: 12px; + border-bottom: 1px solid var(--theme-fg-divider); + .mat-card-title { + font-weight: bold; + font-size: 18px; + } +} + +.adf-new-task-form { + width: 100%; +} + +.adf-new-task-layout-card { + margin: 10px auto; +} + +.adf-new-task-footer { + padding: 4px; + font-size: 18px; + border-top: 1px solid #eee; +} + +.adf-mat-select { + padding-top: 0; +} + +adf-start-task { + + .mat-button.adf-uppercase { + text-transform: uppercase; + } + + people-widget { + width: 100%; + .mat-form-field-label-wrapper { + top: -14px !important; + } + } + + .adf-people-widget-content { + .mat-form-field { + width: 100%; + } + .adf-label { + line-height: 0; + } + .adf-error-text-container { + margin-top: -10px; + } + } + + .adf { + &-start-task-input-container .mat-form-field-wrapper { + padding-top: 8px; + } + + &-error-text-container { + position: absolute; + height: 20px; + margin-top: 12px; + width: 100%; + + & > div { + display: flex; + flex-flow: row; + justify-content: flex-start; + } + } + + &-error-text { + padding-right: 8px; + height: 16px; + font-size: 12px; + line-height: 1.33; + color: var(--theme-warn-color); + width: auto; + } + + &-error-icon { + font-size: 17px; + color: var(--theme-warn-color); + } + + &-label { + color: rgb(186, 186, 186);; + } + + &-invalid { + + .mat-form-field-underline { + background-color: #f44336 !important; + } + + .adf-file { + border-color: var(--theme-warn-color); + } + + .mat-form-field-prefix { + color: var(--theme-warn-color); + } + + .adf-input { + border-color: var(--theme-warn-color); + } + + .adf-label { + color: var(--theme-warn-color); + &::after { + background-color: var(--theme-warn-color); + } + } + } + } +} diff --git a/lib/process-services/src/lib/task-list/components/start-task.component.ts b/lib/process-services/src/lib/task-list/components/start-task.component.ts index ba8b8f7f67..605c54d688 100644 --- a/lib/process-services/src/lib/task-list/components/start-task.component.ts +++ b/lib/process-services/src/lib/task-list/components/start-task.component.ts @@ -33,6 +33,7 @@ import { FormBuilder, AbstractControl, Validators, FormGroup, FormControl } from @Component({ selector: 'adf-start-task', templateUrl: './start-task.component.html', + styleUrls: ['./start-task.component.scss'], providers: [ { provide: DateAdapter, useClass: MomentDateAdapter }, { provide: MAT_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS }], diff --git a/lib/process-services/src/lib/task-list/components/start-task.theme.scss b/lib/process-services/src/lib/task-list/components/start-task.theme.scss deleted file mode 100644 index 63e3961dbd..0000000000 --- a/lib/process-services/src/lib/task-list/components/start-task.theme.scss +++ /dev/null @@ -1,123 +0,0 @@ -@mixin adf-task-list-start-task-theme($theme) { - $primary: map-get($theme, primary); - $accent: map-get($theme, accent); - $warn: map-get($theme, warn); - $foreground: map-get($theme, foreground); - $header-border: 1px solid mat-color($foreground, divider); - - .adf-new-task-heading { - padding-top: 12px; - border-bottom: $header-border; - .mat-card-title { - font-weight: bold; - font-size: 18px; - } - } - - .adf-new-task-form { - width: 100%; - } - - .adf-new-task-layout-card { - margin: 10px auto; - } - - .adf-new-task-footer { - padding: 4px; - font-size: 18px; - border-top: 1px solid #eee; - } - - .adf-mat-select { - padding-top: 0; - } - - adf-start-task { - - .mat-button.adf-uppercase { - text-transform: uppercase; - } - - people-widget { - width: 100%; - .mat-form-field-label-wrapper { - top: -14px !important; - } - } - - .adf-people-widget-content { - .mat-form-field { - width: 100%; - } - .adf-label { - line-height: 0; - } - .adf-error-text-container { - margin-top: -10px; - } - } - - .adf { - &-start-task-input-container .mat-form-field-wrapper { - padding-top: 8px; - } - - &-error-text-container { - position: absolute; - height: 20px; - margin-top: 12px; - width: 100%; - - & > div { - display: flex; - flex-flow: row; - justify-content: flex-start; - } - } - - &-error-text { - padding-right: 8px; - height: 16px; - font-size: 12px; - line-height: 1.33; - color: mat-color($warn); - width: auto; - } - - &-error-icon { - font-size: 17px; - color: mat-color($warn); - } - - &-label { - color: rgb(186, 186, 186);; - } - - &-invalid { - - .mat-form-field-underline { - background-color: #f44336 !important; - } - - .adf-file { - border-color: mat-color($warn); - } - - .mat-form-field-prefix { - color: mat-color($warn); - } - - .adf-input { - border-color: mat-color($warn); - } - - .adf-label { - color: mat-color($warn); - &::after { - background-color: mat-color($warn); - } - } - } - } - } -} diff --git a/lib/process-services/src/lib/task-list/components/task-filters.component.scss b/lib/process-services/src/lib/task-list/components/task-filters.component.scss new file mode 100644 index 0000000000..620c04d329 --- /dev/null +++ b/lib/process-services/src/lib/task-list/components/task-filters.component.scss @@ -0,0 +1,28 @@ +.adf { + &-filters__entry { + padding: 12px 0 !important; + height: 24px; + width: 100%; + cursor: pointer; + font-size: 14px !important; + font-weight: bold; + opacity: 0.54; + + .adf-full-width { + display: flex; + width: 100%; + } + + .adf-filter-action-button .adf-filter-action-button__label { + padding-left: 20px; + margin: 0 8px !important; + } + } + &-filters__entry { + &.adf-active, + &:hover { + color: var(--theme-primary-color); + opacity: 1; + } + } +} diff --git a/lib/process-services/src/lib/task-list/components/task-filters.component.ts b/lib/process-services/src/lib/task-list/components/task-filters.component.ts index 7646fac8ab..5cd59538b5 100644 --- a/lib/process-services/src/lib/task-list/components/task-filters.component.ts +++ b/lib/process-services/src/lib/task-list/components/task-filters.component.ts @@ -16,7 +16,7 @@ */ import { AppsProcessService } from '@alfresco/adf-core'; -import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; +import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewEncapsulation } from '@angular/core'; import { Observable } from 'rxjs'; import { FilterParamsModel, FilterRepresentationModel } from '../models/filter.model'; import { TaskFilterService } from './../services/task-filter.service'; @@ -25,7 +25,9 @@ import { IconModel } from '../../app-list/icon.model'; @Component({ selector: 'adf-task-filters', - templateUrl: './task-filters.component.html' + templateUrl: './task-filters.component.html', + styleUrls: ['./task-filters.component.scss'], + encapsulation: ViewEncapsulation.None }) export class TaskFiltersComponent implements OnInit, OnChanges { diff --git a/lib/process-services/src/lib/task-list/components/task-filters.theme.scss b/lib/process-services/src/lib/task-list/components/task-filters.theme.scss deleted file mode 100644 index 1852f0db1a..0000000000 --- a/lib/process-services/src/lib/task-list/components/task-filters.theme.scss +++ /dev/null @@ -1,32 +0,0 @@ -@mixin adf-task-list-filters-task-theme($theme) { - $primary: map-get($theme, primary); - - .adf { - &-filters__entry { - padding: 12px 0 !important; - height: 24px; - width: 100%; - cursor: pointer; - font-size: 14px !important; - font-weight: bold; - opacity: 0.54; - - .adf-full-width { - display: flex; - width: 100%; - } - - .adf-filter-action-button .adf-filter-action-button__label { - padding-left: 20px; - margin: 0 8px !important; - } - } - &-filters__entry { - &.adf-active, - &:hover { - color: mat-color($primary); - opacity: 1; - } - } - } -} diff --git a/lib/process-services/src/lib/task-list/components/task-form/task-form.component.scss b/lib/process-services/src/lib/task-list/components/task-form/task-form.component.scss new file mode 100644 index 0000000000..c3dc247b88 --- /dev/null +++ b/lib/process-services/src/lib/task-list/components/task-form/task-form.component.scss @@ -0,0 +1,25 @@ +.adf-task-form { + &-container { + overflow: hidden; + } + + &-actions { + float: right; + padding-bottom: 25px !important; + padding-right: 25px !important; + + & .mat-button { + height: 36px; + border-radius: 5px; + + } + + & .mat-button-wrapper { + width: 58px; + height: 20px; + opacity: 0.54; + font-size: var(--theme-body-2-font-size); + font-weight: bold; + } + } +} diff --git a/lib/process-services/src/lib/task-list/components/task-form/task-form.component.ts b/lib/process-services/src/lib/task-list/components/task-form/task-form.component.ts index 54213dc465..757ebc9c89 100644 --- a/lib/process-services/src/lib/task-list/components/task-form/task-form.component.ts +++ b/lib/process-services/src/lib/task-list/components/task-form/task-form.component.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { Component, OnInit, Input, Output, EventEmitter, SimpleChanges } from '@angular/core'; +import { Component, OnInit, Input, Output, EventEmitter, SimpleChanges, ViewEncapsulation } from '@angular/core'; import { FormModel, ContentLinkModel, @@ -32,7 +32,9 @@ import { Observable } from 'rxjs'; @Component({ selector: 'adf-task-form', - templateUrl: './task-form.component.html' + templateUrl: './task-form.component.html', + styleUrls: ['./task-form.component.scss'], + encapsulation: ViewEncapsulation.None }) export class TaskFormComponent implements OnInit { diff --git a/lib/process-services/src/lib/task-list/components/task-form/task-form.theme.scss b/lib/process-services/src/lib/task-list/components/task-form/task-form.theme.scss deleted file mode 100644 index 1d2cf3f358..0000000000 --- a/lib/process-services/src/lib/task-list/components/task-form/task-form.theme.scss +++ /dev/null @@ -1,32 +0,0 @@ -@mixin adf-task-form-theme($theme) { - - $config: mat-typography-config(); - - .adf-task-form { - &-container { - overflow: hidden; - } - - &-actions { - float: right; - padding-bottom: 25px !important; - padding-right: 25px !important; - - & .mat-button { - height: 36px; - border-radius: 5px; - - } - - & .mat-button-wrapper { - width: 58px; - height: 20px; - opacity: 0.54; - font-size: mat-font-size($config, body-2); - font-weight: bold; - } - } - } - - -} diff --git a/lib/process-services/src/lib/task-list/components/task-header.component.scss b/lib/process-services/src/lib/task-list/components/task-header.component.scss new file mode 100644 index 0000000000..da8570273c --- /dev/null +++ b/lib/process-services/src/lib/task-list/components/task-header.component.scss @@ -0,0 +1,35 @@ +.adf { + &-controls { + display: flex; + justify-content: space-between; + } + + &-edit-controls { + display: flex; + justify-content: flex-end; + margin-left: auto; + } + + &-switch-to-edit-mode, + &-save-edit-mode { + color: var(--theme-primary-color); + } + + &-cancel-edit-mode, + &-claim-controls { + color: rgb(131, 131, 131); + } + + &-card-container { + font-family: inherit; + } + +} + +@media screen and (max-width: 959px) { + adf-card-view .adf-property-value { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } +} diff --git a/lib/process-services/src/lib/task-list/components/task-header.component.ts b/lib/process-services/src/lib/task-list/components/task-header.component.ts index a80130392d..0828462c24 100644 --- a/lib/process-services/src/lib/task-list/components/task-header.component.ts +++ b/lib/process-services/src/lib/task-list/components/task-header.component.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; +import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewEncapsulation } from '@angular/core'; import { BpmUserService, CardViewDateItemModel, @@ -32,7 +32,9 @@ import { TaskDescriptionValidator } from '../validators/task-description.validat @Component({ selector: 'adf-task-header', - templateUrl: './task-header.component.html' + templateUrl: './task-header.component.html', + styleUrls: ['./task-header.component.scss'], + encapsulation: ViewEncapsulation.None }) export class TaskHeaderComponent implements OnChanges, OnInit { diff --git a/lib/process-services/src/lib/task-list/components/task-header.theme.scss b/lib/process-services/src/lib/task-list/components/task-header.theme.scss deleted file mode 100644 index c3150848a1..0000000000 --- a/lib/process-services/src/lib/task-list/components/task-header.theme.scss +++ /dev/null @@ -1,40 +0,0 @@ -@mixin adf-task-list-header-theme($theme) { - $primary: map-get($theme, primary); - - .adf { - &-controls { - display: flex; - justify-content: space-between; - } - - &-edit-controls { - display: flex; - justify-content: flex-end; - margin-left: auto; - } - - &-switch-to-edit-mode, - &-save-edit-mode { - color: mat-color($primary); - } - - &-cancel-edit-mode, - &-claim-controls { - color: rgb(131, 131, 131); - } - - &-card-container { - font-family: inherit; - } - - } - - @media screen and (max-width: 959px) { - adf-card-view .adf-property-value { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } - } - -} diff --git a/lib/process-services/src/lib/task-list/components/task-standalone.component.scss b/lib/process-services/src/lib/task-list/components/task-standalone.component.scss new file mode 100644 index 0000000000..1625d1d634 --- /dev/null +++ b/lib/process-services/src/lib/task-list/components/task-standalone.component.scss @@ -0,0 +1,48 @@ +.adf { + &-message-card { + width: 60%; + box-sizing: border-box; + margin: 16px auto; + .mat-card-actions { + border-top: solid 1px var(--theme-status-bar-bg-color); + } + } + &-no-form-message-container { + height: 256px; + width: 100%; + display: table; + } + &-no-form-message-list { + display: table-cell; + vertical-align: middle; + text-align: center !important; + } + &-no-form-message { + padding-bottom: 10px; + font-size: var(--theme-display-1-font-size); + line-height: 36px; + letter-spacing: -1.3px; + opacity: 0.54; + margin: auto; + width: fit-content !important; + } + &-no-form-submessage { + font-size: var(--theme-subheading-2-font-size); + opacity: 0.54; + margin: auto; + width: fit-content !important; + } + &-no-form-mat-card-actions.mat-card-actions { + display: flex; + justify-content: space-between; + & .mat-button { + text-transform: uppercase; + border-radius: 5px; + } + & .mat-button-wrapper { + opacity: 0.54; + font-size: var(--theme-button-font-size); + font-weight: bold; + } + } +} diff --git a/lib/process-services/src/lib/task-list/components/task-standalone.component.ts b/lib/process-services/src/lib/task-list/components/task-standalone.component.ts index 73de004ab8..3da2e79113 100644 --- a/lib/process-services/src/lib/task-list/components/task-standalone.component.ts +++ b/lib/process-services/src/lib/task-list/components/task-standalone.component.ts @@ -20,6 +20,7 @@ import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angu @Component({ selector: 'adf-task-standalone', templateUrl: './task-standalone.component.html', + styleUrls: ['./task-standalone.component.scss'], encapsulation: ViewEncapsulation.None }) diff --git a/lib/process-services/src/lib/task-list/components/task-standalone.theme.scss b/lib/process-services/src/lib/task-list/components/task-standalone.theme.scss deleted file mode 100644 index bf62d76941..0000000000 --- a/lib/process-services/src/lib/task-list/components/task-standalone.theme.scss +++ /dev/null @@ -1,54 +0,0 @@ -@mixin adf-task-standalone-component-theme($theme) { - - $config: mat-typography-config(); - $background: map-get($theme, background); - - .adf { - &-message-card { - width: 60%; - box-sizing: border-box; - margin: 16px auto; - .mat-card-actions { - border-top: solid 1px mat-color($background, status-bar); - } - } - &-no-form-message-container { - height: 256px; - width: 100%; - display: table; - } - &-no-form-message-list { - display: table-cell; - vertical-align: middle; - text-align: center !important; - } - &-no-form-message { - padding-bottom: 10px; - font-size: mat-font-size($config, display-1); - line-height: 36px; - letter-spacing: -1.3px; - opacity: 0.54; - margin: auto; - width: fit-content !important; - } - &-no-form-submessage { - font-size: mat-font-size($config, subheading-2); - opacity: 0.54; - margin: auto; - width: fit-content !important; - } - &-no-form-mat-card-actions.mat-card-actions { - display: flex; - justify-content: space-between; - & .mat-button { - text-transform: uppercase; - border-radius: 5px; - } - & .mat-button-wrapper { - opacity: 0.54; - font-size: mat-font-size($config, button); - font-weight: bold; - } - } - } -} diff --git a/scripts/build/build-content-services.sh b/scripts/build/build-content-services.sh index c5cc0442c3..a583100a09 100755 --- a/scripts/build/build-content-services.sh +++ b/scripts/build/build-content-services.sh @@ -15,9 +15,6 @@ else NODE_OPTIONS="--max-old-space-size=8192" nx build content-services || exit 1 fi -echo "====== Bundle styles ======" -npm run scss-bundle:content-services || exit 1 - echo "====== Copy i18n ======" mkdir -p ./lib/dist/content-services/bundles/assets/adf-content-services/i18n cp -R ./lib/content-services/src/lib/i18n/* ./lib/dist/content-services/bundles/assets/adf-content-services/i18n diff --git a/scripts/build/build-insights.sh b/scripts/build/build-insights.sh index acb81bb95f..ce267e76c9 100755 --- a/scripts/build/build-insights.sh +++ b/scripts/build/build-insights.sh @@ -15,9 +15,6 @@ else NODE_OPTIONS="--max-old-space-size=8192" nx build insights || exit 1 fi -echo "====== Bundle styles ======" -npm run scss-bundle:insights || exit 1 - echo "====== Copy i18n ======" mkdir -p ./lib/dist/insights/bundles/assets/adf-insights/i18n cp -R ./lib/insights/src/lib/i18n/* ./lib/dist/insights/bundles/assets/adf-insights/i18n diff --git a/scripts/build/build-process-services-cloud.sh b/scripts/build/build-process-services-cloud.sh index 4dc958adc1..4789a61ad9 100755 --- a/scripts/build/build-process-services-cloud.sh +++ b/scripts/build/build-process-services-cloud.sh @@ -15,9 +15,6 @@ else NODE_OPTIONS="--max-old-space-size=8192" nx build process-services-cloud || exit 1 fi -echo "====== Bundle styles ======" -npm run scss-bundle:process-services-cloud || exit 1 - echo "====== Copy i18n ======" mkdir -p ./lib/dist/process-services-cloud/bundles/assets/adf-process-services-cloud/i18n cp -R ./lib/process-services-cloud/src/lib/i18n/* ./lib/dist/process-services-cloud/bundles/assets/adf-process-services-cloud/i18n diff --git a/scripts/build/build-process-services.sh b/scripts/build/build-process-services.sh index 81905ab91c..b27cb2c123 100755 --- a/scripts/build/build-process-services.sh +++ b/scripts/build/build-process-services.sh @@ -15,9 +15,6 @@ else NODE_OPTIONS="--max-old-space-size=8192" nx build process-services || exit 1 fi -echo "====== Bundle styles ======" -npm run scss-bundle:process-services || exit 1 - echo "====== Copy i18n ======" mkdir -p ./lib/dist/process-services/bundles/assets/adf-process-services/i18n cp -R ./lib/process-services/src/lib/i18n/* ./lib/dist/process-services/bundles/assets/adf-process-services/i18n