Adding some responsiveness to demo shell app (#2408)

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

@@ -1,97 +1,50 @@
-<md-toolbar color="primary" *ngIf="!isAPageWithHeaderBar()" class="adf-app-toolbar" >
-    <adf-userinfo
-        class="adf-app-user-profile"
-        [menuPositionX]="'before'"
-        [menuPositionY]="'above'">
-    </adf-userinfo>
+<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>
 
-    <span  class="adf-app-hide-xsmall" >ADF Demo Application</span>
+    <md-toolbar color="primary" *ngIf="!isAPageWithHeaderBar()" class="adf-app-toolbar" md-no-ink>
+        <adf-userinfo
+            class="adf-app-user-profile"
+            [menuPositionX]="'before'"
+            [menuPositionY]="'above'">
+        </adf-userinfo>
 
-    <div class="adf-app-menu-spacer"></div>
+        <span fxFlex="1 1 auto" fxShow fxHide.lt-sm="true">ADF Demo Application</span>
 
-    <search-bar></search-bar>
+        <div class="adf-app-menu-spacer"></div>
 
-    <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>
+        <search-bar></search-bar>
 
-    <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>
+        <a md-ink-ripple 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 md-ink-ripple 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 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 class="adf-toolbar-link" fxShow fxHide.lt-md="true" md-button data-automation-id="login" href="" routerLink="/login">Login</a>
 
-    <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>
+        <theme-picker></theme-picker>
+        <button md-icon-button [mdMenuTriggerFor]="langMenu">
+            <md-icon>language</md-icon>
         </button>
-    </md-menu>
-</md-toolbar>
+        <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>
+
 
-<router-outlet></router-outlet>

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

@@ -1,29 +1,72 @@
 @import '~@angular/material/theming';
 
+@mixin adf-app-theme($theme) {
+    $primary: map-get($theme, primary);
+    $minimumAppWidth: 320px;
+    $toolbarHeight: 64px;
 
-.adf-app-user-profile {
-    margin-right: 10px;
-}
+    .adf-app {
+        display: block;
+        min-width: $minimumAppWidth;
+        height: 100%;
 
-.adf-app-menu-spacer {
-    flex: 1 1 auto;
-}
+        .adf-nav-container {
+            display: block;
+            min-width: $minimumAppWidth;
+            height: 100%;
+        }
 
-.adf-app-toolbar {
-    overflow: hidden;
-}
+        .adf-sidenav-link {
+            &.active {
+                color: mat-color($primary);
+            }
+        }
 
-@media ($mat-small) {
+        &-user-profile {
+            margin-right: 10px;
+        }
 
-    .adf-app-hide-small{
-        display: none !important;
+        &-menu-spacer {
+            flex: 1 1 auto;
+        }
+
+        &-toolbar {
+            height: $toolbarHeight;
+            line-height: $toolbarHeight;
+            overflow: hidden;
+
+            md-toolbar-row {
+                align-items: stretch;
+                justify-content: space-between;
+            }
+
+            .adf-toolbar-link {
+                min-width: 0;
+                line-height: $toolbarHeight;
+
+                &.active {
+                    background-color: rgba(0,0,0,.12);
+                }
+            }
+        }
     }
 
-}
-@media ($mat-xsmall) {
+    @media (max-width: $minimumAppWidth) {
+        adf-datatable & /deep/  {
+            max-width: $minimumAppWidth;
 
-    .adf-app-hide-xsmall{
-        display: none !important;
+            .adf-data-table-cell--fileSize {
+                display: none;
+            }
+
+            .adf-empty-folder-drag-drop {
+                font-size: 46px;
+            }
+
+            .adf-empty-folder-image {
+                width: $minimumAppWidth - 10px;
+                height: auto;
+            }
+        }
     }
-
-}
+}

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

@@ -22,11 +22,31 @@ import { AlfrescoSettingsService, AlfrescoTranslationService, PageTitle, Storage
     selector: 'adf-app',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.scss', './theme.scss'],
+    host: {
+        'class': 'adf-app'
+    },
     encapsulation: ViewEncapsulation.None
 })
 export class AppComponent {
     searchTerm: string = '';
 
+    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 settingsService: AlfrescoSettingsService,
                 private translateService: AlfrescoTranslationService,
                 private storage: StorageService,

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

@@ -44,11 +44,6 @@ import { FormListDemoComponent } from './components/form/form-list-demo.componen
 
 export const appRoutes: Routes = [
     { path: 'login', component: LoginDemoComponent },
-    {
-        path: '',
-        component: HomeComponent,
-        canActivate: [AuthGuard]
-    },
     {
         path: 'home',
         component: HomeComponent,
@@ -145,7 +140,12 @@ export const appRoutes: Routes = [
     { path: 'about', component: AboutComponent },
     { path: 'settings', component: SettingsComponent },
     { path: 'form', component: FormDemoComponent },
-    { path: 'form-list', component: FormListDemoComponent }
+    { path: 'form-list', component: FormListDemoComponent },
+    {
+        path: '',
+        component: HomeComponent,
+        canActivate: [AuthGuard]
+    }
 ];
 
 export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

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
-                (click)="onCreateFolderClicked($event)">
-                <md-icon>create_new_folder</md-icon>
-            </button>
-            <button md-icon-button
-                [disabled]="!hasSelection(documentList.selection)"
-                title="Download"
-                (click)="downloadNodes(documentList.selection)">
-                <md-icon>get_app</md-icon>
-            </button>
-            <button md-icon-button
-                    adf-node-permission="delete"
-                    [adf-nodes]="documentList.selection">
-                <md-icon>delete</md-icon>
-            </button>
+            <div class="adf-document-action-buttons" fxShow fxHide.lt-sm="true">
+                <button md-icon-button
+                    (click)="onCreateFolderClicked($event)">
+                    <md-icon>create_new_folder</md-icon>
+                </button>
+                <button md-icon-button
+                    [disabled]="!hasSelection(documentList.selection)"
+                    title="Download"
+                    (click)="downloadNodes(documentList.selection)">
+                    <md-icon>get_app</md-icon>
+                </button>
+                <button md-icon-button
+                        adf-node-permission="delete"
+                        [adf-nodes]="documentList.selection">
+                    <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>
-                    <md-icon>dialpad</md-icon>
-                    <span>Redial</span>
+                <button md-menu-item
+                    (click)="onCreateFolderClicked($event)">
+                    <md-icon>create_new_folder</md-icon>
+                    <span>New folder</span>
                 </button>
-                <button md-menu-item disabled>
-                    <md-icon>voicemail</md-icon>
-                    <span>Check voicemail</span>
+                <button md-menu-item
+                    [disabled]="!hasSelection(documentList.selection)"
+                    title="Download"
+                    (click)="downloadNodes(documentList.selection)">
+                    <md-icon>get_app</md-icon>
+                    <span>Download</span>
                 </button>
-                <button md-menu-item>
-                    <md-icon>notifications_off</md-icon>
-                    <span>Disable alerts</span>
+                <button md-menu-item
+                        adf-node-permission="delete"
+                        [adf-nodes]="documentList.selection">
+                    <md-icon>delete</md-icon>
+                    <span>Delete</span>
                 </button>
             </md-menu>
         </adf-toolbar>
@@ -237,10 +245,6 @@
         <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>

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

@@ -45,7 +45,6 @@ export class FilesComponent implements OnInit {
     showViewer: boolean = false;
 
     toolbarColor = 'default';
-    useDropdownBreadcrumb = false;
     useViewerDialog = true;
     useInlineViewer = false;
 

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

@@ -11,6 +11,7 @@
 @import '~ng2-alfresco-upload/styles/index';
 @import '~ng2-alfresco-userinfo/styles/index';
 @import '~ng2-alfresco-search/styles/index';
+@import './app.component.scss';
 
 
 @include mat-core();
@@ -27,6 +28,7 @@ $theme:   mat-light-theme($primary, $accent, $warn);
 
 @include angular-material-theme($theme);
 
+@include adf-app-theme($theme);
 @include alfresco-core-theme($theme);
 @include alfresco-activity-analytics-theme($theme);
 @include alfresco-activity-diagrams-theme($theme);