polymer-paper-rails 0.2.0 → 0.2.5

data/app/assets/components/paper-dropdown/paper-dropdown-transition.html

@@ -0,0 +1,166 @@
+<!--
+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
+-->
+<!--
+
+`paper-dropdown-transition` is a transition for `paper-dropdown`.
+
+Add the class `menu` to a `core-selector` child of the `paper-dropdown` to
+enable the optional list cascade transition.
+
+@group Paper Elements
+@class paper-dropdown-transition
+@extends core-transition-css
+@status unstable
+-->
+<link href="../polymer/polymer.html" rel="import">
+<link href="../core-transition/core-transition-css.html" rel="import">
+<link href="../core-animation/web-animations.html" rel="import">
+
+<polymer-element name="paper-dropdown-transition" extends="core-transition-css">
+  <template>
+    <link href="paper-dropdown-transition.css" rel="stylesheet" no-shim>
+  </template>
+  <script>
+    Polymer('paper-dropdown-transition', {
+
+      publish: {
+
+        /**
+         * The duration of the transition in ms. You can also set the duration by
+         * setting a `duration` attribute on the target:
+         *
+         *    <paper-dropdown duration="1000"></paper-dropdown>
+         *
+         * @attribute duration
+         * @type number
+         * @default 500
+         */
+        duration: 500
+
+      },
+
+      setup: function(node) {
+        this.super(arguments);
+
+        var to = {
+          'top': '0%',
+          'left': '0%',
+          'bottom': '100%',
+          'right': '100%'
+        };
+
+        var bg = node.$.background;
+        bg.style.webkitTransformOrigin = to[node.halign] + ' ' + to[node.valign];
+        bg.style.transformOrigin = to[node.halign] + ' ' + to[node.valign];
+      },
+
+      transitionOpened: function(node, opened) {
+        this.super(arguments);
+
+        if (opened) {
+          if (this.player) {
+            this.player.cancel();
+          }
+
+          var duration = Number(node.getAttribute('duration')) || this.duration;
+
+          var anims = [];
+
+          var size = node.getBoundingClientRect();
+
+          var ink = node.$.ripple;
+          // var offset = 40 / Math.max(size.width, size.height);
+          var offset = 0.2;
+          anims.push(new Animation(ink, [{
+            'opacity': 0.9,
+            'transform': 'scale(0)',
+          }, {
+            'opacity': 0.9,
+            'transform': 'scale(1)'
+          }], {
+            duration: duration * offset
+          }));
+
+          var bg = node.$.background;
+          var sx = 40 / size.width;
+          var sy = 40 / size.height;
+          anims.push(new Animation(bg, [{
+            'opacity': 0.9,
+            'transform': 'scale(' + sx + ',' + sy + ')',
+          }, {
+            'opacity': 1,
+            'transform': 'scale(' + Math.max(sx, 0.95) + ',' + Math.max(sy, 0.5) + ')'
+          }, {
+            'opacity': 1,
+            'transform': 'scale(1, 1)'
+          }], {
+            delay: duration * offset,
+            duration: duration * (1 - offset),
+            fill: 'forwards'
+          }));
+
+          var menu = node.querySelector('.menu');
+          if (menu) {
+            var items = menu.items || menu.children.array();
+            var itemDelay = offset + (1 - offset) / 2;
+            var itemDuration = duration * (1 - itemDelay) / items.length;
+            var reverse = this.valign === 'bottom';
+
+            items.forEach(function(item, i) {
+              anims.push(new Animation(item, [{
+                'opacity': 0
+              }, {
+                'opacity': 1
+              }], {
+                delay: duration * itemDelay + itemDuration * (reverse ? items.length - 1 - i : i),
+                duration: itemDuration,
+                fill: 'both'
+              }));
+            }.bind(this));
+
+            anims.push(new Animation(node.$.scroller, [{
+              'opacity': 1
+            }, {
+              'opacity': 1
+            }], {
+              delay: duration * itemDelay,
+              duration: itemDuration * items.length,
+              fill: 'both'
+            }));
+
+          } else {
+            anims.push(new Animation(node.$.scroller, [{
+              'opacity': 0
+            }, {
+              'opacity': 1
+            }], {
+              delay: duration * (offset + (1 - offset) / 2),
+              duration: duration * 0.5,
+              fill: 'both'
+            }));
+          }
+
+          var group = new AnimationGroup(anims, {
+            easing: 'cubic-bezier(0.4, 0, 0.2, 1)'
+          });
+          this.player = document.timeline.play(group);
+          this.player.onfinish = function() {
+            this.fire('core-transitionend', this, node);
+          }.bind(this);
+
+        } else {
+          this.fire('core-transitionend', this, node);
+        }
+      },
+
+    });
+  </script>
+</polymer-element>
+
+<paper-dropdown-transition id="paper-dropdown-transition"></paper-dropdown-transition>

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

