Make demo more appealing

PolymerElements · May 29, 2015 · 55f5ebd · 55f5ebd
1 parent 11963b0
commit 55f5ebd
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 13 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+bower_components
+
diff --git a/bower.json b/bower.json
@@ -19,6 +19,7 @@
     "iron-a11y-keys-behavior": "polymerelements/iron-a11y-keys-behavior#^1.0.0"
   },
   "devDependencies": {
+    "paper-styles": "PolymerElements/paper-styles#^1.0.2",
     "iron-component-page": "polymerelements/iron-component-page#^1.0.0",
     "test-fixture": "polymerelements/test-fixture#^1.0.0",
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",

diff --git a/demo/index.html b/demo/index.html
@@ -14,8 +14,11 @@
   <title>Iron A11y Keys demo</title>
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <link rel="import" href="x-key-aware.html">
+  <link rel="import" href="../../paper-styles/demo-pages.html">
 </head>
 <body>
-  <x-key-aware tabindex="0"></x-key-aware>
+  <div class="vertical-section vertical-section-container centered">
+    <x-key-aware tabindex="0"></x-key-aware>
+  </div>
 </body>
 </html>
diff --git a/demo/x-key-aware.html b/demo/x-key-aware.html
@@ -9,7 +9,7 @@
 -->
 
 <link rel="import" href="../../polymer/polymer.html">
-<link rel="import" href="../iron-a11y-keys-behavior.html">
+<link rel="import" href="../../paper-styles/paper-styles.html">
 <link rel="import" href="../iron-a11y-keys.html">
 
 <dom-module id="x-key-aware">
@@ -18,9 +18,30 @@
       display: block;
       position: relative;
     }
+
+    pre {
+      color: var(--google-blue-700);
+    }
+
+    .keys {
+      line-height: 25px;
+    }
+
+    .keys span {
+      cursor: default;
+      background-color: var(--google-grey-100);
+      border: 1px solid var(--google-grey-300);
+      padding: 1px 5px;
+      border-radius: 5px;
+    }
   </style>
   <template>
-    <span>Press any of these keys: <span>[[boundKeys]]</span></span>
+    <h4>Press any of these keys</h4>
+    <span class="keys">
+      <template is="dom-repeat" items="[[boundKeys]]">
+        <span>{{item}}</span>
+      </template>
+    </span>
     <iron-a11y-keys
       id="keys"
       keys="* pageup pagedown left right down up shift+a alt+a home end space enter"
@@ -35,10 +56,6 @@
   Polymer({
     is: 'x-key-aware',
 
-    behaviors: [
-      Polymer.IronA11yKeysBehavior
-    ],
-
     properties: {
       pressed: {
         type: String,
@@ -47,7 +64,7 @@
       },
 
       boundKeys: {
-        type: String
+        type: Array
       },
 
       target: {
@@ -58,12 +75,8 @@
       }
     },
 
-    keyBindings: {
-      '* pageup pagedown left right down up shift+a alt+a home end space enter': '_updatePressed'
-    },
-
     ready: function() {
-      this.boundKeys = this.$.keys.keys;
+      this.boundKeys = this.$.keys.keys.split(' ');
     },
 
     _updatePressed: function(event) {