inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-07-31 17:38:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

[AAE-5660] Reduce SCSS mixins and use CSS variables instead (#2255)

Browse Source 
* optimise create menu theme

* optimise details component

* optimise sidenav component

* optimise search input theme

* optimise template dialog theme
This commit is contained in:
Denys Vuika
2021-08-11 14:31:30 +01:00
committed by GitHub
parent cd2aa173b8
commit 016bc0ac81
11 changed files with 244 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
src/app/components/create-menu/create-menu.component.scss
View File

@@ -1,93 +1,87 @@
@mixin app-create-menu-theme($theme) {
$foreground: map-get($theme, foreground);
$accent: map-get($theme, accent);
$primary: map-get($theme, primary);
.app-create-menu:focus {
outline: none;
}
.app-create-menu:focus {
outline: none;
.app-create-menu {
width: 100%;
.mat-raised-button {
width: 100%;
display: block;
box-shadow: none !important;
height: 37.5px;
background-color: var(--theme-accent-color);
color: var(--theme-primary-color-default-contrast);
border-radius: 4px;
font-size: 12.7px;
font-weight: normal;
text-transform: uppercase;
.mat-icon {
width: 24px;
height: 25px;
color: var(--theme-primary-color-default-contrast);
}
&__text {
width: 100%;
height: 20px;
text-align: left;
}
}
.app-create-menu {
width: 100%;
&__root-menu {
max-width: 290px !important;
width: 290px;
display: flex;
align-items: center;
justify-content: center;
.mat-raised-button {
& > .mat-menu-content {
width: 100%;
display: block;
box-shadow: none !important;
height: 37.5px;
background-color: mat-color($accent);
color: mat-color($primary, default-contrast) !important;
border-radius: 4px;
font-size: 12.7px;
}
}
&--collapsed {
outline: none;
color: var(--theme-secondary-text-color);
cursor: pointer;
&:hover {
color: var(--theme-accent-color);
}
margin: 0;
border: none;
background: none;
}
.app-create-menu--icon {
color: var(--theme-accent-color);
}
&__sub-menu {
.mat-menu-item {
display: flex;
flex-direction: row;
align-items: center;
font-size: 14px;
color: var(--theme-secondary-text-color);
line-height: 48px;
box-shadow: none;
transform: none;
transition: unset;
font-weight: normal;
text-transform: uppercase;
&:hover {
color: var(--theme-primary-color);
}
}
.mat-menu-item[disabled],
.mat-menu-item[disabled]:hover {
color: var(--theme-text-disabled-color);
.mat-icon {
width: 24px;
height: 25px;
color: mat-color($primary, default-contrast) !important;
}
&__text {
width: 100%;
height: 20px;
text-align: left;
}
}
&__root-menu {
max-width: 290px !important;
width: 290px;
display: flex;
align-items: center;
justify-content: center;
& > .mat-menu-content {
width: 100%;
}
}
&--collapsed {
outline: none;
color: mat-color($foreground, secondary-text);
cursor: pointer;
&:hover {
color: mat-color($accent);
}
margin: 0;
border: none;
background: none;
}
.app-create-menu--icon {
color: mat-color($accent);
}
&__sub-menu {
.mat-menu-item {
display: flex;
flex-direction: row;
align-items: center;
font-size: 14px;
color: mat-color($foreground, secondary-text);
line-height: 48px;
box-shadow: none;
transform: none;
transition: unset;
font-weight: normal;
&:hover {
color: mat-color($primary);
}
}
.mat-menu-item[disabled],
.mat-menu-item[disabled]:hover {
color: mat-color($foreground, text, 0.38);
.mat-icon {
color: mat-color($foreground, text, 0.38);
}
color: var(--theme-text-disabled-color);
}
}
}

1
src/app/components/create-menu/create-menu.component.ts
View File

@@ -34,6 +34,7 @@ import { AppExtensionService } from '@alfresco/aca-shared';
@Component({
selector: 'app-create-menu',
templateUrl: './create-menu.component.html',
styleUrls: ['./create-menu.component.scss'],
encapsulation: ViewEncapsulation.None,
host: { class: 'app-create-menu' }
})

84
src/app/components/details/details.component.scss
View File

@@ -1,45 +1,41 @@
@mixin app-details-theme($theme) {
$background: map-get($theme, background);
.acs-details-container {
background-color: mat-color($background, card);
width: 100%;
}
.adw-details-tabs {
margin-top: 40px;
height: calc(100% - 80px);
.mat-tab-body-wrapper {
height: 100%;
}
.mat-tab-labels {
text-transform: uppercase;
}
}
.acs-details-title {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.acs-close-members-container {
margin-right: 15px;
}
}
.acs-details-breadcrumb {
font-size: 18px;
margin-left: 20px;
.acs-details-breadcrumb-library {
font-weight: 900;
}
.acs-details-breadcrumb-item {
font-weight: 100;
}
}
.acs-details-container {
background-color: var(--theme-card-background-color);
width: 100%;
}
.adw-details-tabs {
margin-top: 40px;
height: calc(100% - 80px);
.mat-tab-body-wrapper {
height: 100%;
}
.mat-tab-labels {
text-transform: uppercase;
}
}
.acs-details-title {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.acs-close-members-container {
margin-right: 15px;
}
}
.acs-details-breadcrumb {
font-size: 18px;
margin-left: 20px;
.acs-details-breadcrumb-library {
font-weight: 900;
}
.acs-details-breadcrumb-item {
font-weight: 100;
}
}

1
src/app/components/details/details.component.ts
View File

@@ -35,6 +35,7 @@ import { Subject } from 'rxjs';
@Component({
selector: 'app-details-manager',
templateUrl: './details.component.html',
styleUrls: ['./details.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class DetailsComponent extends PageComponent implements OnInit, OnDestroy {

78
src/app/components/search/search-input/search-input.component.theme.scss → src/app/components/search/search-input/search-input.component.scss
View File

@@ -4,43 +4,47 @@ $search-background: #f5f6f5;
$search-border-radius: 4px;
$top-margin: 12px;
@mixin aca-search-input-theme($theme) {
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
$border: 1px solid mat-color($foreground, divider, 0.07);
.app-search-container {
color: var(--theme-foreground-text-color);
.app-search-container {
color: mat-color($foreground, text, 0.72);
.app-input-form-field {
.mat-input-element {
caret-color: var(--theme-text-color);
.app-input-form-field {
.mat-input-element {
caret-color: mat-color($foreground, text, 0.54);
&:disabled {
color: mat-color($foreground, text, 0.54);
}
&:disabled {
color: var(--theme-text-color);
}
}
.mat-focused label.mat-form-field-label {
display: none;
}
}
.app-search-options-menu {
&.mat-menu-panel {
background-color: mat-color($background, dialog);
}
.mat-focused label.mat-form-field-label {
display: none;
}
#search-options {
color: mat-color($foreground, text, 0.54);
border-top: $border;
}
.app-search-options-menu {
&.mat-menu-panel {
background-color: var(--theme-dialog-background-color);
width: $search-width;
max-width: unset;
border-radius: $search-border-radius;
margin-top: $top-margin;
}
mat-checkbox {
.mat-checkbox-frame {
border-color: mat-color($foreground, text, 0.54);
}
.mat-menu-content:not(:empty) {
padding-top: 0;
padding-bottom: 0;
}
}
#search-options {
color: var(--theme-text-color);
border-top: 1px solid var(--theme-divider-color);
}
mat-checkbox {
.mat-checkbox-frame {
border-color: var(--theme-text-color);
}
}
@@ -62,20 +66,6 @@ $top-margin: 12px;
margin-top: -$top-margin;
}
.app-search-options-menu {
&.mat-menu-panel {
width: $search-width;
max-width: unset;
border-radius: $search-border-radius;
margin-top: $top-margin;
}
.mat-menu-content:not(:empty) {
padding-top: 0;
padding-bottom: 0;
}
}
#search-options {
padding: 20px 0;
font-size: 16px;
@@ -107,7 +97,7 @@ $top-margin: 12px;
padding-left: 17px;
}
@media screen and ($mat-small) {
@media screen and (max-width: 959px) {
$search-width-small: 400px;
.aca-search-input {
@@ -141,7 +131,7 @@ $top-margin: 12px;
}
}
@media screen and ($mat-xsmall) {
@media screen and (max-width: 599px) {
$search-width-xsmall: 220px;
.aca-search-input {

1
src/app/components/search/search-input/search-input.component.ts
View File

@@ -39,6 +39,7 @@ import { SearchLibrariesQueryBuilderService } from '../search-libraries-results/
@Component({
selector: 'aca-search-input',
templateUrl: './search-input.component.html',
styleUrls: ['./search-input.component.scss'],
encapsulation: ViewEncapsulation.None,
host: { class: 'aca-search-input' }
})

35
src/app/components/sidenav/sidenav.component.scss
View File

@@ -6,11 +6,26 @@
overflow-y: hidden;
}
.aca-menu-panel {
.action-button--active {
color: var(--theme-accent-color) !important;
}
.action-button {
color: var(--theme-primary-color);
}
.action-button:hover {
color: var(--theme-accent-color);
}
}
.sidenav {
display: flex;
flex: 1;
flex-direction: column;
height: 100%;
background-color: var(--theme-background-color);
.section:last-child {
border-bottom: 0;
@@ -34,6 +49,7 @@
.section {
padding: 8px 6px;
border-bottom: 1px solid var(--theme-divider-color);
}
.section--collapsed {
@@ -60,6 +76,14 @@
width: 100%;
}
.action-button--active {
color: var(--theme-primary-color) !important;
}
.action-button {
color: var(--theme-text-color);
}
.action-button .action-button__label {
margin: 0 8px !important;
}
@@ -82,14 +106,25 @@
user-select: none;
}
.item:hover .action-button__label {
color: var(--theme-primary-color);
}
.mat-expansion-panel-header {
padding: 0 8px 0 0 !important;
display: flex;
align-items: center;
font-size: 14px !important;
}
.mat-expansion-panel {
width: 100%;
background-color: unset;
box-shadow: none !important;
}
.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled='true']):hover {
background: none !important;
}
.mat-expansion-indicator {

58
src/app/components/sidenav/sidenav.component.theme.scss
View File

@@ -1,58 +0,0 @@
@mixin sidenav-component-theme($theme) {
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$foreground: map-get($theme, foreground);
$background: map-get($theme, background);
$border: 1px solid mat-color($foreground, divider, 0.07);
.aca-menu-panel {
.action-button--active {
color: mat-color($accent) !important;
}
.action-button {
color: mat-color($primary);
}
.action-button:hover {
color: mat-color($accent);
}
}
.sidenav {
background-color: mat-color($background, background);
.item:hover .action-button__label {
color: mat-color($primary);
}
.mat-expansion-panel {
background-color: unset;
}
.mat-expansion-panel {
box-shadow: none !important;
}
.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled='true']):hover {
background: none !important;
}
.mat-expansion-panel-header {
font-size: 14px !important;
}
.action-button--active {
color: mat-color($primary) !important;
}
.action-button {
color: mat-color($foreground, text, 0.54);
}
.section {
border-bottom: $border;
}
}
}

105
src/app/dialogs/node-template/create-from-template.dialog.scss
View File

@@ -1,64 +1,57 @@
@mixin app-create-from-template-theme($theme) {
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$foreground: map-get($theme, foreground);
$background: map-get($theme, background);
.aca-create-from-template-dialog {
ng-component {
overflow: visible;
}
.aca-create-from-template-dialog {
ng-component {
overflow: visible;
.mat-dialog-title {
margin-left: 24px;
margin-right: 24px;
font-size: 20px;
font-style: normal;
font-stretch: normal;
line-height: 1.6;
letter-spacing: -0.5px;
color: var(--theme-text-bold-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.bold {
font-weight: 600;
}
}
.mat-form-field {
margin-bottom: 20px;
}
.mat-dialog-container {
padding-left: 0;
padding-right: 0;
}
.mat-dialog-content {
margin: 0 2px;
overflow: hidden;
}
.mat-dialog-actions {
padding: 8px 22px;
display: flex;
justify-content: flex-end;
color: var(--theme-secondary-text-color);
button {
text-transform: uppercase;
font-weight: normal;
}
.mat-dialog-title {
margin-left: 24px;
margin-right: 24px;
font-size: 20px;
font-style: normal;
font-stretch: normal;
line-height: 1.6;
letter-spacing: -0.5px;
color: mat-color($foreground, text, 0.87);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.bold {
font-weight: 600;
}
.create[disabled] {
opacity: 0.6;
}
.mat-form-field {
margin-bottom: 20px;
}
.mat-dialog-container {
padding-left: 0;
padding-right: 0;
}
.mat-dialog-content {
margin: 0 2px;
overflow: hidden;
}
.mat-dialog-actions {
padding: 8px 22px;
display: flex;
justify-content: flex-end;
color: mat-color($foreground, secondary-text);
button {
text-transform: uppercase;
font-weight: normal;
}
.create[disabled] {
opacity: 0.6;
}
.create:enabled {
color: mat-color($accent);
}
.create:enabled {
color: var(--theme-accent-color);
}
}
}

1
src/app/dialogs/node-template/create-from-template.dialog.ts
View File

@@ -33,6 +33,7 @@ import { TranslationService } from '@alfresco/adf-core';
@Component({
templateUrl: './create-from-template.dialog.html',
styleUrls: ['./create-from-template.dialog.scss'],
encapsulation: ViewEncapsulation.None
})
export class CreateFromTemplateDialogComponent implements OnInit {

21
src/app/ui/custom-theme.scss
View File

@@ -1,14 +1,6 @@
@import '~@angular/material/theming';
@import '~@alfresco/adf-content-services/theming';
@import '../components/sidenav/sidenav.component.theme';
@import '../components/search/search-input/search-input.component.theme';
@import '../components/create-menu/create-menu.component.scss';
@import '../dialogs/node-template/create-from-template.dialog.scss';
@import '../components/details/details.component.scss';
@import './overrides/adf-style-fixes.theme';
@import 'colors';
@include mat-core();
@@ -27,12 +19,6 @@ $primary: map-get($custom-theme, primary);
@include angular-material-theme($theme);
@include adf-content-services-theme($theme);
@include adf-core-theme($theme);
@include aca-search-input-theme($theme);
@include sidenav-component-theme($theme);
@include app-create-from-template-theme($theme);
@include app-details-theme($theme);
@include app-create-menu-theme($theme);
@include adf-style-fixes($theme);
.mat-toolbar {
@@ -69,8 +55,10 @@ $adf-permission-list-width: 100%;
$defaults: (
--theme-primary-color: mat-color($primary),
--theme-primary-color-default-contrast: mat-color($primary, default-contrast),
--theme-warn-color: mat-color($warn),
--theme-accent-color: mat-color($accent),
--theme-background-color: mat-color($background, background),
--theme-text-color: mat-color($foreground, text, 0.54),
--theme-text-bold-color: mat-color($foreground, text, 0.87),
--theme-title-color: mat-color($foreground, text, 0.87),
@@ -79,7 +67,10 @@ $defaults: (
--header-background-image: url('/assets/images/mastHead-bg-shapesPattern.svg'),
--theme-card-background-color: mat-color($background, card),
--theme-foreground-text-color: mat-color($foreground, text, 0.72),
--theme-foreground-text-bold-color: mat-color($foreground, text, 0.87)
--theme-foreground-text-bold-color: mat-color($foreground, text, 0.87),
--theme-secondary-text-color: mat-color($foreground, secondary-text),
--theme-divider-color: mat-color($foreground, divider, 0.07),
--theme-dialog-background-color: mat-color($background, dialog)
);
// propagates SCSS variables into the CSS variables scope