RubyGems - polymer-paper-rails - Versions diffs - 0.2.6 → 1.0.0.pre.rc.1 - Mend

polymer-paper-rails 0.2.6 → 1.0.0.pre.rc.1

Files changed (634) hide show

data/app/assets/components/paper-icon-button/README.md ADDED Viewed

@@ -0,0 +1,49 @@
+paper-icon-button
+=================
+Material Design: <a href="http://www.google.com/design/spec/components/buttons.html">Buttons</a>
+`paper-icon-button` is a button with an image placed at the center. When the user touches
+the button, a ripple effect emanates from the center of the button.
+`paper-icon-button` includes a default icon set.  Use `icon` to specify which icon
+from the icon set to use.
+```html
+<paper-icon-button icon="menu"></paper-icon-button>
+```
+See [`iron-iconset`](#iron-iconset) for more information about
+how to use a custom icon set.
+Example:
+```html
+<link href="path/to/iron-icons/iron-icons.html" rel="import">
+<paper-icon-button icon="favorite"></paper-icon-button>
+<paper-icon-button src="star.png"></paper-icon-button>
+```
+Styling
+-------
+Style the button with CSS as you would a normal DOM element. If you are using the icons
+provided by `iron-icons`, they will inherit the foreground color of the button.
+```html
+<!-- make a red "favorite" button -->
+<paper-icon-button icon="favorite" style="color: red;"></paper-icon-button>
+```
+By default, the ripple is the same color as the foreground at 25% opacity. You may
+customize the color using this selector:
+```css
+/* make #my-button use a blue ripple instead of foreground color */
+#my-button::shadow #ripple {
+  color: blue;
+}
+```
+The opacity of the ripple is not customizable via CSS.

data/app/assets/components/paper-icon-button/bower.json ADDED Viewed

@@ -0,0 +1,33 @@
+{
+  "name": "paper-icon-button",
+  "private": true,
+  "version": "1.0.1",
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "description": "A material design icon button",
+  "main": "paper-icon-button.html",
+  "author": [
+    "The Polymer Authors"
+  ],
+  "keywords": [
+    "web-components",
+    "polymer",
+    "button",
+    "icon",
+    "control"
+  ],
+  "dependencies": {
+    "iron-flex-layout": "polymerelements/iron-flex-layout#^1.0.0",
+    "iron-icon": "polymerelements/iron-icon#^1.0.0",
+    "iron-icons": "polymerelements/iron-icons#^1.0.0",
+    "paper-behaviors": "polymerelements/paper-behaviors#^1.0.0",
+    "paper-ripple": "polymerelements/paper-ripple#^1.0.0",
+    "paper-styles": "polymerelements/paper-styles#^1.0.0",
+    "polymer": "Polymer/polymer#^1.0.0"
+  },
+  "devDependencies": {
+    "iron-component-page": "polymerelements/iron-component-page#^1.0.0",
+    "test-fixture": "polymerelements/test-fixture#^1.0.0",
+    "web-component-tester": "*",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+  }
+}

data/app/assets/components/paper-icon-button/demo/index.html ADDED Viewed

@@ -0,0 +1,154 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
+The complete set of authors may be found at http://polymer.github.io/AUTHORS
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
+-->
+<html>
+  <head>
+    <title>paper-icon-button</title>
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <link rel="import" href="../../iron-icons/iron-icons.html">
+    <link rel="import" href="../../paper-styles/paper-styles.html">
+    <link rel="import" href="../../paper-styles/demo-pages.html">
+    <link rel="import" href="../paper-icon-button.html">
+    <style is="custom-style">
+      .horizontal-section {
+        min-width: 100px;
+      }
+      paper-icon-button {
+        margin-left: 30px;
+        display: block;
+        width: 24px;
+        text-align: center;
+      }
+      paper-icon-button.blue {
+        color: var(--paper-light-blue-500);
+      }
+      paper-icon-button.red {
+        color: var(--paper-red-500);
+      }
+      paper-icon-button.orange {
+        color: var(--paper-orange-500);
+      }
+      paper-icon-button.green {
+        color: var(--paper-green-500);
+      }
+      paper-icon-button.blue:hover {
+        background: var(--paper-light-blue-50);
+        border-radius: 50%;
+      }
+      paper-icon-button.red:hover {
+        background: var(--paper-red-50);
+        border-radius: 50%;
+      }
+      paper-icon-button.orange:hover {
+        background: var(--paper-orange-50);
+        border-radius: 50%;
+      }
+      paper-icon-button.green:hover {
+        background: var(--paper-green-50);
+        border-radius: 50%;
+      }
+      paper-icon-button.huge {
+        margin-left: 0px;
+        width: 100px;
+        --paper-icon-button-ink-color: var(--paper-indigo-500);
+      }
+      paper-icon-button.huge::shadow #icon {
+        width: 100px;
+        height: 100px;
+      }
+      paper-icon-button.huge #icon {
+        width: 100px;
+        height: 100px;
+      }
+    </style>
+  </head>
+  <body onclick="clickAction(event);">
+    <div class="horizontal center-justified layout">
+      <div>
+        <h4>Enabled</h4>
+        <div class="horizontal-section">
+          <paper-icon-button icon="menu" title="menu"></paper-icon-button>
+          <paper-icon-button icon="favorite" title="heart"></paper-icon-button>
+          <paper-icon-button icon="arrow-back" title="arrow-back"></paper-icon-button>
+          <paper-icon-button icon="arrow-forward" title="arrow-forward"></paper-icon-button>
+          <paper-icon-button icon="clear" title="clear"></paper-icon-button>
+          <paper-icon-button icon="polymer" title="polymer"></paper-icon-button>
+          <paper-icon-button src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png" aria-label="octocat" title="octocat"></paper-icon-button>
+        </div>
+      </div>
+      <div>
+        <h4>Disabled</h4>
+        <div class="horizontal-section">
+          <paper-icon-button icon="menu" title="menu" disabled></paper-icon-button>
+          <paper-icon-button icon="favorite" title="heart" disabled></paper-icon-button>
+          <paper-icon-button icon="arrow-back" title="arrow-back" disabled></paper-icon-button>
+          <paper-icon-button icon="arrow-forward" title="arrow-forward" disabled></paper-icon-button>
+          <paper-icon-button icon="clear" title="clear" disabled></paper-icon-button>
+          <paper-icon-button icon="polymer" title="polymer" disabled></paper-icon-button>
+          <paper-icon-button src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png" aria-label="octocat" title="octocat" disabled></paper-icon-button>
+        </div>
+      </div>
+      <div>
+        <h4>Color</h4>
+        <div class="horizontal-section">
+          <paper-icon-button icon="menu" title="menu" class="blue"></paper-icon-button>
+          <paper-icon-button icon="favorite" title="heart" class="red"></paper-icon-button>
+          <paper-icon-button icon="arrow-back" title="arrow-back" class="orange"></paper-icon-button>
+          <paper-icon-button icon="arrow-forward" title="arrow-forward" class="green"></paper-icon-button>
+          <paper-icon-button icon="clear" title="clear" class="blue"></paper-icon-button>
+          <paper-icon-button icon="polymer" title="polymer" class="red"></paper-icon-button>
+          <paper-icon-button class="blue" src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png" aria-label="octocat" title="octocat"></paper-icon-button>
+        </div>
+      </div>
+      <div>
+        <h4>Size</h4>
+        <div class="horizontal-section">
+          <paper-icon-button icon="favorite" title="heart" class="huge"></paper-icon-button>
+          <br><br><br>
+          <paper-icon-button icon="polymer" title="polymer" class="huge"></paper-icon-button>
+        </div>
+      </div>
+    </div>
+    <script>
+      function clickAction(e) {
+        var t = e.target;
+        if (t.localName === 'paper-icon-button') {
+          if (t.hasAttribute('disabled')) {
+            console.error('should not be able to click disabled button', t);
+          } else {
+            console.log('click', t);
+          }
+        }
+      }
+    </script>
+  </body>
+</html>

