polymer-paper-rails 0.2.0 → 0.2.5

data/app/assets/components/paper-button/paper-button.html

@@ -10,200 +10,169 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 <!--
 @group Paper Elements
 
-`paper-button` is a button containing text or an image. When the user touches
-the button, a ripple effect emanates from the point of contact.
+Material Design: <a href="http://www.google.com/design/spec/components/buttons.html">Buttons</a>
 
-A `paper-button` may be flat or raised. A raised button behaves like a piece
-of paper resting on another sheet, and lifts up upon press. Flat buttons do
-not raise up. Add the `raisedButton` attribute to make a raised button.
+`paper-button` is a button. When the user touches the button, a ripple effect emanates
+from the point of contact. It may be flat or raised. A raised button is styled with a
+shadow.
 
 Example:
 
-    <paper-button label="flat button"></paper-button>
-    <paper-button label="raised button" raisedButton></paper-button>
+    <paper-button>flat button</paper-button>
+    <paper-button raised>raised button</paper-button>
+    <paper-button noink>No ripple effect</paper-button>
 
-A button should be styled with a background color, text color, ripple color
-and hover color.
+You may use custom DOM in the button body to create a variety of buttons. For example, to
+create a button with an icon and some text:
 
-To style the background, text and hover color, apply the `background` and
-`color` CSS properties to the button. To style the ripple color, apply the
-`color` CSS property to the `#ripple` element in the button's shadow root:
+    <paper-button>
+      <core-icon icon="favorite"></core-icon>
+      custom button content
+    </paper-button>
 
-    /* Style #my-button blue with white text and darker blue ink. */
+Styling
+-------
+
+Style the button with CSS as you would a normal DOM element.
+
+    /* make #my-button green with yellow text */
     #my-button {
-        background: #4285f4;
-        color: #fff;
+        background: green;
+        color: yellow;
     }
 
-    #my-button:hover {
-        background: #2a56c6;
-    }
+By default, the ripple is the same color as the foreground at 25% opacity. You may
+customize the color using this selector:
 
+    /* make #my-button use a blue ripple instead of foreground color */
     #my-button::shadow #ripple {
-        color: #2a56c6;
+      color: blue;
     }
 
+The opacity of the ripple is not customizable via CSS.
+
 @element paper-button
-@extends paper-focusable
+@extends paper-button-base
+@status unstable
 -->
 
 <link href="../polymer/polymer.html" rel="import">
-<link href="../core-icon/core-icon.html" rel="import">
-<link href="../paper-focusable/paper-focusable.html" rel="import">
 <link href="../paper-ripple/paper-ripple.html" rel="import">
 <link href="../paper-shadow/paper-shadow.html" rel="import">
 
-<polymer-element name="paper-button" extends="paper-focusable" attributes="label raisedButton iconSrc icon"
+<link href="paper-button-base.html" rel="import">
+
+<polymer-element name="paper-button" extends="paper-button-base" attributes="raised recenteringTouch fill"
 role="button">
 
   <template>
 
-    <link href="paper-button.css" rel="stylesheet">
+    <style>
+
+      :host {
+        display: inline-block;
+        position: relative;
+        box-sizing: border-box;
+        min-width: 5.14em;
+        margin: 0 0.29em;
+        background: transparent;
+        text-align: center;
+        font: inherit;
+        text-transform: uppercase;
+        outline: none;
+        border-radius: 3px;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        -webkit-user-select: none;
+        user-select: none;
+        cursor: pointer;
+        z-index: 0;
+      }
+
+      :host([disabled]) {
+        background: #eaeaea;
+        color: #a8a8a8;
+        cursor: auto;
+        pointer-events: none;
+      }
+
+      ::content * {
+        text-transform: inherit;
+      }
+
+      #shadow {
+        border-radius: inherit;
+      }
 
-    <template if="{{raisedButton}}">
-      <div fit id="shadow-container">
-        <paper-shadow id="shadow" z="{{z}}" animated></paper-shadow>
-      </div>
+      #ripple {
+        pointer-events: none;
+        z-index: -1;
+      }
+
+      .button-content {
+        padding: 0.7em 0.57em
+      }
+
+      polyfill-next-selector { content: '.button-content > a'; }
+      ::content > a {
+        height: 100%;
+        padding: 0.7em 0.57em;
+        /* flex */
+        -ms-flex: 1 1 0.000000001px;
+        -webkit-flex: 1;
+        flex: 1;
+        -webkit-flex-basis: 0.000000001px;
+        flex-basis: 0.000000001px;
+      }
+
+    </style>
+
+    <template if="{{raised}}">
+      <paper-shadow id="shadow" fit animated></paper-shadow>
     </template>
 
