[ADF-1611] Demo shell responsiveness (#2426)

* Reapplying the unreappliable

* Fix buggy search button

* Fix settings

* Last bit of responsive stylings

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

@@ -1,2 +1 @@
-<adf-app-menu *ngIf="showAppMenu"></adf-app-menu>
+<router-outlet></router-outlet>
-<router-outlet></router-outlet>

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

@@ -16,7 +16,7 @@
  */
 
 import { Component, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { AlfrescoSettingsService, PageTitleService, StorageService } from 'ng2-alfresco-core';
 
 @Component({
@@ -27,7 +27,6 @@ import { AlfrescoSettingsService, PageTitleService, StorageService } from 'ng2-a
 })
 export class AppComponent {
     searchTerm: string = '';
-    showAppMenu = true;
 
     constructor(private settingsService: AlfrescoSettingsService,
                 private storage: StorageService,
@@ -36,25 +35,6 @@ export class AppComponent {
                 router: Router) {
         this.setProvider();
         pageTitleService.setTitle();
-
-        router.events
-            .filter(event => event instanceof NavigationEnd)
-            .subscribe(() => {
-                let currentRoute = route.root;
-
-                while (currentRoute.firstChild) {
-                    currentRoute = currentRoute.firstChild;
-                }
-
-                const snapshot: any = currentRoute.snapshot || {};
-                const data: any = snapshot.data || {};
-
-                if (data && data['showAppMenu'] !== undefined) {
-                    this.showAppMenu = data && data.showAppMenu;
-                } else {
-                    this.showAppMenu = true;
-                }
-            });
     }
 
     private setProvider() {

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

@@ -41,7 +41,7 @@ import { ChartsModule } from 'ng2-charts';
 import { AppComponent } from './app.component';
 import { routing } from './app.routes';
 import { CustomEditorsModule } from './components/activiti/custom-editor/custom-editor.component';
-import { AppMenuComponent } from './components/app-menu/app-menu.component';
+import { AppLayoutComponent } from './components/app-layout/app-layout.component';
 import { FileViewComponent } from './components/file-view/file-view.component';
 import { FormListDemoComponent } from './components/form/form-list-demo.component';
 import { ThemePickerModule } from './components/theme-picker/theme-picker';
@@ -123,7 +123,7 @@ import {
         FormListDemoComponent,
         CustomSourcesComponent,
         FileViewComponent,
-        AppMenuComponent
+        AppLayoutComponent
     ],
     providers: [
         { provide: AppConfigService, useClass: DebugAppConfigService },

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

@@ -18,6 +18,7 @@
 import { ModuleWithProviders } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { AuthGuard, AuthGuardBpm, AuthGuardEcm } from 'ng2-alfresco-core';
+import { AppLayoutComponent } from './components/app-layout/app-layout.component';
 
 import {
     AboutComponent,
@@ -44,123 +45,114 @@ import { CustomSourcesComponent } from './components/files/custom-sources.compon
 import { FormListDemoComponent } from './components/form/form-list-demo.component';
 
 export const appRoutes: Routes = [
-    {
+    { path: 'login', component: LoginDemoComponent },
-        path: 'login',
+    { path: 'settings', component: SettingsComponent },
-        component: LoginDemoComponent,
+    { path: 'files/:nodeId/view', component: FileViewComponent, canActivate: [ AuthGuardEcm ] },
-        data: {
-            showAppMenu: false
-        }
-    },
     {
         path: '',
-        component: HomeComponent,
+        component: AppLayoutComponent,
-        canActivate: [AuthGuard]
+        canActivate: [AuthGuard],
-    },
+        children: [
-    {
+            {
-        path: 'home',
+                path: '',
-        component: HomeComponent,
+                component: HomeComponent
-        canActivate: [AuthGuard]
+            },
-    },
+            {
-    {
+                path: 'home',
-        path: 'files',
+                component: HomeComponent
-        component: FilesComponent,
+            },
-        canActivate: [AuthGuardEcm]
+            {
-    },
+                path: 'files',
-    {
+                component: FilesComponent,
-        path: 'files/:id',
+                canActivate: [AuthGuardEcm]
-        component: FilesComponent,
+            },
-        canActivate: [AuthGuardEcm]
+            {
-    },
+                path: 'files/:id',
-    {
+                component: FilesComponent,
-        path: 'files/:nodeId/view',
+                canActivate: [AuthGuardEcm]
-        component: FileViewComponent,
+            },
-        canActivate: [ AuthGuardEcm ],
+            {
-        data: {
+                path: 'dl-custom-sources',
-            showAppMenu: false
+                component: CustomSourcesComponent,
-        }
+                canActivate: [AuthGuardEcm]
-    },
+            },
-    {
+            {
-        path: 'dl-custom-sources',
+                path: 'datatable',
-        component: CustomSourcesComponent,
+                component: DataTableDemoComponent
-        canActivate: [AuthGuardEcm]
+            },
-    },
+            {
-    {
+                path: 'uploader',
-        path: 'datatable',
+                component: UploadButtonComponent,
-        component: DataTableDemoComponent,
+                canActivate: [AuthGuardEcm]
-        canActivate: [AuthGuard]
+            },
-    },
+            {
-    {
+                path: 'search',
-        path: 'uploader',
+                component: SearchComponent,
-        component: UploadButtonComponent,
+                canActivate: [AuthGuardEcm]
-        canActivate: [AuthGuardEcm]
+            },
-    },
+            {
-    {
+                path: 'activiti',
-        path: 'search',
+                component: ActivitiAppsViewComponent,
-        component: SearchComponent,
+                canActivate: [AuthGuardBpm]
-        canActivate: [AuthGuardEcm]
+            },
-    },
+            {
-    {
+                path: 'activiti/apps',
-        path: 'activiti',
+                component: ActivitiAppsViewComponent,
-        component: ActivitiAppsViewComponent,
+                canActivate: [AuthGuardBpm]
-        canActivate: [AuthGuardBpm]
+            },
-    },
+            {
-    {
+                path: 'activiti/apps/:appId/tasks',
-        path: 'activiti/apps',
+                component: ActivitiDemoComponent,
-        component: ActivitiAppsViewComponent,
+                canActivate: [AuthGuardBpm]
-        canActivate: [AuthGuardBpm]
+            },
-    },
+            {
-    {
+                path: 'activiti/apps/:appId/processes',
-        path: 'activiti/apps/:appId/tasks',
+                component: ActivitiDemoComponent,
-        component: ActivitiDemoComponent,
+                canActivate: [AuthGuardBpm]
-        canActivate: [AuthGuardBpm]
+            },
-    },
+            {
-    {
+                path: 'activiti/apps/:appId/diagram/:processDefinitionId',
-        path: 'activiti/apps/:appId/processes',
+                component: ActivitiShowDiagramComponent,
-        component: ActivitiDemoComponent,
+                canActivate: [AuthGuardBpm]
-        canActivate: [AuthGuardBpm]
+            },
-    },
+            // TODO: check if neeeded
-    {
+            {
-        path: 'activiti/apps/:appId/diagram/:processDefinitionId',
+                path: 'activiti/appId/:appId',
-        component: ActivitiShowDiagramComponent,
+                component: ActivitiDemoComponent,
-        canActivate: [AuthGuardBpm]
+                canActivate: [AuthGuardBpm]
-    },
+            },
-    // TODO: check if neeeded
+            // TODO: check if needed
-    {
+            {
-        path: 'activiti/appId/:appId',
+                path: 'activiti/tasks/:id',
-        component: ActivitiDemoComponent,
+                component: FormViewerComponent,
-        canActivate: [AuthGuardBpm]
+                canActivate: [AuthGuardBpm]
-    },
+            },
-    // TODO: check if needed
+            // TODO: check if needed
-    {
+            {
-        path: 'activiti/tasks/:id',
+                path: 'activiti/tasksnode/:id',
-        component: FormViewerComponent,
+                component: FormNodeViewerComponent,
-        canActivate: [AuthGuardBpm]
+                canActivate: [AuthGuardBpm]
-    },
+            },
-    // TODO: check if needed
+            {
-    {
+                path: 'webscript',
-        path: 'activiti/tasksnode/:id',
+                component: WebscriptComponent,
-        component: FormNodeViewerComponent,
+                canActivate: [AuthGuardEcm]
-        canActivate: [AuthGuardBpm]
+            },
-    },
+            {
-    {
+                path: 'tag',
-        path: 'webscript',
+                component: TagComponent,
-        component: WebscriptComponent,
+                canActivate: [AuthGuardEcm]
-        canActivate: [AuthGuardEcm]
+            },
-    },
+            {
-    {
+                path: 'social',
-        path: 'tag',
+                component: SocialComponent,
-        component: TagComponent,
+                canActivate: [AuthGuardEcm]
-        canActivate: [AuthGuardEcm]
+            },
-    },
+            { path: 'about', component: AboutComponent },
-    {
+            { path: 'form', component: FormDemoComponent },
-        path: 'social',
+            { path: 'form-list', component: FormListDemoComponent }
-        component: SocialComponent,
+        ]
-        canActivate: [AuthGuardEcm]
+    }
-    },
-    { path: 'about', component: AboutComponent },
-    { path: 'settings', component: SettingsComponent },
-    { path: 'form', component: FormDemoComponent },
-    { path: 'form-list', component: FormListDemoComponent }
 ];
 
 export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

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

@@ -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>

demo-shell-ng2/app/components/app-layout/app-layout.component.scss

@@ -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);
+                }
+            }
+        }
+    }
+}

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

