mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-31 17:38:48 +00:00
[ADF-1611] Demo shell responsiveness (#2426)
* Reapplying the unreappliable * Fix buggy search button * Fix settings * Last bit of responsive stylings
This commit is contained in:
Popovics András
committed by
Eugenio Romano
Eugenio Romano
parent
b2452f6097
commit
cc1efc9cd6
@@ -0,0 +1,49 @@
|
||||
<md-sidenav-container class="adf-nav-container">
|
||||
<md-sidenav #sidenav class="adf-sidenav" position="end" mode="push">
|
||||
<md-nav-list>
|
||||
<a md-list-item *ngFor="let link of links" [routerLink]="link.href" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" (click)="sidenav.close()" class="adf-sidenav-link">
|
||||
<md-icon mdListIcon>{{link.icon}}</md-icon>
|
||||
<span>{{link.title}}</span>
|
||||
</a>
|
||||
<a md-list-item adf-logout (click)="sidenav.close()">
|
||||
<md-icon mdListIcon>exit_to_app</md-icon>
|
||||
<span>Logout</span>
|
||||
</a>
|
||||
</md-nav-list>
|
||||
</md-sidenav>
|
||||
|
||||
<md-toolbar color="primary" class="adf-app-layout-toolbar" md-no-ink>
|
||||
<adf-userinfo
|
||||
class="adf-app-layout-user-profile"
|
||||
[menuPositionX]="'before'"
|
||||
[menuPositionY]="'above'">
|
||||
</adf-userinfo>
|
||||
|
||||
<span fxFlex="1 1 auto" fxShow fxHide.lt-sm="true">ADF Demo Application</span>
|
||||
|
||||
<div class="adf-app-layout-menu-spacer"></div>
|
||||
|
||||
<search-bar fxFlex="0 1 auto"></search-bar>
|
||||
|
||||
<a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true" md-button data-automation-id="home" href="" routerLink="/home" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Home</a>
|
||||
<a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true" md-button data-automation-id="files" href="" routerLink="/files" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Content Services</a>
|
||||
<a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true" md-button data-automation-id="activiti" href="" routerLink="/activiti" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Process Services</a>
|
||||
<a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true" md-button data-automation-id="login" href="" routerLink="/login">Login</a>
|
||||
|
||||
<theme-picker></theme-picker>
|
||||
<button md-icon-button [mdMenuTriggerFor]="langMenu">
|
||||
<md-icon>language</md-icon>
|
||||
</button>
|
||||
<md-menu #langMenu="mdMenu">
|
||||
<button md-menu-item (click)="changeLanguage('en')">English</button>
|
||||
<button md-menu-item (click)="changeLanguage('it')">Italian</button>
|
||||
<button md-menu-item (click)="changeLanguage('ru')">Russian</button>
|
||||
</md-menu>
|
||||
|
||||
<button md-icon-button (click)="sidenav.open()">
|
||||
<md-icon>menu</md-icon>
|
||||
</button>
|
||||
</md-toolbar>
|
||||
|
||||
<router-outlet></router-outlet>
|
||||
</md-sidenav-container>
|
||||
@@ -0,0 +1,52 @@
|
||||
@mixin adf-app-layout-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$minimumAppWidth: 320px;
|
||||
$toolbarHeight: 64px;
|
||||
|
||||
.adf-app-layout {
|
||||
display: block;
|
||||
min-width: $minimumAppWidth;
|
||||
height: 100%;
|
||||
|
||||
.adf-nav-container {
|
||||
display: block;
|
||||
min-width: $minimumAppWidth;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.adf-sidenav-link {
|
||||
&.active {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
}
|
||||
|
||||
&-user-profile {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&-menu-spacer {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
&-toolbar {
|
||||
height: $toolbarHeight;
|
||||
line-height: $toolbarHeight;
|
||||
overflow: hidden;
|
||||
|
||||
md-toolbar-row {
|
||||
height: $toolbarHeight;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.adf-toolbar-link {
|
||||
min-width: 0;
|
||||
line-height: $toolbarHeight;
|
||||
|
||||
&.active {
|
||||
background-color: rgba(0,0,0,.12);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
/*!
|
||||
* @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, ViewEncapsulation } from '@angular/core';
|
||||
import { AlfrescoTranslationService } from 'ng2-alfresco-core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'app-layout.component.html',
|
||||
styleUrls: ['app-layout.component.scss'],
|
||||
host: {
|
||||
'class': 'adf-app-layout'
|
||||
},
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class AppLayoutComponent {
|
||||
|
||||
links: Array<any> = [
|
||||
{ href: '/home', icon: 'home', title: 'Home' },
|
||||
{ href: '/files', icon: 'folder_open', title: 'Content Services' },
|
||||
{ href: '/activiti', icon: 'device_hub', title: 'Process Services' },
|
||||
{ href: '/login', icon: 'vpn_key', title: 'Login' },
|
||||
{ href: '/dl-custom-sources', icon: 'extension', title: 'DL: Custom Sources' },
|
||||
{ href: '/datatable', icon: 'view_module', title: 'DataTable' },
|
||||
{ href: '/form', icon: 'poll', title: 'Form' },
|
||||
{ href: '/form-list', icon: 'library_books', title: 'Form List' },
|
||||
{ href: '/uploader', icon: 'file_upload', title: 'Uploader' },
|
||||
{ href: '/webscript', icon: 'extension', title: 'Webscript' },
|
||||
{ href: '/tag', icon: 'local_offer', title: 'Tag' },
|
||||
{ href: '/social', icon: 'thumb_up', title: 'Social' },
|
||||
{ href: '/settings', icon: 'settings', title: 'Settings' },
|
||||
{ href: '/about', icon: 'info_outline', title: 'About' }
|
||||
];
|
||||
|
||||
constructor(private translateService: AlfrescoTranslationService) {}
|
||||
|
||||
changeLanguage(lang: string) {
|
||||
this.translateService.use(lang);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user