@@ -9,72 +9,93 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 
 <!--
 
-`paper-dropdown` is a control where the user can choose from an array of
-options in a drop-down menu. The currently selected option is displayed in
-the control.
+`paper-dropdown` is a `core-dropdown` with a `paper-shadow`. By default, it
+is animated on open with `paper-dropdown-transition`. Use this element with
+`paper-dropdown-menu` or `paper-menu-button` to implement UI controls that
+open a drop-down.
 
 Example:
 
-    <paper-dropdown selected="Financier" valueattr="label">
-        <paper-item label="Croissant"></paper-item>
-        <paper-item label="Donut"></paper-item>
-        <paper-item label="Financier"></paper-item>
-        <paper-item label="Madeleine"></paper-item>
-    </core-dropdown>
-
-This example renders a drop-down menu with 4 options, with the option
-`Financier` pre-selected.
+    <paper-dropdown>
+      Hi!
+    </paper-dropdown>
 
 Theming
 -------
 
-Style the drop-down menu with the `paper-dropdown::shadow #menu` selector.
-
-Example:
+Style the background color of the dropdown with these selectors:
 
-    paper-dropdown::shadow #menu {
-        background-color: #eee;
-        border: 1px solid #ccc;
+    paper-dropdown::shadow #ripple,
+    paper-dropdown::shadow #background {
+        background-color: green;
     }
 
 @group Paper Elements
 @element paper-dropdown
-@status beta
-@homepage github.io
+@extends core-dropdown
+@status unstable
 -->
 
-<!--
-Fired when an item's selection state is changed. This event is fired both
-when an item is selected or deselected. The `isSelected` detail property
-contains the selection state.
-
-@event core-select
-@param {Object} detail
-  @param {boolean} detail.isSelected true for selection and false for deselection
-  @param {Object} detail.item the item element
--->
 <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="../core-popup-menu/core-popup-menu.html" rel="import">
+<link href="../core-dropdown/core-dropdown.html" rel="import">
 <link href="../paper-shadow/paper-shadow.html" rel="import">
 
-<polymer-element name="paper-dropdown">
+<link href="paper-dropdown-transition.html" rel="import">
+
+<style shim-shadowdom>
+  html /deep/ paper-dropdown {
+    position: absolute;
+    overflow: visible;
+    min-height: 40px;
+  }
+</style>
+
+<polymer-element name="paper-dropdown" extends="core-dropdown">
 <template>
 
-  <link href="paper-dropdown.css" rel="stylesheet">
+  <style>
+    #ripple {
+      background-color: #fff;
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.26);
+      opacity: 0;
+    }
+
+    :host([halign=right]) #ripple {
+      left: auto;
+      right: 0;
+    }
+
+    :host([valign=bottom]) #ripple {
+      top: auto;
+      bottom: 0;
+    }
+
+    #background {
+      background-color: #fff;
+      border-radius: inherit;
+    }
+
+    #scroller {
+      overflow: auto;
+      box-sizing: border-box;
+    }
+  </style>
+
+  <div id="ripple"></div>
 
