New packages org (#2639)

New packages org

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

@@ -0,0 +1,47 @@
+<mat-sidenav-container class="adf-nav-container">
+    <mat-sidenav #sidenav class="adf-sidenav" position="end" mode="push">
+        <mat-nav-list>
+            <a mat-list-item *ngFor="let link of links" [routerLink]="link.href" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" (click)="sidenav.close()" class="adf-sidenav-link">
+                <mat-icon matListIcon>{{link.icon}}</mat-icon>
+                <span>{{link.title | translate }}</span>
+            </a>
+            <a mat-list-item adf-logout (click)="sidenav.close()">
+                <mat-icon matListIcon>exit_to_app</mat-icon>
+                <span>Logout</span>
+            </a>
+        </mat-nav-list>
+    </mat-sidenav>
+
+    <mat-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">{{'APP_LAYOUT.APP_NAME' | translate }}</span>
+
+        <div class="adf-app-layout-menu-spacer"></div>
+
+        <adf-search-bar class="adf-search-bar-overflow" fxFlex="0 1 auto"></adf-search-bar>
+
+        <a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true" mat-button data-automation-id="home" href="" routerLink="/home" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">{{'APP_LAYOUT.HOME' | translate }}</a>
+        <a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true" mat-button data-automation-id="files" href="" routerLink="/files" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">{{'APP_LAYOUT.CONTENT_SERVICES' | translate }}</a>
+        <a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true"  mat-button data-automation-id="activiti" href="" routerLink="/activiti" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">{{'APP_LAYOUT.PROCESS_SERVICES' | translate }}</a>
+        <a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true" mat-button data-automation-id="login" href="" routerLink="/login">Login</a>
+
+        <theme-picker></theme-picker>
+        <button mat-icon-button [matMenuTriggerFor]="langMenu">
+            <mat-icon>language</mat-icon>
+        </button>
+        <mat-menu #langMenu="matMenu">
+            <adf-language-menu></adf-language-menu>
+        </mat-menu>
+
+        <button mat-icon-button (click)="sidenav.open()">
+            <mat-icon>menu</mat-icon>
+        </button>
+    </mat-toolbar>
+
+    <router-outlet></router-outlet>
+</mat-sidenav-container>

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

@@ -0,0 +1,73 @@
+@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);
+      }
+    }
+
+    .adf-search-bar-overflow {
+        overflow: hidden;
+    }
+
+    &-user-profile {
+      margin-right: 10px;
+    }
+
+    &-menu-spacer {
+      flex: 1 1 auto;
+    }
+
+    &-toolbar {
+      height: $toolbarHeight;
+      line-height: $toolbarHeight;
+      overflow: hidden;
+
+      mat-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);
+        }
+      }
+    }
+  }
+
+  @media screen and  ($mat-small) {
+    .adf-userinfo-name {
+      display: none;
+    }
+
+    .adf-search-bar-overflow {
+        padding-right: 4px;
+    }
+  }
+
+  @media screen and ($mat-xsmall) {
+      .adf-search-bar-overflow {
+          padding-right: 16px;
+      }
+  }
+
+}

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

@@ -0,0 +1,48 @@
+/*!
+ * @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';
+
+@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: 'APP_LAYOUT.HOME' },
+        { href: '/files', icon: 'folder_open', title: 'APP_LAYOUT.CONTENT_SERVICES' },
+        { href: '/activiti', icon: 'device_hub', title: 'APP_LAYOUT.PROCESS_SERVICES' },
+        { href: '/login', icon: 'vpn_key', title: 'APP_LAYOUT.LOGIN' },
+        { href: '/dl-custom-sources', icon: 'extension', title: 'APP_LAYOUT.CUSTOM_SOURCES' },
+        { href: '/datatable', icon: 'view_module', title: 'APP_LAYOUT.DATATABLE' },
+        { href: '/form', icon: 'poll', title: 'APP_LAYOUT.FORM' },
+        { href: '/form-list', icon: 'library_books', title: 'APP_LAYOUT.FORM_LIST' },
+        { href: '/uploader', icon: 'file_upload', title: 'APP_LAYOUT.UPLOADER' },
+        { href: '/webscript', icon: 'extension', title: 'APP_LAYOUT.WEBSCRIPT' },
+        { href: '/tag', icon: 'local_offer', title: 'APP_LAYOUT.TAG' },
+        { href: '/social', icon: 'thumb_up', title: 'APP_LAYOUT.SOCIAL' },
+        { href: '/settings', icon: 'settings', title: 'APP_LAYOUT.SETTINGS' },
+        { href: '/about', icon: 'info_outline', title: 'APP_LAYOUT.ABOUT' }
+    ];
+
+    constructor(){};
+}