inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-05-12 17:04:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

turn ADF customisations into theme mixins (#409)

Browse Source 
* theming support for upload dialog customisations

* pagination theme

* about dialog theme

* update shared workspace settings for VS code

* remove hardcoded color variable

* upgrade sidenav theme

* document list theme

* upload drag area theme
This commit is contained in:
Denys Vuika 2018-06-13 18:10:46 +01:00 committed by GitHub
parent 7a0b2b979c
commit 2d7e844d8f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 296 additions and 269 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
.vscode/settings.json vendored
View File

@ -1,5 +1,6 @@
{
"cSpell.words": [
"sidenav"
]
}
"javascript.preferences.quoteStyle": "single",
"typescript.preferences.quoteStyle": "single",
"javascript.preferences.importModuleSpecifier": "relative",
"typescript.preferences.importModuleSpecifier": "relative"
}

37
src/app/components/about/about.component.scss
View File

@ -1,37 +0,0 @@
@import 'variables';
article {
color: $alfresco-secondary-text-color;
}
article:first-of-type {
padding-bottom: 0;
}
article:last-of-type {
margin-bottom: 50px;
}
header {
line-height: 24px;
font-size: 14px;
font-weight: 800;
letter-spacing: -0.2px;
}
a {
text-decoration: none;
color: $alfresco-primary-text-color;
}
.padding {
padding: 25px;
}
.padding-top-bottom {
padding: 25px 0 25px 0;
}
.padding-left-right {
padding: 0 25px 0 25px;
}

39
src/app/components/about/about.component.theme.scss Normal file
View File

@ -0,0 +1,39 @@
@mixin aca-about-component-theme($theme) {
$foreground: map-get($theme, foreground);
article {
color: mat-color($foreground, text, 0.54);
}
article:first-of-type {
padding-bottom: 0;
}
article:last-of-type {
margin-bottom: 50px;
}
header {
line-height: 24px;
font-size: 14px;
font-weight: 800;
letter-spacing: -0.2px;
}
a {
text-decoration: none;
color: mat-color($foreground, text, 0.87);
}
.padding {
padding: 25px;
}
.padding-top-bottom {
padding: 25px 0 25px 0;
}
.padding-left-right {
padding: 0 25px 0 25px;
}
}

3
src/app/components/about/about.component.ts
View File

