mirror of
https://github.com/Alfresco/alfresco-content-app.git
synced 2025-07-24 17:31:52 +00:00
improved page layout (#761)
* app-layout component * layout theme reorg * merge app-layout styles * rework page layouting
This commit is contained in:
committed by
Cilibiu Bogdan
parent
f975650850
commit
8ada58f3a5
@@ -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: '',
|
||||
|
@@ -1,6 +1,7 @@
|
||||
<div class="inner-layout inner-layout--scroll">
|
||||
<div class="inner-layout__content">
|
||||
<div class="inner-layout__panel content--scroll">
|
||||
<app-page-layout>
|
||||
|
||||
<app-page-layout-content [scrollable]="true">
|
||||
<div class="main-content">
|
||||
<article class="padding">
|
||||
<header class="header padding-left">Alfresco Content Application</header>
|
||||
<p class="padding-left"> version: {{ releaseVersion }} </p>
|
||||
@@ -32,5 +33,6 @@
|
||||
<adf-datatable [data]="data"></adf-datatable>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</app-page-layout-content>
|
||||
|
||||
</app-page-layout>
|
||||
|
@@ -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 {}
|
||||
|
@@ -1,5 +1,6 @@
|
||||
<div class="inner-layout">
|
||||
<div class="inner-layout__header">
|
||||
<app-page-layout>
|
||||
|
||||
<app-page-layout-header>
|
||||
<adf-breadcrumb root="APP.BROWSE.FAVORITES.TITLE">
|
||||
</adf-breadcrumb>
|
||||
|
||||
@@ -10,9 +11,10 @@
|
||||
<aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
|
||||
</ng-container>
|
||||
</adf-toolbar>
|
||||
</div>
|
||||
<div class="inner-layout__content">
|
||||
<div class="inner-layout__panel">
|
||||
</app-page-layout-header>
|
||||
|
||||
<app-page-layout-content>
|
||||
<div class="main-content">
|
||||
<adf-document-list #documentList
|
||||
acaDocumentList
|
||||
acaContextActions
|
||||
@@ -73,8 +75,9 @@
|
||||
</adf-pagination>
|
||||
</div>
|
||||
|
||||
<div class="inner-layout__side-panel" *ngIf="infoDrawerOpened$ | async">
|
||||
<div class="sidebar" *ngIf="infoDrawerOpened$ | async">
|
||||
<aca-info-drawer [node]="selection.last"></aca-info-drawer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</app-page-layout-content>
|
||||
|
||||
</app-page-layout>
|
||||
|
@@ -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]
|
||||
|
@@ -1,5 +1,6 @@
|
||||
<div class="inner-layout">
|
||||
<div class="inner-layout__header">
|
||||
<app-page-layout [hasError]="!isValidPath">
|
||||
|
||||
<app-page-layout-header>
|
||||
<adf-breadcrumb
|
||||
[root]="title"
|
||||
[folderNode]="node"
|
||||
@@ -12,14 +13,14 @@
|
||||
<aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
|
||||
</ng-container>
|
||||
</adf-toolbar>
|
||||
</div>
|
||||
</app-page-layout-header>
|
||||
|
||||
<div [attr.class]="isValidPath ? 'inner-layout__content--hide' : 'inner-layout__content'">
|
||||
<app-page-layout-error>
|
||||
<aca-generic-error></aca-generic-error>
|
||||
</div>
|
||||
</app-page-layout-error>
|
||||
|
||||
<div [attr.class]="!isValidPath ? 'inner-layout__content--hide' : 'inner-layout__content'">
|
||||
<div class="inner-layout__panel">
|
||||
<app-page-layout-content>
|
||||
<div class="main-content">
|
||||
<adf-upload-drag-area
|
||||
[parentId]="node?.id"
|
||||
[disabled]="!canUpload">
|
||||
@@ -77,8 +78,9 @@
|
||||
</adf-upload-drag-area>
|
||||
</div>
|
||||
|
||||
<div class="inner-layout__side-panel" *ngIf="infoDrawerOpened$ | async">
|
||||
<div class="sidebar" *ngIf="infoDrawerOpened$ | async">
|
||||
<aca-info-drawer [node]="selection.last"></aca-info-drawer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</app-page-layout-content>
|
||||
|
||||
</app-page-layout>
|
||||
|
@@ -0,0 +1,38 @@
|
||||
<adf-upload-drag-area
|
||||
[parentId]="currentFolderId"
|
||||
[disabled]="!canUpload">
|
||||
|
||||
<adf-sidenav-layout
|
||||
#layout
|
||||
[sidenavMin]="70"
|
||||
[sidenavMax]="320"
|
||||
[stepOver]="600"
|
||||
[hideSidenav]="hideSidenav"
|
||||
[expandedSidenav]="expandedSidenav"
|
||||
(expanded)="onExpanded($event)">
|
||||
|
||||
<adf-sidenav-layout-header>
|
||||
<ng-template>
|
||||
<app-header
|
||||
*ngIf="!hideSidenav"
|
||||
(toggleClicked)="layout.toggleMenu($event)">
|
||||
</app-header>
|
||||
</ng-template>
|
||||
</adf-sidenav-layout-header>
|
||||
|
||||
<adf-sidenav-layout-navigation>
|
||||
<ng-template let-isMenuMinimized="isMenuMinimized">
|
||||
<app-sidenav [showLabel]="!isMenuMinimized()"></app-sidenav>
|
||||
</ng-template>
|
||||
</adf-sidenav-layout-navigation>
|
||||
|
||||
<adf-sidenav-layout-content>
|
||||
<ng-template>
|
||||
<router-outlet></router-outlet>
|
||||
</ng-template>
|
||||
</adf-sidenav-layout-content>
|
||||
|
||||
</adf-sidenav-layout>
|
||||
|
||||
<adf-file-uploading-dialog position="left"></adf-file-uploading-dialog>
|
||||
</adf-upload-drag-area>
|
@@ -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<LayoutComponent>;
|
||||
let component: LayoutComponent;
|
||||
describe('AppLayoutComponent', () => {
|
||||
let fixture: ComponentFixture<AppLayoutComponent>;
|
||||
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);
|
@@ -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;
|
||||
|
17
src/app/components/layout/app-layout/app-layout.theme.scss
Normal file
17
src/app/components/layout/app-layout/app-layout.theme.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
@@ -1,40 +0,0 @@
|
||||
<div class="layout">
|
||||
<adf-upload-drag-area
|
||||
[parentId]="currentFolderId"
|
||||
[disabled]="!canUpload">
|
||||
|
||||
<adf-sidenav-layout
|
||||
#layout
|
||||
[sidenavMin]="70"
|
||||
[sidenavMax]="320"
|
||||
[stepOver]="600"
|
||||
[hideSidenav]="hideSidenav"
|
||||
[expandedSidenav]="expandedSidenav"
|
||||
(expanded)="onExpanded($event)">
|
||||
|
||||
<adf-sidenav-layout-header>
|
||||
<ng-template>
|
||||
<app-header
|
||||
*ngIf="!hideSidenav"
|
||||
(toggleClicked)="layout.toggleMenu($event)">
|
||||
</app-header>
|
||||
</ng-template>
|
||||
</adf-sidenav-layout-header>
|
||||
|
||||
<adf-sidenav-layout-navigation>
|
||||
<ng-template let-isMenuMinimized="isMenuMinimized">
|
||||
<app-sidenav [showLabel]="!isMenuMinimized()"></app-sidenav>
|
||||
</ng-template>
|
||||
</adf-sidenav-layout-navigation>
|
||||
|
||||
<adf-sidenav-layout-content>
|
||||
<ng-template>
|
||||
<router-outlet></router-outlet>
|
||||
</ng-template>
|
||||
</adf-sidenav-layout-content>
|
||||
|
||||
</adf-sidenav-layout>
|
||||
|
||||
<adf-file-uploading-dialog position="left"></adf-file-uploading-dialog>
|
||||
</adf-upload-drag-area>
|
||||
</div>
|
@@ -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;
|
||||
}
|
||||
}
|
@@ -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 {}
|
||||
|
7
src/app/components/layout/layout.theme.scss
Normal file
7
src/app/components/layout/layout.theme.scss
Normal file
@@ -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);
|
||||
}
|
@@ -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 <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import {
|
||||
Component,
|
||||
ViewEncapsulation,
|
||||
ChangeDetectionStrategy,
|
||||
Input,
|
||||
HostBinding
|
||||
} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-page-layout-content',
|
||||
template: `<ng-content></ng-content>`,
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
host: { class: 'app-page-layout-content' }
|
||||
})
|
||||
export class PageLayoutContentComponent {
|
||||
@Input()
|
||||
@HostBinding('class.scrollable')
|
||||
scrollable = false;
|
||||
}
|
@@ -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 <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import {
|
||||
Component,
|
||||
ViewEncapsulation,
|
||||
ChangeDetectionStrategy
|
||||
} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-page-layout-error',
|
||||
template: `<ng-content></ng-content>`,
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
host: { class: 'app-page-layout-error' }
|
||||
})
|
||||
export class PageLayoutErrorComponent {}
|
@@ -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 <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import {
|
||||
Component,
|
||||
ViewEncapsulation,
|
||||
ChangeDetectionStrategy
|
||||
} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-page-layout-header',
|
||||
template: '<ng-content></ng-content>',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
host: { class: 'app-page-layout-header' }
|
||||
})
|
||||
export class PageLayoutHeaderComponent {}
|
@@ -0,0 +1,3 @@
|
||||
<ng-content select="app-page-layout-header"></ng-content>
|
||||
<ng-content select="app-page-layout-error" *ngIf="hasError"></ng-content>
|
||||
<ng-content select="app-page-layout-content" *ngIf="!hasError"></ng-content>
|
@@ -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 <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
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;
|
||||
}
|
46
src/app/components/layout/page-layout/page-layout.theme.scss
Normal file
46
src/app/components/layout/page-layout/page-layout.theme.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
@@ -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 <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
/*
|
||||
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 = <any>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);
|
||||
});
|
||||
});
|
||||
});
|
||||
*/
|
@@ -1,5 +1,6 @@
|
||||
<div class="inner-layout">
|
||||
<div class="inner-layout__header">
|
||||
<app-page-layout>
|
||||
|
||||
<app-page-layout-header>
|
||||
<adf-breadcrumb root="APP.BROWSE.LIBRARIES.TITLE">
|
||||
</adf-breadcrumb>
|
||||
|
||||
@@ -12,10 +13,10 @@
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</adf-toolbar>
|
||||
</div>
|
||||
</app-page-layout-header>
|
||||
|
||||
<div class="inner-layout__content">
|
||||
<div class="inner-layout__panel">
|
||||
<app-page-layout-content>
|
||||
<div class="main-content">
|
||||
<adf-document-list #documentList
|
||||
acaDocumentList
|
||||
[display]="documentDisplayMode$ | async"
|
||||
@@ -74,5 +75,5 @@
|
||||
<adf-pagination acaPagination [target]="documentList">
|
||||
</adf-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</app-page-layout-content>
|
||||
</app-page-layout>
|
||||
|
@@ -1,19 +1,19 @@
|
||||
<div class="inner-layout">
|
||||
<div class="inner-layout__header">
|
||||
<app-page-layout>
|
||||
|
||||
<app-page-layout-header>
|
||||
<adf-breadcrumb root="APP.BROWSE.RECENT.TITLE">
|
||||
</adf-breadcrumb>
|
||||
|
||||
<adf-toolbar class="inline">
|
||||
<app-document-display-mode *ifExperimental="'cardview'"></app-document-display-mode>
|
||||
|
||||
<ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
|
||||
<aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
|
||||
</ng-container>
|
||||
</adf-toolbar>
|
||||
</div>
|
||||
</app-page-layout-header>
|
||||
|
||||
<div class="inner-layout__content">
|
||||
<div class="inner-layout__panel">
|
||||
<app-page-layout-content>
|
||||
<div class="main-content">
|
||||
<adf-document-list #documentList
|
||||
acaDocumentList
|
||||
acaContextActions
|
||||
@@ -76,8 +76,8 @@
|
||||
</adf-pagination>
|
||||
</div>
|
||||
|
||||
<div class="inner-layout__side-panel" *ngIf="infoDrawerOpened$ | async">
|
||||
<div class="sidebar" *ngIf="infoDrawerOpened$ | async">
|
||||
<aca-info-drawer [node]="selection.last"></aca-info-drawer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</app-page-layout-content>
|
||||
</app-page-layout>
|
||||
|
@@ -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]
|
||||
|
@@ -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]
|
||||
|
@@ -1,5 +1,6 @@
|
||||
<div class="inner-layout">
|
||||
<div class="inner-layout__header">
|
||||
<app-page-layout>
|
||||
|
||||
<app-page-layout-header>
|
||||
<adf-breadcrumb root="APP.BROWSE.SEARCH.TITLE">
|
||||
</adf-breadcrumb>
|
||||
<adf-toolbar class="inline">
|
||||
@@ -7,10 +8,10 @@
|
||||
<aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
|
||||
</ng-container>
|
||||
</adf-toolbar>
|
||||
</div>
|
||||
</app-page-layout-header>
|
||||
|
||||
<div class="inner-layout__content">
|
||||
<div class="inner-layout__panel">
|
||||
<app-page-layout-content>
|
||||
<div class="main-content">
|
||||
<div class="adf-search-results">
|
||||
<adf-search-filter
|
||||
#searchFilter
|
||||
@@ -82,8 +83,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inner-layout__side-panel" *ngIf="infoDrawerOpened$ | async">
|
||||
<div class="sidebar" *ngIf="infoDrawerOpened$ | async">
|
||||
<aca-info-drawer [node]="selection.last"></aca-info-drawer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</app-page-layout-content>
|
||||
|
||||
</app-page-layout>
|
||||
|
@@ -1,19 +1,18 @@
|
||||
<div class="inner-layout">
|
||||
<div class="inner-layout__header">
|
||||
<app-page-layout>
|
||||
<app-page-layout-header>
|
||||
<adf-breadcrumb root="APP.BROWSE.SHARED.TITLE">
|
||||
</adf-breadcrumb>
|
||||
|
||||
<adf-toolbar class="inline">
|
||||
<app-document-display-mode *ifExperimental="'cardview'"></app-document-display-mode>
|
||||
|
||||
<ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
|
||||
<aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
|
||||
</ng-container>
|
||||
</adf-toolbar>
|
||||
</div>
|
||||
</app-page-layout-header>
|
||||
|
||||
<div class="inner-layout__content">
|
||||
<div class="inner-layout__panel">
|
||||
<app-page-layout-content>
|
||||
<div class="main-content">
|
||||
<adf-document-list #documentList
|
||||
acaDocumentList
|
||||
acaContextActions
|
||||
@@ -73,8 +72,8 @@
|
||||
</adf-pagination>
|
||||
</div>
|
||||
|
||||
<div class="inner-layout__side-panel" *ngIf="infoDrawerOpened$ | async">
|
||||
<div class="sidebar" *ngIf="infoDrawerOpened$ | async">
|
||||
<aca-info-drawer [node]="selection.last"></aca-info-drawer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</app-page-layout-content>
|
||||
</app-page-layout>
|
||||
|
@@ -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]
|
||||
|
@@ -1,5 +1,6 @@
|
||||
<div class="inner-layout">
|
||||
<div class="inner-layout__header">
|
||||
<app-page-layout>
|
||||
|
||||
<app-page-layout-header>
|
||||
<adf-breadcrumb root="APP.BROWSE.TRASHCAN.TITLE">
|
||||
</adf-breadcrumb>
|
||||
|
||||
@@ -10,10 +11,10 @@
|
||||
<aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
|
||||
</ng-container>
|
||||
</adf-toolbar>
|
||||
</div>
|
||||
</app-page-layout-header>
|
||||
|
||||
<div class="inner-layout__content">
|
||||
<div class="inner-layout__panel">
|
||||
<app-page-layout-content>
|
||||
<div class="main-content">
|
||||
<adf-document-list #documentList
|
||||
acaDocumentList
|
||||
acaContextActions
|
||||
@@ -79,5 +80,6 @@
|
||||
<adf-pagination acaPagination [target]="documentList">
|
||||
</adf-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</app-page-layout-content>
|
||||
|
||||
</app-page-layout>
|
||||
|
@@ -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]
|
||||
|
@@ -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,
|
||||
|
@@ -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 {
|
||||
|
@@ -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);
|
||||
|
@@ -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;
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user