update style

update branch
update test app

Author: Ben Rubin

docsApp/pages/home/home.controller.js

@@ -5,24 +5,133 @@ angular
 
 function HomeController($scope) {
   var vm = this;
+  var masterPanel = angular.element(document.body.querySelector('.master-panel'));
   vm.selectedItems = [];
 
+  $scope.$watch(function () { return vm.selectedItems; }, function (value) {
+    masterPanel.toggleClass('closed', !value.length);
+  }, true);
+
+
   vm.locationData = [
     {
       id: 1,
-      name: 'Smashburger texas Austin north'
+      name: 'One',
+      menus: [
+        {
+          id: 1,
+          name: 'One',
+          items: [
+            {
+              id: 1,
+              name: 'One'
+            }
+          ]
+        }
+      ]
+    },
+    {
+      id: 2,
+      name: 'Two',
+      menus: [
+        {
+          id: 2,
+          name: 'Two',
+          items: [
+            {
+              id: 2,
+              name: 'Two'
+            }
+          ]
+        }
+      ]
+    }
+  ];
+
+  vm.locationData2 = [
+    {
+      id: 1,
+      name: 'Smashburger texas Austin north',
+      menus: [
+        {
+          id: 1,
+          name: 'menu One',
+          items: [
+            {
+              id: 1,
+              name: 'Item One',
+              price: '12.00'
+            },
+            {
+              id: 2,
+              name: 'Item two',
+              price: '12.00'
+            },
+            {
+              id: 3,
+              name: 'Item Three',
+              price: '12.00'
+            }
+          ]
+        },
+        {
+          id: 1,
+          name: 'menu Two',
+          items: [
+            {
+              id: 1,
+              name: 'Item One',
+              price: '12.00'
+            }
+          ]
+        }
+      ]
     },
     {
       id: 2,
       name: 'Smashburger texas Austin south'
     },
     {
       id: 3,
-      name: 'Smashburger texas San marcos'
+      name: 'Smashburger texas San marcos',
+      menus: [
+        {
+          id: 1,
+          name: 'menu One',
+          items: [
+            {
+              id: 1,
+              name: 'Item One',
+              price: '12.00'
+            },
+            {
+              id: 2,
+              name: 'Item two',
+              price: '12.00'
+            },
+            {
+              id: 3,
+              name: 'Item Three',
+              price: '12.00'
+            }
+          ]
+        },
+        {
+          id: 1,
+          name: 'menu Two',
+          items: [
+            {
+              id: 1,
+              name: 'Item One',
+              price: '12.00'
+            }
+          ]
+        }
+      ]
     },
     {
       id: 4,
-      name: 'Smashburger texas Waco',
+      name: 'one',
       menus: [
         {
           id: 1,

docsApp/pages/home/home.html

@@ -1,18 +1,19 @@
+<input ng-model="searchTerm" />
 <div layout="row">
   <md-tree ng-model="vm.selectedItems" restrict-selection="depth" flex>
-    <md-branch branch-repeat="location in vm.locationData" class="md-2-line" select>
+    <md-branch branch-repeat="location in vm.locationData | filter: searchTerm | orderBy: location.name" class="md-2-line" select>
       <div class="md-branch-text">
         <h3>{{location.name}}</h3>
         <p>Location</p>
       </div>
 
-      <md-branch branch-repeat="menu in location.menus" class="md-2-line" select>
+      <md-branch branch-repeat="menu in location.menus | filter: searchTerm | orderBy: menu.name" class="md-2-line" select>
         <div class="md-branch-text">
           <h3>{{menu.name}}</h3>
           <p>Menu</p>
         </div>
 
-        <md-branch branch-repeat="item in menu.items" class="md-2-line">
+        <md-branch branch-repeat="item in menu.items | filter: searchTerm | orderBy: item.name" class="md-2-line">
           <div class="md-branch-text">
             <h3>{{item.name}}</h3>
             <p>Item</p>
@@ -22,12 +23,46 @@ <h3>{{item.name}}</h3>
     </md-branch>
   </md-tree>
 
-  <div style="width: 420px; padding: 0 16px; border-left: 1px solid #ccc; height: 100%;">
+  <div class="master-panel closed">
+    <h4 style="width: 120px; margin: 0 auto; padding-top: 16px;">Master Panel</h4>
+  </div>
+
+  <div style="width: 420px; padding: 0 16px; border-left: 1px solid #ccc; height: 100%; z-index: 99; background: #EEE;">
+    <h2>Tree Component</h2>
+    <p>Welcome !</p>
+    <p>This version is only to showcase the main interaction. Not All the things work yet.</p>
+    <p>The core that handles the data and filtering is still under construction so you will not be able to manipluate(add, change, remove, filter) the tree at this time.</p>
+    <p>
+      You can leave comments about the tree here<br />
+      <a href="https://bypassmobile.atlassian.net/wiki/display/PROD/Tree+live+demo">Confluence Doc Link</a>
+    </p>
+    <p>Have Fun :)</p>
     <h3>Selected Items ({{vm.selectedItems.length}})</h3>
     <p ng-repeat="item in vm.selectedItems">{{item.name}}</p>
   </div>
 </div>
 
+<style>
+  .master-panel {
+    position: relative;
+    width: 120px;
+    right: 0;
+    padding: 0 16px;
+    border-left: 1px solid #ccc;
+    height: 100%;
+    background:rgb(244, 223, 255);
+    transition: all 0.2s linear;
+    z-index: 98;
+    overflow: hidden;
+  }
+
+  .master-panel.closed {
+    width: 0;
+    padding: 0;
+    border: none;
+  }
+</style>
+
 
 <!-- <md-list>
   <md-list-item ng-repeat="location in vm.locationData">