@@ -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);
+    }
+}

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

@@ -1,96 +0,0 @@
-<md-toolbar color="primary" class="adf-app-toolbar">
-    <adf-userinfo
-        class="adf-app-user-profile"
-        [menuPositionX]="'before'"
-        [menuPositionY]="'above'">
-    </adf-userinfo>
-
-    <span class="adf-app-hide-xsmall">ADF Demo Application</span>
-
-    <div class="adf-app-menu-spacer"></div>
-
-    <search-bar></search-bar>
-
-    <a class="adf-app-hide-xsmall adf-app-hide-small" md-button data-automation-id="home" href="" routerLink="/">Home</a>
-    <a class="adf-app-hide-xsmall adf-app-hide-small" md-button data-automation-id="files" href="" routerLink="/files">Content Services</a>
-    <a class="adf-app-hide-xsmall adf-app-hide-small"  md-button data-automation-id="activiti" href="" routerLink="/activiti">Process Services</a>
-    <a class="adf-app-hide-xsmall adf-app-hide-small" 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 [mdMenuTriggerFor]="appMenu">
-        <md-icon>more_vert</md-icon>
-    </button>
-
-    <md-menu #appMenu="mdMenu">
-        <a md-menu-item href="" routerLink="/">
-            <md-icon>home</md-icon>
-            <span>Home</span>
-        </a>
-        <a md-menu-item href="" routerLink="/files">
-            <md-icon>folder_open</md-icon>
-            <span>Content Services</span>
-        </a>
-        <a md-menu-item href="" routerLink="/activiti">
-            <md-icon>device_hub</md-icon>
-            <span>Process Services</span>
-        </a>
-        <a md-menu-item href="" routerLink="/login">
-            <md-icon>vpn_key</md-icon>
-            <span>Login</span>
-        </a>
-        <a md-menu-item href="" routerLink="/dl-custom-sources">
-            <md-icon>extension</md-icon>
-            <span>DL: Custom Sources</span>
-        </a>
-        <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 adf-logout>
-            <md-icon>exit_to_app</md-icon>
-            <span>Logout</span>
-        </button>
-    </md-menu>
-</md-toolbar>

