[ADF-754] toolbar component (#1938)

* toolbar component

- simple toolbar component (core lib)
- readme updates (core lib)
- update demo shell with toolbar component demo (document list)

* update unit tests

.vscode/settings.json

@@ -11,5 +11,5 @@
         "**/coverage": true
     },
     "editor.renderIndentGuides": true,
-    "tslint.configFile": "ng2-components/config/assets/tslint.json"
+    "tslint.configFile": "ng2-components/tslint.json"
 }

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

@@ -17,7 +17,6 @@
 
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { MdSlideToggleModule, MdInputModule, MdSelectModule } from '@angular/material';
 
 import { CoreModule } from 'ng2-alfresco-core';
 import { SearchModule } from 'ng2-alfresco-search';
@@ -35,11 +34,14 @@ import { ActivitiProcessListModule } from 'ng2-activiti-processlist';
 import { UserInfoComponentModule } from 'ng2-alfresco-userinfo';
 import { AnalyticsModule } from 'ng2-activiti-analytics';
 import { DiagramsModule } from 'ng2-activiti-diagrams';
+
+import { MaterialModule } from './material.module';
 import { AppComponent } from './app.component';
 import { routing } from './app.routes';
 import { CustomEditorsModule } from './components/activiti/custom-editor/custom-editor.component';
 import { Editor3DModule } from 'ng2-3d-editor';
 import { ChartsModule } from 'ng2-charts';
