simplify demo; add better support for content inside button

googlearchive · Jul 22, 2014 · 59c8058 · 59c8058
1 parent 389adf3
commit 59c8058
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 41 deletions.
diff --git a/core-icon-button.css b/core-icon-button.css
@@ -11,7 +11,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   display: inline-block;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
-  background-image: none;
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
   border-radius: 2px;
   padding: 7px;
   margin: 2px;
@@ -66,3 +68,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 core-icon {
   pointer-events: none;
 }
+
+/* note: this is a polyfill aware selector */
+:host ::content > :not(core-icon) {
+  margin-left: 4px;
+}
diff --git a/core-icon-button.html b/core-icon-button.html
@@ -31,11 +31,8 @@
 <polymer-element name="core-icon-button" attributes="src icon active">
 
   <template>
-
     <link rel="stylesheet" href="core-icon-button.css">
-
-    <core-icon src="{{src}}" icon="{{icon}}"><content></content></core-icon>
-
+    <core-icon src="{{src}}" icon="{{icon}}"></core-icon><content></content>
   </template>
 
   <script>

diff --git a/demo.html b/demo.html
@@ -8,44 +8,27 @@
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
 -->
 <html>
-  <head>
-    <title>core-icon-button</title>
-
-    <script src="../platform/platform.js"></script>
-
-    <link rel="import" href="core-icon-button.html">
-
-  </head>
+<head>
+  <title>core-icon-button</title>
 
-  <body unresolved>
+  <script src="../platform/platform.js"></script>
 
+  <link rel="import" href="core-icon-button.html">
+  <style>
+  </style>
+
+</head>
+
+<body unresolved>
+
 
-    <polymer-element name="x-buttons">
-      <template>
-        <core-iconset id="meta"></core-iconset>
-        <template repeat="{{icon in iconNames}}">
-          <core-icon-button icon="{{icon}}"></core-icon-button>
-        </template>
-      </template>
-      <script>
-        Polymer('x-buttons', {
-          ready: function() {
-            this.iconNames = this.$.meta.byId('icons').iconNames;
-          }
-        });
-      </script>
-    </polymer-element>
+<template is="auto-binding">
+    <template repeat="{{icon in $.meta.metaData.icons.iconNames}}">
+      <core-icon-button icon="{{icon}}"><span>{{icon}}</span></core-icon-button>
+    </template>
+  </div>
+  <core-iconset id="meta"></core-iconset>
+</template>
 
-    <div>
-      <x-buttons></x-buttons>
-    </div>
-    <br>
-    <div theme="core-light-theme">
-      <x-buttons></x-buttons>
-    </div>
-    <br>
-    <div theme="core-dark-theme" style="background: #333;">
-      <x-buttons></x-buttons>
-    </div>
-  </body>
+</body>
 </html>