mirror of
https://github.com/Alfresco/alfresco-content-app.git
synced 2025-10-08 14:51:14 +00:00
[ADF-2559] Sidenav layout extraction (#253)
* First step of extraction * Add content also and fix initial mobile screen issue * Move ADF sidenav-layout to different folder for easier future removal * Test the new behaviour * test fix * minor fixes
This commit is contained in:
Popovics András
committed by
Denys Vuika
Denys Vuika
parent
2a36f2100c
commit
abe244fed9
@@ -1,38 +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 { trigger, transition, animate, style, state } from '@angular/animations';
|
||||
|
||||
export const sidenavAnimation = trigger('sidenavAnimation', [
|
||||
state('expanded', style({ width: '{{ width }}px' }), { params : { width: 0 } }),
|
||||
state('compact', style({ width: '{{ width }}px' }), { params : { width: 0 } }),
|
||||
transition('compact <=> expanded', animate('0.4s cubic-bezier(0.25, 0.8, 0.25, 1)'))
|
||||
]);
|
||||
|
||||
export const contentAnimation = trigger('contentAnimation', [
|
||||
state('expanded', style({ 'margin-left': '{{ marginLeft }}px' }), { params : { marginLeft: 0 } }),
|
||||
state('compact', style({'margin-left': '{{ marginLeft }}px' }), { params : { marginLeft: 0 } }),
|
||||
transition('expanded <=> compact', animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)'))
|
||||
]);
|
||||
@@ -1,13 +0,0 @@
|
||||
<mat-sidenav-container>
|
||||
<mat-sidenav
|
||||
[ngClass]="{ 'sidenav--hidden': hideSidenav }"
|
||||
[@sidenavAnimation]="sidenavAnimationState"
|
||||
[opened]="!mobileQuery.matches"
|
||||
[mode]="mobileQuery.matches ? 'over' : 'side'">
|
||||
<ng-content sidenav select="[app-layout-navigation]"></ng-content>
|
||||
</mat-sidenav>
|
||||
|
||||
<mat-sidenav-content [@contentAnimation]="contentAnimationState">
|
||||
<ng-content select="[app-layout-content]"></ng-content>
|
||||
</mat-sidenav-content>
|
||||
</mat-sidenav-container>
|
||||
@@ -1,39 +0,0 @@
|
||||
:host {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
ng-content {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidenav--hidden {
|
||||
visibility: hidden !important;
|
||||
width: 0 !important;
|
||||
transform: unset !important;
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
.mat-sidenav-container {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mat-sidenav {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mat-sidenav-content,
|
||||
.mat-drawer-transition .mat-drawer-content {
|
||||
transform: unset !important;
|
||||
transition-property: unset !important;
|
||||
transition-duration: unset !important;
|
||||
transition-timing-function: unset !important;
|
||||
}
|
||||
@@ -1,105 +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, Input, ViewChild, OnInit, OnDestroy } from '@angular/core';
|
||||
import { MatSidenav } from '@angular/material';
|
||||
import {MediaMatcher} from '@angular/cdk/layout';
|
||||
import { sidenavAnimation, contentAnimation } from './animations';
|
||||
|
||||
@Component({
|
||||
selector: 'app-layout-container',
|
||||
templateUrl: './layout-container.component.html',
|
||||
styleUrls: ['./layout-container.component.scss'],
|
||||
animations: [ sidenavAnimation, contentAnimation ]
|
||||
})
|
||||
export class LayoutContainerComponent implements OnInit, OnDestroy {
|
||||
static STEP_OVER = 600;
|
||||
|
||||
@Input() sidenavMin: number;
|
||||
@Input() sidenavMax: number;
|
||||
@Input() stepOver: number;
|
||||
@Input() hideSidenav: boolean = false;
|
||||
|
||||
@ViewChild(MatSidenav) sidenav: MatSidenav;
|
||||
|
||||
sidenavAnimationState: any;
|
||||
contentAnimationState: any;
|
||||
isMenuMinimized = false;
|
||||
mobileQuery: MediaQueryList;
|
||||
|
||||
constructor(private mediaMatcher: MediaMatcher) {
|
||||
this.mobileQueryListener = this.mobileQueryListener.bind(this);
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
const stepOver = this.stepOver || LayoutContainerComponent.STEP_OVER;
|
||||
|
||||
this.mobileQuery = this.mediaMatcher.matchMedia(`(max-width: ${stepOver}px)`);
|
||||
this.mobileQuery.addListener(this.mobileQueryListener);
|
||||
this.sidenavAnimationState = { value: 'expanded', params: { width: this.sidenavMax } };
|
||||
this.contentAnimationState = { value: 'compact', params: {marginLeft: this.sidenavMax } };
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.mobileQuery.removeListener(this.mobileQueryListener);
|
||||
}
|
||||
|
||||
toggleMenu(): void {
|
||||
if (!this.mobileQuery.matches) {
|
||||
this.isMenuMinimized = !this.isMenuMinimized;
|
||||
this.sidenavAnimationState = this.sidenavAnimation();
|
||||
this.contentAnimationState = this.contentAnimation();
|
||||
} else {
|
||||
this.isMenuMinimized = false;
|
||||
this.sidenav.toggle();
|
||||
}
|
||||
}
|
||||
|
||||
sidenavAnimation() {
|
||||
return this.sidenavAnimationState.value === 'expanded'
|
||||
? { value: 'compact', params: {width: this.sidenavMin } }
|
||||
: { value: 'expanded', params: { width: this.sidenavMax } };
|
||||
}
|
||||
|
||||
contentAnimation() {
|
||||
if (this.mobileQuery.matches) {
|
||||
return { value: 'expanded', params: { marginLeft: 0 } };
|
||||
}
|
||||
|
||||
if (this.sidenavAnimationState.value === 'expanded') {
|
||||
return { value: 'compact', params: { marginLeft: this.sidenavMax } };
|
||||
}
|
||||
|
||||
if (this.sidenavAnimationState.value === 'compact') {
|
||||
return { value: 'expanded', params: { marginLeft: this.sidenavMin } };
|
||||
}
|
||||
}
|
||||
|
||||
private mobileQueryListener() {
|
||||
this.isMenuMinimized = false;
|
||||
this.sidenavAnimationState = { value: 'expanded', params: { width: this.sidenavMax } };
|
||||
this.contentAnimationState = this.contentAnimation();
|
||||
}
|
||||
}
|
||||
@@ -3,22 +3,24 @@
|
||||
[parentId]="node?.id"
|
||||
[disabled]="!canCreateContent(node)">
|
||||
|
||||
<app-header (menu)="container.toggleMenu()"></app-header>
|
||||
|
||||
<app-layout-container #container
|
||||
sidenavMin="70"
|
||||
sidenavMax="320"
|
||||
<app-sidenav-layout
|
||||
[sidenavMin]="70"
|
||||
[sidenavMax]="320"
|
||||
[stepOver]="600"
|
||||
[hideSidenav]="isPreview"
|
||||
class="layout__content">
|
||||
[hideSidenav]="isPreview">
|
||||
|
||||
<app-sidenav
|
||||
app-layout-navigation
|
||||
[showLabel]="!container.isMenuMinimized">
|
||||
</app-sidenav>
|
||||
<ng-template appLayoutHeader let-toggleMenu="toggleMenu">
|
||||
<app-header (menu)="toggleMenu()"></app-header>
|
||||
</ng-template>
|
||||
|
||||
<router-outlet app-layout-content></router-outlet>
|
||||
</app-layout-container>
|
||||
<ng-template appLayoutNavigation let-isMenuMinimized="isMenuMinimized">
|
||||
<app-sidenav [showLabel]="!isMenuMinimized()"></app-sidenav>
|
||||
</ng-template>
|
||||
|
||||
<ng-template appLayoutContent>
|
||||
<router-outlet></router-outlet>
|
||||
</ng-template>
|
||||
</app-sidenav-layout>
|
||||
|
||||
<adf-file-uploading-dialog position="left"></adf-file-uploading-dialog>
|
||||
</adf-upload-drag-area>
|
||||
|
||||
@@ -1,8 +1,4 @@
|
||||
:host {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
|
||||
router-outlet {
|
||||
flex: 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -37,7 +37,7 @@ import { BrowsingFilesService } from '../../common/services/browsing-files.servi
|
||||
})
|
||||
export class LayoutComponent implements OnInit, OnDestroy {
|
||||
node: MinimalNodeEntryEntity;
|
||||
isPreview: boolean = false;
|
||||
isPreview = false;
|
||||
|
||||
private subscriptions: Subscription[] = [];
|
||||
|
||||
|
||||
Reference in New Issue
Block a user