fine tuning preicon for easy CSS override

vpusher · Mar 1, 2017 · 0238ea9 · 0238ea9
1 parent 8c91ec6
commit 0238ea9
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 110 deletions.
diff --git 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
@@ -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
diff --git 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
@@ -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,36 +44,35 @@
  display: inline-block;
  }
 
- .node-preicon:before {
- @apply(--paper-tree-preicon-theme);
+ .node-container {
+ white-space: nowrap;
  }
 
  .node-row {
  padding-left: 4px;
  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) {