polymer-paper-rails 0.2.0 → 0.2.5

data/app/assets/components/core-selector/metadata.html

@@ -17,4 +17,4 @@
     <link rel="import" href="core-selector.html">
   </template>
 
-</x-meta>
+</x-meta>

data/app/assets/components/core-style/core-style.html

@@ -46,8 +46,8 @@ shadowRoot of the `x-test` element. If the content of the `x-test` producer
 `core-style` changes, all consumers of it are automatically kept in sync. This
 allows updating styling on the fly.
 
-The `core-style` element also supports bindings and it is the producer 
-`core-style` element is the model for its content. Here's an example:
+The `core-style` element also supports bindings, in which case the producer
+`core-style` element is the model. Here's an example:
 
     <core-style id="x-test">
       :host {
@@ -265,7 +265,7 @@ Polymer('core-style', {
       this.styleElement._cssText = cssText;
       if (window.ShadowDOMPolyfill) {
         this.styleElement.textContent = cssText;
-        cssText = Platform.ShadowCSS.shimStyle(this.styleElement,
+        cssText = WebComponents.ShadowCSS.shimStyle(this.styleElement,
             this.getScopeSelector());
       }
       this.styleElement.textContent = cssText;
@@ -333,7 +333,7 @@ Polymer('core-style', {
       if (host) {
         var typeExtension = host.hasAttribute('is');
         var name = typeExtension ? host.getAttribute('is') : host.localName;
-        selector = Platform.ShadowCSS.makeScopeSelector(name, 
+        selector = WebComponents.ShadowCSS.makeScopeSelector(name, 
             typeExtension);
       }
       this._scopeSelector = selector;

data/app/assets/components/core-style/elements.html

@@ -52,4 +52,4 @@
     <core-style ref="my-panel"></core-style>
     <content></content>
   </template>
-</polymer-element>
+</polymer-element>

data/app/assets/components/core-style/my-theme.html

@@ -70,4 +70,4 @@
     color: {{g.theme.colorTwo | cycle(100)}}
   }
 
-</core-style>
+</core-style>

data/app/assets/components/core-toolbar/core-toolbar.css

@@ -42,19 +42,26 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 }
 
 /* narrow layout */
-:host(.narrow) {
+:host(.core-narrow),
+:host-context(.core-narrow) {
   height: 56px;
 }
 
-:host(.narrow.medium-tall) {
+polyfill-next-selector { content: ':host.core-narrow.medium-tall, .core-narrow :host.medium-tall'; }
+:host(.core-narrow.medium-tall),
+:host-context(.core-narrow):host(.medium-tall) {
   height: 112px;
 }
 
-:host(.narrow.tall) {
+polyfill-next-selector { content: ':host.core-narrow.tall, .core-narrow :host.tall'; }
+:host(.core-narrow.tall),
+:host-context(.core-narrow):host(.tall) {
   height: 168px;
 }
 
-:host(.narrow) .toolbar-tools {
+polyfill-next-selector { content: ':host.core-narrow .toolbar-tools, .core-narrow :host .toolbar-tools'; }
+:host(.core-narrow) .toolbar-tools,
+:host-context(.core-narrow) .toolbar-tools {
   height: 56px;
   padding: 0;
 }
@@ -81,15 +88,15 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 }
 
 /* make elements (e.g. buttons) respond to mouse/touch events */
-polyfill-next-selector { content: '.toolbar-tools > *'; }
-::content > * {
+polyfill-next-selector { content: '.toolbar-tools > *:not([disabled])'; }
+::content > *:not([disabled]) {
   pointer-events: auto;
 }
 
 /* elements spacing */
 polyfill-next-selector { content: '.toolbar-tools > *'; }
 ::content > * {
-  margin: 0px 8px;
+  margin: 0 8px;
 }
 
 /* misc helpers */

data/app/assets/components/core-toolbar/core-toolbar.html

@@ -8,8 +8,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 -->
 
 <!--
-`core-toolbar` is a horizontal bar containing elements that can be used for
-label, navigation, search and actions.
+`core-toolbar` is a horizontal bar containing items that can be used for
+label, navigation, search and actions.  The items place inside the 
+`core-toolbar` are projected into a `horizontal center layout` container inside of 
+`core-toolbar`'s Shadow DOM.  You can use flex attributes to control the items'
+sizing.
+
+Example:
 
     <core-toolbar>
       <core-icon-button icon="menu" on-tap="{{menuAction}}"></core-icon-button>
@@ -23,15 +28,16 @@ class on the `core-toolbar`.  This will make the toolbar 3x the normal height.
     <core-toolbar class="tall">
       <core-icon-button icon="menu"></core-icon-button>
     </core-toolbar>
-    
-Apply `medium-tall` class to make the toolbar medium tall.  This will make the 
+
+Apply `medium-tall` class to make the toolbar medium tall.  This will make the
 toolbar 2x the normal height.
 
     <core-toolbar class="medium-tall">
       <core-icon-button icon="menu"></core-icon-button>
     </core-toolbar>
 
-When taller, elements can pin to either the top (default), middle or bottom.
+When `tall`, items can pin to either the top (default), middle or bottom.  Use
+`middle` class for middle content and `bottom` class for bottom content.
 
     <core-toolbar class="tall">
       <core-icon-button icon="menu"></core-icon-button>
@@ -39,6 +45,10 @@ When taller, elements can pin to either the top (default), middle or bottom.
       <div class="bottom indent">Bottom Title</div>
     </core-toolbar>
     
+For `medium-tall` toolbar, the middle and bottom contents overlap and are
+pinned to the bottom.  But `middleJustify` and `bottomJustify` attributes are 
+still honored separately.
+    
 To make an element completely fit at the bottom of the toolbar, use `fit` along
 with `bottom`.
 
@@ -46,6 +56,9 @@ with `bottom`.
       <div id="progressBar" class="bottom fit"></div>
     </core-toolbar>
 
+`core-toolbar` adapts to mobile/narrow layout when there is a `core-narrow` class set
+on itself or any of its ancestors.
+
 @group Polymer Core Elements
 @element core-toolbar
 @homepage github.io
@@ -53,7 +66,7 @@ with `bottom`.
 
 <link rel="import" href="../polymer/polymer.html">
 
-<polymer-element name="core-toolbar" noscript>
+<polymer-element name="core-toolbar" attributes="justify middleJustify bottomJustify">
 <template>
 
   <link rel="stylesheet" href="core-toolbar.css">
@@ -61,7 +74,7 @@ with `bottom`.
   <div id="bottomBar" class="toolbar-tools" center horizontal layout>
     <content select=".bottom"></content>
   </div>
-  
+
   <div id="middleBar" class="toolbar-tools" center horizontal layout>
     <content select=".middle"></content>
   </div>
@@ -71,4 +84,72 @@ with `bottom`.
   </div>
 
 </template>
+<script>
+
+(function() {
+
+  Polymer('core-toolbar', {
+    
+    /**
+     * Controls how the items are aligned horizontally.
+     * Options are `start`, `center`, `end`, `between` and `around`.
+     *
+     * @attribute justify
+     * @type string
+     * @default ''
+     */
+    justify: '',
+    
+    /**
+     * Controls how the items are aligned horizontally when they are placed
+     * in the middle.
+     * Options are `start`, `center`, `end`, `between` and `around`.
+     *
+     * @attribute middleJustify
+     * @type string
+     * @default ''
+     */
+    middleJustify: '',
+    
+    /**
+     * Controls how the items are aligned horizontally when they are placed
+     * at the bottom.
+     * Options are `start`, `center`, `end`, `between` and `around`.
+     *
+     * @attribute bottomJustify
+     * @type string
+     * @default ''
+     */
+    bottomJustify: '',
+    
+    justifyChanged: function(old) {
+      this.updateBarJustify(this.$.topBar, this.justify, old);
+    },
+    
+    middleJustifyChanged: function(old) {
+      this.updateBarJustify(this.$.middleBar, this.middleJustify, old);
+    },
+    
+    bottomJustifyChanged: function(old) {
+      this.updateBarJustify(this.$.bottomBar, this.bottomJustify, old);
+    },
+    
+    updateBarJustify: function(bar, justify, old) {
+      if (old) {
+        bar.removeAttribute(this.toLayoutAttrName(old));
+      }
+      if (this.justify) {
+        bar.setAttribute(this.toLayoutAttrName(justify), '');
+      }
+    },
+    
+    toLayoutAttrName: function(value) {
+      return value === 'between' ? 'justified' : value + '-justified';
+    }
+    
+  });
+
+})();
+
+</script>
 </polymer-element>

data/app/assets/components/core-toolbar/metadata.html

@@ -25,4 +25,4 @@
     
   </template>
 
-</x-meta>
+</x-meta>

data/app/assets/components/core-transition/core-transition-css.html

@@ -111,7 +111,7 @@ Available transitions
 <script>
 
   Polymer('core-transition-css', {
-    
+
     /**
      * The class that will be applied to all animated nodes.
      *
@@ -199,7 +199,6 @@ Available transitions
 
     transitionOpened: function(node, opened) {
       this.listenOnce(node, this.completeEventName, function() {
-        node.classList.toggle(this.revealedClass, opened);
         if (!opened) {
           node.classList.remove(this.closedClass);
         }

data/app/assets/components/core-transition/core-transition-overlay.css

@@ -7,40 +7,40 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 
 :host(.core-transition) {
   outline: none;
-  overflow: hidden;
+  overflow: auto;
   opacity: 0;
-  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in;
   -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in;
+  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in;
 }
 
 
 :host(.core-transition.core-opened) {
   opacity: 1;
-  transform: none;
-  -webkit-transform: none;
+  -webkit-transform: translateZ(0);
+  transform: translateZ(0);
 }
 
 :host(.core-transition-center) {
-  transform: scale(0.5);
   -webkit-transform: scale(0.5);
+  transform: scale(0.5);
 }
 
 :host(.core-transition-top) {
-  transform: translateY(-200%);
   -webkit-transform: translateY(-200%);
+  transform: translateY(-200%);
 }
 
 :host(.core-transition-bottom) {
-  transform: translateY(200%);
   -webkit-transform: translateY(200%);
+  transform: translateY(200%);
 }
 
 :host(.core-transition-left) {
-  transform: translateX(-200%);
   -webkit-transform: translateX(-200%);
+  transform: translateX(-200%);
 }
 
 :host(.core-transition-right) {
-  transform: translateX(200%);
   -webkit-transform: translateX(200%);
+  transform: translateX(200%);
 }

data/app/assets/components/core-transition/core-transition.html

@@ -137,4 +137,4 @@ Fired when the animation finishes.
 
     });
   </script>
-</polymer-element>
+</polymer-element>

data/app/assets/components/font-roboto/roboto.html

@@ -6,4 +6,4 @@ The complete set of contributors may be found at http://polymer.github.io/CONTRI
 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
 -->
-<link href='//fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
+<link href='//fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>

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

@@ -9,9 +9,9 @@
 -->
 <x-meta id="paper-button" label="Button" group="Paper" isContainer>
   <template>
-    <paper-button label="Paper Button"></paper-button>
+    <paper-button>button</paper-button>
   </template>
   <template id="imports">
     <link rel="import" href="paper-button.html">
   </template>
-</x-meta>
+</x-meta>

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

@@ -0,0 +1,120 @@
+<!--
+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
+-->
+
+<!--
+@group Paper Elements
+
+`paper-button-base` is the base class for button-like elements with ripple and optional shadow.
+
+@element paper-button-base
+@mixins Polymer.CoreFocusable
+@status unstable
+-->
+
+<link href="../polymer/polymer.html" rel="import">
+<link href="../core-focusable/core-focusable.html" rel="import">
+
+<polymer-element name="paper-button-base" tabindex="0">
+
+<script>
+
+  (function() {
+
+    var p = {
+
+      eventDelegates: {
+        down: 'downAction'
+      },
+
+      activeChanged: function() {
+        this.super();
+
+        if (this.$.ripple) {
+          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();
+      },
+
+      disabledChanged: function() {
+        this._disabledChanged();
+        this.adjustZ();
+      },
+
+      recenteringTouchChanged: function() {
+        if (this.$.ripple) {
+          this.$.ripple.classList.toggle('recenteringTouch', this.recenteringTouch);
+        }
+      },
+
+      fillChanged: function() {
+        if (this.$.ripple) {
+          this.$.ripple.classList.toggle('fill', this.fill);
+        }
+      },
+
+      adjustZ: function() {
+        if (!this.$.shadow) {
+          return;
+        }
+        if (this.active) {
+          this.$.shadow.setZ(2);
+        } else if (this.disabled) {
+          this.$.shadow.setZ(0);
+        } else {
+          this.$.shadow.setZ(1);
+        }
+      },
+
+      downAction: function(e) {
+        this._downAction();
+
+        if (this.hasAttribute('noink')) {
+          return;
+        }
+
+        this.lastEvent = e;
+        if (!this.$.ripple) {
+          var ripple = document.createElement('paper-ripple');
+          ripple.setAttribute('id', 'ripple');
+          ripple.setAttribute('fit', '');
+          if (this.recenteringTouch) {
+            ripple.classList.add('recenteringTouch');
+          }
+          if (!this.fill) {
+            ripple.classList.add('circle');
+          }
+          this.$.ripple = ripple;
+          this.shadowRoot.insertBefore(ripple, this.shadowRoot.firstChild);
+          // No need to forward the event to the ripple because the ripple
+          // is triggered in activeChanged
+        }
+      }
+
+    };
+
+    Polymer.mixin2(p, Polymer.CoreFocusable);
+    Polymer(p);
+
+  })();
+
+</script>
+</polymer-element>