data/app/assets/components/paper-icon-button/index.html ADDED Viewed

@@ -0,0 +1,23 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
+The complete set of authors may be found at http://polymer.github.io/AUTHORS
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
+-->
+<html>
+<head>
+  <script src="../webcomponentsjs/webcomponents.js"></script>
+  <link rel="import" href="../iron-component-page/iron-component-page.html">
+</head>
+<body>
+  <iron-component-page></iron-component-page>
+</body>
+</html>

data/app/assets/components/paper-icon-button/paper-icon-button.html CHANGED Viewed

@@ -1,5 +1,6 @@
 <!--
-Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
 The complete set of authors may be found at http://polymer.github.io/AUTHORS
 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
@@ -7,9 +8,21 @@ Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
 -->
-<!--
-@group Paper Elements
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-icon/iron-icon.html">
+<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
+<link rel="import" href="../paper-styles/default-theme.html">
+<link rel="import" href="../paper-behaviors/paper-button-behavior.html">
+<link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html">
+<link rel="import" href="../paper-ripple/paper-ripple.html">
+<style is="custom-style">
+  :root {
+    --paper-icon-button-disabled-text: var(--disabled-text-color);
+  }
+</style>
+<!--
 Material Design: <a href="http://www.google.com/design/spec/components/buttons.html">Buttons</a>
 `paper-icon-button` is a button with an image placed at the center. When the user touches
