From 4e8210b7fb329cd253642a53271fba56f908e21b Mon Sep 17 00:00:00 2001 From: Bogdan Cilibiu Date: Wed, 14 Mar 2018 05:18:39 +0200 Subject: [PATCH] mini sidenav variant --- src/app/app.module.ts | 2 + .../components/header/header.component.html | 4 + .../components/header/header.component.scss | 11 ++- src/app/components/header/header.component.ts | 8 +- src/app/components/layout/animations.ts | 32 +++++++ .../layout/layout-container.component.html | 12 +++ .../layout/layout-container.component.scss | 40 +++++++++ .../layout/layout-container.component.ts | 89 ++++++++++++++++++ .../components/layout/layout.component.html | 22 +++-- .../components/sidenav/sidenav.component.html | 21 +++-- .../components/sidenav/sidenav.component.scss | 90 +++++++++++-------- .../components/sidenav/sidenav.component.ts | 6 +- src/app/ui/_layout.scss | 9 +- src/app/ui/application.scss | 2 +- .../ui/overrides/_alfresco-upload-dialog.scss | 6 +- 15 files changed, 291 insertions(+), 63 deletions(-) create mode 100644 src/app/components/layout/animations.ts create mode 100644 src/app/components/layout/layout-container.component.html create mode 100644 src/app/components/layout/layout-container.component.scss create mode 100644 src/app/components/layout/layout-container.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index f1f138a22..1f299be98 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -45,6 +45,7 @@ import { RecentFilesComponent } from './components/recent-files/recent-files.com import { SharedFilesComponent } from './components/shared-files/shared-files.component'; import { TrashcanComponent } from './components/trashcan/trashcan.component'; import { LayoutComponent } from './components/layout/layout.component'; +import { LayoutContainerComponent } from './components/layout/layout-container.component'; import { HeaderComponent } from './components/header/header.component'; import { CurrentUserComponent } from './components/current-user/current-user.component'; import { SearchComponent } from './components/search/search.component'; @@ -69,6 +70,7 @@ import { EmptyFolderComponent } from './components/empty-folder/empty-folder.com GenericErrorComponent, LoginComponent, LayoutComponent, + LayoutContainerComponent, HeaderComponent, CurrentUserComponent, SearchComponent, diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html index a289d2284..286367fde 100644 --- a/src/app/components/header/header.component.html +++ b/src/app/components/header/header.component.html @@ -1,5 +1,9 @@ + + diff --git a/src/app/components/header/header.component.scss b/src/app/components/header/header.component.scss index 85b2ae712..540030c99 100644 --- a/src/app/components/header/header.component.scss +++ b/src/app/components/header/header.component.scss @@ -1,6 +1,7 @@ @import 'variables'; .app-menu { + height: $app-menu-height; &.adf-toolbar { .mat-toolbar { @@ -26,12 +27,20 @@ background-color: $alfresco-white !important; } } + + .adf-toolbar-title { + color: $alfresco-white; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + } } .app-menu__title { width: 100px; height: 50px; - margin-left: 5px; + margin-left: 40px; display: flex; justify-content: center; align-items: stretch; diff --git a/src/app/components/header/header.component.ts b/src/app/components/header/header.component.ts index 421944706..235610db8 100644 --- a/src/app/components/header/header.component.ts +++ b/src/app/components/header/header.component.ts @@ -24,7 +24,7 @@ */ import { DomSanitizer } from '@angular/platform-browser'; -import { Component, ViewEncapsulation, SecurityContext } from '@angular/core'; +import { Component, Output, EventEmitter, ViewEncapsulation, SecurityContext } from '@angular/core'; import { AppConfigService } from '@alfresco/adf-core'; @Component({ @@ -34,6 +34,8 @@ import { AppConfigService } from '@alfresco/adf-core'; encapsulation: ViewEncapsulation.None }) export class HeaderComponent { + @Output() menu: EventEmitter = new EventEmitter(); + private defaultPath = '/assets/images/alfresco-logo-white.svg'; private defaultBackgroundColor = '#2196F3'; @@ -42,6 +44,10 @@ export class HeaderComponent { private sanitizer: DomSanitizer ) {} + toggleMenu() { + this.menu.emit(); + } + get appName(): string { return this.appConfig.get('application.name'); } diff --git a/src/app/components/layout/animations.ts b/src/app/components/layout/animations.ts new file mode 100644 index 000000000..03e5adbfe --- /dev/null +++ b/src/app/components/layout/animations.ts @@ -0,0 +1,32 @@ +/*! + * @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 { trigger, transition, animate, style, state } from '@angular/animations'; + +export const miniSidenavAnimation = trigger('miniSidenavAnimation', [ + 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)')) +]); diff --git a/src/app/components/layout/layout-container.component.html b/src/app/components/layout/layout-container.component.html new file mode 100644 index 000000000..a46869a6a --- /dev/null +++ b/src/app/components/layout/layout-container.component.html @@ -0,0 +1,12 @@ + + + + + + + + + diff --git a/src/app/components/layout/layout-container.component.scss b/src/app/components/layout/layout-container.component.scss new file mode 100644 index 000000000..a030bc344 --- /dev/null +++ b/src/app/components/layout/layout-container.component.scss @@ -0,0 +1,40 @@ +@mixin transition($property) { + transition-property: $property !important; + transition-duration: 0.4s !important; + transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !important; +} + +:host { + display: block; + width: 100%; + height: 100%; + overflow: hidden; +} + +ng-content { + display: block; + width: 100%; + height: 100%; + overflow: hidden; +} + +.mat-sidenav-container { + display: block; + width: 100%; + height: 100%; + overflow: hidden; +} + +.mat-sidenav { + background: #fafafa; + border-right: 1px solid rgba(0, 0, 0, 0.07); + overflow: hidden; +} + +.mat-sidenav-content { + @include transition('margin-left'); +} + +.mat-drawer-transition .mat-drawer-content { + @include transition('margin-left'); +} diff --git a/src/app/components/layout/layout-container.component.ts b/src/app/components/layout/layout-container.component.ts new file mode 100644 index 000000000..6631e5428 --- /dev/null +++ b/src/app/components/layout/layout-container.component.ts @@ -0,0 +1,89 @@ +/*! + * @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, Input, ViewChild, OnInit, OnDestroy } from '@angular/core'; +import { MatSidenav } from '@angular/material'; +import {MediaMatcher} from '@angular/cdk/layout'; + +import { miniSidenavAnimation } from './animations'; + +@Component({ + selector: 'app-layout-container', + templateUrl: './layout-container.component.html', + styleUrls: ['./layout-container.component.scss'], + animations: [ miniSidenavAnimation ] +}) +export class LayoutContainerComponent implements OnInit, OnDestroy { + static STEP_OVER = 600; + static COMPACT = true; + + @Input() sidenavMin: number; + @Input() sidenavMax: number; + @Input() sidenavCompact: boolean = LayoutContainerComponent.COMPACT; + @Input() stepOver: number; + + @ViewChild(MatSidenav) sidenav: MatSidenav; + + sidenavAnimationState: 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 } }; + } + + ngOnDestroy(): void { + this.mobileQuery.removeListener(this.mobileQueryListener); + } + + toggleMenu(): void { + + if (!this.mobileQuery.matches && this.sidenavCompact) { + this.isMenuMinimized = !this.isMenuMinimized; + + this.sidenavAnimationState = + this.sidenavAnimationState.value === 'expanded' + ? { value: 'compact', params: {width: this.sidenavMin } } + : { value: 'expanded', params: { width: this.sidenavMax } }; + + } else { + this.isMenuMinimized = false; + this.sidenav.toggle(); + } + } + + private mobileQueryListener() { + this.isMenuMinimized = false; + this.sidenavAnimationState = { value: 'expanded', params: { width: this.sidenavMax } }; + } +} diff --git a/src/app/components/layout/layout.component.html b/src/app/components/layout/layout.component.html index 45e9a97f1..d1b47ead7 100644 --- a/src/app/components/layout/layout.component.html +++ b/src/app/components/layout/layout.component.html @@ -2,13 +2,23 @@ - -
- - -
+ - + + + + + + + + + diff --git a/src/app/components/sidenav/sidenav.component.html b/src/app/components/sidenav/sidenav.component.html index e42653bc2..0fb4674f0 100644 --- a/src/app/components/sidenav/sidenav.component.html +++ b/src/app/components/sidenav/sidenav.component.html @@ -1,10 +1,17 @@
-
- + +
-
+ \ No newline at end of file diff --git a/src/app/components/sidenav/sidenav.component.scss b/src/app/components/sidenav/sidenav.component.scss index b381bf5b7..a9af2e45d 100644 --- a/src/app/components/sidenav/sidenav.component.scss +++ b/src/app/components/sidenav/sidenav.component.scss @@ -18,6 +18,12 @@ $sidenav-menu-item--icon-size: 24px; border-bottom: 0; } + .section--new--mini { + display: flex; + justify-content: center; + align-items: center; + } + &__section { padding: $sidenav-section--v-padding @@ -29,6 +35,7 @@ $sidenav-menu-item--icon-size: 24px; &--new { padding-top: 2 * $sidenav-section--v-padding; padding-bottom: 2 * $sidenav-section--v-padding; + height: 40px; } &--new__button { @@ -36,50 +43,61 @@ $sidenav-menu-item--icon-size: 24px; color: $alfresco-white; background-color: $alfresco-primary-accent--default; } + + .new__button--mini { + color: $alfresco-primary-accent--default; + } } &-menu { - margin: 0 -1 * $sidenav-section--h-padding; + display: inline-flex; + flex-direction: column; padding: 0; + margin: 0; list-style-type: none; &__item { - padding: $sidenav-menu-item--v-padding 0; - - &-link { - - padding-left: $sidenav-menu-item--h-padding + 16px + 24px; - position: relative; - display: block; - color: $alfresco-secondary-text-color; - text-decoration: none; - - & > .material-icons { - position: absolute; - top: 50%; - left: $sidenav-menu-item--h-padding; - margin-top: -14px; - } - - &--active { - color: $alfresco-primary-accent--default; - } - - &:not(&--active):hover { - color: $alfresco-primary-text-color; - } - - &.disabled { - cursor: default !important; - color: $alfresco-secondary-text-color !important; - opacity: .25; - } - - &--noicon { - padding-left: 26px; - } - } + height: 24px; + padding: 12px 0; } } + + &-link { + flex-direction: row; + display: flex; + align-items: center; + text-decoration: none; + color: $alfresco-secondary-text-color; + text-decoration: none; + height: 24px; + + &--active { + color: $alfresco-primary-accent--default; + } + + &:not(&--active):hover { + color: $alfresco-primary-text-color; + } + + &.disabled { + cursor: default !important; + color: $alfresco-secondary-text-color !important; + opacity: .25; + } + + &--noicon { + padding-left: 26px; + } + } + + &-link__icon { + width: 24px; + } + + &-link__label { + opacity: 1; + width: 240px; + margin-left: 20px; + } } } diff --git a/src/app/components/sidenav/sidenav.component.ts b/src/app/components/sidenav/sidenav.component.ts index 0488f2901..02b069377 100644 --- a/src/app/components/sidenav/sidenav.component.ts +++ b/src/app/components/sidenav/sidenav.component.ts @@ -24,9 +24,7 @@ */ import { Subscription } from 'rxjs/Rx'; - -import { Component, OnInit, OnDestroy } from '@angular/core'; - +import { Component, Input, OnInit, OnDestroy } from '@angular/core'; import { MinimalNodeEntryEntity } from 'alfresco-js-api'; import { ContentService, AppConfigService } from '@alfresco/adf-core'; @@ -38,6 +36,8 @@ import { BrowsingFilesService } from '../../common/services/browsing-files.servi styleUrls: ['./sidenav.component.scss'] }) export class SidenavComponent implements OnInit, OnDestroy { + @Input() showLabel: boolean; + node: MinimalNodeEntryEntity = null; navigation = []; diff --git a/src/app/ui/_layout.scss b/src/app/ui/_layout.scss index fb54980ad..6c043252b 100644 --- a/src/app/ui/_layout.scss +++ b/src/app/ui/_layout.scss @@ -1,4 +1,4 @@ -@import './_variables.scss'; +@import 'variables'; $app-layout--header-height: 65px; $app-layout--side-width: 320px; @@ -26,12 +26,6 @@ $app-inner-layout--footer-height: 48px; display: flex; flex: 1; } - - &-side { - flex: 0 0 $app-layout--side-width; - background: $alfresco-gray-background; - border-right: 1px solid $alfresco-divider-color; - } } .content--hide { @@ -71,6 +65,7 @@ $app-inner-layout--footer-height: 48px; flex-direction: column; flex: 1; overflow: hidden; + background: #fff; } &__content--scroll { diff --git a/src/app/ui/application.scss b/src/app/ui/application.scss index 5a7365ee3..09b860d19 100644 --- a/src/app/ui/application.scss +++ b/src/app/ui/application.scss @@ -1,7 +1,7 @@ @import 'variables'; @import 'theme'; -html, body { +html, body, ng-component { display: flex; font-size: 14px; font-family: "Muli", sans-serif; diff --git a/src/app/ui/overrides/_alfresco-upload-dialog.scss b/src/app/ui/overrides/_alfresco-upload-dialog.scss index 85970710c..f99215636 100644 --- a/src/app/ui/overrides/_alfresco-upload-dialog.scss +++ b/src/app/ui/overrides/_alfresco-upload-dialog.scss @@ -1,4 +1,8 @@ -@import '../_variables.scss'; +@import 'variables'; + +.upload-dialog { + z-index: 999; +} .adf-file-uploading-row { &__status {