polymer-paper-rails 0.2.0 → 0.2.5

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

@@ -18,4 +18,4 @@
   <template id="imports">
     <link rel="import" href="paper-menu-button.html">
   </template>
-</x-meta>
+</x-meta>

data/app/assets/components/paper-menu-button/paper-menu-button.css

@@ -13,7 +13,6 @@ license that can be found in the LICENSE file.
   user-select: none;
   -webkit-user-select: none;
   cursor: pointer;
-  overflow: hidden;
 }
 
 :host([disabled]) {
@@ -45,38 +44,58 @@ core-icon::shadow svg {
   fill: #c9c9c9;
 }
 
-#menu {
-  position: fixed;
+#dropdown {
   background-color: transparent;
+  margin: 12px;
+  color: #000;
+  overflow: visible;
+}
+
+#menu {
   padding-top: 8px;
   padding-bottom: 8px;
+  margin: 0;
 }
 
 .paper-menu-button-overlay-ink {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 40px;
-	height: 40px;
-	border-radius: 20px;
-  background: #fff;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 40px;
+  height: 40px;
+  border-radius: 20px;
   opacity: 0;
   transform: scale(0);
   -webkit-transform: scale(0);
 }
 
 :host([halign="right"]) .paper-menu-button-overlay-ink {
-	left: auto;
-	right: 0;
+  left: auto;
+  right: 0;
+}
+
+:host([valign="bottom"]) .paper-menu-button-overlay-ink {
+  top: auto;
+  bottom: 0;
 }
 
 .paper-menu-button-overlay-bg {
-	position: absolute;
-	top: 0;
-	left: 0;
-	bottom: 0;
-	right: 0;
-	border-radius: 3px;
-  background: #fff;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  border-radius: 3px;
   opacity: 0;
+  z-index: -1;
+}
+
+:host([noTransition]) .paper-menu-button-overlay-bg {
+  opacity: 1;
 }
+
+.paper-menu-button-menu-container {
+  overflow: auto;
+  max-height: 100%;
+  max-width: 100%;
+}

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

@@ -7,154 +7,73 @@ 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
 -->
 <!--
-A `paper-menu-button` is a `paper-icon-button` that opens a drop down menu when tapped.
+
+`paper-menu-button` works together with a button and a `paper-dropdown` to
+implement a button that displays a drop-down when tapped on.
+
+The child element with the class `dropdown` will be used as the drop-down
+menu. It should be a `paper-dropdown` or other overlay element.
 
 Example:
 
-    <paper-menu-button icon="menu">
-      <div>Menu Item 1</div>
-      <div>Menu Item 2</div>
-      <div>Menu Item 3</div>
+    <paper-menu-button>
+        <paper-icon-button icon="menu" noink></paper-icon-button>
+        <paper-dropdown class="dropdown">
+            <core-menu class="menu">
+                <paper-item>Share</paper-item>
+                <paper-item>Settings</paper-item>
+                <paper-item>Help</paper-item>
+            </core-menu>
+        </paper-dropdown>
     </paper-menu-button>
 
-Theming
-=======
+@group Paper Elements
+@element paper-menu-button
+@extends core-dropdown-base
+@status unstable
+-->
+<link href="../polymer/polymer.html" rel="import">
+<link href="../core-a11y-keys/core-a11y-keys.html" rel="import">
+<link href="../core-dropdown/core-dropdown-base.html" rel="import">
 
-To change the text color in the menu:
+<polymer-element name="paper-menu-button" extends="core-dropdown-base" relative>
+<template>
 
-paper-menu-button::shadow #menu {
-  color: white;
-}
+  <style>
+    :host {
+      display: inline-block;
+    }
 
-To change the overlay background color:
+    :host([disabled]) {
+      pointer-events: none;
+      color: #a8a8a8;
+    }
 
-paper-menu-button::shadow .paper-menu-button-overlay-bg {
-  background: green;
-}
+    polyfill-next-selector { content: ':host([disabled]) *'; }
+    :host([disabled]) ::content * {
+      pointer-events: none;
+    }
+  </style>
 
-To change the color of the ripple effect:
+  <core-a11y-keys target="{{}}" keys="enter space" on-keys-pressed="{{toggleOverlay}}"></core-a11y-keys>
 
-paper-menu-button:shadow .paper-menu-button-overlay-ink {
- background: red;
-}
+  <content></content>
 
