[ACA-2328] style cleanup to prepare for move css overrides to ADF (#1055)

* [ACA-2139] remove style override

- was added on ADF component since 3.0.0

* [ACA-2149] prepare for moving adf-upload-dialog style to ADF

- separate new styling from overrides

* [ACA-2148] just delete without moving to ADF

- since we no longer use the adf-upload-button anywhere in ACA

* [ACA-2150] refactor adf-upload-drag-area code

* [ACA-2150] more refactor adf-upload-drag-area scss

* [ACA-2150] change variable naming on adf-upload-drag-area scss

* [ACA-2141] fix adf-info-drawer height

- and mark code that could be removed in the future - without moving to ADF

* [ACA-2147] prepare adf-toolbar code to be moved to ADF

* [ACA-2141] remove not needed styles

- already set inside the adf-version-manager styling

* [ACA-2146] prepare adf-sidenav-layout code to be moved to ADF

* [ACA-2144] remove no more needed styles for facet-buttons

- styles for adf-facet-buttons are applied in ADF 3.1.0

* [ACA-2150] fix reset 'parent' color on adf-upload-drag-area

* [ACA-2150] refactor adf-upload-drag-area code

- to easier to move to ADF

* [ACA-2141] better fix for adf-info-drawer height

* [ACA-2147] rename css class to prepare adf-toolbar code to be moved to ADF
This commit is contained in:
Suzana Dirla
2019-04-05 14:38:08 +03:00
committed by Denys Vuika
parent 2029a11774
commit 9f127c0530
21 changed files with 98 additions and 177 deletions

View File

@@ -3,7 +3,7 @@
<adf-breadcrumb root="APP.BROWSE.LIBRARIES.MENU.FAVORITE_LIBRARIES.TITLE">
</adf-breadcrumb>
<adf-toolbar class="inline">
<adf-toolbar class="adf-toolbar--inline">
<ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
<aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
</ng-container>

View File

@@ -2,7 +2,7 @@
<app-page-layout-header>
<adf-breadcrumb root="APP.BROWSE.FAVORITES.TITLE"> </adf-breadcrumb>
<adf-toolbar class="inline">
<adf-toolbar class="adf-toolbar--inline">
<ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
<aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
</ng-container>

View File

@@ -8,7 +8,7 @@
>
</adf-breadcrumb>
<adf-toolbar class="inline">
<adf-toolbar class="adf-toolbar--inline">
<ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
<aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
</ng-container>

View File

@@ -3,7 +3,7 @@
<adf-breadcrumb root="APP.BROWSE.LIBRARIES.MENU.MY_LIBRARIES.TITLE">
</adf-breadcrumb>
<adf-toolbar class="inline">
<adf-toolbar class="adf-toolbar--inline">
<ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
<aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
</ng-container>

View File

@@ -2,7 +2,7 @@
<app-page-layout-header>
<adf-breadcrumb root="APP.BROWSE.RECENT.TITLE"> </adf-breadcrumb>
<adf-toolbar class="inline">
<adf-toolbar class="adf-toolbar--inline">
<ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
<aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
</ng-container>

View File

@@ -1,7 +1,7 @@
<app-page-layout>
<app-page-layout-header>
<adf-breadcrumb root="APP.BROWSE.SEARCH_LIBRARIES.TITLE"> </adf-breadcrumb>
<adf-toolbar class="inline">
<adf-toolbar class="adf-toolbar--inline">
<ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
<aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
</ng-container>

View File

@@ -1,7 +1,7 @@
<app-page-layout>
<app-page-layout-header>
<adf-breadcrumb root="APP.BROWSE.SEARCH.TITLE"> </adf-breadcrumb>
<adf-toolbar class="inline">
<adf-toolbar class="adf-toolbar--inline">
<ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
<aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
</ng-container>

View File

@@ -2,7 +2,7 @@
<app-page-layout-header>
<adf-breadcrumb root="APP.BROWSE.SHARED.TITLE"> </adf-breadcrumb>
<adf-toolbar class="inline">
<adf-toolbar class="adf-toolbar--inline">
<ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
<aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
</ng-container>

View File

@@ -30,6 +30,13 @@ import { AppExtensionService } from '../../../extensions/extension.service';
@Component({
selector: 'app-toolbar-menu-item',
templateUrl: 'toolbar-menu-item.component.html',
styles: [
`
.app-toolbar-menu-item:last-child > .mat-divider-horizontal {
display: none;
}
`
],
encapsulation: ViewEncapsulation.None,
host: { class: 'app-toolbar-menu-item' }
})

View File

@@ -2,7 +2,7 @@
<app-page-layout-header>
<adf-breadcrumb root="APP.BROWSE.TRASHCAN.TITLE"> </adf-breadcrumb>
<adf-toolbar class="inline">
<adf-toolbar class="adf-toolbar--inline">
<ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
<aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
</ng-container>

View File

@@ -0,0 +1,11 @@
.adf-file-uploading-row__version {
flex: 0;
.mat-chip {
padding: 2px 6px;
}
.mat-chip.mat-chip-disabled {
opacity: 1;
}
}

View File

@@ -15,11 +15,13 @@
* limitations under the License.
*/
import { Component } from '@angular/core';
import { Component, ViewEncapsulation } from '@angular/core';
import { FileUploadingListRowComponent } from '@alfresco/adf-content-services';
@Component({
selector: 'app-file-uploading-list-row',
templateUrl: './file-uploading-list-row.component.html'
templateUrl: './file-uploading-list-row.component.html',
styleUrls: ['./file-uploading-list-row.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class AppFileUploadingListRowComponent extends FileUploadingListRowComponent {
isUploadVersion() {

View File

@@ -17,14 +17,12 @@
@import './overrides/adf-toolbar.theme';
@import './overrides/adf-search-filter.theme';
@import './overrides/adf-info-drawer.theme';
@import './overrides/adf-upload-button.theme';
@import './overrides/adf-upload-dialog.theme';
@import './overrides/adf-pagination.theme';
@import './overrides/adf-sidenav-layout.theme';
@import './overrides/adf-document-list.theme';
@import './overrides/adf-upload-drag-area.theme';
@import './overrides/adf-search-sorting-picker.theme';
@import './overrides/adf-content-node-selector.theme';
@import './overrides/adf-version-manager.theme';
@import 'snackbar';
@@ -73,13 +71,11 @@ $custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent);
@include adf-toolbar-theme($theme);
@include adf-search-filter-theme($theme);
@include adf-info-drawer-theme($theme);
@include adf-upload-button-theme($theme);
@include adf-pagination-theme($theme);
@include adf-sidenav-layout-theme($theme);
@include adf-document-list-theme($theme);
@include adf-upload-drag-area-theme($theme);
@include adf-search-sorting-picker-theme($theme);
@include adf-content-node-selector-theme($theme);
@include adf-version-manager-theme($theme);
@include layout-theme($theme);

View File

@@ -1,9 +0,0 @@
@mixin adf-content-node-selector-theme($theme) {
adf-content-node-selector {
.adf-content-node-selector-content-breadcrumb {
.adf-current-folder {
font-weight: 600;
}
}
}
}

View File

@@ -1,13 +1,20 @@
@import 'mixins';
@mixin adf-info-drawer-theme($theme) {
$foreground: map-get($theme, foreground);
$accent: map-get($theme, accent);
$icon-size: 48px;
.adf-info-drawer {
@include flex-column;
.adf-info-drawer-layout {
height: 100%;
@include flex-column;
overflow: auto;
.mat-tab-label {
// cannot move this color style to ADF, but:
// check if this is still needed after ADF upgrades @angular/material version to be > 7.1.0
color: mat-color($accent);
}
@@ -31,31 +38,5 @@
}
}
}
.adf-version-list-container {
.adf-version-list {
height: auto;
}
.mat-list .mat-list-item {
&.mat-3-line {
display: flex;
align-items: center;
height: 100%;
min-height: 88px;
}
.mat-list-item-content {
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
}
.mat-line.adf-version-list-item-comment {
overflow: visible;
white-space: pre-wrap;
}
}
}
}
}

View File

@@ -11,17 +11,5 @@
.mat-radio-label {
color: mat-color($foreground, text, 0.54);
}
.facet-buttons {
text-align: right;
.mat-button {
text-transform: uppercase;
}
&--topSpace {
padding-top: 15px;
}
}
}
}

