replace MDL sidebar with material2 menus (#2112)

* replace MDL sidebar with material2 menus

- separate language picker
- separate "more" menu

* toolbar theme picker

* fix toolbar button colors for different themes

* revert the commented out code

demo-shell-ng2/app/app.component.html

@@ -1,5 +1,5 @@
 <!-- Always shows a header, even in smaller screens. -->
-<div mdl class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
+<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
     <header class="mdl-layout__header main_header_adf" [ngClass]="{hide: isAPageWithHeaderBar()}">
         <div class="mdl-button-padding mdl-layout__header-row">
 
@@ -20,51 +20,67 @@
                 <a class="mdl-navigation__link" data-automation-id="home" href="" routerLink="/">Home</a>
                 <a class="mdl-navigation__link" data-automation-id="files" href="" routerLink="/files">DocumentList</a>
                 <a class="mdl-navigation__link" data-automation-id="activiti" href="" routerLink="/activiti">Process Services</a>
-                <a class="mdl-navigation__link" data-automation-id="form" href="" routerLink="/form">Form</a>
-                <a class="mdl-navigation__link" data-automation-id="form" href="" routerLink="/form-list">Form List</a>
                 <a class="mdl-navigation__link" data-automation-id="login" href="" routerLink="/login">Login</a>
-                <a class="mdl-navigation__link" data-automation-id="settings" href="" routerLink="/settings">Settings</a>
             </nav>
 
+            <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 [mdMenuTriggerFor]="appMenu">
+                <md-icon>more_vert</md-icon>
+            </button>
+            <md-menu #appMenu="mdMenu">
+                <a md-menu-item href="" routerLink="/datatable">
+                    <md-icon>view_module</md-icon>
+                    <span>DataTable</span>
+                </a>
+                <a md-menu-item href="" routerLink="/form">
+                    <md-icon>poll</md-icon>
+                    <span>Form</span>
+                </a>
+                <a md-menu-item href="" routerLink="/form-list">
+                    <md-icon>library_books</md-icon>
+                    <span>Form List</span>
+                </a>
+                <a md-menu-item href="" routerLink="/uploader">
+                    <md-icon>file_upload</md-icon>
+                    <span>Uploader</span>
+                </a>
+                <a md-menu-item href="" routerLink="/webscript">
+                    <md-icon>extension</md-icon>
+                    <span>Webscript</span>
+                </a>
+                <a md-menu-item href="" routerLink="/tag">
+                    <md-icon>local_offer</md-icon>
+                    <span>Tag</span>
+                </a>
+                <a md-menu-item href="" routerLink="/social">
+                    <md-icon>thumb_up</md-icon>
+                    <span>Social</span>
+                </a>
+                <a md-menu-item href="" routerLink="/settings">
+                    <md-icon>settings</md-icon>
+                    <span>Settings</span>
+                </a>
+                <a md-menu-item href="" routerLink="/about">
+                    <md-icon>info_outline</md-icon>
+                    <span>About</span>
+                </a>
+                <button md-menu-item (click)="onLogout($event)">
+                    <md-icon>exit_to_app</md-icon>
+                    <span>Logout</span>
+                </button>
+            </md-menu>
         </div>
+
     </header>
 
-    <div class="mdl-layout__drawer">
-        <nav class="mdl-navigation">
-            <a class="mdl-navigation__link" (click)="onLogout($event)">
-                <label tabindex="0">Logout</label>
-            </a>
-        </nav>
-        <span class="mdl-layout-title">Languages</span>
-        <nav class="mdl-navigation">
-            <a class="mdl-navigation__link" (click)="changeLanguage('en')">
-                <span class="adf-flag-icon adf-flag-icon-gb"></span>
-                <label tabindex="0"> English</label>
-            </a>
-            <a class="mdl-navigation__link" (click)="changeLanguage('it')">
-                <span class="adf-flag-icon adf-flag-icon-it"></span>
-                <label tabindex="0"> Italian</label>
-            </a>
-            <a class="mdl-navigation__link" (click)="changeLanguage('ru')">
-                <span class="adf-flag-icon adf-flag-icon-ru"></span>
-                <label tabindex="0"> Russian</label>
-            </a>
-        </nav>
-        <span class="mdl-layout-title">Components</span>
-        <nav class="mdl-navigation">
-            <a class="mdl-navigation__link" href="" routerLink="/" (click)="hideDrawer()">Home</a>
-            <a class="mdl-navigation__link" href="" routerLink="/files" (click)="hideDrawer()">DocumentList</a>
-            <a class="mdl-navigation__link" href="" routerLink="/datatable" (click)="hideDrawer()">DataTable</a>
-            <a class="mdl-navigation__link" href="" routerLink="/uploader" (click)="hideDrawer()">Uploader</a>
-            <a class="mdl-navigation__link" href="" routerLink="/login" (click)="hideDrawer()">Login</a>
-            <a class="mdl-navigation__link" href="" routerLink="/activiti" (click)="hideDrawer()">Process Services</a>
-            <a class="mdl-navigation__link" href="" routerLink="/webscript" (click)="hideDrawer()">Webscript</a>
-            <a class="mdl-navigation__link" href="" routerLink="/tag" (click)="hideDrawer()">Tag</a>
-            <a class="mdl-navigation__link" href="" routerLink="/social" (click)="hideDrawer()">Social</a>
-            <a class="mdl-navigation__link" href="" routerLink="/about" (click)="hideDrawer()">About</a>
-            <a class="mdl-navigation__link" href="" routerLink="/settings" (click)="hideDrawer()">Settings</a>
-        </nav>
-    </div>
     <main class="mdl-layout__content" (dragover)="onDragOverMainPage($event)"
           (drop)="onDragOverMainPage($event)">
         <div class="page-content">

demo-shell-ng2/app/app.component.ts

@@ -72,7 +72,6 @@ export class AppComponent {
 
     navigateToLogin() {
         this.router.navigate(['/login']);
-        this.hideDrawer();
     }
 
     onToggleSearch(event) {
@@ -87,12 +86,6 @@ export class AppComponent {
 
     changeLanguage(lang: string) {
         this.translateService.use(lang);
-        this.hideDrawer();
-    }
-
-    hideDrawer() {
-        // todo: workaround for drawer closing
-        document.querySelector('.mdl-layout').MaterialLayout.toggleDrawer();
     }
 
     private setProvider() {

demo-shell-ng2/app/components/files/files.component.html

@@ -16,7 +16,7 @@
             <span class="error-message--text">{{errorMessage}}</span>
         </div>
         <ng-container *ngIf="useCustomToolbar">
-            <adf-toolbar>
+            <adf-toolbar [color]="toolbarColor">
                 <adf-toolbar-title>
                     <adf-breadcrumb *ngIf="!useDropdownBreadcrumb"
                         class="files-breadcrumb"
@@ -35,6 +35,18 @@
                 <button md-icon-button>
                     <md-icon>delete</md-icon>
                 </button>
+
+                <button md-icon-button [mdMenuTriggerFor]="themePicker">
+                    <md-icon>format_color_fill</md-icon>
+                </button>
+
+                <md-menu #themePicker="mdMenu">
+                    <button md-menu-item (click)="toolbarColor = 'default'">Default</button>
+                    <button md-menu-item (click)="toolbarColor = 'primary'">Primary</button>
+                    <button md-menu-item (click)="toolbarColor = 'accent'">Accent</button>
+                    <button md-menu-item (click)="toolbarColor = 'warn'">Warn</button>
+                </md-menu>
+
                 <button md-icon-button [mdMenuTriggerFor]="menu">
                     <md-icon>more_vert</md-icon>
                 </button>

demo-shell-ng2/app/components/files/files.component.ts

@@ -39,6 +39,7 @@ export class FilesComponent implements OnInit {
     fileShowed: boolean = false;
 
     useCustomToolbar = true;
+    toolbarColor = 'default';
     useDropdownBreadcrumb = true;
 
     selectionModes = [

ng2-components/ng2-alfresco-core/src/components/toolbar/toolbar.component.scss

@@ -17,14 +17,5 @@ $adf-toolbar-font-size: 14px;
     .mat-toolbar-row {
         height: $adf-toolbar-height;
         font-size: $adf-toolbar-font-size;
-
-        & > button {
-            color: $alfresco-secondary-text-color;
-            @include material-animation-default(0.28s);
-
-            &:hover {
-                color: $alfresco-primary-text-color;
-            }
-        }
     }
 }