From f6bdc05e5b7faecae6807c13d70e95c911674ef0 Mon Sep 17 00:00:00 2001
From: Michael Prentice <splaktar@gmail.com>
Date: Thu, 26 Apr 2018 11:36:26 -0400
Subject: [PATCH] docs(toolbar,menuBar): add md-toolbar-filler examples
 (#11260)

register the icon sets in the docs app
fix strange absolute styling alignment issue

Relates to #11258
---
 docs/app/js/app.js                            |  9 ++++--
 .../menuBar/demoBasicUsage/index.html         |  3 ++
 .../menuBar/demoDynamicNestedMenus/index.html |  7 ++--
 .../demoBasicUsage/img/icons/favorite.svg     |  4 ---
 .../toolbar/demoBasicUsage/img/icons/menu.svg |  4 ---
 .../demoBasicUsage/img/icons/more_vert.svg    |  4 ---
 .../toolbar/demoBasicUsage/index.html         | 32 +++++++++++--------
 .../toolbar/demoBasicUsage/script.js          |  5 ++-
 .../toolbar/demoBasicUsage/style.css          |  3 --
 .../toolbar/demoBasicUsage/style.scss         | 14 ++++++++
 10 files changed, 49 insertions(+), 36 deletions(-)
 delete mode 100755 src/components/toolbar/demoBasicUsage/img/icons/favorite.svg
 delete mode 100755 src/components/toolbar/demoBasicUsage/img/icons/menu.svg
 delete mode 100755 src/components/toolbar/demoBasicUsage/img/icons/more_vert.svg
 delete mode 100644 src/components/toolbar/demoBasicUsage/style.css
 create mode 100644 src/components/toolbar/demoBasicUsage/style.scss

diff --git a/docs/app/js/app.js b/docs/app/js/app.js
index c3da5885c54..973ace569d2 100644
--- a/docs/app/js/app.js
+++ b/docs/app/js/app.js
@@ -63,13 +63,18 @@ function(SERVICES, COMPONENTS, DEMOS, PAGES,
     .dark();
 
   $mdIconProvider.icon('md-toggle-arrow', 'img/icons/toggle-arrow.svg', 48);
+  $mdIconProvider
+    .iconSet('communication', 'img/icons/sets/communication-icons.svg', 24)
+    .iconSet('device', 'img/icons/sets/device-icons.svg', 24)
+    .iconSet('social', 'img/icons/sets/social-icons.svg', 24)
+    .iconSet('symbol', 'img/icons/sets/symbol-icons.svg', 24)
+    .defaultIconSet('img/icons/sets/core-icons.svg', 24);
 
   $mdThemingProvider.theme('default')
       .primaryPalette('docs-blue')
       .accentPalette('docs-red');
 
-  $mdThemingProvider
-      .enableBrowserColor();
+  $mdThemingProvider.enableBrowserColor();
 
   angular.forEach(PAGES, function(pages, area) {
     angular.forEach(pages, function(page) {
diff --git a/src/components/menuBar/demoBasicUsage/index.html b/src/components/menuBar/demoBasicUsage/index.html
index 5f299fb2ba8..f0413e03e15 100644
--- a/src/components/menuBar/demoBasicUsage/index.html
+++ b/src/components/menuBar/demoBasicUsage/index.html
@@ -1,6 +1,9 @@
 <div ng-controller="DemoBasicCtrl as ctrl" ng-cloak>
   <md-toolbar class="md-menu-toolbar">
     <div layout="row">
+      <md-toolbar-filler layout layout-align="center center">
+        <md-icon md-svg-icon="content-paste"></md-icon>
+      </md-toolbar-filler>
       <div>
         <h2 class="md-toolbar-tools">Untitled document</h2>
         <md-menu-bar>
diff --git a/src/components/menuBar/demoDynamicNestedMenus/index.html b/src/components/menuBar/demoDynamicNestedMenus/index.html
index 0f8a3fa3e4a..c27587ea43c 100644
--- a/src/components/menuBar/demoDynamicNestedMenus/index.html
+++ b/src/components/menuBar/demoDynamicNestedMenus/index.html
@@ -1,8 +1,11 @@
 <div ng-controller="DemoDynamicNestedMenusCtrl as ctrl" ng-cloak>
   <md-toolbar class="md-menu-toolbar">
     <div layout="row">
+      <md-toolbar-filler layout layout-align="center center">
+        <md-icon md-svg-icon="communication:business"></md-icon>
+      </md-toolbar-filler>
       <div>
-        <h2 class="md-toolbar-tools">Untitled document</h2>
+        <h2 class="md-toolbar-tools">Mission Statement</h2>
         <md-menu-bar>
           <md-menu>
             <button aria-label="Open menu" ng-click="$mdMenu.open($event)">
@@ -35,7 +38,7 @@ <h2 class="md-toolbar-tools">Untitled document</h2>
 
   <md-content class="page-container">
     <md-card class="page">
-      <h1>Untitled document</h1>
+      <h1>Mission Statement</h1>
       <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu
         leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis
         consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh
diff --git a/src/components/toolbar/demoBasicUsage/img/icons/favorite.svg b/src/components/toolbar/demoBasicUsage/img/icons/favorite.svg
deleted file mode 100755
index a54d02d49f4..00000000000
--- a/src/components/toolbar/demoBasicUsage/img/icons/favorite.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M0 0h24v24h-24z" fill="none"/>
-    <path d="M12 21.35l-1.45-1.32c-5.15-4.67-8.55-7.75-8.55-11.53 0-3.08 2.42-5.5 5.5-5.5 1.74 0 3.41.81 4.5 2.09 1.09-1.28 2.76-2.09 4.5-2.09 3.08 0 5.5 2.42 5.5 5.5 0 3.78-3.4 6.86-8.55 11.54l-1.45 1.31z"/>
-</svg>
diff --git a/src/components/toolbar/demoBasicUsage/img/icons/menu.svg b/src/components/toolbar/demoBasicUsage/img/icons/menu.svg
deleted file mode 100755
index b2de22a395a..00000000000
--- a/src/components/toolbar/demoBasicUsage/img/icons/menu.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
-    <path d="M0 0h18v18h-18z" fill="none"/>
-    <path d="M2 13.5h14v-1.5h-14v1.5zm0-4h14v-1.5h-14v1.5zm0-5.5v1.5h14v-1.5h-14z"/>
-</svg>
diff --git a/src/components/toolbar/demoBasicUsage/img/icons/more_vert.svg b/src/components/toolbar/demoBasicUsage/img/icons/more_vert.svg
deleted file mode 100755
index 6e1d96db649..00000000000
--- a/src/components/toolbar/demoBasicUsage/img/icons/more_vert.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
-    <path d="M0 0h18v18h-18z" fill="none"/>
-    <path d="M9 5.5c.83 0 1.5-.67 1.5-1.5s-.67-1.5-1.5-1.5-1.5.67-1.5 1.5.67 1.5 1.5 1.5zm0 2c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0 5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5z"/>
-</svg>
diff --git a/src/components/toolbar/demoBasicUsage/index.html b/src/components/toolbar/demoBasicUsage/index.html
index 0de36ba858b..4aa9295e268 100644
--- a/src/components/toolbar/demoBasicUsage/index.html
+++ b/src/components/toolbar/demoBasicUsage/index.html
@@ -1,8 +1,5 @@
-
-<div ng-controller="AppCtrl" ng-cloak>
-
+<div ng-controller="BasicDemoCtrl" ng-cloak>
   <md-content>
-
     <br>
 
     <md-toolbar class="md-hue-2">
@@ -14,7 +11,7 @@
         <h2 flex md-truncate>Toolbar with Disabled/Enabled Icon Buttons</h2>
 
         <md-button class="md-icon-button" aria-label="Favorite">
-          <md-icon md-svg-icon="img/icons/favorite.svg" style="color: greenyellow;"></md-icon>
+          <md-icon md-svg-icon="img/icons/favorite.svg" class="favorite-icon"></md-icon>
         </md-button>
 
         <md-button class="md-icon-button" aria-label="More">
@@ -22,27 +19,35 @@ <h2 flex md-truncate>Toolbar with Disabled/Enabled Icon Buttons</h2>
         </md-button>
       </div>
     </md-toolbar>
-
     <br>
 
     <md-toolbar>
       <div class="md-toolbar-tools">
         <md-button aria-label="Go Back">
-          Go Back
+          Back
         </md-button>
 
-        <md-truncate style="position: absolute; left: 90px; right: 170px; top: 13px; bottom: 13px;">Toolbar with Standard Buttons</md-truncate>
-
-        <span flex></span>
-        <md-button class="md-raised" aria-label="Learn More">
+        <h2 flex md-truncate>Toolbar with Standard Buttons and a Mini FAB</h2>
+        <md-button class="md-raised md-accent md-hue-3" aria-label="Learn More">
           Learn More
         </md-button>
-        <md-button class="md-fab md-mini" aria-label="Favorite">
+        <md-button class="md-fab md-mini md-hue-3" aria-label="Favorite">
           <md-icon md-svg-icon="img/icons/favorite.svg"></md-icon>
         </md-button>
       </div>
     </md-toolbar>
+    <br>
 
+    <md-toolbar class="md-hue-1">
+      <div layout="row">
+        <md-toolbar-filler layout="row" layout-align="center center">
+          <md-icon id="filler-icon" md-svg-icon="img/icons/octicon-repo.svg"></md-icon>
+        </md-toolbar-filler>
+        <h2 class="md-toolbar-tools">
+          <span>Toolbar: with filler and icon (md-hue-1)</span>
+        </h2>
+      </div>
+    </md-toolbar>
     <br>
 
     <md-toolbar class="md-tall md-accent">
@@ -50,13 +55,12 @@ <h2 class="md-toolbar-tools">
         <span>Toolbar: tall (md-accent)</span>
       </h2>
     </md-toolbar>
-
     <br>
 
     <md-toolbar class="md-tall md-warn md-hue-3">
       <span flex></span>
       <h2 class="md-toolbar-tools">
-        <span class="md-flex">Toolbar: tall with actions pin to the bottom (md-warn md-hue-3)</span>
+        <span class="md-flex">Toolbar: tall with actions pinned to the bottom (md-warn md-hue-3)</span>
       </h2>
     </md-toolbar>
   </md-content>
diff --git a/src/components/toolbar/demoBasicUsage/script.js b/src/components/toolbar/demoBasicUsage/script.js
index 10f70004bc0..3d41aab4651 100644
--- a/src/components/toolbar/demoBasicUsage/script.js
+++ b/src/components/toolbar/demoBasicUsage/script.js
@@ -1,6 +1,5 @@
+angular.module('toolbarDemoBasic', ['ngMaterial'])
 
-angular.module('toolbarDemo1', ['ngMaterial'])
-
-.controller('AppCtrl', function($scope) {
+.controller('BasicDemoCtrl', function($scope) {
 
 });
diff --git a/src/components/toolbar/demoBasicUsage/style.css b/src/components/toolbar/demoBasicUsage/style.css
deleted file mode 100644
index 4f54cabcd06..00000000000
--- a/src/components/toolbar/demoBasicUsage/style.css
+++ /dev/null
@@ -1,3 +0,0 @@
-md-toolbar  md-icon.md-default-theme {
-    color: white;
-}
diff --git a/src/components/toolbar/demoBasicUsage/style.scss b/src/components/toolbar/demoBasicUsage/style.scss
new file mode 100644
index 00000000000..64ae42633e0
--- /dev/null
+++ b/src/components/toolbar/demoBasicUsage/style.scss
@@ -0,0 +1,14 @@
+md-toolbar {
+  .md-button.md-icon-button {
+    .favorite-icon {
+      fill: #DE3641; // docs-red A100
+    }
+  }
+  md-toolbar-filler {
+    background-color: #e0e0e0; // grey 200
+
+    #filler-icon {
+      fill: #4C9EF1; // docs-blue 300 - hue-1
+    }
+  }
+}