inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-07-24 17:31:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACA-1440] use ADF Header component (#508)

Browse Source 
* [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
This commit is contained in:
Suzana Dirla
2018-07-17 08:38:36 +03:00
committed by Cilibiu Bogdan
parent 51af2071c2
commit 5d8a9057bc
10 changed files with 53 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
e2e/components/header/header.ts
View File

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

2
src/app/app.module.ts
View File

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

24
src/app/components/header/header.component.html
View File

@@ -1,24 +0,0 @@
<adf-toolbar class="app-menu" [style.background-color]="headerColor$ | async" role="heading" aria-level="1">
<adf-toolbar-title>
<button
title="{{ 'APP.ACTIONS.TOGGLE-SIDENAV' | translate }}"
mat-icon-button
(click)="toggleMenu()">
<mat-icon>menu</mat-icon>
</button>
<a class="app-menu__title"
title="{{ appName$ | async }}"
[routerLink]="[ '/' ]">
<img [src]="logo$ | async" alt="{{ appName$ | async }}" />
</a>
</adf-toolbar-title>
<div class="adf-toolbar--spacer"></div>
<aca-search-input></aca-search-input>
<adf-toolbar-divider></adf-toolbar-divider>
<aca-current-user></aca-current-user>
</adf-toolbar>

88
src/app/components/header/header.component.spec.ts
View File

@@ -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 <http://www.gnu.org/licenses/>.
*/
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<HeaderComponent>;
let component: HeaderComponent;
let appConfigService: AppConfigService;
let store: Store<AppStore>;
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();
});
});
});

59
src/app/components/header/header.component.theme.scss
View File

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

54
src/app/components/header/header.component.ts
View File

@@ -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 <http://www.gnu.org/licenses/>.
*/
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<any> = new EventEmitter<any>();
appName$: Observable<string>;
headerColor$: Observable<string>;
logo$: Observable<string>;
constructor(store: Store<AppStore>) {
this.headerColor$ = store.select(selectHeaderColor);
this.appName$ = store.select(selectAppName);
this.logo$ = store.select(selectLogoPath);
}
toggleMenu() {
this.menu.emit();
}
}

15
src/app/components/layout/layout.component.html
View File

@@ -15,7 +15,20 @@
<adf-sidenav-layout-header>
<ng-template let-toggleMenu="toggleMenu">
<aca-header (menu)="toggleMenu()"></aca-header>
<adf-layout-header
[logo]="logo$ | async"
[color]="'accent'"
(clicked)="toggleMenu($event)">
<div class="adf-toolbar--spacer"></div>
<aca-search-input></aca-search-input>
<adf-toolbar-divider></adf-toolbar-divider>
<aca-current-user></aca-current-user>
</adf-layout-header>
</ng-template>
</adf-sidenav-layout-header>

20
src/app/components/layout/layout.component.ts
View File

@@ -23,20 +23,21 @@
* along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
*/
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<string>;
headerColor$: Observable<string>;
logo$: Observable<string>;
constructor(
protected store: Store<AppStore>,
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) {

4
src/app/ui/custom-theme.scss
View File

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

21
src/app/ui/overrides/adf-layout-header.theme.scss Normal file
View File

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