inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-31 17:38:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

(demo app) Application menu bar enhancements (#2123)

Browse Source 
* remove MDL from app component

- new app menu bar based on angular/material

* fix app selector

* improve menu bar labels
This commit is contained in:
Denys Vuika
2017-07-25 00:02:25 +01:00
committed by Eugenio Romano
parent 7983e4df97
commit 952da3ab99
4 changed files with 72 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
demo-shell-ng2/app/app.component.css
View File

@@ -1,35 +1,7 @@
@media screen and (max-width: 1024px) {
.mdl-layout__header {
display: block;
}
}
@media screen and (max-width: 1024px) {
.mdl-layout__header {
display: block;
}
}
.mdl-layout-title {
font-size: 17px;
}
.user-profile { .user-profile {
margin-right: 10px; margin-right: 10px;
} }
.mdl-button-padding { .app-menu--spacer {
padding-left: 20px; flex: 1 1 auto;
}
.hide {
display: none !important;
}
.mdl-navigation__link {
cursor: pointer;
}
.mdl-navigation__link label {
cursor: pointer;
} }

150
demo-shell-ng2/app/app.component.html
View File

@@ -1,90 +1,74 @@
<!-- Always shows a header, even in smaller screens. --> <md-toolbar color="primary" *ngIf="!isAPageWithHeaderBar()">
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> <ng2-alfresco-userinfo
<header class="mdl-layout__header main_header_adf" [ngClass]="{hide: isAPageWithHeaderBar()}"> class="user-profile"
<div class="mdl-button-padding mdl-layout__header-row"> [menuOpenType]="left">
</ng2-alfresco-userinfo>
<!-- User Info --> <span>ADF Demo Application</span>
<ng2-alfresco-userinfo class="user-profile" [menuOpenType]="left">
</ng2-alfresco-userinfo>
<!-- Title --> <div class="app-menu--spacer"></div>
<span class="mdl-layout-title">Demo Application</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Search bar --> <search-bar (expand)="onToggleSearch($event)"></search-bar>
<search-bar (expand)="onToggleSearch($event)"></search-bar>
<!-- Navigation. We hide it in small screens. --> <a md-button data-automation-id="home" href="" routerLink="/">Home</a>
<nav class="mdl-navigation mdl-layout--large-screen-only"> <a md-button data-automation-id="files" href="" routerLink="/files">Content Services</a>
<a class="mdl-navigation__link" data-automation-id="home" href="" routerLink="/">Home</a> <a md-button data-automation-id="activiti" href="" routerLink="/activiti">Process Services</a>
<a class="mdl-navigation__link" data-automation-id="files" href="" routerLink="/files">DocumentList</a> <a md-button data-automation-id="login" href="" routerLink="/login">Login</a>
<a class="mdl-navigation__link" data-automation-id="activiti" href="" routerLink="/activiti">Process Services</a>
<a class="mdl-navigation__link" data-automation-id="login" href="" routerLink="/login">Login</a>
</nav>
<button md-icon-button [mdMenuTriggerFor]="langMenu"> <button md-icon-button [mdMenuTriggerFor]="langMenu">
<md-icon>language</md-icon> <md-icon>language</md-icon>
</button> </button>
<md-menu #langMenu="mdMenu"> <md-menu #langMenu="mdMenu">
<button md-menu-item (click)="changeLanguage('en')">English</button> <button md-menu-item (click)="changeLanguage('en')">English</button>
<button md-menu-item (click)="changeLanguage('it')">Italian</button> <button md-menu-item (click)="changeLanguage('it')">Italian</button>
<button md-menu-item (click)="changeLanguage('ru')">Russian</button> <button md-menu-item (click)="changeLanguage('ru')">Russian</button>
</md-menu> </md-menu>
<button md-icon-button [mdMenuTriggerFor]="appMenu"> <button md-icon-button [mdMenuTriggerFor]="appMenu">
<md-icon>more_vert</md-icon> <md-icon>more_vert</md-icon>
</button> </button>
<md-menu #appMenu="mdMenu"> <md-menu #appMenu="mdMenu">
<a md-menu-item href="" routerLink="/datatable"> <a md-menu-item href="" routerLink="/datatable">
<md-icon>view_module</md-icon> <md-icon>view_module</md-icon>
<span>DataTable</span> <span>DataTable</span>
</a> </a>
<a md-menu-item href="" routerLink="/form"> <a md-menu-item href="" routerLink="/form">
<md-icon>poll</md-icon> <md-icon>poll</md-icon>
<span>Form</span> <span>Form</span>
</a> </a>
<a md-menu-item href="" routerLink="/form-list"> <a md-menu-item href="" routerLink="/form-list">
<md-icon>library_books</md-icon> <md-icon>library_books</md-icon>
<span>Form List</span> <span>Form List</span>
</a> </a>
<a md-menu-item href="" routerLink="/uploader"> <a md-menu-item href="" routerLink="/uploader">
<md-icon>file_upload</md-icon> <md-icon>file_upload</md-icon>
<span>Uploader</span> <span>Uploader</span>
</a> </a>
<a md-menu-item href="" routerLink="/webscript"> <a md-menu-item href="" routerLink="/webscript">
<md-icon>extension</md-icon> <md-icon>extension</md-icon>
<span>Webscript</span> <span>Webscript</span>
</a> </a>
<a md-menu-item href="" routerLink="/tag"> <a md-menu-item href="" routerLink="/tag">
<md-icon>local_offer</md-icon> <md-icon>local_offer</md-icon>
<span>Tag</span> <span>Tag</span>
</a> </a>
<a md-menu-item href="" routerLink="/social"> <a md-menu-item href="" routerLink="/social">
<md-icon>thumb_up</md-icon> <md-icon>thumb_up</md-icon>
<span>Social</span> <span>Social</span>
</a> </a>
<a md-menu-item href="" routerLink="/settings"> <a md-menu-item href="" routerLink="/settings">
<md-icon>settings</md-icon> <md-icon>settings</md-icon>
<span>Settings</span> <span>Settings</span>
</a> </a>
<a md-menu-item href="" routerLink="/about"> <a md-menu-item href="" routerLink="/about">
<md-icon>info_outline</md-icon> <md-icon>info_outline</md-icon>
<span>About</span> <span>About</span>
</a> </a>
<button md-menu-item (click)="onLogout($event)"> <button md-menu-item (click)="onLogout($event)">
<md-icon>exit_to_app</md-icon> <md-icon>exit_to_app</md-icon>
<span>Logout</span> <span>Logout</span>
</button> </button>
</md-menu> </md-menu>
</div> </md-toolbar>
</header> <router-outlet></router-outlet>
<main class="mdl-layout__content" (dragover)="onDragOverMainPage($event)"
(drop)="onDragOverMainPage($event)">
<div class="page-content">
<router-outlet></router-outlet>
</div>
</main>
</div>

7
demo-shell-ng2/app/app.component.ts
View File

@@ -28,7 +28,7 @@ import {
declare var document: any; declare var document: any;
@Component({ @Component({
selector: 'alfresco-app', selector: 'adf-app',
templateUrl: './app.component.html', templateUrl: './app.component.html',
styleUrls: ['./app.component.css'] styleUrls: ['./app.component.css']
}) })
@@ -93,9 +93,4 @@ export class AppComponent {
this.settingsService.setProviders(this.storage.getItem(`providers`)); this.settingsService.setProviders(this.storage.getItem(`providers`));
} }
} }
onDragOverMainPage(event: any): boolean {
event.preventDefault();
return false;
}
} }

4
demo-shell-ng2/index.html
View File

@@ -50,7 +50,7 @@
</head> </head>
<!-- 3. Display the application --> <!-- 3. Display the application -->
<body> <body>
<alfresco-app> <adf-app>
<div id="loader-container" class="loader-container"> <div id="loader-container" class="loader-container">
<div class="loader-item"> <div class="loader-item">
<div id="loader-spin" class="mdl-progress mdl-js-progress mdl-progress__indeterminate is-upgraded" <div id="loader-spin" class="mdl-progress mdl-js-progress mdl-progress__indeterminate is-upgraded"
@@ -62,7 +62,7 @@
<div id="loader-text" class="loader-text">Loading Demo Shell..</div> <div id="loader-text" class="loader-text">Loading Demo Shell..</div>
</div> </div>
</div> </div>
</alfresco-app> </adf-app>
</body> </body>
</html> </html>