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

Styles cleanup (#1764)

Browse Source 
* remove useless context menu styles

* deprecate layout theme mixins

* cleanup name column

* use adf snackbar styles

* permissions and search results

* cleanup node versions dialog

* cleanup toolbar actions
This commit is contained in:
Denys Vuika
2020-10-30 11:49:51 +00:00
committed by GitHub
parent 7c894b250f
commit 53f61f19d6
24 changed files with 211 additions and 311 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/components/context-menu/context-menu.component.theme.scss
View File

@@ -1,8 +0,0 @@
@mixin aca-context-menu-theme($theme) {
$foreground: map-get($theme, foreground);
$primary: map-get($theme, primary);
.aca-context-menu {
@include angular-material-theme($theme);
}
}

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

@@ -38,7 +38,6 @@ import { AppExtensionService } from '@alfresco/aca-shared';
@Component({
selector: 'aca-context-menu',
templateUrl: './context-menu.component.html',
styleUrls: ['./context-menu.component.theme.scss'],
host: {
class: 'aca-context-menu-holder'
},

42
src/app/components/dl-custom-components/name-column/name-column.component.scss
View File

@@ -1,31 +1,19 @@
.aca-name-column-container {
aca-locked-by {
display: flex;
align-items: center;
color: rgba(0, 0, 0, 0.54);
max-width: 100%;
padding: 0 10px;
.aca-custom-name-column {
display: block;
align-items: center;
.locked_by--name {
overflow: hidden;
text-overflow: ellipsis;
}
}
}
@mixin aca-custom-name-column-theme($theme) {
$primary: map-get($theme, primary);
aca-custom-name-column {
display: block;
align-items: center;
&:hover {
color: mat-color($primary, A200) !important;
}
.adf-datatable-cell-value {
margin: 0 4px;
.aca-name-column-container {
aca-locked-by {
display: flex;
align-items: center;
color: rgba(0, 0, 0, 0.54);
max-width: 100%;
padding: 0 10px;
.locked_by--name {
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}

2
src/app/components/dl-custom-components/name-column/name-column.component.ts
View File

@@ -38,7 +38,7 @@ import { isLocked } from '@alfresco/aca-shared';
styleUrls: ['name-column.component.scss'],
encapsulation: ViewEncapsulation.None,
host: {
class: ' adf-datatable-content-cell adf-datatable-link adf-name-column'
class: 'adf-datatable-content-cell adf-datatable-link adf-name-column aca-custom-name-column'
}
})
export class CustomNameColumnComponent extends NameColumnComponent implements OnInit, OnDestroy {

46
src/app/components/header/header.component.scss
View File

@@ -1,35 +1,29 @@
@import '~@angular/material/theming';
.app-header {
box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.02), 0px 6px 10px 0px rgba(0, 0, 0, 0.014), 0px 1px 18px 0px rgba(0, 0, 0, 0.012);
z-index: 2;
@mixin app-header-theme($theme) {
$foreground: map-get($theme, foreground);
.mat-toolbar {
background-image: var(--header-background-image) !important;
background-repeat: no-repeat !important;
.app-header {
@include mat-elevation(6, #000000, 0.1);
z-index: 2;
.adf-app-title {
color: var(--theme-foreground-text-color);
}
.mat-toolbar {
background-image: var(--header-background-image) !important;
background-repeat: no-repeat !important;
.adf-menu-icon {
color: var(--theme-foreground-text-color) !important;
}
.adf-app-title {
color: mat-color($foreground, text, 0.72);
}
.aca-current-user {
color: var(--theme-foreground-text-color) !important;
}
.adf-menu-icon {
color: mat-color($foreground, text, 0.72) !important;
}
.adf-toolbar-divider div {
background-color: var(--theme-foreground-text-color) !important;
}
.aca-current-user {
color: mat-color($foreground, text, 0.72) !important;
}
.adf-toolbar-divider div {
background-color: mat-color($foreground, text, 0.72) !important;
}
.app-toolbar-menu {
color: mat-color($foreground, text, 0.72) !important;
}
.app-toolbar-menu {
color: var(--theme-foreground-text-color) !important;
}
}
}

30
src/app/components/layout/app-layout/app-layout.component.scss Normal file
View File

@@ -0,0 +1,30 @@
.app-layout {
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
overflow: hidden;
min-height: 0;
router-outlet[name='viewer'] + * {
width: 100%;
height: 100%;
z-index: 999;
position: absolute;
top: 0;
right: 0;
background-color: white;
}
}
@media screen and (max-width: 599px) {
.adf-app-title {
display: none;
}
}
@media screen and (max-width: 719px) {
.adf-app-logo {
display: none;
}
}

1
src/app/components/layout/app-layout/app-layout.component.ts
View File

@@ -37,6 +37,7 @@ import { Directionality } from '@angular/cdk/bidi';
@Component({
selector: 'app-layout',
templateUrl: './app-layout.component.html',
styleUrls: ['./app-layout.component.scss'],
encapsulation: ViewEncapsulation.None,
host: { class: 'app-layout' }
})

27
src/app/components/layout/app-layout/app-layout.theme.scss
View File

@@ -1,27 +0,0 @@
@mixin app-layout-theme($theme) {
.app-layout {
@include flex-column;
router-outlet[name='viewer'] + * {
width: 100%;
height: 100%;
z-index: 999;
position: absolute;
top: 0;
right: 0;
background-color: white;
}
}
@media screen and (max-width: 599px) {
.adf-app-title {
display: none;
}
}
@media screen and (max-width: 719px) {
.adf-app-logo {
display: none;
}
}
}

7
src/app/components/layout/layout.theme.scss
View File

@@ -1,7 +0,0 @@
@import './app-layout/app-layout.theme.scss';
@import '../header/header.component.scss';
@mixin layout-theme($theme) {
@include app-layout-theme($theme);
@include app-header-theme($theme);
}

40
src/app/components/permissions/permission-manager/permission-manager.component.scss Normal file
View File

@@ -0,0 +1,40 @@
aca-permissions-dialog-panel {
height: 400px;
}
.aca-node-permissions-dialog {
.mat-dialog-title {
font-size: 20px;
font-weight: 600;
font-style: normal;
font-stretch: normal;
line-height: 1.6;
margin: 0;
letter-spacing: -0.5px;
color: var(--theme-foreground-text-bold-color);
}
.mat-dialog-content {
flex: 1 1 auto;
position: relative;
overflow: auto;
adf-permission-list {
display: flex;
}
}
.mat-dialog-actions {
flex: 0 0 auto;
padding: 8px 8px 24px 8px;
display: flex;
justify-content: flex-end;
color: var(--theme-text-color);
button {
text-transform: uppercase;
font-weight: normal;
}
}
}

49
src/app/components/permissions/permission-manager/permission-manager.component.theme.scss
View File

@@ -1,49 +0,0 @@
@mixin app-permission-manager-theme($theme) {
$foreground: map-get($theme, foreground);
$accent: map-get($theme, accent);
aca-permissions-dialog-panel {
height: 400px;
}
.aca-node-permissions-dialog {
.mat-dialog-title {
font-size: 20px;
font-weight: 600;
font-style: normal;
font-stretch: normal;
line-height: 1.6;
margin: 0;
letter-spacing: -0.5px;
color: mat-color($foreground, text, 0.87);
}
.mat-dialog-content {
flex: 1 1 auto;
position: relative;
overflow: auto;
adf-permission-list {
display: flex;
}
}
.mat-dialog-actions {
flex: 0 0 auto;
padding: 8px 8px 24px 8px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
color: mat-color($foreground, text, 0.54);
button {
text-transform: uppercase;
font-weight: normal;
}
}
}
}

6
src/app/components/permissions/permission-manager/permission-manager.component.ts
View File

@@ -26,7 +26,7 @@
import { AppStore, SnackbarErrorAction } from '@alfresco/aca-shared/store';
import { NodePermissionDialogService, PermissionListComponent } from '@alfresco/adf-content-services';
import { MinimalNodeEntryEntity } from '@alfresco/js-api';
import { Component, Input, OnInit, ViewChild } from '@angular/core';
import { Component, Input, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { Store } from '@ngrx/store';
import { ContentApiService } from '@alfresco/aca-shared';
@@ -34,7 +34,9 @@ import { NodePermissionsDialogComponent } from '../permission-dialog/node-permis
@Component({
selector: 'app-permission-manager',
templateUrl: './permission-manager.component.html'
templateUrl: './permission-manager.component.html',
styleUrls: ['permission-manager.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class PermissionsManagerComponent implements OnInit {
@ViewChild('permissionList', { static: true })

24
src/app/components/search/search-results-row/search-results-row.component.scss
View File

@@ -1,12 +1,10 @@
@import 'mixins';
@mixin aca-result-row-theme($theme) {
$primary: map-get($theme, primary);
$foreground: map-get($theme, foreground);
.aca-search-results-row {
@include flex-column;
}
.aca-search-results-row {
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
overflow: hidden;
min-height: 0;
.line {
margin: 5px;
@@ -14,22 +12,22 @@
.bold {
font-weight: 400;
color: mat-color($foreground, text, 0.87);
color: var(--theme-text-bold-color);
}
.link {
text-decoration: none;
color: mat-color($foreground, text, 0.87);
color: var(--theme-text-bold-color);
}
.link:hover,
.aca-location-link .adf-datatable-cell-value:hover {
color: mat-color($primary, A200) !important;
color: var(--theme-primary-color) !important;
text-decoration: underline;
}
.adf-is-selected .link:not(:hover),
.adf-is-selected .adf-datatable-cell-value:not(:hover) {
color: mat-color($primary) !important;
color: var(--theme-primary-color) !important;
}
}

8
src/app/components/toolbar/toolbar-action/toolbar-actions.component.scss
View File

@@ -1,8 +0,0 @@
@mixin toolbar-actions-theme($theme) {
$foreground: map-get($theme, foreground);
.aca-toolbar-action {
color: mat-color($foreground, text, 0.72);
margin: 0 5px;
}
}