@@ -20,21 +33,20 @@ from the icon set to use.
     <paper-icon-button icon="menu"></paper-icon-button>
-See [`core-iconset`](#core-iconset) for more information about
+See [`iron-iconset`](#iron-iconset) for more information about
 how to use a custom icon set.
 Example:
-    <link href="path/to/core-icons/core-icons.html" rel="import">
+    <link href="path/to/iron-icons/iron-icons.html" rel="import">
     <paper-icon-button icon="favorite"></paper-icon-button>
     <paper-icon-button src="star.png"></paper-icon-button>
-Styling
--------
+###Styling
 Style the button with CSS as you would a normal DOM element. If you are using the icons
-provided by `core-icons`, they will inherit the foreground color of the button.
+provided by `iron-icons`, they will inherit the foreground color of the button.
     /* make a red "favorite" button */
     <paper-icon-button icon="favorite" style="color: red;"></paper-icon-button>
@@ -49,106 +61,81 @@ customize the color using this selector:
 The opacity of the ripple is not customizable via CSS.
-Accessibility
--------------
+The following custom properties and mixins are available for styling:
-The button is accessible by default if you use the `icon` property. By default, the
-`aria-label` attribute will be set to the `icon` property. If you use a custom icon,
-you should ensure that the `aria-label` attribute is set.
-    <paper-icon-button src="star.png" aria-label="star"></paper-icon-button>
+Custom property | Description | Default
+----------------|-------------|----------
+`--paper-icon-button-disabled-text` | The color of the disabled button | `--primary-text-color`
+`--paper-icon-button-ink-color` | Selected/focus ripple color | `--default-primary-color`
+`--paper-icon-button` | Mixin for a button | `{}`
+`--paper-icon-button-disabled` | Mixin for a disabled button | `{}`
+@group Paper Elements
 @element paper-icon-button
-@extends paper-button-base
-@homepage github.io
+@demo demo/index.html
 -->
-<link href="../polymer/polymer.html" rel="import">
-<link href="../core-icon/core-icon.html" rel="import">
-<link href="../core-icons/core-icons.html" rel="import">
-<link href="../paper-button/paper-button-base.html" rel="import">
-<link href="../paper-ripple/paper-ripple.html" rel="import">
+<dom-module id="paper-icon-button">
+  <style>
+    :host {
+      display: inline-block;
+      position: relative;
+      padding: 8px;
+      outline: none;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+      cursor: pointer;
+      z-index: 0;
+      @apply(--paper-icon-button);
+    }
-<polymer-element name="paper-icon-button" extends="paper-button-base" attributes="src icon" role="button">
+    :host #ink {
+      color: var(--paper-icon-button-ink-color, --primary-text-color);
+      opacity: 0.6;
+    }
+    :host([disabled]) {
+      color: var(--paper-icon-button-disabled-text, #fff);
+      pointer-events: none;
+      cursor: auto;
+      @apply(--paper-icon-button-disabled);
+    }
+  </style>
   <template>
-    <style>
-      :host {
-        display: inline-block;
-        position: relative;
-        padding: 8px;
-        outline: none;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-        cursor: pointer;
-        z-index: 0;
-      }
-      :host([disabled]) {
-        color: #c9c9c9;
-        pointer-events: none;
-        cursor: auto;
-      }
-      #ripple {
-        pointer-events: none;
-        z-index: -1;
-      }
-      #icon {
-        display: block;
-        pointer-events: none;
-      }
-    </style>
-    <!-- to position to ripple behind the icon -->
-    <core-icon relative id="icon" src="{{src}}" icon="{{icon}}"></core-icon>
+    <paper-ripple id="ink" class="circle" center></paper-ripple>
+    <iron-icon id="icon" src="[[src]]" icon="[[icon]]"></iron-icon>
   </template>