-  <div id="control" layout horizontal selected?="{{selectedItem}}" on-tap="{{toggle}}">
-    <div flex>
-      {{selectedItem ? (selectedItem.label || selected) : label}}
-    </div>
-    <core-icon id="arrow" icon="{{opened ? 'arrow-drop-up' : 'arrow-drop-down'}}"></core-icon>
+  <div id="background" fit>
+    <paper-shadow fit></paper-shadow>
   </div>
 
-  <core-popup-menu id="menu" relatedTarget="{{$.control}}" opened="{{opened}}" halign="{{halign}}" valign="{{valign}}"selected="{{selected}}" selectedItem="{{selectedItem}}" selectedClass="{{selectedClass}}" valueattr="{{valueattr}}" selectedProperty="{{selectedProperty}}" selectedAttribute="{{selectedAttribute}}" on-core-select="{{selectAction}}">
-    <paper-shadow z="1" target="{{$.menu}}" hasPosition></paper-shadow>
-    <content select="*"></content>
-  </core-popup-menu>
+  <div id="scroller" relative>
+    <content></content>
+  </div>
 
 </template>
 <script>
@@ -82,107 +103,12 @@ contains the selection state.
   Polymer({
 
     publish: {
-
-      /**
-       * True if the menu is open.
-       *
-       * @attribute opened
-       * @type boolean
-       * @default false
-       */
-      opened: false,
-
-      /**
-       * A label for the control. The label is displayed if no item is selected.
-       *
-       * @attribute label
-       * @type string
-       * @default 'Select an item'
-       */
-      label: 'Select an item',
-
-      /**
-       * The currently selected element. By default this is the index of the item element.
-       * If you want a specific attribute value of the element to be used instead of the
-       * index, set `valueattr` to that attribute name.
-       *
-       * @attribute selected
-       * @type Object
-       * @default null
-       */
-      selected: null,
-
-      /**
-       * Specifies the attribute to be used for "selected" attribute.
-       *
-       * @attribute valueattr
-       * @type string
-       * @default 'name'
-       */
-      valueattr: 'name',
-
-      /**
-       * Specifies the CSS class to be used to add to the selected element.
-       * 
-       * @attribute selectedClass
-       * @type string
-       * @default 'core-selected'
-       */
-      selectedClass: 'core-selected',
-
-      /**
-       * Specifies the property to be used to set on the selected element
-       * to indicate its active state.
-       *
-       * @attribute selectedProperty
-       * @type string
-       * @default ''
-       */
-      selectedProperty: '',
-
-      /**
-       * Specifies the attribute to set on the selected element to indicate
-       * its active state.
-       *
-       * @attribute selectedAttribute
-       * @type string
-       * @default 'active'
-       */
-      selectedAttribute: 'selected',
-
-      /**
-       * The currently selected element.
-       *
-       * @attribute selectedItem
-       * @type Object
-       * @default null
-       */
-      selectedItem: null,
-
-      /**
-       * Horizontally align the overlay with the control.
-       * @attribute halign
-       * @type "left"|"right"
-       * @default "left"
-       */
-      halign: {value: 'left', reflect: true},
-
-      /**
-       * Vertically align the dropdown menu with the control.
-       * @attribute valign
-       * @type "top"|"bottom"
-       * @default "bottom"
-       */
-      valign: {value: 'bottom', reflect: true}
-
-    },
-
-    toggle: function() {
-      this.opened = !this.opened;
+      transition: 'paper-dropdown-transition'
     },
 
-    selectAction: function() {
-      this.opened = false;
+    ready: function() {
+      this.super();
+      this.sizingTarget = this.$.scroller;
     }
 
   });

data/app/assets/components/paper-fab/metadata.html

@@ -33,4 +33,4 @@
     <link rel="import" href="../core-icons/core-icons.html">
     <link rel="import" href="paper-fab.html">
 	</template>
-</x-meta>
+</x-meta>

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

@@ -8,49 +8,173 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 -->
 
 <!--
-`<paper-fab>` is a floating action button with an icon. It comes in two sizes: regular
-size and a smaller size by applying the class `mini`.
+@group Paper Elements
+
+Material Design: <a href="http://www.google.com/design/spec/components/buttons.html">Button</a>
+
+`paper-fab` is a floating action button. It contains an image placed in the center and
+comes in two sizes: regular size and a smaller size by applying the attribute `mini`. When
+the user touches the button, a ripple effect emanates from the center of the button.
+
+You may import `core-icons` to use with this element, or provide an URL to a custom icon.
+See `core-iconset` for more information about how to use a custom icon set.
 
 Example:
 
-    <paper-fab icon="favorite"></paper-fab>
-    <paper-fab class="mini"></paper-fab>
+    <link href="path/to/core-icons/core-icons.html" rel="import">
+
+    <paper-fab icon="add"></paper-fab>
+    <paper-fab mini icon="favorite"></paper-fab>
+    <paper-fab src="star.png"></paper-fab>
+
+Styling
+-------
+
+Style the button with CSS as you would a normal DOM element. If you are using the icons
+provided by `core-icons`, the icon will inherit the foreground color of the button.
+
+    /* make a blue "cloud" button */
+    <paper-fab icon="cloud" style="color: blue;"></paper-fab>
+
+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: blue;
+    }
+
+The opacity of the ripple is not customizable via CSS.
+
+Accessibility
+-------------
+
+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-fab src="star.png" aria-label="star"></paper-fab>
 
