Viewer enhancements and Viewer Dialog prototype (#2200)

* viewer dialog scaffold

* toolbar divider component

* simple error screen

* material module and tooltips

* show file name in the title

* improved settings, simple image viewer

* flex-based image viewer, minor fixes

* ability to switch between viewers

* single viewer for images

* remove MDL from the Viewer component

* remove hardcoded demo shell layout

remove harcoded assumptions on "header" and "main" elements

* rework text viewer, remove MDL dependency

* upgrade 'unknown format' view, remove MDL

* simplify media viewer layout

* simplify image viewer

* clean pdf viewer

* migrate pdf viewer styles to scss

* rewrite pdf viewer host styles in scss

* fix unit tests and cleanup layout

* file viewer service

* viewer dialog supports downloads if url provided

ng2-components/ng2-alfresco-core/src/components/toolbar/toolbar-divider.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, ViewEncapsulation } from '@angular/core';
+
+@Component({
+    selector: 'adf-toolbar-divider',
+    template: '<div></div>',
+    host: { 'class': 'adf-toolbar-divider' },
+    styles: [`
+        .adf-toolbar-divider > div {
+            height: 24px;
+            width: 1px;
+            background: rgba(0, 0, 0, 0.26);
+            margin-left: 5px;
+            margin-right: 5px;
+        }
+    `],
+    encapsulation: ViewEncapsulation.None
+})
+export class ToolbarDividerComponent {}

ng2-components/ng2-alfresco-core/src/components/toolbar/toolbar.md

@@ -41,6 +41,19 @@ The toolbar should now look similar to the following:
 
 ![](docs/adf-toolbar-02.png)
 
+## Divider
+
+You can divide groups of elements with a visual separator `<adf-toolbar-divider>`:
+
+```html
+<adf-toolbar>
+    <button></button>
+    <button></button>
+    <adf-toolbar-divider></adf-toolbar-divider>
+    <button></button>
+</adf-toolbar>
+```
+
 ## Dropdown menu
 
 You can use the following example to create a dropdown menu:

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

@@ -19,6 +19,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { MdToolbarModule } from '@angular/material';
 
+import { ToolbarDividerComponent } from './toolbar-divider.component';
 import { ToolbarTitleComponent } from './toolbar-title.component';
 import { ToolbarComponent } from './toolbar.component';
 
@@ -29,12 +30,14 @@ import { ToolbarComponent } from './toolbar.component';
     ],
     declarations: [
         ToolbarComponent,
-        ToolbarTitleComponent
+        ToolbarTitleComponent,
+        ToolbarDividerComponent
     ],
     exports: [
         MdToolbarModule,
         ToolbarComponent,
-        ToolbarTitleComponent
+        ToolbarTitleComponent,
+        ToolbarDividerComponent
     ]
 })
 export class ToolbarModule {}