From 0238ea98dcd3c3120fc75e6e37b8fcbb271c118b Mon Sep 17 00:00:00 2001
From: Florian Maffini <florian.maffini@free.fr>
Date: Wed, 1 Mar 2017 12:29:26 +0100
Subject: [PATCH] fine tuning preicon for easy CSS override

---
 demo/index.html       | 121 ++++++++++++++++++++----------------------
 demo/lazyloading.html |  34 +++++-------
 demo/loading.svg      |   1 -
 demo/playground.html  |  12 +----
 paper-tree-node.html  |  27 +++++-----
 5 files changed, 85 insertions(+), 110 deletions(-)
 delete mode 100644 demo/loading.svg

diff --git a/demo/index.html b/demo/index.html
index a6eae5a..7209ad5 100755
--- a/demo/index.html
+++ b/demo/index.html
@@ -175,82 +175,77 @@ <h3>Lazy loading demo</h3>
         <template>
             <template id="t" is="dom-bind">
                 <style is="custom-style">
+                    @keyframes blinker {
+                      50% { opacity: 0; }
+                    }
+
                     #tree {
-                        --paper-tree-preicon-theme: {
-                            content: '';
-                            background:url('loading.svg');
-                            background-size:cover;
-                            position:absolute;
-                            width:24px;
-                            height:24px;
-                            margin-left:-24px;
+                        --paper-tree-toggle-theme: {
+                            animation: blinker 1s linear infinite;
+                            content: '⧖';
+                            margin-left: -21px;
                         };
                     }
                 </style>
+
                 <paper-tree id="tree" on-toggle="onToggle" data='{"name": "Loading..."}'></paper-tree>
-            </template>
-            <script>
 
-                var template = document.querySelector('#t'),
-                    tree = template.$.tree;
-
-                // Update the root data after 1 second delay
-                window.setTimeout(function() {
-                    tree.data = { name:'Cronos' };
-                    // Fetching root children ...
-                    template.fetchNodeChildren(tree.$.root);
-                }, 1000);
-
-
-                template.onToggle = function(event) {
-                    var target = event.detail;
-
-                    !target.loaded && target.getChildren().forEach(function(child){
-                        target.loaded = true;
-                        // Fetching children ...
-                        this.fetchNodeChildren(child);
-                    }, this);
-                },
-
-                template.setLoadingState = function(node, enabled) {
-
-                    if (enabled) {
-                        node.customStyle['--paper-tree-preicon-theme'] = '\
-                            content: \'\';\
-                            background:url(\'loading.svg\');\
-                            background-size:cover;\
-                            position:absolute;\
-                            width:24px;\
-                            height:24px;\
-                            margin-left:-24px;\
-                        ';
-                    } else {
-                        node.customStyle['--paper-tree-preicon-theme'] = ';';
-                    }
+                <script>
 
-                    node.updateStyles();
-                },
+                    var template = document.querySelector('#t'),
+                        tree = template.$.tree;
 
-                template.fetchNodeChildren = function(node) {
+                    // Update the root data after 1 second delay
+                    window.setTimeout(function() {
+                        tree.data = { name:'Cronos' };
+                        // Fetching root children ...
+                        template.fetchChildren(tree.$.root);
+                    }, 1000);
 
-                    // Set loading styles
-                    this.setLoadingState(node, true);
 
-                    window.setTimeout(function() {
+                    template.onToggle = function(event) {
+                        var target = event.detail;
 
-                        node.set('data.children', [
-                            {name: 'Zeus'},
-                            {name: 'Apollo'},
-                            {name: 'Athena'},
-                            {name: 'Poseidon'}
-                        ]);
+                        !target.loaded && target.getChildren().forEach(function(child){
+                            target.loaded = true;
+                            // Fetching children ...
+                            this.fetchChildren(child);
+                        }, this);
+                    },
 
-                        // Reset loading styles
-                        this.setLoadingState(node, false);
+                    template.setLoadingState = function(node, enabled) {
 
-                    }.bind(this), Math.floor(Math.random() * 2000));
-                }
-            </script>
+                        if (enabled) {
+                            node.customStyle['--paper-tree-toggle-theme'] = 'animation: blinker 1s linear infinite; content: \'⧖\'; margin-left: -21px;';
+                        } else {
+                            node.customStyle['--paper-tree-toggle-theme'] = ';';
+                        }
+
+                        node.updateStyles();
+                    },
+
+                    template.fetchChildren = function(node) {
+
+                        // Set loading styles
+                        this.setLoadingState(node, true);
+
+                        window.setTimeout(function() {
+
+                            // Add children to the node
+                            node.set('data.children', [
+                                {name: 'Zeus'},
+                                {name: 'Apollo'},
+                                {name: 'Athena'},
+                                {name: 'Poseidon'}
+                            ]);
+
+                            // Reset loading styles
+                            this.setLoadingState(node, false);
+
+                        }.bind(this), Math.floor(Math.random() * 2000));
+                    }
+                </script>
+            </template>
         </template>
     </demo-snippet>
 
diff --git a/demo/lazyloading.html b/demo/lazyloading.html
index 5830ab0..32fdbef 100644
--- a/demo/lazyloading.html
+++ b/demo/lazyloading.html
@@ -9,15 +9,15 @@
 
 <template id="t" is="dom-bind">
     <style is="custom-style">
+        @keyframes blinker {
+          50% { opacity: 0; }
+        }
+
         #tree {
-            --paper-tree-preicon-theme: {
-                content: '';
-                background:url('loading.svg');
-                background-size:cover;
-                position:absolute;
-                width:24px;
-                height:24px;
-                margin-left:-24px;
+            --paper-tree-toggle-theme: {
+                animation: blinker 1s linear infinite;
+                content: '⧖';
+                margin-left: -21px;
             };
         }
     </style>