View File

@@ -25,5 +25,6 @@
.mat-drawer-content > div,
.mat-drawer-content > div > div {
@include flex-column;
overflow: auto;
}
}

View File

@@ -1,10 +1,9 @@
$adf-toolbar-single-row-height: 48px;
$adf-toolbar-padding: 14px;
@mixin adf-toolbar-theme($theme) {
$foreground: map-get($theme, foreground);
.app-toolbar-menu-item:last-child > .mat-divider-horizontal {
display: none;
}
.adf-viewer {
.adf-toolbar {
.mat-toolbar {
@@ -17,11 +16,11 @@
@include angular-material-theme($theme);
.mat-toolbar-single-row {
padding: 0 14px;
height: 48px;
padding: 0 $adf-toolbar-padding;
height: $adf-toolbar-single-row-height;
}
&.inline {
&.adf-toolbar--inline {
.mat-toolbar {
background-color: inherit;
border: none !important;

View File

@@ -1,50 +0,0 @@
@mixin adf-upload-button-theme($theme) {
$foreground: map-get($theme, foreground);
$accent: map-get($theme, accent);
$primary: map-get($theme, primary);
adf-upload-button {
.mat-raised-button.mat-primary {
width: 100%;
border-radius: 0;
text-align: left;
line-height: 48px;
box-shadow: none;
transform: none;
transition: unset;
background-color: transparent;
}
.mat-raised-button.mat-primary:hover:not([disabled]) {
background-color: mat-color($foreground, text, 0.04);
}
.mat-raised-button.mat-primary[disabled] {
background: none;
}
.mat-raised-button.mat-primary[disabled] label {
color: mat-color($foreground, text, 0.38);
}
.mat-raised-button:not([disabled]):active {
box-shadow: none;
}
mat-icon {
color: mat-color($foreground, text, 0.54);
}
label {
font-weight: normal;
text-align: left;
margin-left: 12px;
color: mat-color($primary);
}
&:hover label {
color: mat-color($accent);
opacity: inherit;
}
}
}

View File

@@ -15,18 +15,6 @@
display: flex;
justify-content: flex-end;
}
&__version {
flex: 0;
.mat-chip {
padding: 2px 6px;
}
.mat-chip.mat-chip-disabled {
opacity: 1;
}
}
}
.adf-file-uploading-row {

View File

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