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:
Denys Vuika
2018-06-17 16:16:38 +01:00
committed by GitHub
parent 2c6136ef59
commit e2eed9b71c
34 changed files with 385 additions and 376 deletions

View File

@@ -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);
}
}

View File

@@ -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> {

View File

@@ -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>

View File

@@ -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;
}
}

View File

@@ -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;
}
}
}

View File

@@ -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[] = [];

View File

@@ -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'">

View File

@@ -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>

View File

@@ -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;
}
}

View File

@@ -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;
}
}
}

View File

@@ -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 {}

View File

@@ -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>

View File

@@ -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;
}
}
}

View 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;
}
}
}
}
}

View File

@@ -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>();

View File

@@ -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>

View File

@@ -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 {

View File

@@ -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 {

View File

@@ -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>

View File

@@ -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;
}
}

View File

@@ -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);
}
}
}

View File

@@ -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 {

View File

@@ -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;
}
}
}
}

View 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;
}
}
}
}
}

View File

@@ -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 {

View File

@@ -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 {

View File

@@ -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%;
}

View File

@@ -1,6 +0,0 @@
// Grayscale
$alfresco-white: #fff;
$alfresco-black: #000;
// Dark
$alfresco-secondary-text-color: rgba($alfresco-black, .54);

View File

@@ -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';

View File

@@ -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
View 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;
}
}

View File

@@ -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);
}
}
}

View File

@@ -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.",

View File

@@ -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,