demo-shell-ng2/app/components/app-menu/app-menu.component.scss

@@ -1,28 +0,0 @@
-@import '~@angular/material/theming';
-
-.adf-app-user-profile {
-    margin-right: 10px;
-}
-
-.adf-app-menu-spacer {
-    flex: 1 1 auto;
-}
-
-.adf-app-toolbar {
-    overflow: hidden;
-}
-
-@media ($mat-small) {
-
-    .adf-app-hide-small{
-        display: none !important;
-    }
-
-}
-@media ($mat-xsmall) {
-
-    .adf-app-hide-xsmall{
-        display: none !important;
-    }
-
-}

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

@@ -1,34 +0,0 @@
-/*!
- * @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 } from '@angular/core';
-import { AlfrescoTranslationService } from 'ng2-alfresco-core';
-
-@Component({
-    selector: 'adf-app-menu',
-    templateUrl: 'app-menu.component.html',
-    styleUrls: ['app-menu.component.scss']
-})
-export class AppMenuComponent {
-
-    constructor(private translateService: AlfrescoTranslationService) {
-    }
-
-    changeLanguage(lang: string) {
-        this.translateService.use(lang);
-    }
-}

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

@@ -16,13 +16,13 @@
         </div>
         <adf-toolbar [color]="toolbarColor">
             <adf-toolbar-title>
-                <adf-breadcrumb *ngIf="!useDropdownBreadcrumb"
+                <adf-breadcrumb fxShow fxHide.lt-sm="true"
                     class="files-breadcrumb"
                     root="Personal Files"
                     [target]="documentList"
                     [folderNode]="documentList.folderNode">
                 </adf-breadcrumb>
-                <adf-dropdown-breadcrumb  *ngIf="useDropdownBreadcrumb"
+                <adf-dropdown-breadcrumb fxHide fxShow.lt-sm="true"
                     class="files-breadcrumb"
                     [target]="documentList"
                     [folderNode]="documentList.folderNode">
@@ -31,21 +31,23 @@
 
             <adf-toolbar-divider></adf-toolbar-divider>
 
-            <button md-icon-button
+            <div class="adf-document-action-buttons" fxShow fxHide.lt-sm="true">
-                (click)="onCreateFolderClicked($event)">
+                <button md-icon-button
-                <md-icon>create_new_folder</md-icon>
+                    (click)="onCreateFolderClicked($event)">
-            </button>
+                    <md-icon>create_new_folder</md-icon>
-            <button md-icon-button
+                </button>
-                [disabled]="!hasSelection(documentList.selection)"
+                <button md-icon-button
-                title="Download"
+                    [disabled]="!hasSelection(documentList.selection)"
-                (click)="downloadNodes(documentList.selection)">
+                    title="Download"
-                <md-icon>get_app</md-icon>
+                    (click)="downloadNodes(documentList.selection)">
-            </button>
+                    <md-icon>get_app</md-icon>
-            <button md-icon-button
+                </button>
-                    adf-node-permission="delete"
+                <button md-icon-button
-                    [adf-nodes]="documentList.selection">
+                        adf-node-permission="delete"
-                <md-icon>delete</md-icon>
+                        [adf-nodes]="documentList.selection">
-            </button>
+                    <md-icon>delete</md-icon>
+                </button>
+            </div>
 
             <button md-icon-button [mdMenuTriggerFor]="themePicker">
                 <md-icon>format_color_fill</md-icon>
@@ -58,23 +60,29 @@
                 <button md-menu-item (click)="toolbarColor = 'warn'">Warn</button>
             </md-menu>
 
-            <adf-toolbar-divider></adf-toolbar-divider>
+            <adf-toolbar-divider fxHide fxShow.lt-sm="true"></adf-toolbar-divider>
 
-            <button md-icon-button [mdMenuTriggerFor]="menu">
+            <button md-icon-button [mdMenuTriggerFor]="menu" fxHide fxShow.lt-sm="true">
                 <md-icon>more_vert</md-icon>
             </button>
             <md-menu #menu="mdMenu">
-                <button md-menu-item>
+                <button md-menu-item
-                    <md-icon>dialpad</md-icon>
+                    (click)="onCreateFolderClicked($event)">
-                    <span>Redial</span>
+                    <md-icon>create_new_folder</md-icon>
+                    <span>New folder</span>
                 </button>
-                <button md-menu-item disabled>
+                <button md-menu-item
-                    <md-icon>voicemail</md-icon>
+                    [disabled]="!hasSelection(documentList.selection)"
-                    <span>Check voicemail</span>
+                    title="Download"
+                    (click)="downloadNodes(documentList.selection)">
+                    <md-icon>get_app</md-icon>
+                    <span>Download</span>
                 </button>
-                <button md-menu-item>
+                <button md-menu-item
-                    <md-icon>notifications_off</md-icon>
+                        adf-node-permission="delete"
-                    <span>Disable alerts</span>
+                        [adf-nodes]="documentList.selection">
+                    <md-icon>delete</md-icon>
+                    <span>Delete</span>
                 </button>
             </md-menu>
         </adf-toolbar>
@@ -213,91 +221,90 @@
 
 <context-menu-holder></context-menu-holder>
 
-<p>Current folder ID: {{ documentList.currentFolderId }}</p>
+<div class="adf-content-service-settings">
 
-<div class="p-10">
+    <p>Current folder ID: {{ documentList.currentFolderId }}</p>
-    Selected Nodes:
+    
-    <ul>
+    <div class="p-10">
-        <li *ngFor="let node of documentList.selection">
+        Selected Nodes:
-            {{ node.entry.name }}
+        <ul>
-        </li>
+            <li *ngFor="let node of documentList.selection">
-    </ul>
+                {{ node.entry.name }}
-</div>
+            </li>
-
+        </ul>
-<div class="container">
-    <section>
-        <md-slide-toggle [color]="'primary'" [(ngModel)]="multiselect">Multiselect (with checkboxes)</md-slide-toggle>
-    </section>
-
-    <section>
-        <md-slide-toggle [color]="'primary'" [(ngModel)]="useDropdownBreadcrumb">Dropdown breadcrumb</md-slide-toggle>
-    </section>
-
-    <section>
-        <md-slide-toggle [color]="'primary'" [(ngModel)]="multipleFileUpload">Multiple File Upload</md-slide-toggle>
-    </section>
-
-    <section>
-        <md-slide-toggle [color]="'primary'" [(ngModel)]="folderUpload">Folder upload</md-slide-toggle>
-    </section>
-
-    <section>
-        <md-slide-toggle [color]="'primary'" [(ngModel)]="acceptedFilesTypeShow">Custom extensions filter</md-slide-toggle>
-    </section>
-
-    <section>
-        <md-slide-toggle [color]="'primary'" [(ngModel)]="versioning">Enable versioning</md-slide-toggle>
-    </section>
-
-    <h5>Upload</h5>
-    <section *ngIf="acceptedFilesTypeShow">
-        <md-input-container>
-            <input mdInput placeholder="Extension accepted" [(ngModel)]="acceptedFilesType"  data-automation-id="accepted-files-type">
-        </md-input-container>
-    </section>
-    <div *ngIf="!acceptedFilesTypeShow">
-        <adf-upload-button
-            #uploadButton
-            tooltip="Custom tooltip"
-            [disabled]="!enableUpload"
-            data-automation-id="multiple-file-upload"
-            [rootFolderId]="documentList.currentFolderId"
-            [multipleFiles]="multipleFileUpload"
-            [uploadFolders]="folderUpload"
-            [versioning]="versioning"
-            [adf-node-permission]="'create'"
-            [adf-nodes]="getCurrentDocumentListNode()"
-            (permissionEvent)="handlePermissionError($event)">
-        </adf-upload-button>
     </div>
-    <div *ngIf="acceptedFilesTypeShow">
+    
-        <adf-upload-button
+    <div class="container">
-            #uploadButton
+        <section>
-            tooltip="Custom tooltip"
+            <md-slide-toggle [color]="'primary'" [(ngModel)]="multiselect">Multiselect (with checkboxes)</md-slide-toggle>
-            [disabled]="!enableUpload"
+        </section>
-            data-automation-id="multiple-file-upload"
+    
-            [rootFolderId]="documentList.currentFolderId"
+        <section>
-            [acceptedFilesType]="acceptedFilesType"
+            <md-slide-toggle [color]="'primary'" [(ngModel)]="multipleFileUpload">Multiple File Upload</md-slide-toggle>
-            [multipleFiles]="multipleFileUpload"
+        </section>
-            [uploadFolders]="folderUpload"
+    
-            [versioning]="versioning"
+        <section>
-            [adf-node-permission]="'create'"
+            <md-slide-toggle [color]="'primary'" [(ngModel)]="folderUpload">Folder upload</md-slide-toggle>
-            [adf-nodes]="getCurrentDocumentListNode()"
+        </section>
-            (permissionEvent)="handlePermissionError($event)">
+    
-        </adf-upload-button>
+        <section>
+            <md-slide-toggle [color]="'primary'" [(ngModel)]="acceptedFilesTypeShow">Custom extensions filter</md-slide-toggle>
+        </section>
+    
+        <section>
+            <md-slide-toggle [color]="'primary'" [(ngModel)]="versioning">Enable versioning</md-slide-toggle>
+        </section>
+    
+        <h5>Upload</h5>
+        <section *ngIf="acceptedFilesTypeShow">
+            <md-input-container>
+                <input mdInput placeholder="Extension accepted" [(ngModel)]="acceptedFilesType"  data-automation-id="accepted-files-type">
+            </md-input-container>
+        </section>
+        <div *ngIf="!acceptedFilesTypeShow">
+            <adf-upload-button
+                #uploadButton
+                tooltip="Custom tooltip"
+                [disabled]="!enableUpload"
+                data-automation-id="multiple-file-upload"
+                [rootFolderId]="documentList.currentFolderId"
+                [multipleFiles]="multipleFileUpload"
+                [uploadFolders]="folderUpload"
+                [versioning]="versioning"
+                [adf-node-permission]="'create'"
+                [adf-nodes]="getCurrentDocumentListNode()"
+                (permissionEvent)="handlePermissionError($event)">
+            </adf-upload-button>
+        </div>
+        <div *ngIf="acceptedFilesTypeShow">
+            <adf-upload-button
+                #uploadButton
+                tooltip="Custom tooltip"
+                [disabled]="!enableUpload"
+                data-automation-id="multiple-file-upload"
+                [rootFolderId]="documentList.currentFolderId"
+                [acceptedFilesType]="acceptedFilesType"
+                [multipleFiles]="multipleFileUpload"
+                [uploadFolders]="folderUpload"
+                [versioning]="versioning"
+                [adf-node-permission]="'create'"
+                [adf-nodes]="getCurrentDocumentListNode()"
+                (permissionEvent)="handlePermissionError($event)">
+            </adf-upload-button>
+        </div>
+        <section>
+            <md-checkbox [(ngModel)]="enableUpload">Enable upload (demoing enabled/disabled state only if the permission are not checked dynamically)</md-checkbox>
+        </section>
     </div>
-    <section>
+    
-        <md-checkbox [(ngModel)]="enableUpload">Enable upload (demoing enabled/disabled state only if the permission are not checked dynamically)</md-checkbox>
+    <div class="p-10">
-    </section>
+        <p>For 'Multiple' selection mode use Cmd (macOS) or Ctrl (Win) to toggle selection of multiple items.</p>
-</div>
+        <md-select placeholder="Selection Mode" [(ngModel)]="selectionMode" name="food">
-
+            <md-option *ngFor="let mode of selectionModes" [value]="mode.value">
-<div class="p-10">
+                {{mode.viewValue}}
-    <p>For 'Multiple' selection mode use Cmd (macOS) or Ctrl (Win) to toggle selection of multiple items.</p>
+            </md-option>
-    <md-select placeholder="Selection Mode" [(ngModel)]="selectionMode" name="food">
+        </md-select>
-        <md-option *ngFor="let mode of selectionModes" [value]="mode.value">
+    </div>            
-            {{mode.viewValue}}
-        </md-option>
-    </md-select>
 </div>
 
 <file-uploading-dialog #fileDialog></file-uploading-dialog>

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

@@ -1,3 +1,5 @@
+$minimumDocumentListWidth: 425px;
+
 .container {
     margin: 10px;
 }
@@ -57,4 +59,25 @@ adf-document-list >>> adf-datatable tr.is-selected .image-table-cell::before {
     min-width: 200px;
 }
 
+.adf-content-service-settings {
+    padding: 16px;
+}
+
+@media (max-width: $minimumDocumentListWidth) {
+    adf-document-list /deep/ adf-datatable  {
+        & /deep/ .adf-data-table-cell--fileSize {
+            display: none;
+        }
+    }
+
+    .adf-demo-site-container-style {
+        width: 100%;
+        display: block;
+
+        & /deep/ .adf-site-dropdown-list-element {
+            width: 100%;
+        }
+    }
+}
+
 

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

@@ -32,7 +32,7 @@ const DEFAULT_FOLDER_TO_SHOW = '-my-';
 @Component({
     selector: 'adf-files-component',
     templateUrl: './files.component.html',
-    styleUrls: ['./files.component.css']
+    styleUrls: ['./files.component.scss']
 })
 export class FilesComponent implements OnInit {
     // The identifier of a node. You can also use one of these well-known aliases: -my- | -shared- | -root-
@@ -43,7 +43,6 @@ export class FilesComponent implements OnInit {
     showViewer: boolean = false;
 
     toolbarColor = 'default';
-    useDropdownBreadcrumb = false;
 
     selectionModes = [
         { value: 'none', viewValue: 'None' },

demo-shell-ng2/app/components/form/form-list-demo.component.ts

@@ -22,7 +22,6 @@ import { ActivitiForm } from 'ng2-activiti-form';
 @Component({
     selector: 'form-list-demo',
     template: `
-        <adf-app-menu></adf-app-menu>
         <adf-form-list [forms]="formList" (row-dblclick)="onRowDblClick($event)">
         </adf-form-list>
         <div class="form-container" *ngIf="!isEmptyForm()">

demo-shell-ng2/app/components/settings/settings.component.css

@@ -1,20 +0,0 @@
-.adf-setting-container {
-    display: table;
-    border-collapse: collapse;
-    border-spacing: 0;
-}
-
-.adf-setting-card {
-    width: 400px;
-}
-
-.full-width {
-    width: 100%;
-}
-
-.adf-setting-card-padding {
-    width: 50%;
-    display: table-cell;
-    vertical-align: middle;
-    margin: 0;
-}

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

@@ -10,7 +10,7 @@
             <md-card-subtitle>{{'SETTINGS.CS-HOST' | translate }}</md-card-subtitle>
 
             <md-input-container class="full-width">
-                <md-icon mdPrefix>link</md-icon>
+                <md-icon class="adf-settings-link-icon" mdPrefix>link</md-icon>
                 <input mdInput
                        [formControl]="urlFormControlEcm"
                        data-automation-id="ecmHost"
@@ -29,7 +29,7 @@
             <md-card-subtitle>{{'SETTINGS.BP-HOST' | translate }}</md-card-subtitle>
 
             <md-input-container class="full-width">
-                <md-icon mdPrefix>link</md-icon>
+                <md-icon class="adf-settings-link-icon" mdPrefix>link</md-icon>
                 <input mdInput
                        [formControl]="urlFormControlBpm"
                        data-automation-id="bpmHost"
@@ -45,13 +45,13 @@
             </md-input-container>
 
         </md-card-content>
-        <md-card-actions>
+        <md-card-actions class="adf-settings-actions">
 
             <button md-button onclick="window.history.back()" color="primary">
                 {{'SETTINGS.BACK' | translate }}
             </button>
 
-            <button md-button (click)="save($event)" [disabled]="urlFormControlBpm.hasError('pattern') || urlFormControlEcm.hasError('pattern')" color="primary">
+            <button md-raised-button (click)="save($event)" [disabled]="urlFormControlBpm.hasError('pattern') || urlFormControlEcm.hasError('pattern')" color="primary">
                 {{'SETTINGS.APPLY' | translate }}
             </button>
 

demo-shell-ng2/app/components/settings/settings.component.scss

@@ -0,0 +1,37 @@
+.adf-app-settings {
+    display: flex;
+    height: 100%;
+    align-items: center;
+
+    .adf-setting-container {
+        display: table;
+        border-collapse: collapse;
+        border-spacing: 0;
+    }
+    
+    .adf-setting-card {
+        width: 400px;
+    }
+    
+    .full-width {
+        width: 100%;
+    }
+    
+    .adf-setting-card-padding {
+        width: 50%;
+        display: table-cell;
+        vertical-align: middle;
+        margin: 0;
+    }
+    
+    .adf-settings-link-icon {
+        position: relative;
+        top: 6px;
+        margin-right: 10px;
+    }
+    
+    .adf-settings-actions {
+        display: flex;
+        justify-content: flex-end;
+    }    
+}

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

@@ -15,14 +15,18 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 import { FormControl, Validators } from '@angular/forms';
 import { AlfrescoSettingsService, LogService, StorageService } from 'ng2-alfresco-core';
 
 @Component({
     selector: 'app-settings',
     templateUrl: 'settings.component.html',
-    styleUrls: ['settings.component.css']
+    host: {
+        'class': 'adf-app-settings'
+    },
+    styleUrls: ['settings.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class SettingsComponent {
 

demo-shell-ng2/app/material.module.ts

@@ -21,6 +21,7 @@ import {
     MdInputModule,
     MdProgressBarModule,
     MdSelectModule,
+    MdSidenavModule,
     MdSlideToggleModule
 } from '@angular/material';
 
@@ -29,6 +30,7 @@ const MATERIAL_MODULES = [
     MdInputModule,
     MdSelectModule,
     MdDialogModule,
+    MdSidenavModule,
     MdProgressBarModule
 ];
 

demo-shell-ng2/app/theme.scss

@@ -1,3 +1,4 @@
+@import './components/app-layout/app-layout.component.scss';
 @import '~ng2-alfresco-core/styles/theming';
 @import '~ng2-alfresco-core/styles/index';
 @import '~ng2-activiti-analytics/styles/index';
@@ -27,6 +28,7 @@ $theme:   mat-light-theme($primary, $accent, $warn);
 
 @include angular-material-theme($theme);
 
+@include adf-app-layout-theme($theme);
 @include alfresco-core-theme($theme);
 @include alfresco-activity-analytics-theme($theme);
 @include alfresco-activity-diagrams-theme($theme);

ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.scss

@@ -91,7 +91,7 @@
         &-drag-drop {
             height: 56px;
             opacity: 0.54;
-            font-size: 56px;
+            font-size: 53px;
             line-height: 1;
             letter-spacing: -2px;
             color: mat-color($foreground, text);
@@ -110,7 +110,7 @@
 
         &-image {
             width: 565px;
-            height: 161px;
+            max-width: 100%;
             object-fit: contain;
             margin-top: 17px;
         }

ng2-components/ng2-alfresco-search/src/components/search-control.component.html

@@ -1,7 +1,7 @@
 <form #f="ngForm" (ngSubmit)="onSearch(f.value)" class="adf-search-form">
     <div class="adf-search-container"
         [@transitionMessages]="subscriptAnimationState">
-        <a md-button
+        <a md-icon-button
                 *ngIf="expandable"
                 id="adf-search-button"
             (click)="toggleSearchBar()"

ng2-components/ng2-alfresco-search/src/components/search-control.component.scss

@@ -1,19 +1,11 @@
 @mixin mat-search-control-theme($theme) {
     $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
 
     .adf {
 
-        &-search-button.mat-button {
+        &-search-button.mat-icon-button {
-            margin-right: 10px;
+            margin-right: 5px;
-            border-radius: 50%;
-            height: 32px;
-            width: 32px;
-            min-width: 20px;
-            padding: 0;
-            overflow: hidden;
-            color: inherit;
-            line-height: normal;
-            border: none;
         }
 
         &-search-container {

ng2-components/ng2-alfresco-search/src/components/search-control.component.ts

@@ -29,7 +29,7 @@ import { SearchAutocompleteComponent } from './search-autocomplete.component';
     animations: [
         trigger('transitionMessages', [
             state('active', style({transform: 'translateX(0%)'})),
-            state('inactive', style({transform: 'translateX(86%)'})),
+            state('inactive', style({transform: 'translateX(83%)'})),
             state('no-animation', style({transform: 'translateX(0%)', width: '100%'})),
             transition('inactive => active',
                 animate('300ms cubic-bezier(0.55, 0, 0.55, 0.2)')),