mirror of
https://github.com/Alfresco/alfresco-content-app.git
synced 2025-07-24 17:31:52 +00:00
style and theming fixes (#428)
* fix generic error text and styles * search input layout and style fixes * settings theme * layout theme support * current user theme * theming support for header component * disable "use-host-property-decorator" tslint rule * sorting picker button theme
This commit is contained in:
@@ -30,13 +30,13 @@ import { UserInfo } from './user-info';
|
||||
export class Header extends Component {
|
||||
private locators = {
|
||||
logoLink: by.css('.app-menu__title'),
|
||||
userInfo: by.css('app-current-user')
|
||||
userInfo: by.css('aca-current-user')
|
||||
};
|
||||
|
||||
logoLink: ElementFinder = this.component.element(this.locators.logoLink);
|
||||
userInfo: UserInfo = new UserInfo(this.component);
|
||||
|
||||
constructor(ancestor?: ElementFinder) {
|
||||
super('app-header', ancestor);
|
||||
super('aca-header', ancestor);
|
||||
}
|
||||
}
|
||||
|
@@ -40,7 +40,7 @@ export class UserInfo extends Component {
|
||||
menu: Menu = new Menu();
|
||||
|
||||
constructor(ancestor?: ElementFinder) {
|
||||
super('app-current-user', ancestor);
|
||||
super('aca-current-user', ancestor);
|
||||
}
|
||||
|
||||
openMenu(): promise.Promise<Menu> {
|
||||
|
@@ -1,8 +1,7 @@
|
||||
<div>
|
||||
<div title="{{ user?.id }}">
|
||||
<div class="current-user__full-name">{{ userName }}</div>
|
||||
<div
|
||||
class="current-user__avatar am-avatar am-avatar--light"
|
||||
class="current-user__avatar am-avatar"
|
||||
[matMenuTriggerFor]="userMenu">
|
||||
{{ userInitials }}
|
||||
</div>
|
||||
@@ -22,4 +21,3 @@
|
||||
<mat-menu #langMenu="matMenu">
|
||||
<adf-language-menu></adf-language-menu>
|
||||
</mat-menu>
|
||||
</div>
|
||||
|
@@ -1,49 +0,0 @@
|
||||
@import 'variables';
|
||||
|
||||
$am-avatar-size: 40px;
|
||||
|
||||
$am-avatar-light-bg: rgba(white, .15);
|
||||
$am-avatar-dark-bg: rgba(black, .15);
|
||||
|
||||
:host {
|
||||
font-weight: lighter;
|
||||
position: relative;
|
||||
|
||||
color: $alfresco-white;
|
||||
line-height: 20px;
|
||||
|
||||
.am-avatar {
|
||||
margin-left: 5px;
|
||||
cursor: pointer;
|
||||
|
||||
display: inline-block;
|
||||
width: $am-avatar-size;
|
||||
height: $am-avatar-size;
|
||||
line-height: $am-avatar-size;
|
||||
font-size: 1.2em;
|
||||
text-align: center;
|
||||
color: inherit;
|
||||
border-radius: 100%;
|
||||
|
||||
&--light {
|
||||
background: $am-avatar-light-bg;
|
||||
}
|
||||
|
||||
&--dark {
|
||||
background: $am-avatar-dark-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.current-user__full-name {
|
||||
width: 100px;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display:inline-block;
|
||||
height: 20px;
|
||||
font-size: 14px;
|
||||
line-height: 1.43;
|
||||
letter-spacing: -0.2px;
|
||||
}
|
||||
}
|
@@ -0,0 +1,38 @@
|
||||
@mixin aca-current-user-theme($theme) {
|
||||
$background: map-get($theme, background);
|
||||
$am-avatar-size: 40px;
|
||||
|
||||
.aca-current-user {
|
||||
font-weight: lighter;
|
||||
position: relative;
|
||||
color: mat-color($background, card);
|
||||
line-height: 20px;
|
||||
|
||||
.am-avatar {
|
||||
margin-left: 5px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
width: $am-avatar-size;
|
||||
height: $am-avatar-size;
|
||||
line-height: $am-avatar-size;
|
||||
font-size: 1.2em;
|
||||
text-align: center;
|
||||
color: inherit;
|
||||
border-radius: 100%;
|
||||
background-color: mat-color($background, card, .15);
|
||||
}
|
||||
|
||||
.current-user__full-name {
|
||||
width: 100px;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display:inline-block;
|
||||
height: 20px;
|
||||
font-size: 14px;
|
||||
line-height: 1.43;
|
||||
letter-spacing: -0.2px;
|
||||
}
|
||||
}
|
||||
}
|
@@ -23,14 +23,15 @@
|
||||
* along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import { Component, OnInit, OnDestroy } from '@angular/core';
|
||||
import { Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
|
||||
import { PeopleContentService } from '@alfresco/adf-core';
|
||||
import { Subscription } from 'rxjs/Rx';
|
||||
|
||||
@Component({
|
||||
selector: 'app-current-user',
|
||||
selector: 'aca-current-user',
|
||||
templateUrl: './current-user.component.html',
|
||||
styleUrls: [ './current-user.component.scss' ]
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { class: 'aca-current-user' }
|
||||
})
|
||||
export class CurrentUserComponent implements OnInit, OnDestroy {
|
||||
private subscriptions: Subscription[] = [];
|
||||
|
@@ -94,7 +94,7 @@
|
||||
</div>
|
||||
|
||||
<div [attr.class]="isValidPath ? 'inner-layout__content--hide' : 'inner-layout__content'">
|
||||
<app-generic-error></app-generic-error>
|
||||
<aca-generic-error></aca-generic-error>
|
||||
</div>
|
||||
|
||||
<div [attr.class]="!isValidPath ? 'inner-layout__content--hide' : 'inner-layout__content'">
|
||||
|
@@ -1,4 +1,4 @@
|
||||
<div class="generic-error">
|
||||
<mat-icon>ic_error</mat-icon>
|
||||
<p class="generic-error__title">This file / folder no longer exists or you don't have permission to view it.</p>
|
||||
</div>
|
||||
<p class="generic-error__title">
|
||||
{{ 'APP.MESSAGES.ERRORS.MISSING_CONTENT' | translate }}
|
||||
</p>
|
||||
|
@@ -1,25 +0,0 @@
|
||||
@import 'variables';
|
||||
|
||||
$alfresco-warn-color--hue-2: #ff5252;
|
||||
|
||||
.generic-error {
|
||||
color: $alfresco-secondary-text-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&__title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
mat-icon {
|
||||
color: $alfresco-warn-color--hue-2;
|
||||
direction: rtl;
|
||||
font-size: 52px;
|
||||
height: 52px;
|
||||
width: 52px;
|
||||
}
|
||||
}
|
@@ -0,0 +1,27 @@
|
||||
@mixin aca-generic-error-theme($theme) {
|
||||
$warn: map-get($theme, warn);
|
||||
$foreground: map-get($theme, foreground);
|
||||
|
||||
.aca-generic-error {
|
||||
color: mat-color($foreground, text, 0.54);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&__title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
mat-icon {
|
||||
color: mat-color($warn);
|
||||
direction: rtl;
|
||||
font-size: 52px;
|
||||
height: 52px;
|
||||
width: 52px;
|
||||
}
|
||||
}
|
||||
}
|
@@ -23,12 +23,14 @@
|
||||
* along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import { Component } from '@angular/core';
|
||||
import { Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-generic-error',
|
||||
styleUrls: ['./generic-error.component.scss'],
|
||||
templateUrl: './generic-error.component.html'
|
||||
selector: 'aca-generic-error',
|
||||
templateUrl: './generic-error.component.html',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
host: { class: 'aca-generic-error' }
|
||||
})
|
||||
export class GenericErrorComponent {}
|
||||
|
||||
|
@@ -16,9 +16,9 @@
|
||||
|
||||
<div class="adf-toolbar--spacer"></div>
|
||||
|
||||
<app-search-input></app-search-input>
|
||||
<aca-search-input></aca-search-input>
|
||||
|
||||
<adf-toolbar-divider></adf-toolbar-divider>
|
||||
|
||||
<app-current-user></app-current-user>
|
||||
<aca-current-user></aca-current-user>
|
||||
</adf-toolbar>
|
||||
|
@@ -1,55 +0,0 @@
|
||||
@import 'variables';
|
||||
|
||||
$app-menu-height: 64px;
|
||||
|
||||
.app-menu {
|
||||
height: $app-menu-height;
|
||||
|
||||
&.adf-toolbar {
|
||||
.mat-toolbar {
|
||||
background-color: inherit;
|
||||
font-family: inherit;
|
||||
min-height: $app-menu-height;
|
||||
height: $app-menu-height;
|
||||
|
||||
.mat-toolbar-layout {
|
||||
height: $app-menu-height;
|
||||
|
||||
.mat-toolbar-row {
|
||||
height: $app-menu-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-toolbar-divider {
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
|
||||
& > div {
|
||||
background-color: $alfresco-white !important;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-toolbar-title {
|
||||
color: $alfresco-white;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.app-menu__title {
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
margin-left: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
|
||||
&> img {
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
59
src/app/components/header/header.component.theme.scss
Normal file
59
src/app/components/header/header.component.theme.scss
Normal file
@@ -0,0 +1,59 @@
|
||||
@mixin aca-header-theme($theme) {
|
||||
$background: map-get($theme, background);
|
||||
$app-menu-height: 64px;
|
||||
|
||||
.aca-header {
|
||||
|
||||
.app-menu {
|
||||
height: $app-menu-height;
|
||||
|
||||
&.adf-toolbar {
|
||||
.mat-toolbar {
|
||||
background-color: inherit;
|
||||
font-family: inherit;
|
||||
min-height: $app-menu-height;
|
||||
height: $app-menu-height;
|
||||
|
||||
.mat-toolbar-layout {
|
||||
height: $app-menu-height;
|
||||
|
||||
.mat-toolbar-row {
|
||||
height: $app-menu-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-toolbar-divider {
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
|
||||
& > div {
|
||||
background-color: mat-color($background, card);
|
||||
}
|
||||
}
|
||||
|
||||
.adf-toolbar-title {
|
||||
color: mat-color($background, card);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.app-menu__title {
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
margin-left: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
|
||||
&> img {
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
@@ -30,10 +30,10 @@ import { AppStore } from '../../store/states/app.state';
|
||||
import { selectHeaderColor, selectAppName, selectLogoPath } from '../../store/selectors/app.selectors';
|
||||
|
||||
@Component({
|
||||
selector: 'app-header',
|
||||
selector: 'aca-header',
|
||||
templateUrl: './header.component.html',
|
||||
styleUrls: [ './header.component.scss' ],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { class: 'aca-header' }
|
||||
})
|
||||
export class HeaderComponent {
|
||||
@Output() menu: EventEmitter<any> = new EventEmitter<any>();
|
||||
|
@@ -15,7 +15,7 @@
|
||||
|
||||
<adf-sidenav-layout-header>
|
||||
<ng-template let-toggleMenu="toggleMenu">
|
||||
<app-header (menu)="toggleMenu()"></app-header>
|
||||
<aca-header (menu)="toggleMenu()"></aca-header>
|
||||
</ng-template>
|
||||
</adf-sidenav-layout-header>
|
||||
|
||||
|
@@ -41,10 +41,7 @@ import { NavigateToLocationAction } from '../../store/actions';
|
||||
`,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
// tslint:disable-next-line:use-host-property-decorator
|
||||
host: {
|
||||
'class': 'app-location-link adf-location-cell'
|
||||
}
|
||||
host: { 'class': 'app-location-link adf-location-cell' }
|
||||
})
|
||||
export class LocationLinkComponent implements OnInit {
|
||||
|
||||
|
@@ -37,7 +37,6 @@ import { PageComponent } from '../page.component';
|
||||
templateUrl: 'preview.component.html',
|
||||
styleUrls: ['preview.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
// tslint:disable-next-line:use-host-property-decorator
|
||||
host: { 'class': 'app-preview' }
|
||||
})
|
||||
export class PreviewComponent extends PageComponent implements OnInit {
|
||||
|
@@ -1,4 +1,3 @@
|
||||
<div class="adf-search-control-wrapper">
|
||||
<button mat-icon-button
|
||||
*ngIf="onSearchResults"
|
||||
id="adf-search-button"
|
||||
@@ -14,4 +13,3 @@
|
||||
(submit)="onSearchSubmit($event)"
|
||||
(searchChange)="onSearchChange($event)">
|
||||
</adf-search-control>
|
||||
</div>
|
||||
|
@@ -1,23 +0,0 @@
|
||||
@import 'variables';
|
||||
|
||||
adf-search-control {
|
||||
color: $alfresco-white;
|
||||
}
|
||||
|
||||
.adf-search-control-wrapper {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
|
||||
.adf-search-button {
|
||||
left: -15px;
|
||||
margin-left: 13px;
|
||||
align-items: flex-start;
|
||||
font: 400 11px system-ui;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
@@ -0,0 +1,28 @@
|
||||
@mixin aca-search-input-theme($theme) {
|
||||
$background: map-get($theme, background);
|
||||
|
||||
.aca-search-input{
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
|
||||
.adf-search-control {
|
||||
color: mat-color($background, card);
|
||||
|
||||
.mat-form-field-underline {
|
||||
background-color: mat-color($background, card);
|
||||
}
|
||||
}
|
||||
|
||||
.adf-search-button {
|
||||
left: -15px;
|
||||
margin-left: 13px;
|
||||
align-items: flex-start;
|
||||
font: 400 11px system-ui;
|
||||
color: mat-color($background, card);
|
||||
}
|
||||
}
|
||||
}
|
@@ -23,7 +23,7 @@
|
||||
* along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import {
|
||||
NavigationEnd, PRIMARY_OUTLET, Router, RouterEvent, UrlSegment, UrlSegmentGroup,
|
||||
UrlTree
|
||||
@@ -32,9 +32,10 @@ import { MinimalNodeEntity } from 'alfresco-js-api';
|
||||
import { SearchControlComponent } from '@alfresco/adf-content-services';
|
||||
|
||||
@Component({
|
||||
selector: 'app-search-input',
|
||||
selector: 'aca-search-input',
|
||||
templateUrl: 'search-input.component.html',
|
||||
styleUrls: ['search-input.component.scss']
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { class: 'aca-search-input' }
|
||||
})
|
||||
export class SearchInputComponent implements OnInit {
|
||||
|
||||
|
@@ -1,69 +0,0 @@
|
||||
@import 'variables';
|
||||
|
||||
.app-settings {
|
||||
.settings-input {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.settings-buttons {
|
||||
text-align: right;
|
||||
|
||||
.mat-button {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
$app-menu-height: 64px;
|
||||
|
||||
.app-menu {
|
||||
height: $app-menu-height;
|
||||
|
||||
&.adf-toolbar {
|
||||
.mat-toolbar {
|
||||
background-color: inherit;
|
||||
font-family: inherit;
|
||||
min-height: $app-menu-height;
|
||||
height: $app-menu-height;
|
||||
|
||||
.mat-toolbar-layout {
|
||||
height: $app-menu-height;
|
||||
|
||||
.mat-toolbar-row {
|
||||
height: $app-menu-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-toolbar-divider {
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
|
||||
& > div {
|
||||
background-color: $alfresco-white !important;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-toolbar-title {
|
||||
color: $alfresco-white;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.app-menu__title {
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
margin-left: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
|
||||
&> img {
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
70
src/app/components/settings/settings.component.theme.scss
Normal file
70
src/app/components/settings/settings.component.theme.scss
Normal file
@@ -0,0 +1,70 @@
|
||||
@mixin aca-settings-theme($theme) {
|
||||
$background: map-get($theme, background);
|
||||
$app-menu-height: 64px;
|
||||
|
||||
.aca-settings {
|
||||
.settings-input {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.settings-buttons {
|
||||
text-align: right;
|
||||
|
||||
.mat-button {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.app-menu {
|
||||
height: $app-menu-height;
|
||||
|
||||
&.adf-toolbar {
|
||||
.mat-toolbar {
|
||||
background-color: inherit;
|
||||
font-family: inherit;
|
||||
min-height: $app-menu-height;
|
||||
height: $app-menu-height;
|
||||
|
||||
.mat-toolbar-layout {
|
||||
height: $app-menu-height;
|
||||
|
||||
.mat-toolbar-row {
|
||||
height: $app-menu-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-toolbar-divider {
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
|
||||
& > div {
|
||||
background-color: mat-color($background, card);
|
||||
}
|
||||
}
|
||||
|
||||
.adf-toolbar-title {
|
||||
color: mat-color($background, card);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.app-menu__title {
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
margin-left: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
|
||||
&> img {
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
@@ -29,12 +29,10 @@ import { DomSanitizer } from '@angular/platform-browser';
|
||||
import { Validators, FormGroup, FormBuilder } from '@angular/forms';
|
||||
|
||||
@Component({
|
||||
selector: 'app-settings',
|
||||
selector: 'aca-settings',
|
||||
templateUrl: './settings.component.html',
|
||||
styleUrls: ['./settings.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
// tslint:disable-next-line:use-host-property-decorator
|
||||
host: { class: 'app-settings' }
|
||||
host: { class: 'aca-settings' }
|
||||
})
|
||||
export class SettingsComponent implements OnInit {
|
||||
|
||||
|
@@ -33,7 +33,6 @@ import { SnackbarErrorAction } from '../../store/actions';
|
||||
@Component({
|
||||
templateUrl: './node-versions.dialog.html',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
// tslint:disable-next-line:use-host-property-decorator
|
||||
host: { class: 'aca-node-versions-dialog' }
|
||||
})
|
||||
export class NodeVersionsDialogComponent {
|
||||
|
@@ -1,56 +0,0 @@
|
||||
@import 'mixins';
|
||||
|
||||
$app-layout--header-height: 65px;
|
||||
$app-layout--side-width: 320px;
|
||||
$app-inner-layout--header-height: 48px;
|
||||
$app-inner-layout--footer-height: 48px;
|
||||
$alfresco-divider-color: rgba($alfresco-black, .07);
|
||||
$alfresco-gray-background: #fafafa;
|
||||
|
||||
.layout {
|
||||
@include flex-column;
|
||||
}
|
||||
|
||||
.inner-layout {
|
||||
@include flex-column;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 0 0 $app-layout--header-height;
|
||||
flex-basis: $app-inner-layout--header-height;
|
||||
background: $alfresco-gray-background;
|
||||
border-bottom: 1px solid $alfresco-divider-color;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
&__content {
|
||||
@include flex-row;
|
||||
}
|
||||
|
||||
&__content--hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&__panel {
|
||||
@include flex-column;
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
&__side-panel {
|
||||
display: block;
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
max-width: 350px;
|
||||
width: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
.content--scroll {
|
||||
overflow: auto !important;
|
||||
}
|
||||
|
||||
app-generic-error {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
@@ -1,6 +0,0 @@
|
||||
// Grayscale
|
||||
$alfresco-white: #fff;
|
||||
$alfresco-black: #000;
|
||||
|
||||
// Dark
|
||||
$alfresco-secondary-text-color: rgba($alfresco-black, .54);
|
@@ -1,5 +1,4 @@
|
||||
@import 'mixins';
|
||||
@import 'variables';
|
||||
@import 'theme';
|
||||
|
||||
$foreground: map-get($theme, foreground);
|
||||
@@ -24,5 +23,3 @@ app-search,
|
||||
ng-component {
|
||||
@include flex-column;
|
||||
}
|
||||
|
||||
@import 'layout';
|
||||
|
@@ -3,7 +3,13 @@
|
||||
|
||||
@import '../components/sidenav/sidenav.component.theme';
|
||||
@import '../components/about/about.component.theme';
|
||||
@import '../components/generic-error/generic-error.component.theme';
|
||||
@import '../components/search-input/search-input.component.theme';
|
||||
@import '../components/settings/settings.component.theme';
|
||||
@import '../components/current-user/current-user.component.theme';
|
||||
@import '../components/header/header.component.theme';
|
||||
@import '../dialogs/node-versions/node-versions.dialog.theme';
|
||||
|
||||
@import './overrides/adf-toolbar.theme';
|
||||
@import './overrides/adf-search-filter.theme';
|
||||
@import './overrides/adf-info-drawer.theme';
|
||||
@@ -14,7 +20,9 @@
|
||||
@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 'layout';
|
||||
@import 'snackbar';
|
||||
|
||||
$grey-scale: (
|
||||
@@ -58,18 +66,25 @@ $custom-theme-warn: mat-palette($alfresco-warn);
|
||||
$custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent);
|
||||
|
||||
@mixin custom-theme($theme) {
|
||||
@include adf-toolbar-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 adf-toolbar-theme($theme);
|
||||
@include adf-search-filter-theme($theme);
|
||||
@include adf-info-drawer-theme($theme);
|
||||
@include adf-upload-button-theme($theme);
|
||||
@include adf-sidebar-action-menu-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 aca-node-versions-dialog-theme($custom-theme);
|
||||
@include snackbar-theme($custom-theme);
|
||||
@include sidenav-component-theme($custom-theme);
|
||||
@include aca-about-component-theme($custom-theme);
|
||||
@include aca-layout-theme($theme);
|
||||
@include aca-header-theme($theme);
|
||||
@include aca-search-input-theme($theme);
|
||||
@include aca-generic-error-theme($theme);
|
||||
@include aca-node-versions-dialog-theme($theme);
|
||||
@include aca-settings-theme($theme);
|
||||
@include snackbar-theme($theme);
|
||||
@include sidenav-component-theme($theme);
|
||||
@include aca-about-component-theme($theme);
|
||||
@include aca-current-user-theme($theme);
|
||||
}
|
||||
|
55
src/app/ui/layout.scss
Normal file
55
src/app/ui/layout.scss
Normal file
@@ -0,0 +1,55 @@
|
||||
@import 'mixins';
|
||||
|
||||
@mixin aca-layout-theme($theme) {
|
||||
$foreground: map-get($theme, foreground);
|
||||
|
||||
$app-layout--header-height: 65px;
|
||||
$app-layout--side-width: 320px;
|
||||
$app-inner-layout--header-height: 48px;
|
||||
$app-inner-layout--footer-height: 48px;
|
||||
$alfresco-divider-color: mat-color($foreground, text, 0.07);
|
||||
$alfresco-gray-background: #fafafa;
|
||||
|
||||
.layout {
|
||||
@include flex-column;
|
||||
}
|
||||
|
||||
.inner-layout {
|
||||
@include flex-column;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 0 0 $app-layout--header-height;
|
||||
flex-basis: $app-inner-layout--header-height;
|
||||
background: $alfresco-gray-background;
|
||||
border-bottom: 1px solid $alfresco-divider-color;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
&__content {
|
||||
@include flex-row;
|
||||
}
|
||||
|
||||
&__content--hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&__panel {
|
||||
@include flex-column;
|
||||
border-right: 1px solid mat-color($foreground, text, 0.07);
|
||||
}
|
||||
|
||||
&__side-panel {
|
||||
display: block;
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
max-width: 350px;
|
||||
width: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
.content--scroll {
|
||||
overflow: auto !important;
|
||||
}
|
||||
}
|
@@ -0,0 +1,9 @@
|
||||
@mixin adf-search-sorting-picker-theme($theme) {
|
||||
$foreground: map-get($theme, foreground);
|
||||
|
||||
.adf-search-sorting-picker {
|
||||
.mat-icon-button {
|
||||
color: mat-color($foreground, text, 0.54);
|
||||
}
|
||||
}
|
||||
}
|
@@ -152,6 +152,7 @@
|
||||
},
|
||||
"MESSAGES": {
|
||||
"ERRORS":{
|
||||
"MISSING_CONTENT": "This file / folder no longer exists or you don't have permission to view it.",
|
||||
"GENERIC": "The action was unsuccessful. Try again or contact your IT Team.",
|
||||
"CONFLICT": "This name is already in use, try a different name.",
|
||||
"NODE_MOVE": "Move unsuccessful, a file with the same name already exists.",
|
||||
|
@@ -127,7 +127,7 @@
|
||||
],
|
||||
"use-input-property-decorator": true,
|
||||
"use-output-property-decorator": true,
|
||||
"use-host-property-decorator": true,
|
||||
"use-host-property-decorator": false,
|
||||
"no-input-rename": true,
|
||||
"no-output-rename": true,
|
||||
"use-life-cycle-interface": true,
|
||||
|
Reference in New Issue
Block a user