-@group Paper Elements
 @element paper-fab
-@homepage github.io
-@extends paper-icon-button
+@extends paper-button-base
+@status unstable
 -->
 
 <link href="../polymer/polymer.html" rel="import">
-<link href="../paper-icon-button/paper-icon-button.html" rel="import">
+<link href="../core-icon/core-icon.html" rel="import">
+<link href="../paper-button/paper-button-base.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-fab" extends="paper-icon-button">
+<polymer-element name="paper-fab" extends="paper-button-base" attributes="src icon mini" role="button">
 
   <template>
 
-    <link href="paper-fab.css" rel="stylesheet">
+    <style>
+      :host {
+        display: inline-block;
+        position: relative;
+        outline: none;
+        -webkit-user-select: none;
+        user-select: none;
+        cursor: pointer;
+        z-index: 0;
 
-    <shadow></shadow>
+        box-sizing: border-box;
+        width: 56px;
+        height: 56px;
+        background: #d23f31;
+        color: #fff;
+        border-radius: 50%;
+        padding: 16px;
+      }
+
+      :host([mini]) {
+        width: 40px;
+        height: 40px;
+        padding: 8px;
+      }
+
+      :host([disabled]) {
+        color: #c9c9c9;
+        pointer-events: none;
+        cursor: auto;
+      }
+
+      #ripple {
+        pointer-events: none;
+        z-index: -1;
+      }
+
+      #shadow {
+        border-radius: inherit;
+        pointer-events: none;
+      }
+
+      #icon {
+        display: block;
+        pointer-events: none;
+      }
+    </style>
+
+    <template if="{{raised}}">
+      <paper-shadow id="shadow" fit animated></paper-shadow>
+    </template>
+
+    <!-- to position to ripple behind the icon -->
+    <core-icon relative id="icon" src="{{src}}" icon="{{icon}}"></core-icon>
 
   </template>
 
   <script>
-    Polymer('paper-fab', {
+    Polymer({
 
       publish: {
 
         /**
-         * See [`<paper-button>`](../paper-button).
+         * The URL of an image for the icon. If the src property is specified,
+         * the icon property should not be.
          *
-         * @attribute raisedButton
+         * @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: '',
+
+        /**
+         * Set this to true to style this is a "mini" FAB.
+         *
+         * @attribute mini
          * @type boolean
-         * @default true
+         * @default false
          */
-        raisedButton: {value: true, reflect: true}
+        mini: false,
+
+        raised: true,
+        recenteringTouch: false,
+        fill: true
 
+      },
+
+      iconChanged: function(oldIcon) {
+        var label = this.getAttribute('aria-label');
+        if (!label || label === oldIcon) {
+          this.setAttribute('aria-label', this.icon);
+        }
       }
 
     });
+
   </script>
 </polymer-element>