-    <div id="clip">
-      <!-- <div id="focusBg"></div> -->
-      <paper-ripple id="ripple"></paper-ripple>
-      <div id="content">
-        <template if="{{iconSrc || icon}}">
-          <core-icon id="icon" src="{{iconSrc}}" icon="{{icon}}"></core-icon>
-        </template>
-        <template if="{{label}}">
-          <span>{{label}}</span>
-        </template>
-      </div>
+    <!-- this div is needed to position the ripple behind text content -->
+    <div class="button-content" relative layout horizontal center-center>
+      <content></content>
+      {{label}}
     </div>
 
   </template>
 
   <script>
-    Polymer('paper-button', {
+    Polymer({
 
       publish: {
 
         /**
-         * The label of the button.
+         * If true, the button will be styled with a shadow.
          *
-         * @attribute label
-         * @type string
-         * @default ''
+         * @attribute raised
+         * @type boolean
+         * @default false
          */
-        label: '',
+        raised: false,
 
         /**
-         * If true, the button will be styled as a "raised" button.
+         * By default the ripple emanates from where the user touched the button.
+         * Set this to true to always center the ripple.
          *
-         * @attribute raisedButton
+         * @attribute recenteringTouch
          * @type boolean
          * @default false
          */
-        raisedButton: {value: false, reflect: true},
+        recenteringTouch: false,
 
         /**
-         * (optional) The URL of an image for an icon to use in the button.
-         * Should not use `icon` property if you are using this property.
+         * By default the ripple expands to fill the button. Set this to true to
+         * constrain the ripple to a circle within the button.
          *
-         * @attribute iconSrc
-         * @type string
-         * @default ''
+         * @attribute fill
+         * @type boolean
+         * @default true
          */
-         iconSrc: '',
-
-         /**
-          * (optional) Specifies the icon name or index in the set of icons
-          * available in the icon set. If using this property, load the icon
-          * set separately where the icon is used. Should not use `src`
-          * if you are using this property.
-          *
-          * @attribute icon
-          * @type string
-          * @default ''
-          */
-         icon: ''
-
-      },
-
-      z: 1,
-
-      attached: function() {
-        if (this.textContent && this.textContent.match(/\S+/)) {
-          console.warn('Using textContent to label the button is deprecated. Use the "label" property instead');
-          this.label = this.textContent;
-        }
-      },
-
-      activeChanged: function() {
-        this.super();
-
-        if (this.active) {
-          // FIXME: remove when paper-ripple can have a default 'down' state.
-          if (!this.lastEvent) {
-            var rect = this.getBoundingClientRect();
-            this.lastEvent = {
-              x: rect.left + rect.width / 2,
-              y: rect.top + rect.height / 2
-            }
-          }
-          this.$.ripple.downAction(this.lastEvent);
-        } else {
-          this.$.ripple.upAction();
-        }
-        this.adjustZ();
-      },
-
-      focusedChanged: function() {
-        this.super();
-        this.adjustZ();
-      },
-
-      disabledChanged: function() {
-        this.super();
-        this.adjustZ();
-      },
-
-      // waitForSpillCompleted: function(callback) {
-      //   this.async(callback, null, (this.$.ink.spillCompleted ? 0 : this.duration));
-      // },
-
-      // resetInk: function() {
-      //   this.active = false;
-      //   this.$.ink.reset();
-      // },
-
-      insideButton: function(x, y) {
-        var rect = this.getBoundingClientRect();
-        return (rect.left <= x) && (x <= rect.right) && (rect.top <= y) && (y <= rect.bottom);
-      },
-
-      adjustZ: function() {
-        if (this.focused) {
-          this.classList.add('paper-shadow-animate-z-1-z-2');
-        } else {
-          this.classList.remove('paper-shadow-animate-z-1-z-2');
-
-          if (this.active) {
-            this.z = 2;
-          } else if (this.disabled) {
-            this.z = 0;
-          } else {
-            this.z = 1;
-          }
-
-        }
-      },
-
-      downAction: function(e) {
-        this.super(e);
-        this.lastEvent = e;
-      },
-
-      labelChanged: function() {
-        this.setAttribute('aria-label', this.label);
+        fill: true
+
       }
 
     });

data/app/assets/components/paper-checkbox/paper-checkbox.css

@@ -13,7 +13,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 }
 
 :host(:focus) {
-  outline: none;
+  outline: 0;
 }
 
 #checkboxContainer {

data/app/assets/components/paper-dialog/paper-action-dialog.html

@@ -0,0 +1,104 @@
+<!--
+Copyright (c) 2014 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
+-->
+
+<!--
+
+Material Design: <a href="http://www.google.com/design/spec/components/dialogs.html">Dialogs</a>
+
+`paper-action-dialog` is a `paper-dialog` a row of buttons at the bottom that
+indicate user action. The action buttons do not scroll with the dialog body.
+
+The buttons should have either the `affirmative` or `dismissive` attribute. See
+the Material Design spec for more info.
+
+Example:
+
+    <paper-action-dialog heading="Dialog Title">
+      <p>Some content</p>
+      <paper-button dismissive>More Info</paper-button>
+      <paper-button affirmative>Decline</paper-button>
+      <paper-button affirmative>Accept</paper-button>
+    </paper-action-dialog>
+
+@group Paper Elements
+@element paper-action-dialog
+@extends paper-dialog-base
+@homepage github.io
+@status unstable
+-->
+<link href="../polymer/polymer.html" rel="import">
+<link href="../paper-shadow/paper-shadow.html" rel="import">
+
+<link href="paper-dialog-base.html" rel="import">
+
+<polymer-element name="paper-action-dialog" extends="paper-dialog-base" role="dialog">
+
+<template>
+
+  <style>
+    :host {
+      background: #fff;
+      color: rgba(0, 0, 0, 0.87);
+      margin: 32px;
+      overflow: visible !important;
+    }
+
+    h1 {
+      font-size: 20px;
+    }
+
+    #scroller {
+      overflow: auto;
+      box-sizing: border-box;
+      padding: 24px 24px 0 24px;
+    }
+
+    #actions {
+      padding: 16px;
+    }
+  </style>
+
+  <paper-shadow z="3" fit></paper-shadow>
+
+  <!-- need this because the host needs to be overflow: visible -->
+  <div id="scroller" relative>
+    <template if="{{heading}}">
+      <h1>{{heading}}</h1>
+    </template>
+
+    <content select=":not([affirmative]):not([dismissive])"></content>
+  </div>
+
+  <div id="actions" relative layout horizontal>
+    <content select="[dismissive]"></content>
+    <div flex></div>
+    <content select="[affirmative]"></content>
+  </div>
+
+</template>
+
+<script>
+
+  Polymer({
+
+    publish: {
+
+      /**
+       * @attribute closeSelector
+       * @type string
+       * @default '[affirmative],[dismissive]'
+       */
+      closeSelector: '[affirmative],[dismissive]'
+    }
+
+  });
+
+</script>
+
+</polymer-element>

