From 5d8a9057bcd4f30bbe6c538b7ecc404440494f6d Mon Sep 17 00:00:00 2001 From: Suzana Dirla Date: Tue, 17 Jul 2018 08:38:36 +0300 Subject: [PATCH] [ACA-1440] use ADF Header component (#508) * [ACA-1440] use ADF HEADER component * moved style to theme * removed ACA HeaderComponent * remove aca header component theme * Update layout.component.html * update app header locator --- e2e/components/header/header.ts | 2 +- src/app/app.module.ts | 2 - .../components/header/header.component.html | 24 ----- .../header/header.component.spec.ts | 88 ------------------- .../header/header.component.theme.scss | 59 ------------- src/app/components/header/header.component.ts | 54 ------------ .../components/layout/layout.component.html | 15 +++- src/app/components/layout/layout.component.ts | 20 +++-- src/app/ui/custom-theme.scss | 4 +- .../ui/overrides/adf-layout-header.theme.scss | 21 +++++ 10 files changed, 53 insertions(+), 236 deletions(-) delete mode 100644 src/app/components/header/header.component.html delete mode 100644 src/app/components/header/header.component.spec.ts delete mode 100644 src/app/components/header/header.component.theme.scss delete mode 100644 src/app/components/header/header.component.ts create mode 100644 src/app/ui/overrides/adf-layout-header.theme.scss diff --git a/e2e/components/header/header.ts b/e2e/components/header/header.ts index c5e5f944a..fa1c9bcdf 100755 --- a/e2e/components/header/header.ts +++ b/e2e/components/header/header.ts @@ -37,6 +37,6 @@ export class Header extends Component { userInfo: UserInfo = new UserInfo(this.component); constructor(ancestor?: ElementFinder) { - super('aca-header', ancestor); + super('adf-layout-header', ancestor); } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 2bf23b841..88140f203 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -45,7 +45,6 @@ import { SharedFilesComponent } from './components/shared-files/shared-files.com import { TrashcanComponent } from './components/trashcan/trashcan.component'; import { LayoutComponent } from './components/layout/layout.component'; import { SidenavViewsManagerDirective } from './components/layout/sidenav-views-manager.directive'; -import { HeaderComponent } from './components/header/header.component'; import { CurrentUserComponent } from './components/current-user/current-user.component'; import { SearchInputComponent } from './components/search/search-input/search-input.component'; import { SearchInputControlComponent } from './components/search/search-input-control/search-input-control.component'; @@ -110,7 +109,6 @@ import { RuleService } from './extensions/rules/rule.service'; LoginComponent, LayoutComponent, SidenavViewsManagerDirective, - HeaderComponent, CurrentUserComponent, SearchInputComponent, SearchInputControlComponent, diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html deleted file mode 100644 index 2a4668d66..000000000 --- a/src/app/components/header/header.component.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - {{ appName$ | async }} - - - -
- - - - - - - diff --git a/src/app/components/header/header.component.spec.ts b/src/app/components/header/header.component.spec.ts deleted file mode 100644 index e1ff277be..000000000 --- a/src/app/components/header/header.component.spec.ts +++ /dev/null @@ -1,88 +0,0 @@ -/*! - * @license - * Alfresco Example Content Application - * - * Copyright (C) 2005 - 2018 Alfresco Software Limited - * - * This file is part of the Alfresco Example Content Application. - * If the software was purchased under a paid Alfresco license, the terms of - * the paid license agreement will prevail. Otherwise, the software is - * provided under the following open source license terms: - * - * The Alfresco Example Content Application is free software: you can redistribute it and/or modify - * it under the terms of the GNU Lesser General Public License as published by - * the Free Software Foundation, either version 3 of the License, or - * (at your option) any later version. - * - * The Alfresco Example Content Application is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Lesser General Public License for more details. - * - * You should have received a copy of the GNU Lesser General Public License - * along with Alfresco. If not, see . - */ - -import { AppConfigService } from '@alfresco/adf-core'; -import { NO_ERRORS_SCHEMA } from '@angular/core'; -import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { Store } from '@ngrx/store'; -import { SetAppNameAction, SetHeaderColorAction } from '../../store/actions'; -import { AppStore } from '../../store/states/app.state'; -import { AppTestingModule } from '../../testing/app-testing.module'; -import { HeaderComponent } from './header.component'; - -describe('HeaderComponent', () => { - let fixture: ComponentFixture; - let component: HeaderComponent; - let appConfigService: AppConfigService; - let store: Store; - - beforeEach(() => { - TestBed.configureTestingModule({ - imports: [ AppTestingModule ], - declarations: [ - HeaderComponent - ], - schemas: [ NO_ERRORS_SCHEMA ] - }); - - store = TestBed.get(Store); - store.dispatch(new SetAppNameAction('app-name')); - store.dispatch(new SetHeaderColorAction('some-color')); - - fixture = TestBed.createComponent(HeaderComponent); - component = fixture.componentInstance; - appConfigService = TestBed.get(AppConfigService); - - spyOn(appConfigService, 'get').and.callFake((val) => { - if (val === 'application.name') { - return 'app-name'; - } - - if (val === 'headerColor') { - return 'some-color'; - } - - if (val === 'application.logo') { - return ''; - } - }); - - fixture.detectChanges(); - }); - - it('it should set application name', done => { - component.appName$.subscribe(val => { - expect(val).toBe('app-name'); - done(); - }); - }); - - it('it should set header background color', done => { - component.headerColor$.subscribe(val => { - expect(val).toBe('some-color'); - done(); - }); - }); -}); diff --git a/src/app/components/header/header.component.theme.scss b/src/app/components/header/header.component.theme.scss deleted file mode 100644 index 8b56a4224..000000000 --- a/src/app/components/header/header.component.theme.scss +++ /dev/null @@ -1,59 +0,0 @@ -@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; - } - } - } - } -} diff --git a/src/app/components/header/header.component.ts b/src/app/components/header/header.component.ts deleted file mode 100644 index 6ad498bb3..000000000 --- a/src/app/components/header/header.component.ts +++ /dev/null @@ -1,54 +0,0 @@ -/*! - * @license - * Alfresco Example Content Application - * - * Copyright (C) 2005 - 2018 Alfresco Software Limited - * - * This file is part of the Alfresco Example Content Application. - * If the software was purchased under a paid Alfresco license, the terms of - * the paid license agreement will prevail. Otherwise, the software is - * provided under the following open source license terms: - * - * The Alfresco Example Content Application is free software: you can redistribute it and/or modify - * it under the terms of the GNU Lesser General Public License as published by - * the Free Software Foundation, either version 3 of the License, or - * (at your option) any later version. - * - * The Alfresco Example Content Application is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Lesser General Public License for more details. - * - * You should have received a copy of the GNU Lesser General Public License - * along with Alfresco. If not, see . - */ - -import { Component, Output, EventEmitter, ViewEncapsulation } from '@angular/core'; -import { Store } from '@ngrx/store'; -import { Observable } from 'rxjs/Rx'; -import { AppStore } from '../../store/states/app.state'; -import { selectHeaderColor, selectAppName, selectLogoPath } from '../../store/selectors/app.selectors'; - -@Component({ - selector: 'aca-header', - templateUrl: './header.component.html', - encapsulation: ViewEncapsulation.None, - host: { class: 'aca-header' } -}) -export class HeaderComponent { - @Output() menu: EventEmitter = new EventEmitter(); - - appName$: Observable; - headerColor$: Observable; - logo$: Observable; - - constructor(store: Store) { - this.headerColor$ = store.select(selectHeaderColor); - this.appName$ = store.select(selectAppName); - this.logo$ = store.select(selectLogoPath); - } - - toggleMenu() { - this.menu.emit(); - } -} diff --git a/src/app/components/layout/layout.component.html b/src/app/components/layout/layout.component.html index 6f10394a1..81d54629d 100644 --- a/src/app/components/layout/layout.component.html +++ b/src/app/components/layout/layout.component.html @@ -15,7 +15,20 @@ - + + +
+ + + + + + + + diff --git a/src/app/components/layout/layout.component.ts b/src/app/components/layout/layout.component.ts index 62e0f4900..3681d095f 100644 --- a/src/app/components/layout/layout.component.ts +++ b/src/app/components/layout/layout.component.ts @@ -23,20 +23,21 @@ * along with Alfresco. If not, see . */ -import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core'; -import { Subject } from 'rxjs/Rx'; +import { Component, OnInit, OnDestroy, ViewChild, ViewEncapsulation } from '@angular/core'; +import { Observable, Subject } from 'rxjs/Rx'; import { MinimalNodeEntryEntity } from 'alfresco-js-api'; import { NodePermissionService } from '../../common/services/node-permission.service'; import { SidenavViewsManagerDirective } from './sidenav-views-manager.directive'; import { Store } from '@ngrx/store'; import { AppStore } from '../../store/states'; -import { currentFolder } from '../../store/selectors/app.selectors'; +import { currentFolder, selectAppName, selectHeaderColor, selectLogoPath } from '../../store/selectors/app.selectors'; import { takeUntil } from 'rxjs/operators'; @Component({ selector: 'app-layout', templateUrl: './layout.component.html', - styleUrls: ['./layout.component.scss'] + styleUrls: ['./layout.component.scss'], + encapsulation: ViewEncapsulation.None, }) export class LayoutComponent implements OnInit, OnDestroy { @ViewChild(SidenavViewsManagerDirective) manager: SidenavViewsManagerDirective; @@ -46,9 +47,18 @@ export class LayoutComponent implements OnInit, OnDestroy { node: MinimalNodeEntryEntity; canUpload = false; + appName$: Observable; + headerColor$: Observable; + logo$: Observable; + constructor( protected store: Store, - private permission: NodePermissionService) {} + private permission: NodePermissionService) { + + this.headerColor$ = store.select(selectHeaderColor); + this.appName$ = store.select(selectAppName); + this.logo$ = store.select(selectLogoPath); + } ngOnInit() { if (!this.manager.minimizeSidenav) { diff --git a/src/app/ui/custom-theme.scss b/src/app/ui/custom-theme.scss index 1bb506ee8..9cc9a66b8 100644 --- a/src/app/ui/custom-theme.scss +++ b/src/app/ui/custom-theme.scss @@ -7,7 +7,6 @@ @import '../components/search/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 '../components/permission-manager/permissions-manager.component.theme'; @import '../dialogs/node-versions/node-versions.dialog.theme'; @@ -23,6 +22,7 @@ @import './overrides/adf-upload-drag-area.theme'; @import './overrides/adf-search-sorting-picker.theme'; @import './overrides/adf-content-node-selector.theme'; +@import './overrides/adf-layout-header.theme'; @import 'layout'; @import 'snackbar'; @@ -79,9 +79,9 @@ $custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent); @include adf-upload-drag-area-theme($theme); @include adf-search-sorting-picker-theme($theme); @include adf-content-node-selector-theme($theme); + @include adf-layout-header-theme($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-permissions-manager-theme($theme); diff --git a/src/app/ui/overrides/adf-layout-header.theme.scss b/src/app/ui/overrides/adf-layout-header.theme.scss new file mode 100644 index 000000000..4d13d5551 --- /dev/null +++ b/src/app/ui/overrides/adf-layout-header.theme.scss @@ -0,0 +1,21 @@ +@mixin adf-layout-header-theme($theme) { + $background: map-get($theme, background); + + .adf-layout-header { + .mat-toolbar-single-row { + .adf-app-logo { + width: 100px; + height: 50px; + margin-left: 40px; + } + } + + .adf-toolbar-divider { + margin: 0 5px; + + & > div { + background-color: mat-color($background, card, 1); + } + } + } +}