[ADF-993] toolbar improvements (#2090)

* toolbar improvements

- simple "title" property to render toolbar title
- advanced "adf-toolbar-title" element for compound toolbars

* move to SASS and improve styling

* fix divider color

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

@@ -3,10 +3,6 @@
         [rootFolderId]="documentList.currentFolderId"
         [versioning]="versioning"
         [enabled]="documentList.hasCreatePermission()">
-        <adf-breadcrumb
-            [target]="documentList"
-            [folderNode]="documentList.folderNode">
-        </adf-breadcrumb>
         <div *ngIf="errorMessage" class="error-message">
             <button (click)="resetError()" class="mdl-button mdl-js-button mdl-button--icon">
                 <i class="material-icons">highlight_off</i>
@@ -14,7 +10,13 @@
             <span class="error-message--text">{{errorMessage}}</span>
         </div>
         <ng-container *ngIf="useCustomToolbar">
-            <adf-toolbar title="Toolbar">
+            <adf-toolbar>
+                <adf-toolbar-title>
+                    <adf-breadcrumb
+                        [target]="documentList"
+                        [folderNode]="documentList.folderNode">
+                    </adf-breadcrumb>
+                </adf-toolbar-title>
                 <button md-icon-button (click)="onCreateFolderClicked($event)">
                     <md-icon>create_new_folder</md-icon>
                 </button>

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

@@ -24,14 +24,14 @@ import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 
 import { CollapsableModule } from './src/components/collapsable/collapsable.module';
 import { ContextMenuModule } from './src/components/context-menu/context-menu.module';
-import { ToolbarComponent } from './src/components/toolbar/toolbar.component';
+import { ToolbarModule } from './src/components/toolbar/toolbar.module';
 import { CardViewModule } from './src/components/view/card-view.module';
 import { MaterialModule } from './src/material.module';
+import { AppConfigModule } from './src/services/app-config.service';
 
 import { AlfrescoApiService } from './src/services/alfresco-api.service';
 import { AlfrescoContentService } from './src/services/alfresco-content.service';
 import { AlfrescoSettingsService } from './src/services/alfresco-settings.service';
-import { AppConfigModule } from './src/services/app-config.service';
 import { AppConfigService } from './src/services/app-config.service';
 import { InitAppConfigServiceProvider } from './src/services/app-config.service';
 import { AuthGuardBpm } from './src/services/auth-guard-bpm.service';
@@ -145,6 +145,7 @@ export function createTranslateLoader(http: Http, logService: LogService) {
         }),
         MaterialModule,
         AppConfigModule,
+        ToolbarModule,
         ContextMenuModule,
         CardViewModule,
         CollapsableModule
@@ -155,8 +156,7 @@ export function createTranslateLoader(http: Http, logService: LogService) {
         DataColumnComponent,
         DataColumnListComponent,
         FileSizePipe,
-        HighlightPipe,
+        HighlightPipe
-        ToolbarComponent
     ],
     providers: providers(),
     exports: [
@@ -170,13 +170,13 @@ export function createTranslateLoader(http: Http, logService: LogService) {
         ContextMenuModule,
         CardViewModule,
         CollapsableModule,
+        ToolbarModule,
         ...obsoleteMdlDirectives(),
         UploadDirective,
         DataColumnComponent,
         DataColumnListComponent,
         FileSizePipe,
-        HighlightPipe,
+        HighlightPipe
-        ToolbarComponent
     ]
 })
 export class CoreModule {

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

@@ -0,0 +1,25 @@
+/*!
+ * @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-toolbar-title',
+    template: '<ng-content></ng-content>',
+    host: { 'class': 'adf-toolbar-title' }
+})
+export class ToolbarTitleComponent {}

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

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

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

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

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

@@ -0,0 +1,30 @@
+@import 'theming';
+
+$adf-toolbar-height: 48px;
+$adf-toolbar-font-size: 14px;
+
+.adf-toolbar--spacer {
+  flex: 1 1 auto;
+}
+
+.adf-toolbar {
+
+    .mat-toolbar {
+        min-height: $adf-toolbar-height;
+        border: 1px solid $alfresco-divider-color;
+    }
+
+    .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;
+            }
+        }
+    }
+}

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

@@ -20,9 +20,10 @@ import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@a
 @Component({
     selector: 'adf-toolbar',
     templateUrl: './toolbar.component.html',
-    styleUrls: ['./toolbar.component.css'],
+    styleUrls: ['./toolbar.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    encapsulation: ViewEncapsulation.None
+    encapsulation: ViewEncapsulation.None,
+    host: { 'class': 'adf-toolbar' }
 })
 export class ToolbarComponent {
 

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

@@ -0,0 +1,40 @@
+/*!
+ * @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 { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MdToolbarModule } from '@angular/material';
+
+import { ToolbarTitleComponent } from './toolbar-title.component';
+import { ToolbarComponent } from './toolbar.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        MdToolbarModule
+    ],
+    declarations: [
+        ToolbarComponent,
+        ToolbarTitleComponent
+    ],
+    exports: [
+        MdToolbarModule,
+        ToolbarComponent,
+        ToolbarTitleComponent
+    ]
+})
+export class ToolbarModule {}