@@ -36,7 +36,7 @@ <h2>Lazy loading paper-tree demo</h2>
     window.setTimeout(function() {
         tree.data = { name:'Cronos' };
         // Fetching root children ...
-        template.fetchNodeChildren(tree.$.root);
+        template.fetchChildren(tree.$.root);
     }, 1000);
 
 
@@ -46,30 +46,22 @@ <h2>Lazy loading paper-tree demo</h2>
         !target.loaded && target.getChildren().forEach(function(child){
             target.loaded = true;
             // Fetching children ...
-            this.fetchNodeChildren(child);
+            this.fetchChildren(child);
         }, this);
     },
 
     template.setLoadingState = function(node, enabled) {
 
         if (enabled) {
-            node.customStyle['--paper-tree-preicon-theme'] = '\
-                content: \'\';\
-                background:url(\'loading.svg\');\
-                background-size:cover;\
-                position:absolute;\
-                width:24px;\
-                height:24px;\
-                margin-left:-24px;\
-            ';
+            node.customStyle['--paper-tree-toggle-theme'] = 'animation: blinker 1s linear infinite; content: \'⧖\'; margin-left: -21px;';
         } else {
-            node.customStyle['--paper-tree-preicon-theme'] = ';';
+            node.customStyle['--paper-tree-toggle-theme'] = ';';
         }
 
         node.updateStyles();
     },
 
-    template.fetchNodeChildren = function(node) {
+    template.fetchChildren = function(node) {
 
         // Set loading styles
         this.setLoadingState(node, true);
diff --git a/demo/loading.svg b/demo/loading.svg
deleted file mode 100644
index 460e05d..0000000
--- a/demo/loading.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg id="loading" width='24px' height='24px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-default"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(0 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(30 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.08333333333333333s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(60 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.16666666666666666s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(90 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.25s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(120 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.3333333333333333s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(150 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.4166666666666667s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(180 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.5s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(210 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.5833333333333334s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(240 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.6666666666666666s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(270 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.75s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(300 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.8333333333333334s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(330 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.9166666666666666s' repeatCount='indefinite'/></rect></svg>
\ No newline at end of file
diff --git a/demo/playground.html b/demo/playground.html
index 085d0a6..0a00b16 100644
--- a/demo/playground.html
+++ b/demo/playground.html
@@ -41,17 +41,7 @@ <h3>Media Tree</h3>
     "icon": "weekend",
     "open": true,
     "children": [{
-        "name": "Movies",
-        "children": [{
-            "name": "Interstellar",
-            "icon": "theaters"
-        }, {
-            "name": "The Godfather",
-            "icon": "theaters"
-        }, {
-            "name": "Pulp Fiction",
-            "icon": "theaters"
-        }]
+        "name": "Movies"
     }, {
         "name": "TV Shows",
         "children": [{
diff --git a/paper-tree-node.html b/paper-tree-node.html
index 20c1df6..1c20434 100755
--- a/paper-tree-node.html
+++ b/paper-tree-node.html
@@ -23,7 +23,7 @@
 ----------------|-------------|----------
 `--paper-tree-selected-background-color`      | Highlight color for selected node           | `rgba(200, 200, 200, 0.5)`
 `--paper-tree-selected-color`                 | Text and icon color for selected node       | `inherit`
-`--paper-tree-preicon-theme`                  | Change theme for node pre-icon (+/- toggle) |
+`--paper-tree-toggle-theme`                   | Change theme for node +/- toggle            |
 `--paper-tree-icon-theme`                     | Change theme for node icon                  |
 
 @demo
@@ -44,8 +44,8 @@
             display: inline-block;
         }
 
-        .node-preicon:before {
-            @apply(--paper-tree-preicon-theme);
+        .node-container {
+            white-space: nowrap;
         }
 
         .node-row {
@@ -53,27 +53,26 @@
             padding-right: 4px;
         }
 
-        .node-container{
-            white-space: nowrap;
+        .node-preicon.collapsed,
+        .node-preicon.expanded {
+            padding-left: 0px;
         }
 
         .node-preicon {
-            padding-left: 23px;
+            padding-left: 18px;
         }
 
-        .node-preicon.collapsed,
-        .node-preicon.expanded {
-            padding-left: 0px;
+        .node-preicon:before {
+            margin-right: 5px;
+            @apply(--paper-tree-toggle-theme);
         }
 
         .node-preicon.collapsed:before {
             content: '\002B';
-            padding: 5px;
         }
 
         .node-preicon.expanded:before {
             content: '\2212';
-            padding: 5px;
         }
 
         .node-preicon, .node-name {
@@ -112,7 +111,7 @@
         <div class="node-container">
             <div class="node-row">
                 <span class$="{{_computeClass(data.*)}}" on-click="toggleChildren"></span>
-                <iron-icon class="node-icon" icon$="{{_computeIcon(data)}}" on-click="select"></iron-icon>
+                <iron-icon class="node-icon" icon$="{{_computeIcon(data.icon)}}" on-click="select"></iron-icon>
                 <span class="node-name" on-click="select">{{data.name}}</span>
                 <template is="dom-if" if="{{actions}}">
                     <paper-menu-button id="actions">
@@ -209,8 +208,8 @@
          * @param {string=folder} an icon name.
          * @return {string} the computed icon name.
          */
-        _computeIcon: function(data) {
-            return data && data.icon ? data.icon : 'folder';
+        _computeIcon: function(icon) {
+            return icon ? icon : 'folder';
         },
 
         _actionClicked: function (event) {