+import { CreateFolderDialog } from './dialogs/create-folder.dialog';
 
 import {
     HomeComponent,
@@ -64,10 +66,8 @@ import {
     imports: [
         BrowserModule,
         routing,
-        MdInputModule,
-        MdSlideToggleModule,
-        MdSelectModule,
         CoreModule.forRoot(),
+        MaterialModule,
         LoginModule.forRoot(),
         SearchModule.forRoot(),
         DataTableModule.forRoot(),
@@ -104,9 +104,13 @@ import {
         AboutComponent,
         FilesComponent,
         FormNodeViewer,
-        SettingComponent
+        SettingComponent,
+        CreateFolderDialog
     ],
     providers: [],
-    bootstrap: [ AppComponent ]
+    bootstrap: [ AppComponent ],
+    entryComponents: [
+        CreateFolderDialog
+    ]
 })
 export class AppModule { }

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

@@ -12,8 +12,36 @@
             </button>
             <span class="error-message--text">{{errorMessage}}</span>
         </div>
+        <ng-container *ngIf="useCustomToolbar">
+            <adf-toolbar title="Toolbar">
+                <button md-icon-button (click)="onCreateFolderClicked($event)">
+                    <md-icon>create_new_folder</md-icon>
+                </button>
+                <button md-icon-button>
+                    <md-icon>delete</md-icon>
+                </button>
+                <button md-icon-button [mdMenuTriggerFor]="menu">
+                    <md-icon>more_vert</md-icon>
+                </button>
+                <md-menu #menu="mdMenu">
+                    <button md-menu-item>
+                        <md-icon>dialpad</md-icon>
+                        <span>Redial</span>
+                    </button>
+                    <button md-menu-item disabled>
+                        <md-icon>voicemail</md-icon>
+                        <span>Check voicemail</span>
+                    </button>
+                    <button md-menu-item>
+                        <md-icon>notifications_off</md-icon>
+                        <span>Disable alerts</span>
+                    </button>
+                </md-menu>
+            </adf-toolbar>
+        </ng-container>
         <alfresco-document-list
                 #documentList
+                [creationMenuActions]="!useCustomToolbar"
                 [currentFolderId]="currentFolderId"
                 [contextMenuActions]="true"
                 [contentActions]="true"
@@ -127,6 +155,10 @@
 <context-menu-holder></context-menu-holder>
 
 <div class="container">
+    <section>
+        <md-slide-toggle [(ngModel)]="useCustomToolbar">Use custom toolbar</md-slide-toggle>
+    </section>
+
     <section>
         <md-slide-toggle [(ngModel)]="multipleFileUpload">Multiple File Upload</md-slide-toggle>
     </section>

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

@@ -17,11 +17,14 @@
 
 import { Component, Input, OnInit, AfterViewInit, Optional, ViewChild, ChangeDetectorRef } from '@angular/core';
 import { ActivatedRoute, Params, Router } from '@angular/router';
+import { MdDialog } from '@angular/material';
 import { AlfrescoAuthenticationService, AlfrescoContentService, FolderCreatedEvent, LogService, NotificationService } from 'ng2-alfresco-core';
 import { DocumentActionsService, DocumentListComponent, ContentActionHandler, DocumentActionModel, FolderActionModel } from 'ng2-alfresco-documentlist';
 import { FormService } from 'ng2-activiti-form';
 import { UploadService, UploadButtonComponent, UploadDragAreaComponent } from 'ng2-alfresco-upload';
 
+import { CreateFolderDialog } from '../../dialogs/create-folder.dialog';
+
 @Component({
     selector: 'files-component',
     templateUrl: './files.component.html',
@@ -35,6 +38,8 @@ export class FilesComponent implements OnInit, AfterViewInit {
     fileNodeId: any;
     fileShowed: boolean = false;
 
+    useCustomToolbar = false;
+
     @Input()
     multipleFileUpload: boolean = false;
 
@@ -74,6 +79,7 @@ export class FilesComponent implements OnInit, AfterViewInit {
                 private notificationService: NotificationService,
                 private uploadService: UploadService,
                 private contentService: AlfrescoContentService,
+                private dialog: MdDialog,
                 @Optional() private route: ActivatedRoute) {
         documentActions.setHandler('my-handler', this.myDocumentActionHandler.bind(this));
     }
@@ -197,4 +203,20 @@ export class FilesComponent implements OnInit, AfterViewInit {
             }
         }
     }
+
+    onCreateFolderClicked(event: Event) {
+        let dialogRef = this.dialog.open(CreateFolderDialog);
+        dialogRef.afterClosed().subscribe(folderName => {
+            if (folderName) {
+                this.contentService.createFolder('', folderName, this.documentList.currentFolderId).subscribe(
+                    node => {
+                        console.log(node);
+                    },
+                    err => {
+                        console.log(err);
+                    }
+                );
+            }
+        });
+    }
 }

demo-shell-ng2/app/dialogs/create-folder.dialog.ts

@@ -0,0 +1,44 @@
+/*!
+ * @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';
+
+@Component({
+    selector: 'adf-create-folder-dialog',
+    template: `
+        <h1 md-dialog-title>Create a new folder</h1>
+        <div md-dialog-content>
+            <md-input-container class="create-folder--name">
+                <input mdInput placeholder="Folder name" [(ngModel)]="value">
+            </md-input-container>
+        </div>
+        <div md-dialog-actions>
+            <button md-button md-dialog-close>Cancel</button>
+            <button md-button [md-dialog-close]="value">Create</button>
+        </div>
+    `,
+    styles: [
+        `
+        .create-folder--name {
+            width: 100%;
+        }
+        `
+    ]
+})
+export class CreateFolderDialog {
+    value: string = '';
+}

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

@@ -0,0 +1,32 @@
+/*!
+ * @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 { NgModule } from '@angular/core';
+import { MdSlideToggleModule, MdInputModule, MdSelectModule, MdDialogModule } from '@angular/material';
+
+const MATERIAL_MODULES = [
+    MdSlideToggleModule,
+    MdInputModule,
+    MdSelectModule,
+    MdDialogModule
+];
+
+@NgModule({
+    imports: MATERIAL_MODULES,
+    exports: MATERIAL_MODULES
+})
+export class MaterialModule {}

ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-header.component.spec.ts

@@ -116,9 +116,11 @@ describe('ActivitiProcessInstanceHeader', () => {
     it('should render the button show diagram disabled', () => {
         component.processInstance = new ProcessInstance(processEnded);
         fixture.detectChanges();
-        let showButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#show-diagram-button');
+        fixture.whenStable().then(() => {
-        expect(showButton).toBeDefined();
+            let showButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#show-diagram-button');
-        expect(showButton.disabled).toBeTruthy();
+            expect(showButton).toBeDefined();
+            expect(showButton.disabled).toBeTruthy();
+        });
     });
 
     it('should NOT render the button show diagram is the property showDiagram is false', () => {

ng2-components/ng2-alfresco-core/README.md

@@ -1,4 +1,4 @@
-# Alfresco Angular 2 Components core
+# Alfresco Angular Components Core
 
 <p>
   <a title='Build Status Travis' href="https://travis-ci.org/Alfresco/alfresco-ng2-components">
@@ -46,19 +46,41 @@ npm install --save ng2-alfresco-core
 ## Library content
 
 - Components
-    - Context Menu directive
+    - [Toolbar](#toolbar-component)
+    - [Accordion](#accordion-component)
 - Directives
-    - UploadDirective
+    - [Upload](#upload-directive)
+    - [Context Menu](#context-menu-directive)
 - Services
     - **LogService**, log service implementation
-    - **NotificationService**, Notification service implementation
+    - [NotificationService](#notification-service), Notification service implementation
-    - **AlfrescoApiService**, provides access to Alfresco JS API instance
+    - [AlfrescoApiService](#alfresco-api-service), provides access to Alfresco JS API instance
-    - **AlfrescoAuthenticationService**, main authentication APIs
+    - [AlfrescoAuthenticationService](#authentication-service), main authentication APIs
-    - **AlfrescoTranslationService**, various i18n-related APIs
+    - [AlfrescoTranslationService](#alfrescotranslationservice), various i18n-related APIs
     - **ContextMenuService**, global context menu APIs
+    - [Renditions Service](#renditions-service)
 
+## Toolbar Component
 
-## UploadDirective
+```html
+<adf-toolbar title="Toolbar">
+    <button md-icon-button>
+        <md-icon>create_new_folder</md-icon>
+    </button>
+    <button md-icon-button>
+        <md-icon>delete</md-icon>
+    </button>
+</adf-toolbar>
+```
+
+### Properties
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| title | string | | Toolbar title |
+| color | string | | Toolbar color, can be changed to empty value (default), `primary`, `accent` or `warn`. |
+
+## Upload Directive
 
 Allows your components or common HTML elements reacting on File drag and drop in order to upload content. 
 Used by attaching to an element or component.

ng2-components/ng2-alfresco-core/index.ts

@@ -16,12 +16,13 @@
  */
 
 import { NgModule, ModuleWithProviders } from '@angular/core';
-import { MdSnackBarModule } from '@angular/material';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { HttpModule, Http } from '@angular/http';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { TranslateModule, TranslateLoader } from 'ng2-translate/ng2-translate';
+import { MaterialModule } from './src/material.module';
+import { AdfToolbarComponent } from './src/components/toolbar/toolbar.component';
 
 import {
     AlfrescoAuthenticationService,
@@ -95,7 +96,7 @@ export function createTranslateLoader(http: Http, logService: LogService) {
             useFactory: (createTranslateLoader),
             deps: [Http, LogService]
         }),
-        MdSnackBarModule
+        MaterialModule
     ],
     declarations: [
         ...MATERIAL_DESIGN_DIRECTIVES,
@@ -104,7 +105,8 @@ export function createTranslateLoader(http: Http, logService: LogService) {
         UploadDirective,
         DataColumnComponent,
         DataColumnListComponent,
-        FileSizePipe
+        FileSizePipe,
+        AdfToolbarComponent
     ],
     providers: [
         ...ALFRESCO_CORE_PROVIDERS
@@ -116,14 +118,15 @@ export function createTranslateLoader(http: Http, logService: LogService) {
         ReactiveFormsModule,
         HttpModule,
         TranslateModule,
+        MaterialModule,
         ...MATERIAL_DESIGN_DIRECTIVES,
         ...CONTEXT_MENU_DIRECTIVES,
         ...COLLAPSABLE_DIRECTIVES,
         UploadDirective,
         DataColumnComponent,
         DataColumnListComponent,
-        MdSnackBarModule,
+        FileSizePipe,
-        FileSizePipe
+        AdfToolbarComponent
     ]
 })
 export class CoreModule {

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

@@ -0,0 +1,3 @@
+.adf-toolbar--spacer {
+  flex: 1 1 auto;
+}

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

@@ -0,0 +1,5 @@
+<md-toolbar [color]="color">
+    <span>{{ title }}</span>
+    <span class="adf-toolbar--spacer"></span>
+    <ng-content></ng-content>
+</md-toolbar>

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

@@ -0,0 +1,35 @@
+/*!
+ * @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, Input, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
+
+@Component({
+    selector: 'adf-toolbar',
+    templateUrl: './toolbar.component.html',
+    styleUrls: ['./toolbar.component.css'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None
+})
+export class AdfToolbarComponent {
+
+    @Input()
+    title: string = '';
+
+    @Input()
+    color: string;
+
+}

ng2-components/ng2-alfresco-core/src/material.module.ts

@@ -0,0 +1,31 @@
+/*!
+ * @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 { NgModule } from '@angular/core';
+import { MdSnackBarModule, MdToolbarModule, MdButtonModule } from '@angular/material';
+
+const MATERIAL_MODULES = [
+    MdSnackBarModule,
+    MdToolbarModule,
+    MdButtonModule
+];
+
+@NgModule({
+    imports: MATERIAL_MODULES,
+    exports: MATERIAL_MODULES
+})
+export class MaterialModule {}

ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.css

@@ -5,7 +5,7 @@
     padding: 8px 15px;
     list-style: none;
     background-color: #fafafa;
-    margin: 0 0 4px;
+    margin: 0;
 }
 
 :host .breadcrumb > li {