@ -30,8 +30,7 @@ import { EcmProductVersionModel, ObjectDataTableAdapter } from '@alfresco/adf-c
@Component({
selector: 'app-about',
templateUrl: './about.component.html',
styleUrls: [ './about.component.scss' ]
templateUrl: './about.component.html'
})
export class AboutComponent implements OnInit {
ecmVersion: EcmProductVersionModel = null;

7
src/app/ui/_variables.scss
View File

@ -1,13 +1,6 @@
// Primary color palette
// - please note that Hue 2 and Enhanced Hue 1 and 2
// are missing from specs
$alfresco-app-color--default: #00bcd4;
$alfresco-app-color--hue-1: #e0f7fa;
// Grayscale
$alfresco-white: #fff;
$alfresco-black: #000;
// Dark
$alfresco-primary-text-color: rgba($alfresco-black, .87);
$alfresco-secondary-text-color: rgba($alfresco-black, .54);

9
src/app/ui/application.scss
View File

@ -2,11 +2,13 @@
@import 'variables';
@import 'theme';
$foreground: map-get($theme, foreground);
html, body {
@include flex-column;
font-size: 14px;
font-family: "Muli", sans-serif;
color: $alfresco-primary-text-color;
color: mat-color($foreground, text, 0.87);
margin: 0;
& > main {
@ -24,8 +26,3 @@ ng-component {
}
@import 'layout';
@import './overrides/adf-sidenav-layout';
@import './overrides/alfresco-document-list';
@import './overrides/alfresco-upload-drag-area';
@import './overrides/alfresco-upload-dialog';

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

@ -2,11 +2,18 @@
@import '~@alfresco/adf-content-services/theming';
@import '../components/sidenav/sidenav.component.theme';
@import '../components/about/about.component.theme';
@import './overrides/adf-toolbar.theme';
@import './overrides/adf-search-filter.theme';
@import './overrides/adf-info-drawer.theme';
@import './overrides/adf-upload-button.theme';
@import './overrides/adf-sidebar-action-menu.theme';
@import './overrides/adf-upload-dialog.theme';
@import './overrides/adf-pagination.theme';
@import './overrides/adf-sidenav-layout.theme';
@import './overrides/adf-document-list.theme';
@import './overrides/adf-upload-drag-area.theme';
@import 'snackbar';
$grey-scale: (
@ -50,11 +57,17 @@ $custom-theme-warn: mat-palette($alfresco-warn);
$custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent);
@mixin custom-theme($theme) {
@include sidenav-component-theme($custom-theme);
@include adf-toolbar-theme($custom-theme);
@include snackbar-theme($custom-theme);
@include adf-search-filter-theme($custom-theme);
@include adf-info-drawer-theme($custom-theme);
@include adf-upload-button-theme($custom-theme);
@include adf-sidebar-action-menu-theme($custom-theme);
@include adf-pagination-theme($custom-theme);
@include adf-sidenav-layout-theme($custom-theme);
@include adf-document-list-theme($custom-theme);
@include adf-upload-drag-area-theme($custom-theme);
@include snackbar-theme($custom-theme);
@include sidenav-component-theme($custom-theme);
@include aca-about-component-theme($custom-theme);
}

18
src/app/ui/overrides/_adf-sidenav-layout.scss
View File

@ -1,18 +0,0 @@
@import 'mixins';
adf-sidenav-layout {
@include flex-column;
.mat-drawer-content {
@include flex-column;
overflow: auto;
}
}
.sidenav-layout {
@include flex-column;
}
.mat-drawer-content>div, .mat-drawer-content>div>div {
@include flex-column;
}

86
src/app/ui/overrides/_alfresco-document-list.scss
View File

@ -1,86 +0,0 @@
@import 'variables';
@import 'mixins';
adf-document-list {
@include flex-column;
background-color: white; // TODO: remove when ADF 2.4.0 is out.
}
adf-datatable {
@include flex-column;
overflow-y: scroll;
}
.adf-data-table {
border: none !important;
.adf-datatable-header, .adf-datatable-row, .adf-data-table-cell {
color: $alfresco-secondary-text-color;
&:focus {
outline: none !important;
}
}
.adf-datatable-table-cell-header:focus {
outline: none !important;
}
.adf-datatable-body .adf-datatable-row {
&:hover, &:focus {
background-color: $alfresco-app-color--hue-1;
}
&.is-selected, &.is-selected:hover {
background-color: $alfresco-app-color--hue-1;
}
}
.adf-data-table-cell, .adf-datatable-header {
width: 100%;
text-align: left;
}
.adf-datatable-body .adf-data-table-cell--image {
padding-left: 24px;
padding-right: 0;
width: 10px;
}
.adf-data-table-cell--ellipsis .cell-value,
.adf-data-table-cell--ellipsis__name .cell-value {
display: flex;
align-items: center;
}
.adf-data-table-cell--ellipsis .adf-datatable-cell,
.adf-data-table-cell--ellipsis__name .adf-datatable-cell {
white-space: nowrap;
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
.adf-data-table-cell--ellipsis .adf-datatable-cell {
max-width: 7vw;
}
.adf-data-table-cell--ellipsis__name .adf-datatable-cell {
position: absolute;
max-width: calc(100% - 2em);
}
.adf-datatable-row:last-child .adf-datatable-table-cell {
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
&.adf-data-table--empty {
.adf-datatable-row:hover,
.adf-datatable-row:focus {
background-color: unset;
}
}
}
.adf-pagination__empty {
display: none;
}

31
src/app/ui/overrides/_alfresco-upload-dialog.scss
View File

@ -1,31 +0,0 @@
@import 'variables';
$alfresco-primary-accent--hue-3: #ff6d00;
$alfresco-warn-color--hue-3: #d50000;
$alfresco-dark-color--hue-3: #546e7a;
.upload-dialog {
z-index: 999;
}
.adf-file-uploading-row {
&__status {
&--done {
color: $alfresco-app-color--default !important;
}
&--error {
color: $alfresco-primary-accent--hue-3 !important;
}
}
&__action {
&--cancel {
color: $alfresco-warn-color--hue-3 !important;
}
&--remove {
color: $alfresco-dark-color--hue-3 !important;
}
}
}

76
src/app/ui/overrides/_alfresco-upload-drag-area.scss
View File

@ -1,76 +0,0 @@
@import 'mixins';
@import 'variables.scss';
@mixin file-draggable__input-focus {
color: $alfresco-secondary-text-color !important;
border: 1px solid $alfresco-app-color--default !important;
margin-left: 0 !important;
}
adf-upload-drag-area {
@include flex-column;
.upload-border {
@include flex-column;
vertical-align: unset;
text-align: unset;
}
}
adf-upload-drag-area:first-child {
& > div {
adf-upload-drag-area {
.file-draggable__input-focus {
@include file-draggable__input-focus;
}
}
}
.upload-border {
vertical-align: inherit !important;
text-align: inherit !important;
}
.file-draggable__input-focus {
color: none !important;
border: none !important;
margin-left: 0 !important;
adf-upload-drag-area {
& > div {
@include file-draggable__input-focus;
}
}
}
}
adf-upload-drag-area {
.file-draggable__input-focus {
adf-document-list {
background: $alfresco-app-color--hue-1;
adf-datatable > table {
background: inherit;
}
}
}
.adf-upload__dragging {
background: $alfresco-app-color--hue-1;
color: $alfresco-secondary-text-color !important;
}
.adf-upload__dragging td {
border-top: 1px solid $alfresco-app-color--default !important;
border-bottom: 1px solid $alfresco-app-color--default !important;
&:first-child {
border-left: 1px solid $alfresco-app-color--default !important;
}
&:last-child {
border-right: 1px solid $alfresco-app-color--default !important;
}
}
}

92
src/app/ui/overrides/adf-document-list.theme.scss Normal file
View File

@ -0,0 +1,92 @@
@import 'variables';
@import 'mixins';
@mixin adf-document-list-theme($theme) {
$foreground: map-get($theme, foreground);
$primary: map-get($theme, primary);
adf-document-list {
@include flex-column;
background-color: white; // TODO: remove when ADF 2.4.0 is out.
}
adf-datatable {
@include flex-column;
overflow-y: scroll;
}
.adf-data-table {
border: none !important;
.adf-datatable-selected > svg {
// fill: mat-color($primary);
fill: #2196f3;
}
.adf-datatable-header, .adf-datatable-row, .adf-data-table-cell {
color: mat-color($foreground, text, 0.54);
&:focus {
outline: none !important;
}
}
.adf-datatable-table-cell-header:focus {
outline: none !important;
}
.adf-datatable-body .adf-datatable-row {
&:hover, &:focus {
background-color: #e0f7fa;
}
&.is-selected, &.is-selected:hover {
background-color: #e0f7fa;
}
}
.adf-data-table-cell, .adf-datatable-header {
width: 100%;
text-align: left;
}
.adf-datatable-body .adf-data-table-cell--image {
padding-left: 24px;
padding-right: 0;
width: 10px;
}
.adf-data-table-cell--ellipsis .cell-value,
.adf-data-table-cell--ellipsis__name .cell-value {
display: flex;
align-items: center;
}
.adf-data-table-cell--ellipsis .adf-datatable-cell,
.adf-data-table-cell--ellipsis__name .adf-datatable-cell {
white-space: nowrap;
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
.adf-data-table-cell--ellipsis .adf-datatable-cell {
max-width: 7vw;
}
.adf-data-table-cell--ellipsis__name .adf-datatable-cell {
position: absolute;
max-width: calc(100% - 2em);
}
.adf-datatable-row:last-child .adf-datatable-table-cell {
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
&.adf-data-table--empty {
.adf-datatable-row:hover,
.adf-datatable-row:focus {
background-color: unset;
}
}
}
}

7
src/app/ui/overrides/adf-pagination.theme.scss Normal file
View File

@ -0,0 +1,7 @@
@mixin adf-pagination-theme($theme) {
.adf-pagination {
&.adf-pagination__empty {
display: none;
}
}
}

20
src/app/ui/overrides/adf-sidenav-layout.theme.scss Normal file
View File

@ -0,0 +1,20 @@
@import 'mixins';
@mixin adf-sidenav-layout-theme($theme) {
adf-sidenav-layout {
@include flex-column;
.mat-drawer-content {
@include flex-column;
overflow: auto;
}
}
.sidenav-layout {
@include flex-column;
}
.mat-drawer-content>div, .mat-drawer-content>div>div {
@include flex-column;
}
}

31
src/app/ui/overrides/adf-upload-dialog.theme.scss Normal file
View File

@ -0,0 +1,31 @@
@mixin adf-upload-dialog-theme($theme) {
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$warn: map-get($theme, warn);
.upload-dialog {
z-index: 999;
}
.adf-file-uploading-row {
&__status {
&--done {
color: mat-color($accent);
}
&--error {
color: mat-color($warn);
}
}
&__action {
&--cancel {
color: mat-color($warn);
}
&--remove {
color: mat-color($warn);
}
}
}
}

83
src/app/ui/overrides/adf-upload-drag-area.theme.scss Normal file
View File

@ -0,0 +1,83 @@
@import 'mixins';
$alfresco-app-color--default: #00bcd4;
@mixin file-draggable__input-focus($theme) {
$foreground: map-get($theme, foreground);
color: mat-color($foreground, text, 0.54);
border: 1px solid $alfresco-app-color--default !important;
margin-left: 0 !important;
}
@mixin adf-upload-drag-area-theme($theme) {
$foreground: map-get($theme, foreground);
adf-upload-drag-area {
@include flex-column;
.upload-border {
@include flex-column;
vertical-align: unset;
text-align: unset;
}
}
adf-upload-drag-area:first-child {
& > div {
adf-upload-drag-area {
.file-draggable__input-focus {
@include file-draggable__input-focus($theme);
}
}
}
.upload-border {
vertical-align: inherit !important;
text-align: inherit !important;
}
.file-draggable__input-focus {
color: none !important;
border: none !important;
margin-left: 0 !important;
adf-upload-drag-area {
& > div {
@include file-draggable__input-focus($theme);
}
}
}
}
adf-upload-drag-area {
.file-draggable__input-focus {
adf-document-list {
background: #e0f7fa;
adf-datatable > table {
background: inherit;
}
}
}
.adf-upload__dragging {
background: #e0f7fa;
color: mat-color($foreground, text, 0.54);
}
.adf-upload__dragging td {
border-top: 1px solid $alfresco-app-color--default !important;
border-bottom: 1px solid $alfresco-app-color--default !important;
&:first-child {
border-left: 1px solid $alfresco-app-color--default !important;
}
&:last-child {
border-right: 1px solid $alfresco-app-color--default !important;
}
}
}
}