mirror of
https://github.com/Alfresco/alfresco-content-app.git
synced 2025-07-24 17:31:52 +00:00
[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:
committed by
Denys Vuika
parent
2029a11774
commit
9f127c0530
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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' }
|
||||
})
|
||||
|
@@ -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>
|
||||
|
@@ -0,0 +1,11 @@
|
||||
.adf-file-uploading-row__version {
|
||||
flex: 0;
|
||||
|
||||
.mat-chip {
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
.mat-chip.mat-chip-disabled {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
@@ -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() {
|
||||
|
@@ -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);
|
||||
|
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@@ -25,5 +25,6 @@
|
||||
.mat-drawer-content > div,
|
||||
.mat-drawer-content > div > div {
|
||||
@include flex-column;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
@@ -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;
|
||||
|
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
@@ -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 {
|
||||
|
@@ -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
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user