data/app/assets/components/paper-dialog/paper-dialog-base.html

@@ -0,0 +1,81 @@
+<!--
+Copyright (c) 2014 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
+-->
+
+<!--
+
+Material Design: <a href="http://www.google.com/design/spec/components/dialogs.html">Dialogs</a>
+
+`paper-dialog-base` is a base class used to implement Material Design styled
+dialogs.
+
+@group Paper Elements
+@element paper-dialog-base
+@extends core-overlay
+@homepage github.io
+@status unstable
+-->
+<link href="../polymer/polymer.html" rel="import">
+<link href="../core-overlay/core-overlay.html" rel="import">
+<link href="../core-transition/core-transition-css.html" rel="import">
+
+<polymer-element name="paper-dialog-base" extends="core-overlay" role="dialog" on-core-overlay-open="{{openAction}}">
+
+<script>
+
+  Polymer({
+
+    publish: {
+
+      /**
+       * The title of the dialog.
+       *
+       * @attribute heading
+       * @type string
+       * @default ''
+       */
+      heading: '',
+
+      /**
+       * @attribute transition
+       * @type string
+       * @default ''
+       */
+      transition: '',
+
+      /**
+       * @attribute layered
+       * @type boolean
+       * @default true
+       */
+      layered: true
+    },
+
+    ready: function() {
+      this.super();
+      this.sizingTarget = this.$.scroller;
+    },
+
+    headingChanged: function(old) {
+      var label = this.getAttribute('aria-label');
+      if (!label || label === old) {
+        this.setAttribute('aria-label', this.heading);
+      }
+    },
+
+    openAction: function() {
+      if (this.$.scroller.scrollTop) {
+        this.$.scroller.scrollTop = 0;
+      }
+    }
+
+  });
+
+</script>
+
+</polymer-element>