-@group Paper Elements
-@element paper-menu-button
-@extends paper-focusable
--->
-<link href="../polymer/polymer.html" rel="import">
-<link href="../core-icon/core-icon.html" rel="import">
-<link href="../core-popup-menu/core-popup-menu.html" rel="import">
-<link href="../paper-focusable/paper-focusable.html" rel="import">
-<link href="../paper-shadow/paper-shadow.html" rel="import">
-<link href="paper-menu-button-transition.html" rel="import">
-
-<polymer-element name="paper-menu-button" extends="paper-focusable" attributes="src icon opened halign valign slow" on-tap="{{tapAction}}">
-  <template>
-    <link rel="stylesheet" href="paper-menu-button.css">
-    <!--
-    <paper-menu-button-overlay target="{{$.overlay}}" relatedTarget="{{}}" halign="{{halign}}" valign="{{valign}}" opened="{{opened}}" transition="paper-menu-button-transition-top-{{halign}}{{slow ? '-slow' : ''}}"></paper-menu-button-overlay>
-    <paper-menu-button-overlay-container id="overlay">
-      <paper-shadow target="{{$.overlayBg}}" z="0" hasPosition></paper-shadow>
-      <div class="paper-menu-button-overlay-ink"></div>
-      <div id="overlayBg" class="paper-menu-button-overlay-bg"></div>
-      <core-menu id="menu">
-        <content></content>
-      </core-menu>
-    </paper-menu-button-overlay-container>
-    -->
-
-    <core-icon src="{{src}}" icon="{{icon}}"></core-icon>
-
-    <core-popup-menu id="menu" relatedTarget="{{}}" opened="{{opened}}" halign="{{halign}}" valign="{{valign}}" transition="paper-menu-button-transition-top-{{halign}}{{slow ? '-slow' : ''}}" selected="{{selected}}" selectedItem="{{selectedItem}}" selectedClass="{{selectedClass}}" valueattr="{{valueattr}}" selectedProperty="{{selectedProperty}}" selectedAttribute="{{selectedAttribute}}" on-core-select="{{selectAction}}" on-core-transitionend="{{transitionEndAction}}">
-      <paper-shadow id="shadow" z="0" target="{{$.menu}}"></paper-shadow>
-      <div class="paper-menu-button-overlay-ink"></div>
-      <div id="overlayBg" class="paper-menu-button-overlay-bg"></div>
-      <content select="*"></content>
-    </core-popup-menu>
-
-  </template>
-  <script>
-    Polymer('paper-menu-button', {
-
-      publish: {
-
-        /**
-         * If true, this menu is currently visible.
-         *
-         * @attribute opened
-         * @type boolean
-         * @default false
-         */
-        opened: false,
-
-        /**
-         * The horizontal alignment of the pulldown menu relative to the button.
-         *
-         * @attribute halign
-         * @type 'left' | 'right'
-         * @default 'left'
-         */
-        halign: { value: 'auto', reflect: true },
-
-        /**
-         * The vertical alignment of the pulldown menu relative to the button.
-         *
-         * @attribute valign
-         * @type 'bottom' | 'top'
-         * @default 'top'
-         */
-        valign: {value: 'auto', reflect: true}
-      },
-
-      /**
-       * The URL of an image for the icon.  Should not use `icon` property
-       * if you are using this property.
-       *
-       * @attribute src
-       * @type string
-       * @default ''
-       */
-      src: '',
-
-      /**
-       * Specifies the icon name or index in the set of icons available in
-       * the icon set.  Should not use `src` property if you are using this
-       * property.
-       *
-       * @attribute icon
-       * @type string
-       * @default ''
-       */
-      icon: '',
-
-      slow: false,
-
-      tapAction: function() {
-        if (this.disabled) {
-          return;
-        }
-
-        this.super();
-        this.toggle();
-        if (this.opened) {
-          this.$.shadow.z = 0;
-        }
-      },
-
-      transitionEndAction: function() {
-        this.$.shadow.z = 1;
-      },
-
-      /**
-       * Toggle the opened state of the menu.
-       *
-       * @method toggle
-       */
-      toggle: function() {
-        this.opened = !this.opened;
-      }
-
-    });
-  </script>
+</template>
+<script>
+
+  Polymer({
+
+    overlayListeners: {
+      'core-overlay-open': 'openAction',
+      'core-activate': 'activateAction'
+    },
+
+    activateAction: function() {
+      this.opened = false;
+    }
+
+  });
+
+</script>
 </polymer-element>

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

@@ -17,13 +17,15 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   position: relative;
   height: 100%;
   background-color: #c8c8c8;
+  overflow: hidden;
 }
 
-#activeProgress, #secondaryProgress {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
+#activeProgress,
+#secondaryProgress {
+  -webkit-transform-origin: left center;
+  transform-origin: left center;
+  -webkit-transform: scaleX(0);
+  transform: scaleX(0);
 }
 
 #activeProgress {
@@ -32,4 +34,35 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 
 #secondaryProgress {
   background-color: #87ceac;
-}
+}
+
+#activeProgress.indeterminate {
+  -webkit-transform-origin: center center;
+  transform-origin: center center;
+  -webkit-animation: indeterminate-bar 1s linear infinite;
+  animation: indeterminate-bar 1s linear infinite;
+}
+
+@-webkit-keyframes indeterminate-bar {
+  0% {
+    -webkit-transform: translate(-50%) scaleX(0);
+  }
+  50% {
+    -webkit-transform: translate(0%) scaleX(0.3);
+  }
+  100% {
+    -webkit-transform: translate(50%) scaleX(0);
+  }
+}
+
+@keyframes indeterminate-bar {
+  0% {
+    transform: translate(-50%) scaleX(0);
+  }
+  50% {
+    transform: translate(0%) scaleX(0.3);
+  }
+  100% {
+    transform: translate(50%) scaleX(0);
+  }
+}

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

