commit 55f6dd11358cb233677d5bf9e391c0e1ac532174
author Ali Ghassemi <aghassemi@google.com> Fri Apr 24 10:27:38 2015 -0700
committer Ali Ghassemi <aghassemi@google.com> Fri Apr 24 10:27:39 2015 -0700
tree bb3e6a4efe911fd7625d89df30980ede159a8ab5
parent 5d9af8709c912f1c8f706c76f254a99a310e165c

Updating the tree component to only use a different icon
for when a node does not have children and put the emptytext
as the title on that instead of a row displaying No Children.
Also fixing a bug where updating the light DOM was not updating
the showEmptyIcon property.

Change-Id: I8b182ea7caa4a144444d27914fe8edcfaee06c0d

src/lib/web-components/tree-node/tree-node.html

diff --git a/src/lib/web-components/tree-node/tree-node.html b/src/lib/web-components/tree-node/tree-node.html
index e078930..b002c6f 100644
--- a/src/lib/web-components/tree-node/tree-node.html
+++ b/src/lib/web-components/tree-node/tree-node.html
@@ -40,11 +40,21 @@
     <div class="indent" aria-expanded="{{open}}"
         aria-owns="{{isParent && open?'children':''}}">
       <div class="row">
-        <core-icon id="expander" on-tap="{{openme}}"
+        <template if="{{showEmptyIcon}}">
+          <core-icon id="expander"
+            icon="remove"
+            alt="{{emptytext}}"
+            title="{{emptytext}}">
+          </core-icon>
+        </template>
+        <template if="{{!showEmptyIcon}}">
+          <core-icon id="expander" on-tap="{{openme}}"
             class="{{isParent?'':'notParent'}}"
             icon="{{open?'expand-more':'chevron-right'}}"
-            alt="{{open?'collapse':'expand'}}">
-        </core-icon>
+            alt="{{open?'Collapse':'Expand'}}"
+            title="{{open?'Collapse':'Expand'}}">
+          </core-icon>
+        </template>
         <paper-spinner active="{{loading}}" aria-label="loading">
         </paper-spinner>
         <span on-tap="{{activate}}" role="treeitem" aria-selected="{{highlight}}"
@@ -63,9 +73,6 @@
       <template if="{{isParent && open}}">
         <div id="children" role="group">
           <content></content>
-          <template if="{{showEmptyText}}">
-            <div class="indent empty">{{emptytext}}</div>
-          </template>
         </div>
       </template>
     </div>
@@ -83,7 +90,7 @@
       isExpandable: false
     },
     isParent: false,
-    showEmptyText: false,
+    showEmptyIcon: false,
     ready: function() {
       this.isExpandableChanged();
       this.onMutation(this, this.childrenUpdated);
@@ -91,21 +98,27 @@
     childrenUpdated: function(observer, mutations) {
       this.isExpandableChanged();
       this.onMutation(this, this.childrenUpdated);
+      this.updateShowEmptyIcon();
     },
     isExpandableChanged: function() {
       this.isParent = !!this.firstElementChild || this.isExpandable;
     },
     openChanged: function() {
-      this.updateShowEmptyText();
+      this.updateShowEmptyIcon();
     },
     loadingChanged: function() {
-      this.updateShowEmptyText();
+      this.updateShowEmptyIcon();
     },
-    updateShowEmptyText: function() {
+    updateShowEmptyIcon: function() {
       var me = this;
       setTimeout(function() {
-        me.showEmptyText = (!me.firstElementChild && !me.loading && me.open);
-      }, 30); // delay showing the empty text by a bit so it is less jarring
+        me.showEmptyIcon = (
+          !me.firstElementChild &&
+          !me.loading &&
+           me.isExpandable &&
+           me.open
+        );
+      }, 30); // delay showing the empty icon by a bit so it is less jarring
     },
     openme: function(e, d, sender) {
       this.open = !this.open;