mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-3177] added general header component (#3537)
* [ADF-3177] added general header component * [ADF-3177] added documentation and removed user info mobile behaviour * [ADF-3177] eddited doc file * [ADF-3177] renamed folder and style changes * [ADF-3177] style changes * [ADF-3177] fix tests * [ADF-3177] fix lint errors and tests * [APM-3177] css changes * [ADF-3177] fix pr * [ADF-3177] updated documentation * [ADF-3177] expose module with old name * [ADF-3177] expose module with old name
This commit is contained in:
Georgiana Roman
committed by
Eugenio Romano
Eugenio Romano
parent
87d7a6a27f
commit
c4d3bf231a
@@ -0,0 +1,16 @@
|
||||
<mat-sidenav-container>
|
||||
<mat-sidenav
|
||||
[disableClose]="!isMobileScreenSize"
|
||||
[ngClass]="{ 'sidenav--hidden': hideSidenav }"
|
||||
[@sidenavAnimation]="sidenavAnimationState"
|
||||
[opened]="!isMobileScreenSize"
|
||||
[mode]="isMobileScreenSize ? 'over' : 'side'">
|
||||
<ng-content sidenav select="[app-layout-navigation]"></ng-content>
|
||||
</mat-sidenav>
|
||||
|
||||
<div>
|
||||
<div [@contentAnimation]="contentAnimationState" style="margin-left: 0 !important">
|
||||
<ng-content select="[app-layout-content]"></ng-content>
|
||||
</div>
|
||||
</div>
|
||||
</mat-sidenav-container>
|
||||
@@ -0,0 +1,50 @@
|
||||
@mixin adf-layout-container-theme($theme) {
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
|
||||
adf-layout-container {
|
||||
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;
|
||||
border-right: 1px solid mat-color($foreground, text, 0.07);
|
||||
background-color: mat-color($background,background);
|
||||
}
|
||||
|
||||
mat-sidenav-content {
|
||||
margin-left: 0px !important;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Component, Input, ViewChild, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
|
||||
import { MatSidenav } from '@angular/material';
|
||||
import { sidenavAnimation, contentAnimation } from '../../helpers/animations';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-layout-container',
|
||||
templateUrl: './layout-container.component.html',
|
||||
styleUrls: ['./layout-container.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
animations: [ sidenavAnimation, contentAnimation ]
|
||||
})
|
||||
export class LayoutContainerComponent implements OnInit, OnDestroy {
|
||||
@Input() sidenavMin: number;
|
||||
@Input() sidenavMax: number;
|
||||
|
||||
// " | any", because Safari throws an error otherwise...
|
||||
@Input() mediaQueryList: MediaQueryList | any;
|
||||
|
||||
@Input() hideSidenav = false;
|
||||
@Input() expandedSidenav = true;
|
||||
|
||||
@ViewChild(MatSidenav) sidenav: MatSidenav;
|
||||
|
||||
sidenavAnimationState: any;
|
||||
contentAnimationState: any;
|
||||
|
||||
SIDENAV_STATES = { MOBILE: {}, EXPANDED: {}, COMPACT: {} };
|
||||
CONTENT_STATES = { MOBILE: {}, EXPANDED: {}, COMPACT: {} };
|
||||
|
||||
constructor() {
|
||||
this.onMediaQueryChange = this.onMediaQueryChange.bind(this);
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.SIDENAV_STATES.MOBILE = { value: 'expanded', params: { width: this.sidenavMax } };
|
||||
this.SIDENAV_STATES.EXPANDED = { value: 'expanded', params: { width: this.sidenavMax } };
|
||||
this.SIDENAV_STATES.COMPACT = { value: 'compact', params: {width: this.sidenavMin } };
|
||||
|
||||
this.CONTENT_STATES.MOBILE = { value: 'expanded', params: { marginLeft: 0 } };
|
||||
this.CONTENT_STATES.EXPANDED = { value: 'expanded', params: { marginLeft: this.sidenavMin } };
|
||||
this.CONTENT_STATES.COMPACT = { value: 'compact', params: { marginLeft: this.sidenavMax } };
|
||||
|
||||
this.mediaQueryList.addListener(this.onMediaQueryChange);
|
||||
|
||||
if (this.isMobileScreenSize) {
|
||||
this.sidenavAnimationState = this.SIDENAV_STATES.MOBILE;
|
||||
this.contentAnimationState = this.CONTENT_STATES.MOBILE;
|
||||
} else if (this.expandedSidenav) {
|
||||
this.sidenavAnimationState = this.SIDENAV_STATES.EXPANDED;
|
||||
this.contentAnimationState = this.CONTENT_STATES.COMPACT;
|
||||
} else {
|
||||
this.sidenavAnimationState = this.SIDENAV_STATES.COMPACT;
|
||||
this.contentAnimationState = this.CONTENT_STATES.EXPANDED;
|
||||
}
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.mediaQueryList.removeListener(this.onMediaQueryChange);
|
||||
}
|
||||
|
||||
toggleMenu(): void {
|
||||
if (this.isMobileScreenSize) {
|
||||
this.sidenav.toggle();
|
||||
} else {
|
||||
this.sidenavAnimationState = this.toggledSidenavAnimation;
|
||||
this.contentAnimationState = this.toggledContentAnimation;
|
||||
}
|
||||
}
|
||||
|
||||
private get toggledSidenavAnimation() {
|
||||
return this.sidenavAnimationState === this.SIDENAV_STATES.EXPANDED
|
||||
? this.SIDENAV_STATES.COMPACT
|
||||
: this.SIDENAV_STATES.EXPANDED;
|
||||
}
|
||||
|
||||
private get toggledContentAnimation() {
|
||||
if (this.isMobileScreenSize) {
|
||||
return this.CONTENT_STATES.MOBILE;
|
||||
}
|
||||
|
||||
if (this.sidenavAnimationState === this.SIDENAV_STATES.EXPANDED) {
|
||||
return this.CONTENT_STATES.COMPACT;
|
||||
} else {
|
||||
return this.CONTENT_STATES.EXPANDED;
|
||||
}
|
||||
}
|
||||
|
||||
get isMobileScreenSize(): boolean {
|
||||
return this.mediaQueryList.matches;
|
||||
}
|
||||
|
||||
private onMediaQueryChange() {
|
||||
this.sidenavAnimationState = this.SIDENAV_STATES.EXPANDED;
|
||||
this.contentAnimationState = this.toggledContentAnimation;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user