Fix demos for FF and safari

vaadin · Sep 20, 2017 · 0049801 · 0049801
1 parent a4edc66
commit 0049801
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 81 deletions.
diff --git a/bower.json b/bower.json
@@ -27,7 +27,8 @@
   "dependencies": {
     "polymer": "^2.0.0",
     "iron-icon": "^2.0.0",
-    "iron-iconset-svg": "^2.0.0"
+    "iron-iconset-svg": "^2.0.0",
+    "vaadin-demo-helpers": "vaadin/vaadin-demo-helpers"
   },
   "devDependencies": {
     "iron-component-page": "^3.0.0",

diff --git a/demo/demos.json b/demo/demos.json
@@ -2,7 +2,7 @@
   "name": "Vaadin Icons",
   "pages": [
     {
-      "name": "Demo",
+      "name": "Vaadin Icons",
       "url": "icons-basic-demos",
       "src": "icons-basic-demos.html",
       "meta": {

diff --git a/demo/icons-basic-demos.html b/demo/icons-basic-demos.html
@@ -1,99 +1,84 @@
 <dom-module id="icons-basic-demos">
   <template>
     <style>
-       :host {
+      :host {
         display: block;
       }
-    </style>
-
 
-    <h3>Vaadin Icons</h3>
-    <vaadin-demo-snippet id='icons-basic-demos-sample-example'>
-      <template preserve-content>
-        <custom-style>
-          <style>
-            body, #wrapper {
-              display: flex;
-              flex-wrap: wrap;
-              justify-content: center;
-            }
+      dom-repeat {
+        display: block;
+        width: 100%;
+      }
 
-            /* ie11 */
-            dom-repeat {
-              display: block;
-              width: 100%;
-            }
+      .icon-container {
+        margin: 24px 8px;
+        text-align: center;
+        width: 130px;
+        display: inline-block;
+        cursor: default;
+        vertical-align: top;
+      }
 
-            .icon-container {
-              margin: 24px 8px;
-              text-align: center;
-              width: 130px;
-              display: inline-block;
-              cursor: default;
-              vertical-align: top;
-            }
+      .icon-container span {
+        font-family: sans-serif;
+        font-size: 12px;
+        display: block;
+        margin-top: .5em;
+        color: #616161;
+        transition: all 600ms;
+      }
 
-            .icon-container span {
-              font-family: sans-serif;
-              font-size: 12px;
-              display: block;
-              margin-top: .5em;
-              color: #616161;
-              transition: all 600ms;
-            }
+      .icon-container:hover span {
+        color: #00b4f0;
+      }
 
-            .icon-container:hover span {
-              color: #00b4f0;
-            }
+      .icon-container iron-icon {
+        display: inline-block;
+        fill: #616161;
+        transition: all 200ms;
+      }
 
-            .icon-container iron-icon {
-              display: inline-block;
-              fill: #616161;
-              transition: all 200ms;
-            }
+      .icon-container:hover iron-icon {
+        fill: #00b4f0;
+      }
+    </style>
 
-            .icon-container:hover iron-icon {
-              fill: #00b4f0;
-            }
-          </style>
-        </custom-style>
-        <dom-bind>
-          <template is="dom-bind" preserve-content>
-            <dom-repeat>
-              <template is="dom-repeat" items="{{iconsets}}">
-                <dom-repeat id="wrapper">
-                  <template is="dom-repeat" items="{{getIconNames(item)}}">
-                    <div class="icon-container">
-                      <iron-icon icon="[[item]]"></iron-icon>
-                      <span>{{item}}</span>
-                    </div>
-                  </template>
-                </dom-repeat>
-              </template>
-            </dom-repeat>
+    <dom-repeat items="[[iconsets]]">
+      <template>
+        <dom-repeat id="wrapper" items="[[getIconNames(item)]]">
+          <template is="dom-repeat" >
+            <div class="icon-container">
+              <iron-icon icon="[[item]]"></iron-icon>
+              <span>[[item]]</span>
+            </div>
           </template>
-        </dom-bind>
-
-        <script>
-          window.addDemoReadyListener('#icons-basic-demos-sample-example', function(document) {
-            var domBind = Polymer.version.match(/^1/) ? document.querySelector('[is=dom-bind]') : document.querySelector('dom-bind');
-            domBind.iconsets = new Polymer.IronMeta({type: 'iconset'}).list;
-            domBind.getIconNames = function(iconset) {
-              return iconset.getIconNames();
-            };
-
-            // Checked in gemini before capture callback
-            window.webComponentsAreReady = true;
-          });
-        </script>
-
+        </dom-repeat>
       </template>
-    </vaadin-demo-snippet>
-  </div>
+    </dom-repeat>
   </template>
   <script>
     class IconsBasicDemos extends DemoReadyEventEmitter(IconsDemo(Polymer.Element)) {
-      static get is() { return 'icons-basic-demos'; }
+      static get is() {
+        return 'icons-basic-demos';
+      }
+
+      static get properties() {
+        return {
+          iconsets: Array,
+        };
+      }
+
+      ready() {
+        super.ready();
+        this.iconsets = new Polymer.IronMeta({type: 'iconset'}).list;
+
+        // Checked in gemini before capture callback
+        window.webComponentsAreReady = true;
+      }
+
+      getIconNames(iconset) {
+        return iconset.getIconNames();
+      }
     }
     customElements.define(IconsBasicDemos.is, IconsBasicDemos);
   </script>