From 8ada58f3a5d44550c823623645c667ea0cd8a29e Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Mon, 29 Oct 2018 09:47:10 +0000 Subject: [PATCH] improved page layout (#761) * app-layout component * layout theme reorg * merge app-layout styles * rework page layouting --- src/app/app.routes.ts | 4 +- src/app/components/about/about.component.html | 12 +- src/app/components/about/about.module.ts | 8 +- .../favorites/favorites.component.html | 147 ++++++++------- .../components/favorites/favorites.module.ts | 4 +- src/app/components/files/files.component.html | 160 ++++++++-------- .../app-layout/app-layout.component.html | 38 ++++ .../app-layout.component.spec.ts} | 14 +- .../app-layout.component.ts} | 11 +- .../layout/app-layout/app-layout.theme.scss | 17 ++ .../components/layout/layout.component.html | 40 ---- .../components/layout/layout.component.scss | 16 -- src/app/components/layout/layout.module.ts | 22 ++- src/app/components/layout/layout.theme.scss | 7 + .../page-layout-content.component.ts | 45 +++++ .../page-layout-error.component.ts | 39 ++++ .../page-layout-header.component.ts | 39 ++++ .../page-layout/page-layout.component.html | 3 + .../page-layout/page-layout.component.ts | 43 +++++ .../layout/page-layout/page-layout.theme.scss | 46 +++++ .../sidenav-views-manager.directive.spec.ts | 82 -------- .../libraries/libraries.component.html | 139 +++++++------- .../recent-files/recent-files.component.html | 146 +++++++-------- .../recent-files/recent-files.module.ts | 4 +- .../search/search-results.module.ts | 4 +- .../search-results.component.html | 176 +++++++++--------- .../shared-files/shared-files.component.html | 141 +++++++------- .../shared-files/shared-files.module.ts | 4 +- .../trashcan/trashcan.component.html | 146 ++++++++------- .../components/trashcan/trashcan.module.ts | 4 +- src/app/extensions/core.extensions.module.ts | 4 +- src/app/ui/application.scss | 2 +- src/app/ui/custom-theme.scss | 4 +- src/app/ui/layout.scss | 55 ------ 34 files changed, 876 insertions(+), 750 deletions(-) create mode 100644 src/app/components/layout/app-layout/app-layout.component.html rename src/app/components/layout/{layout.component.spec.ts => app-layout/app-layout.component.spec.ts} (89%) rename src/app/components/layout/{layout.component.ts => app-layout/app-layout.component.ts} (93%) create mode 100644 src/app/components/layout/app-layout/app-layout.theme.scss delete mode 100644 src/app/components/layout/layout.component.html delete mode 100644 src/app/components/layout/layout.component.scss create mode 100644 src/app/components/layout/layout.theme.scss create mode 100644 src/app/components/layout/page-layout/page-layout-content.component.ts create mode 100644 src/app/components/layout/page-layout/page-layout-error.component.ts create mode 100644 src/app/components/layout/page-layout/page-layout-header.component.ts create mode 100644 src/app/components/layout/page-layout/page-layout.component.html create mode 100644 src/app/components/layout/page-layout/page-layout.component.ts create mode 100644 src/app/components/layout/page-layout/page-layout.theme.scss delete mode 100644 src/app/components/layout/sidenav-views-manager.directive.spec.ts delete mode 100644 src/app/ui/layout.scss diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index d63c383f3..7c5f49c77 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -24,7 +24,7 @@ */ import { Routes } from '@angular/router'; -import { LayoutComponent } from './components/layout/layout.component'; +import { AppLayoutComponent } from './components/layout/app-layout/app-layout.component'; import { FilesComponent } from './components/files/files.component'; import { LibrariesComponent } from './components/libraries/libraries.component'; import { GenericErrorComponent } from './components/common/generic-error/generic-error.component'; @@ -52,7 +52,7 @@ export const APP_ROUTES: Routes = [ }, { path: '', - component: LayoutComponent, + component: AppLayoutComponent, children: [ { path: '', diff --git a/src/app/components/about/about.component.html b/src/app/components/about/about.component.html index b83e9331c..9112a85b3 100644 --- a/src/app/components/about/about.component.html +++ b/src/app/components/about/about.component.html @@ -1,6 +1,7 @@ -
-
-
+ + + +
Alfresco Content Application

version: {{ releaseVersion }}

@@ -32,5 +33,6 @@
-
-
+ + + diff --git a/src/app/components/about/about.module.ts b/src/app/components/about/about.module.ts index 8a25b3334..949a39b07 100644 --- a/src/app/components/about/about.module.ts +++ b/src/app/components/about/about.module.ts @@ -28,6 +28,7 @@ import { Routes, RouterModule } from '@angular/router'; import { AboutComponent } from './about.component'; import { CommonModule } from '@angular/common'; import { CoreModule } from '@alfresco/adf-core'; +import { AppLayoutModule } from '../layout/layout.module'; const routes: Routes = [ { @@ -40,7 +41,12 @@ const routes: Routes = [ ]; @NgModule({ - imports: [CommonModule, CoreModule.forChild(), RouterModule.forChild(routes)], + imports: [ + CommonModule, + CoreModule.forChild(), + RouterModule.forChild(routes), + AppLayoutModule + ], declarations: [AboutComponent] }) export class AboutModule {} diff --git a/src/app/components/favorites/favorites.component.html b/src/app/components/favorites/favorites.component.html index 375b1ebeb..d89154e85 100644 --- a/src/app/components/favorites/favorites.component.html +++ b/src/app/components/favorites/favorites.component.html @@ -1,80 +1,83 @@ -
-
- - + - - + + + - - - - -
-
-
- + + - - - - + + + + + + + +
+ + + + + + + + + + + + + + + + + - + + - - + + + + - - - - - - - - + + + - - - - - - - - - - - -
- -
- -
+ +
-
+ +
+ +
+ + + diff --git a/src/app/components/favorites/favorites.module.ts b/src/app/components/favorites/favorites.module.ts index cb5393281..ac257a54e 100644 --- a/src/app/components/favorites/favorites.module.ts +++ b/src/app/components/favorites/favorites.module.ts @@ -34,6 +34,7 @@ import { AppCommonModule } from '../common/common.module'; import { AppToolbarModule } from '../toolbar/toolbar.module'; import { ContextMenuModule } from '../context-menu/context-menu.module'; import { AppInfoDrawerModule } from '../info-drawer/info.drawer.module'; +import { AppLayoutModule } from '../layout/layout.module'; const routes: Routes = [ { @@ -56,7 +57,8 @@ const routes: Routes = [ AppCommonModule, AppToolbarModule, ContextMenuModule, - AppInfoDrawerModule + AppInfoDrawerModule, + AppLayoutModule ], declarations: [FavoritesComponent], exports: [FavoritesComponent] diff --git a/src/app/components/files/files.component.html b/src/app/components/files/files.component.html index 89ea55f08..0ed5c2c2a 100644 --- a/src/app/components/files/files.component.html +++ b/src/app/components/files/files.component.html @@ -1,84 +1,86 @@ -
-
- - + - - - - - - + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
-
- +
+
+ -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
- -
-
-
+ diff --git a/src/app/components/layout/app-layout/app-layout.component.html b/src/app/components/layout/app-layout/app-layout.component.html new file mode 100644 index 000000000..20a5f53b5 --- /dev/null +++ b/src/app/components/layout/app-layout/app-layout.component.html @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/components/layout/layout.component.spec.ts b/src/app/components/layout/app-layout/app-layout.component.spec.ts similarity index 89% rename from src/app/components/layout/layout.component.spec.ts rename to src/app/components/layout/app-layout/app-layout.component.spec.ts index 2c873de7c..a5003ac05 100644 --- a/src/app/components/layout/layout.component.spec.ts +++ b/src/app/components/layout/app-layout/app-layout.component.spec.ts @@ -26,23 +26,23 @@ import { NO_ERRORS_SCHEMA } from '@angular/core'; import { TestBed, ComponentFixture } from '@angular/core/testing'; import { AppConfigService, UserPreferencesService } from '@alfresco/adf-core'; -import { LayoutComponent } from './layout.component'; -import { AppTestingModule } from '../../testing/app-testing.module'; +import { AppLayoutComponent } from './app-layout.component'; +import { AppTestingModule } from '../../../testing/app-testing.module'; -describe('LayoutComponent', () => { - let fixture: ComponentFixture; - let component: LayoutComponent; +describe('AppLayoutComponent', () => { + let fixture: ComponentFixture; + let component: AppLayoutComponent; let appConfig: AppConfigService; let userPreference: UserPreferencesService; beforeEach(() => { TestBed.configureTestingModule({ imports: [AppTestingModule], - declarations: [LayoutComponent], + declarations: [AppLayoutComponent], schemas: [NO_ERRORS_SCHEMA] }); - fixture = TestBed.createComponent(LayoutComponent); + fixture = TestBed.createComponent(AppLayoutComponent); component = fixture.componentInstance; appConfig = TestBed.get(AppConfigService); userPreference = TestBed.get(UserPreferencesService); diff --git a/src/app/components/layout/layout.component.ts b/src/app/components/layout/app-layout/app-layout.component.ts similarity index 93% rename from src/app/components/layout/layout.component.ts rename to src/app/components/layout/app-layout/app-layout.component.ts index 59925adcf..104a4d24c 100644 --- a/src/app/components/layout/layout.component.ts +++ b/src/app/components/layout/app-layout/app-layout.component.ts @@ -39,19 +39,18 @@ import { NavigationEnd, Router } from '@angular/router'; import { Store } from '@ngrx/store'; import { Subject, Observable } from 'rxjs'; import { filter, takeUntil, map, withLatestFrom } from 'rxjs/operators'; -import { NodePermissionService } from '../../services/node-permission.service'; -import { currentFolder } from '../../store/selectors/app.selectors'; -import { AppStore } from '../../store/states'; +import { NodePermissionService } from '../../../services/node-permission.service'; +import { currentFolder } from '../../../store/selectors/app.selectors'; +import { AppStore } from '../../../store/states'; import { BreakpointObserver } from '@angular/cdk/layout'; @Component({ selector: 'app-layout', - templateUrl: './layout.component.html', - styleUrls: ['./layout.component.scss'], + templateUrl: './app-layout.component.html', encapsulation: ViewEncapsulation.None, host: { class: 'app-layout' } }) -export class LayoutComponent implements OnInit, OnDestroy { +export class AppLayoutComponent implements OnInit, OnDestroy { @ViewChild('layout') layout: SidenavLayoutComponent; diff --git a/src/app/components/layout/app-layout/app-layout.theme.scss b/src/app/components/layout/app-layout/app-layout.theme.scss new file mode 100644 index 000000000..db0104dc7 --- /dev/null +++ b/src/app/components/layout/app-layout/app-layout.theme.scss @@ -0,0 +1,17 @@ +@mixin app-layout-theme($theme) { + .app-layout { + @include flex-column; + } + + @media screen and (max-width: 599px) { + .adf-app-title { + display: none; + } + } + + @media screen and (max-width: 719px) { + .adf-app-logo { + display: none; + } + } +} diff --git a/src/app/components/layout/layout.component.html b/src/app/components/layout/layout.component.html deleted file mode 100644 index 732ad9707..000000000 --- a/src/app/components/layout/layout.component.html +++ /dev/null @@ -1,40 +0,0 @@ -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
diff --git a/src/app/components/layout/layout.component.scss b/src/app/components/layout/layout.component.scss deleted file mode 100644 index e1a3024ff..000000000 --- a/src/app/components/layout/layout.component.scss +++ /dev/null @@ -1,16 +0,0 @@ -:host { - display: flex; - flex: 1; -} - -@media screen and (max-width: 599px) { - .adf-app-title { - display: none; - } -} - -@media screen and (max-width: 719px) { - .adf-app-logo { - display: none; - } -} diff --git a/src/app/components/layout/layout.module.ts b/src/app/components/layout/layout.module.ts index 8d179ee6b..75299a967 100644 --- a/src/app/components/layout/layout.module.ts +++ b/src/app/components/layout/layout.module.ts @@ -26,12 +26,16 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { CoreModule } from '@alfresco/adf-core'; -import { LayoutComponent } from './layout.component'; +import { AppLayoutComponent } from './app-layout/app-layout.component'; import { ContentModule } from '@alfresco/adf-content-services'; import { RouterModule } from '@angular/router'; import { AppSidenavModule } from '../sidenav/sidenav.module'; import { AppCommonModule } from '../common/common.module'; import { AppHeaderModule } from '../header/header.module'; +import { PageLayoutComponent } from './page-layout/page-layout.component'; +import { PageLayoutHeaderComponent } from './page-layout/page-layout-header.component'; +import { PageLayoutContentComponent } from './page-layout/page-layout-content.component'; +import { PageLayoutErrorComponent } from './page-layout/page-layout-error.component'; @NgModule({ imports: [ @@ -43,7 +47,19 @@ import { AppHeaderModule } from '../header/header.module'; AppSidenavModule, AppHeaderModule ], - declarations: [LayoutComponent], - exports: [LayoutComponent] + declarations: [ + AppLayoutComponent, + PageLayoutComponent, + PageLayoutHeaderComponent, + PageLayoutContentComponent, + PageLayoutErrorComponent + ], + exports: [ + AppLayoutComponent, + PageLayoutComponent, + PageLayoutHeaderComponent, + PageLayoutContentComponent, + PageLayoutErrorComponent + ] }) export class AppLayoutModule {} diff --git a/src/app/components/layout/layout.theme.scss b/src/app/components/layout/layout.theme.scss new file mode 100644 index 000000000..e9914e610 --- /dev/null +++ b/src/app/components/layout/layout.theme.scss @@ -0,0 +1,7 @@ +@import './app-layout/app-layout.theme.scss'; +@import './page-layout/page-layout.theme.scss'; + +@mixin layout-theme($theme) { + @include app-layout-theme($theme); + @include app-page-layout-theme($theme); +} diff --git a/src/app/components/layout/page-layout/page-layout-content.component.ts b/src/app/components/layout/page-layout/page-layout-content.component.ts new file mode 100644 index 000000000..b4b1f3696 --- /dev/null +++ b/src/app/components/layout/page-layout/page-layout-content.component.ts @@ -0,0 +1,45 @@ +/*! + * @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, + ViewEncapsulation, + ChangeDetectionStrategy, + Input, + HostBinding +} from '@angular/core'; + +@Component({ + selector: 'app-page-layout-content', + template: ``, + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + host: { class: 'app-page-layout-content' } +}) +export class PageLayoutContentComponent { + @Input() + @HostBinding('class.scrollable') + scrollable = false; +} diff --git a/src/app/components/layout/page-layout/page-layout-error.component.ts b/src/app/components/layout/page-layout/page-layout-error.component.ts new file mode 100644 index 000000000..a3a6178f0 --- /dev/null +++ b/src/app/components/layout/page-layout/page-layout-error.component.ts @@ -0,0 +1,39 @@ +/*! + * @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, + ViewEncapsulation, + ChangeDetectionStrategy +} from '@angular/core'; + +@Component({ + selector: 'app-page-layout-error', + template: ``, + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + host: { class: 'app-page-layout-error' } +}) +export class PageLayoutErrorComponent {} diff --git a/src/app/components/layout/page-layout/page-layout-header.component.ts b/src/app/components/layout/page-layout/page-layout-header.component.ts new file mode 100644 index 000000000..acdf2b06e --- /dev/null +++ b/src/app/components/layout/page-layout/page-layout-header.component.ts @@ -0,0 +1,39 @@ +/*! + * @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, + ViewEncapsulation, + ChangeDetectionStrategy +} from '@angular/core'; + +@Component({ + selector: 'app-page-layout-header', + template: '', + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + host: { class: 'app-page-layout-header' } +}) +export class PageLayoutHeaderComponent {} diff --git a/src/app/components/layout/page-layout/page-layout.component.html b/src/app/components/layout/page-layout/page-layout.component.html new file mode 100644 index 000000000..cee7682ac --- /dev/null +++ b/src/app/components/layout/page-layout/page-layout.component.html @@ -0,0 +1,3 @@ + + + diff --git a/src/app/components/layout/page-layout/page-layout.component.ts b/src/app/components/layout/page-layout/page-layout.component.ts new file mode 100644 index 000000000..2e0eb02c1 --- /dev/null +++ b/src/app/components/layout/page-layout/page-layout.component.ts @@ -0,0 +1,43 @@ +/*! + * @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, + ViewEncapsulation, + ChangeDetectionStrategy, + Input +} from '@angular/core'; + +@Component({ + selector: 'app-page-layout', + templateUrl: 'page-layout.component.html', + encapsulation: ViewEncapsulation.None, + host: { class: 'app-page-layout' }, + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class PageLayoutComponent { + @Input() + hasError = false; +} diff --git a/src/app/components/layout/page-layout/page-layout.theme.scss b/src/app/components/layout/page-layout/page-layout.theme.scss new file mode 100644 index 000000000..4571bd774 --- /dev/null +++ b/src/app/components/layout/page-layout/page-layout.theme.scss @@ -0,0 +1,46 @@ +@mixin app-page-layout-theme($theme) { + $foreground: map-get($theme, foreground); + + .app-page-layout { + @include flex-column; + + .app-page-layout-header { + display: flex; + align-items: center; + flex: 0 0 65px; + flex-basis: 48px; + background: #fafafa; + border-bottom: 1px solid mat-color($foreground, text, 0.07); + padding: 0 24px; + } + + .app-page-layout-content { + @include flex-row; + } + + .app-page-layout-error { + @include flex-row; + } + + .main-content { + @include flex-column; + border-right: 1px solid mat-color($foreground, text, 0.07); + } + + .scrollable { + overflow: auto !important; + + .main-content { + overflow: auto !important; + } + } + + .sidebar { + display: block; + height: 100%; + overflow-y: scroll; + max-width: 350px; + width: 350px; + } + } +} diff --git a/src/app/components/layout/sidenav-views-manager.directive.spec.ts b/src/app/components/layout/sidenav-views-manager.directive.spec.ts deleted file mode 100644 index 2b3114478..000000000 --- a/src/app/components/layout/sidenav-views-manager.directive.spec.ts +++ /dev/null @@ -1,82 +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 { SidenavViewsManagerDirective } from './sidenav-views-manager.directive'; -import { NavigationEnd } from '@angular/router'; -import { Subject } from 'rxjs'; - -class RouterMock { - private subject = new Subject(); - public events = this.subject.asObservable(); - - navigate(url = '') { - const navigationEnd = new NavigationEnd(0, '', url); - this.subject.next(navigationEnd); - } - - destroy() { - this.subject.next(null); - this.subject.complete(); - this.subject = null; - } -} - -describe('SidenavViewsManagerDirective', () => { - let component; - let router; - - beforeEach(() => { - router = new RouterMock(); - component = new SidenavViewsManagerDirective(router, null, null); - }); - - afterEach(() => { - router.destroy(); - }); - - describe('Router events', () => { - it('should set minimizeSidenav to true when url is in minimizeConditions', () => { - router.navigate('/search/'); - expect(component.minimizeSidenav).toBe(true); - }); - - it('should set minimizeSidenav to false when url is not in minimizeConditions', () => { - router.navigate('/somewhere/'); - expect(component.minimizeSidenav).toBe(false); - }); - - it('should set hideSidenav property to true when url is in hideConditions', () => { - router.navigate('/preview/'); - expect(component.hideSidenav).toBe(true); - }); - - it('should set hideSidenav property to false when url is not in hideConditions', () => { - router.navigate('somewhere'); - expect(component.hideSidenav).toBe(false); - }); - }); -}); -*/ diff --git a/src/app/components/libraries/libraries.component.html b/src/app/components/libraries/libraries.component.html index 29f769e1d..273518051 100644 --- a/src/app/components/libraries/libraries.component.html +++ b/src/app/components/libraries/libraries.component.html @@ -1,78 +1,79 @@ -
-
- - + - - + + + - - - - - - -
+ + -
-
- + + + + + + + - - - - - - + +
+ - - + + + + + + - - - - - - - - - - - - - + + + + + + + + + - - - - -
-
-
+ + + + + + + + + + + +
+ + diff --git a/src/app/components/recent-files/recent-files.component.html b/src/app/components/recent-files/recent-files.component.html index 253d80d04..e05593a45 100644 --- a/src/app/components/recent-files/recent-files.component.html +++ b/src/app/components/recent-files/recent-files.component.html @@ -1,83 +1,83 @@ -
-
- - + - - + + + - - - - -
+ + + + + + + -
-
- + +
+ - - - - + + + + + + + + + + + + + + + - + + - - + + + + - - - - - - - - + + - - - - + - - - - - - - -
- -
- -
+ +
-
+ +
+ +
+ + diff --git a/src/app/components/recent-files/recent-files.module.ts b/src/app/components/recent-files/recent-files.module.ts index 4277928e0..f3e3e4680 100644 --- a/src/app/components/recent-files/recent-files.module.ts +++ b/src/app/components/recent-files/recent-files.module.ts @@ -34,6 +34,7 @@ import { AppToolbarModule } from '../toolbar/toolbar.module'; import { ContextMenuModule } from '../context-menu/context-menu.module'; import { RecentFilesComponent } from './recent-files.component'; import { AppInfoDrawerModule } from '../info-drawer/info.drawer.module'; +import { AppLayoutModule } from '../layout/layout.module'; const routes: Routes = [ { @@ -55,7 +56,8 @@ const routes: Routes = [ AppCommonModule, AppToolbarModule, ContextMenuModule, - AppInfoDrawerModule + AppInfoDrawerModule, + AppLayoutModule ], declarations: [RecentFilesComponent], exports: [RecentFilesComponent] diff --git a/src/app/components/search/search-results.module.ts b/src/app/components/search/search-results.module.ts index 53cbe5b3d..a1e11e235 100644 --- a/src/app/components/search/search-results.module.ts +++ b/src/app/components/search/search-results.module.ts @@ -33,6 +33,7 @@ import { AppInfoDrawerModule } from '../info-drawer/info.drawer.module'; import { AppToolbarModule } from '../toolbar/toolbar.module'; import { AppCommonModule } from '../common/common.module'; import { DirectivesModule } from '../../directives/directives.module'; +import { AppLayoutModule } from '../layout/layout.module'; @NgModule({ imports: [ @@ -42,7 +43,8 @@ import { DirectivesModule } from '../../directives/directives.module'; AppCommonModule, AppInfoDrawerModule, AppToolbarModule, - DirectivesModule + DirectivesModule, + AppLayoutModule ], declarations: [SearchResultsComponent, SearchResultsRowComponent], exports: [SearchResultsComponent, SearchResultsRowComponent] diff --git a/src/app/components/search/search-results/search-results.component.html b/src/app/components/search/search-results/search-results.component.html index cd7f83dca..b1d7be4ee 100644 --- a/src/app/components/search/search-results/search-results.component.html +++ b/src/app/components/search/search-results/search-results.component.html @@ -1,89 +1,91 @@ -
-
- - - - - - - + + + + + + + + + + + + + +
+
+ +
+ + +
+
+
{{ 'APP.BROWSE.SEARCH.FOUND_RESULTS' | translate: { number: totalResults } }}
+ +
+ +
+
+ + +
+ + + + + + + + + + + + + + + + + + +
+

+ {{ 'APP.BROWSE.SEARCH.NO_RESULTS' | translate }} +

+
+ + + + + + + +
+
- -
-
-
- -
- - -
-
-
{{ 'APP.BROWSE.SEARCH.FOUND_RESULTS' | translate: { number: totalResults } }}
- -
- -
-
- - -
- - - - - - - - - - - - - - - - - - -
-

- {{ 'APP.BROWSE.SEARCH.NO_RESULTS' | translate }} -

-
- - - - - - - -
-
-
-
- -
+
+
-
+ + + diff --git a/src/app/components/shared-files/shared-files.component.html b/src/app/components/shared-files/shared-files.component.html index d04428c00..da0f8f4c9 100644 --- a/src/app/components/shared-files/shared-files.component.html +++ b/src/app/components/shared-files/shared-files.component.html @@ -1,80 +1,79 @@ -
-
- - + + + + - - + + + + + + + - - - - -
+ +
+ -
-
- + + + + + + - - - - - - + + - - + + + + + + + + - - - - - - - - + + + + - - - - + + + - - - + + +
- - -
- -
- -
-
-
+
+ +
+ + diff --git a/src/app/components/shared-files/shared-files.module.ts b/src/app/components/shared-files/shared-files.module.ts index 288ae9199..878e3dd84 100644 --- a/src/app/components/shared-files/shared-files.module.ts +++ b/src/app/components/shared-files/shared-files.module.ts @@ -34,6 +34,7 @@ import { AppCommonModule } from '../common/common.module'; import { AppToolbarModule } from '../toolbar/toolbar.module'; import { ContextMenuModule } from '../context-menu/context-menu.module'; import { AppInfoDrawerModule } from '../info-drawer/info.drawer.module'; +import { AppLayoutModule } from '../layout/layout.module'; const routes: Routes = [ { @@ -56,7 +57,8 @@ const routes: Routes = [ AppCommonModule, AppToolbarModule, ContextMenuModule, - AppInfoDrawerModule + AppInfoDrawerModule, + AppLayoutModule ], declarations: [SharedFilesComponent], exports: [SharedFilesComponent] diff --git a/src/app/components/trashcan/trashcan.component.html b/src/app/components/trashcan/trashcan.component.html index 0b4d25946..0dbe89f7a 100644 --- a/src/app/components/trashcan/trashcan.component.html +++ b/src/app/components/trashcan/trashcan.component.html @@ -1,83 +1,85 @@ -
-
- - + - - + + + - - - - -
+ + -
-
- + + + + + - - - -

{{ 'APP.BROWSE.TRASHCAN.EMPTY_STATE.FIRST_TEXT' | translate }}

-

{{ 'APP.BROWSE.TRASHCAN.EMPTY_STATE.SECOND_TEXT' | translate }}

- - - + +
+ - - + + + +

{{ 'APP.BROWSE.TRASHCAN.EMPTY_STATE.FIRST_TEXT' | translate }}

+

{{ 'APP.BROWSE.TRASHCAN.EMPTY_STATE.SECOND_TEXT' | translate }}

+ + + - - - - - - - - - - - - - - - + + + + [key]="column.key" + [title]="column.title" + [type]="column.type" + [format]="column.format" + [class]="column.class" + [sortable]="column.sortable"> + + + + - - + - - -
+ + + + + + + + + + + + + +
-
+ + + diff --git a/src/app/components/trashcan/trashcan.module.ts b/src/app/components/trashcan/trashcan.module.ts index ee88ac94b..ef6e507f2 100644 --- a/src/app/components/trashcan/trashcan.module.ts +++ b/src/app/components/trashcan/trashcan.module.ts @@ -33,6 +33,7 @@ import { AppCommonModule } from '../common/common.module'; import { AppToolbarModule } from '../toolbar/toolbar.module'; import { DirectivesModule } from '../../directives/directives.module'; import { ContextMenuModule } from '../context-menu/context-menu.module'; +import { AppLayoutModule } from '../layout/layout.module'; const routes: Routes = [ { @@ -54,7 +55,8 @@ const routes: Routes = [ DirectivesModule, AppCommonModule, AppToolbarModule, - ContextMenuModule + ContextMenuModule, + AppLayoutModule ], declarations: [TrashcanComponent], exports: [TrashcanComponent] diff --git a/src/app/extensions/core.extensions.module.ts b/src/app/extensions/core.extensions.module.ts index 461f1ceb2..725165020 100644 --- a/src/app/extensions/core.extensions.module.ts +++ b/src/app/extensions/core.extensions.module.ts @@ -26,7 +26,7 @@ import { CoreModule } from '@alfresco/adf-core'; import { CommonModule } from '@angular/common'; import { APP_INITIALIZER, ModuleWithProviders, NgModule } from '@angular/core'; -import { LayoutComponent } from '../components/layout/layout.component'; +import { AppLayoutComponent } from '../components/layout/app-layout/app-layout.component'; import * as repository from './evaluators/repository.evaluators'; import * as app from './evaluators/app.evaluators'; import * as nav from './evaluators/navigation.evaluators'; @@ -75,7 +75,7 @@ export class CoreExtensionsModule { constructor(extensions: ExtensionService) { extensions.setComponents({ - 'app.layout.main': LayoutComponent, + 'app.layout.main': AppLayoutComponent, 'app.components.tabs.metadata': MetadataTabComponent, 'app.components.tabs.comments': CommentsTabComponent, 'app.components.tabs.versions': VersionsTabComponent, diff --git a/src/app/ui/application.scss b/src/app/ui/application.scss index a60e7ca1c..2014b63a0 100644 --- a/src/app/ui/application.scss +++ b/src/app/ui/application.scss @@ -16,9 +16,9 @@ body { } } +// todo: move this to corresponding component theme files app-root, app-about, -app-layout, adf-layout-container, aca-search-results, ng-component { diff --git a/src/app/ui/custom-theme.scss b/src/app/ui/custom-theme.scss index 2c20d22ac..79b6b83fd 100644 --- a/src/app/ui/custom-theme.scss +++ b/src/app/ui/custom-theme.scss @@ -11,6 +11,7 @@ @import '../components/context-menu/context-menu.component.theme'; @import '../dialogs/node-versions/node-versions.dialog.theme'; @import '../components/create-menu/create-menu.component.scss'; +@import '../components/layout/layout.theme.scss'; @import './overrides/adf-toolbar.theme'; @import './overrides/adf-search-filter.theme'; @@ -26,7 +27,6 @@ @import './overrides/adf-layout-header.theme'; @import './overrides/adf-version-manager.theme'; -@import 'layout'; @import 'snackbar'; $grey-scale: ( @@ -83,7 +83,7 @@ $custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent); @include adf-layout-header-theme($theme); @include adf-version-manager-theme($theme); - @include aca-layout-theme($theme); + @include layout-theme($theme); @include aca-search-input-theme($theme); @include aca-generic-error-theme($theme); @include app-permission-manager-theme($theme); diff --git a/src/app/ui/layout.scss b/src/app/ui/layout.scss deleted file mode 100644 index 09005ef66..000000000 --- a/src/app/ui/layout.scss +++ /dev/null @@ -1,55 +0,0 @@ -@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; - } -}