-  <script>
-    Polymer({
-      publish: {
-        /**
-         * The URL of an image for the icon. If the src property is specified,
-         * the icon property should not be.
-         *
-         * @attribute src
-         * @type string
-         * @default ''
-         */
-        src: '',
-        /**
-         * Specifies the icon name or index in the set of icons available in
-         * the icon's icon set. If the icon property is specified,
-         * the src property should not be.
-         *
-         * @attribute icon
-         * @type string
-         * @default ''
-         */
-        icon: '',
-        recenteringTouch: true,
-        fill: false
+</dom-module>
+<script>
+  Polymer({
+    is: 'paper-icon-button',
+    behaviors: [
+      Polymer.PaperButtonBehavior,
+      Polymer.PaperInkyFocusBehavior
+    ],
+    properties: {
+      /**
+       * The URL of an image for the icon. If the src property is specified,
+       * the icon property should not be.
+       */
+      src: {
+        type: String
       },
-      iconChanged: function(oldIcon) {
-        var label = this.getAttribute('aria-label');
-        if (!label || label === oldIcon) {
-          this.setAttribute('aria-label', this.icon);
-        }
+      /**
+       * Specifies the icon name or index in the set of icons available in
+       * the icon's icon set. If the icon property is specified,
+       * the src property should not be.
+       */
+      icon: {
+        type: String
       }
-    });
-  </script>
-</polymer-element>
+    }
+  });
+</script>

data/app/assets/components/paper-icon-button/test/a11y.html ADDED Viewed

@@ -0,0 +1,69 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>paper-icon-button a11y tests</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../test-fixture/test-fixture-mocha.js"></script>
+  <link rel="import" href="../../iron-icons/iron-icons.html">
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+  <link rel="import" href="../paper-icon-button.html">
+</head>
+<body>
+  <test-fixture id="A11yIconButtons">
+    <template>
+      <paper-icon-button id="iconButton1" icon="add"></paper-icon-button>
+      <paper-icon-button id="iconButton2" icon="add" disabled></paper-icon-button>
+      <paper-icon-button id="iconButton3" icon="add" aria-label="custom"></paper-icon-button>
+    </template>
+  </test-fixture>
+  <script>
+    var b1;
+    var b2;
+    var b3;
+    setup(function() {
+      var iconButtons = fixture('A11yIconButtons');
+      b1 = iconButtons[0];
+      b2 = iconButtons[1];
+      b3 = iconButtons[2];
+    });
+    test('aria role is a button', function() {
+      assert.strictEqual(b1.getAttribute('role'), 'button');
+    });
+    test('aria-disabled is set', function() {
+      assert.strictEqual(b2.getAttribute('aria-disabled'), 'true');
+      b2.removeAttribute('disabled');
+      assert.strictEqual(b2.getAttribute('aria-disabled'), 'false');
+    });
+    test('user-defined aria-label is preserved', function() {
+      assert.strictEqual(b3.getAttribute('aria-label'), 'custom');
+      b3.icon = 'arrow-forward';
+      assert.strictEqual(b3.getAttribute('aria-label'), 'custom');
+    });
+  </script>
+</body>
+</html>

data/app/assets/components/paper-icon-button/test/basic.html ADDED Viewed

@@ -0,0 +1,77 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>paper-icon-button basic tests</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../test-fixture/test-fixture-mocha.js"></script>
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+  <link rel="import" href="../../iron-icons/iron-icons.html">
+  <link rel="import" href="../paper-icon-button.html">
+</head>
+<body>
+  <test-fixture id="TrivialIconButton">
+    <template>
+      <div style="line-height:30px;">
+        <paper-icon-button id="fab1" icon="add"></paper-icon-button>
+      </div>
+    </template>
+  </test-fixture>
+  <test-fixture id="SrcIconButton">
+    <template>
+      <paper-icon-button src="add.png"></paper-icon-button>
+    </template>
+  </test-fixture>
+  <script>
+    var b1;
+    var b2;
+    function centerOf(element) {
+      var rect = element.getBoundingClientRect();
+      return {left: rect.left + rect.width / 2, top: rect.top + rect.height / 2};
+    }
+    function approxEqual(p1, p2) {
+      return Math.abs(p1.left - p2.left) <= 2 && Math.abs(p1.top-p2.top) <= 2;
+    }
+    setup(function() {
+      b1 = fixture('TrivialIconButton').querySelector('#fab1');
+      b2 = fixture('SrcIconButton');
+    });
+    test('applies an icon specified by the `icon` attribute', function() {
+      assert.strictEqual(!!b1.$.icon.src, false);
+      assert.ok(Polymer.dom(b1.$.icon.root).querySelector('svg'));
+    });
+    test('applies an icon specified by the `src` attribute', function() {
+      assert.strictEqual(!!b2.$.icon.src, true);
+      assert.ok(b2.$.icon.src);
+    });
+    test('renders correctly independent of line height', function() {
+      assert.ok(approxEqual(centerOf(b1.$.icon), centerOf(b1)));
+    });
+  </script>
+</body>
+</html>

data/app/assets/components/paper-icon-button/test/index.html ADDED Viewed

@@ -0,0 +1,26 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+  <title>paper-icon-button tests</title>
+  <script src="../../web-component-tester/browser.js"></script>
+</head>
+<body>
+  <script>
+    WCT.loadSuites([
+      'basic.html',
+      'a11y.html'
+    ]);
+  </script>
+</body>
+</html>

data/app/assets/components/paper-input/README.md ADDED Viewed

@@ -0,0 +1,5 @@
+# paper-input
+`<paper-input>` is a Material Design text field.
+Contains a number of different features for validation, character counting, and more.