@@ -51,7 +51,7 @@ To change the progress bar background color:
 
 <link rel="import" href="../core-range/core-range.html">
 
-<polymer-element name="paper-progress" extends="core-range" attributes="secondaryProgress">
+<polymer-element name="paper-progress" extends="core-range" attributes="secondaryProgress indeterminate">
 
   <template>
   
@@ -59,8 +59,8 @@ To change the progress bar background color:
   
     <div id="progressContainer" role="progressbar" aria-valuenow="{{value}}" aria-valuemin="{{min}}" aria-valuemax="{{max}}">
     
-      <div id="secondaryProgress" _style="width: {{secondaryRatio}}%;"></div>
-      <div id="activeProgress" _style="width: {{ratio}}%;"></div>
+      <div id="secondaryProgress" fit></div>
+      <div id="activeProgress" fit></div>
       
     </div>
     
@@ -79,16 +79,42 @@ To change the progress bar background color:
        */
       secondaryProgress: 0,
       
+      /**
+       * Use an indeterminate progress indicator.
+       *
+       * @attribute indeterminate
+       * @type boolean
+       * @default false
+       */
+      indeterminate: false,
+
       step: 0,
       
       observe: {
-        'value secondaryProgress min max': 'update'
+        'value secondaryProgress min max indeterminate': 'update'
       },
       
       update: function() {
         this.super();
         this.secondaryProgress = this.clampValue(this.secondaryProgress);
         this.secondaryRatio = this.calcRatio(this.secondaryProgress) * 100;
+
+        // If we use attribute/class binding, the animation sometimes doesn't translate properly
+        // on Safari 7.1. So instead, we toggle the class here in the update method.
+        this.$.activeProgress.classList.toggle('indeterminate', this.indeterminate);
+      },
+
+      transformProgress: function(progress, ratio) {
+        var transform = 'scaleX(' + (ratio / 100) + ')';
+        progress.style.transform = progress.style.webkitTransform = transform;
+      },
+
+      ratioChanged: function() {
+        this.transformProgress(this.$.activeProgress, this.ratio);
+      },
+
+      secondaryRatioChanged: function() {
+        this.transformProgress(this.$.secondaryProgress, this.secondaryRatio);
       }
       
     });

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

@@ -51,11 +51,14 @@ To change the radio unchecked color:
 -->
 
 <link rel="import" href="../paper-ripple/paper-ripple.html">
+<link rel="import" href="../core-a11y-keys/core-a11y-keys.html">
 
 <polymer-element name="paper-radio-button" role="radio" tabindex="0" aria-checked="false">
 <template>
 
   <link rel="stylesheet" href="paper-radio-button.css">
+
+  <core-a11y-keys target="{{}}" keys="space" on-keys-pressed="{{tap}}"></core-a11y-keys>
   
   <div id="radioContainer" class="{{ {labeled: label} | tokenList }}">
   

data/app/assets/components/paper-radio-group/paper-radio-group.html

@@ -30,12 +30,16 @@ information about `paper-radio-button`.
 @homepage github.io
 -->
 
+<link rel="import" href="../core-a11y-keys/core-a11y-keys.html">
 <link rel="import" href="../core-selector/core-selector.html">
 <link rel="import" href="../paper-radio-button/paper-radio-button.html">
 
 <polymer-element name="paper-radio-group" extends="core-selector" role="radiogroup">
 
   <template>
+
+    <core-a11y-keys target="{{}}" keys="up left" on-keys-pressed="{{selectPrevious}}"></core-a11y-keys>
+    <core-a11y-keys target="{{}}" keys="down right" on-keys-pressed="{{selectNext}}"></core-a11y-keys>
   
     <style>
     
@@ -57,7 +61,36 @@ information about `paper-radio-button`.
   <script>
   
     Polymer('paper-radio-group', {
-      
+      nextIndex: function(index) {
+        var items = this.items;
+        var newIndex = index;
+        do {
+          newIndex = (newIndex + 1) % items.length;
+          if (newIndex === index) {
+            break;
+          }
+        } while (items[newIndex].disabled);
+        return newIndex;
+      },
+      previousIndex: function(index) {
+        var items = this.items;
+        var newIndex = index;
+        do {
+          newIndex = (newIndex || items.length) - 1;
+          if (newIndex === index) {
+            break;
+          }
+        } while (items[newIndex].disabled);
+        return newIndex;
+      },
+      selectNext: function() {
+        var node = this.selectIndex(this.nextIndex(this.selectedIndex));
+        node.focus();
+      },
+      selectPrevious: function() {
+        var node = this.selectIndex(this.previousIndex(this.selectedIndex));
+        node.focus();
+      },
       selectedAttribute: 'checked',
       activateEvent: 'change'