remove unused branchTemplate Directive (may implement later)

Fix filter close method so it does not break searching
fix layout for rows without checkbox or arrow
add hide-checkbox attribute
add color highlighting when no checkbox

Author: Ben Rubin

src/js/branch.js

@@ -27,7 +27,6 @@ function branchDirective($parse, $document, $mdUtil, $filter, $$mdTree, $mdConst
 
   return {
     restrict: 'E',
-    require: ['?^mdBranchTemplates'],
     priority: 1000,
     terminal: true,
     transclude: 'element',
@@ -57,6 +56,7 @@ function branchDirective($parse, $document, $mdUtil, $filter, $$mdTree, $mdConst
       if (isOpen) { startWatching(); }
 
       // standard angular filter wrapped so we can determian if the parent should be opened for closed
+      var filters = {};
       scope.$mdBranchFilter = function (value) {
         var filtered = $filter('filter')(value);
 
@@ -190,12 +190,17 @@ function branchDirective($parse, $document, $mdUtil, $filter, $$mdTree, $mdConst
       // this is only done once
       function updateNewBlock(block) {
         var isSelectable = block.element.attr('select') !== undefined;
+        var hideCheckbox = block.element.attr('hide-checkbox') !== undefined;
         var innerContainer = angular.element('<div class="md-branch-inner">'); // branch contents
         var branchContainer = angular.element('<div class="md-branch-container">'); // nested branched
-        innerContainer.append(BRANCH_ARROW_TEMPLATE.clone());
+
         if (isSelectable) {
-          block.element.addClass('md-checkbox-enabled');
-          innerContainer.append(CHECKBOX_SELECTION_INDICATOR.clone());
+          if (!hideCheckbox) {
+            block.element.addClass('md-checkbox-enabled');
+            innerContainer.append(CHECKBOX_SELECTION_INDICATOR.clone());
+          } else {
+            block.element.addClass('md-select-highlight-enabled');
+          }
         }
         Array.prototype.slice.call(block.element[0].childNodes).forEach(function (node) {
           if (node.nodeType === 8 && node.nodeValue.trim() === 'mdBranch:') {
@@ -208,11 +213,12 @@ function branchDirective($parse, $document, $mdUtil, $filter, $$mdTree, $mdConst
 
         // add branches
         if (branchContainer[0].childNodes.length) {
+          innerContainer.prepend(BRANCH_ARROW_TEMPLATE.clone());
           block.element.append(branchContainer);
 
         // if no more branches then mark as tip
         } else {
-          block.element.addClass('md-tip');
+          block.element.addClass('md-tip no-arrow');
         }
       }
 

src/js/branchTemplates.js

@@ -117,9 +117,12 @@ function treeService($mdUtil, $animateCss) {
   // close branch for filtering
   // No animations
   function filterClose(block) {
-    $mdUtil.disconnectScope(block.scope);
+    // do not disconnect top layer scopes or watchers
+    if (block.scope.$depth > 0) {
+      $mdUtil.disconnectScope(block.scope);
+      block.scope.killWatching();
+    }
     block.scope.isOpen = false;
-    block.scope.killWatching();
     block.element.removeClass('md-open');
     var container = angular.element(block.element[0].querySelector('.md-branch-container'));
     container.css('max-height', '');

src/js/service.js

@@ -19,7 +19,6 @@ md-branch.md-THEME_NAME-theme {
     }
   }
 
-
   &.md-checkbox-enabled {
     .checkbox-icon {
       border-color: '{{foreground-2}}';
@@ -56,7 +55,12 @@ md-branch.md-THEME_NAME-theme {
 
       & >.md-branch-inner {
         background-color: '{{background-100}}';
-        // border-color: '{{primary-color-0.36}}';
+      }
+    }
+
+    &.md-select-highlight-enabled[selected] {
+      & >.md-branch-inner {
+        background-color: '{{primary-color-0.12}}';
       }
     }
   }

src/style-theme.scss

@@ -15,7 +15,8 @@ md-tree {
       display: flex;
       flex-direction: column;
       min-height: 72px;
-      width: 60px;
+      width: 52px;
+      margin-left: -16px;
       justify-content: center;
 
       .md-branch-icon {
@@ -45,7 +46,7 @@ md-branch {
   display: block;
 
   .md-branch-inner {
-    // Layout [flex layout-align='start center']
+    padding-left: 16px;
     display: flex;
     justify-content: flex-start;
     align-items: center;
@@ -164,7 +165,7 @@ md-branch {
           font-size: 14px;
           letter-spacing: 0.010em;
           margin: 3px 0 1px;
-          font-weight: 400;
+          font-weight: 500;
           line-height: 1.2em;
           overflow: hidden;
           white-space: nowrap;