polymer-paper-rails 0.1.0

data/app/assets/components/paper-input/paper-input.scss

@@ -0,0 +1,203 @@
+:host {
+  display: inline-block;
+  outline: none;
+  text-align: inherit;
+  color: #757575;
+}
+:host(:hover) {
+  cursor: text;
+}
+
+#container {
+  position: relative;
+}
+
+#inputClone,
+#minInputHeight,
+#maxInputHeight {
+  position: absolute;
+  top: 0;
+  left: 0;
+  visibility: hidden;
+  padding: 0.5em 0;
+}
+
+:host /deep/ input,
+:host /deep/ textarea {
+  font: inherit;
+  color: #000;
+  padding: 0;
+  /* Important to use margin here so the margin remains visible
+   * when textarea scrolls internally. */
+  margin: 0.5em 0;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  width: 100%;
+}
+
+.host /deep/ textarea {
+  resize: none;
+}
+
+#floatedLabel {
+  font-size: 0.75em;
+  background: transparent;
+  white-space: nowrap;
+}
+#floatedLabel.hidden {
+  visibility: hidden;
+}
+#floatedLabel.focused {
+  visibility: visible;
+}
+
+#label {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  padding: 0.5em 0;
+  background: transparent;
+  -webkit-transform-origin: 0% 0%;
+  transform-origin: 0% 0%;
+}
+#label.hidden {
+  display: none;
+}
+#label.animating {
+  /* TODO: transforms are unprefixed in M36/ Remove when stable. */
+  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.2, 0, 0.03, 1);
+  transition: transform 0.3s cubic-bezier(0.2, 0, 0.03, 1);
+}
+
+#labelSpan {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
+  max-width: 100%;
+}
+
+#errorContainer {
+  visibility: hidden;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-align-items: center;
+  align-items: center;
+}
+
+:host(.invalid) #errorContainer {
+  visibility: visible;
+}
+
+#error {
+  -webkit-flex: 1;
+  flex: 1;
+  font-size: 0.75em;
+  padding: 0.5em 0;
+}
+
+#errorIcon {
+  background-image: image-url('paper-input/error-100.png');
+  background-size: 24px 24px;
+  height: 24px;
+  width: 24px;
+}
+
+
+@media (min-resolution: 2dppx) {
+  #errorIcon {
+    background-image: image-url('paper-input/error-200.png');
+    background-size: 24px 24px;
+  }
+}
+
+#underlineContainer {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -1px;
+}
+
+:host([multiline]) #underlineContainer {
+  bottom: auto;
+}
+
+:host([multiline]) #underlineContainer.animating {
+  -webkit-transition: top 0.2s ease-in;
+  transition: top 0.2s ease-in;
+}
+
+#underline {
+  height: 1px;
+  background: #757575;
+  border-bottom-color: #757575;
+}
+
+:host([disabled]) #underline {
+  border-bottom: 1px dashed;
+  height: 0px;
+  background: transparent;
+}
+
+#underlineHighlight {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 2px;
+  -webkit-transform: scale(0,2);
+  transform: scale(0,2);
+}
+#underlineHighlight.pressed {
+  -webkit-transform: scale(0.1,2);
+  transform: scale(0.1,2);
+  /* TODO: transforms are unprefixed in M36/ Remove when stable. */
+  -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.2, 0, 0.03, 1);
+  transition: transform 0.3s cubic-bezier(0.2, 0, 0.03, 1);
+}
+#underlineHighlight.animating {
+  /* TODO: transforms are unprefixed in M36/ Remove when stable. */
+  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.2, 0, 0.03, 1);
+  transition: transform 0.3s cubic-bezier(0.2, 0, 0.03, 1);
+}
+#underlineHighlight.focused {
+  -webkit-transform: scale(1);
+  transform: scale(1);
+}
+
+#caret {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 0;
+  -webkit-transform-origin-x: 0%;
+  transform-origin-x: 0%;
+  -webkit-transform: scaleX(1) translateX(10%);
+  transform: scaleX(1) translateX(10%);
+}
+#caret.animating {
+  display: block;
+   /* TODO: transforms are unprefixed in M36/ Remove when stable. */
+  -webkit-transition: -webkit-transform 0.2s ease-out, opacity 0.2s ease-out;
+  transition: transform 0.3s cubic-bezier(0.2, 0, 0.03, 1);
+}
+#caret.focused {
+  display: block;
+  opacity: 0.75;
+  -webkit-transform: scaleX(0) translateX(0);
+  transform: scaleX(0) translateX(0);
+}
+#caretInner {
+  position: absolute;
+  top: 0.6em;
+  left: 0;
+  height: 1.2em;
+  width: 25%;
+}

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

@@ -0,0 +1,30 @@
+html /deep/ paper-item {
+  display: block;
+  position: relative;
+  -webkit-user-select: none;
+  user-select: none;
+  cursor: pointer;
+  height: 36px;
+  padding: 0 12px;
+}
+
+html /deep/ paper-item::shadow #ripple {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  pointer-events: none;
+}
+
+html /deep/ paper-item::shadow #icon {
+  margin-right: 8px;
+}
+
+html /deep/ paper-item::shadow ::content > a {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}

data/app/assets/components/paper-item/paper-item.html.erb

@@ -0,0 +1,103 @@
+<!--
+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-item` is a list-item object for use in menus. It may contain and icon and/or
+a text label.
+
+Example:
+
+    <core-menu>
+        <paper-item icon="refresh" label="Refresh"></paper-item>
+        <paper-item label="Help"></paper-item>
+        <paper-item label="Sign Out"></paper-item>
+    </core-menu>
+
+To use as a link, put an `&lt;a&gt;` element in the item.
+
+Example:
+
+    <paper-item icon="home" label="Home">
+        <a href="http://www.polymer-project.org"></a>
+    </paper-item>
+
+@class paper-item
+-->
+
+<%= html_import_tag "core/icon/core-icon" %>
+<%= html_import_tag "paper-ripple/paper-ripple" %>
+
+<%= stylesheet_link_tag "paper-item/paper-item", "shim-shadowdom" => true %>
+
+<polymer-element name="paper-item" attributes="label iconSrc icon" center horizontal layout>
+
+  <template>
+
+    <paper-ripple id="ripple"></paper-ripple>
+
+    <core-icon id="icon" hidden?="{{!iconSrc && !icon}}" src="{{iconSrc}}" icon="{{icon}}"></core-icon>
+    {{label}}
+    <content></content>
+  </template>
+
+  <script>
+    Polymer('paper-item', {
+
+      publish: {
+
+        /**
+         * The label for the item.
+         *
+         * @attribute label
+         * @type string
+         * @default ''
+         */
+        label: '',
+
+        /**
+         * (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.
+         *
+         * @attribute iconSrc
+         * @type string
+         * @default ''
+         */
+        iconSrc: {value: ''},
+
+        /**
+         * (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: {value: ''}
+
+      },
+
+      eventDelegates: {
+        'down': 'downAction',
+        'up': 'upAction'
+      },
+
+      downAction: function(e) {
+        this.$.ripple.downAction(e);
+      },
+
+      upAction: function(e) {
+        this.$.ripple.upAction(e);
+      }
+    });
+  </script>
+</polymer-element>

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

@@ -0,0 +1,86 @@
+<!--
+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
+-->
+
+<%= html_import_tag "core/overlay/core-overlay" %>
+
+<!--
+
+`paper-menu-button-overlay` is a helper class to position an overlay relative to another
+element, e.g. the button with a pulldown menu.
+
+@group Paper Elements
+@element paper-menu-button-overlay
+@extends core-overlay
+@homepage github.io
+-->
+
+<polymer-element name="paper-menu-button-overlay" extends="core-overlay" attributes="relatedTarget halign valign">
+  <script>
+    Polymer('paper-menu-button-overlay', {
+
+      publish: {
+
+        /**
+         * The `relatedTarget` is an element used to position the overlay, for example a
+         * button the user taps to show a menu.
+         *
+         * @attribute relatedTarget
+         * @type Element
+         */
+        relatedTarget: null,
+
+        /**
+         * The horizontal alignment of the overlay relative to the `relatedTarget`.
+         *
+         * @attribute halign
+         * @type 'left'|'right'|'center'
+         * @default 'left'
+         */
+        halign: 'left'
+
+      },
+
+      updateTargetDimensions: function() {
+        this.super();
+
+        var t = this.target;
+        this.target.cachedSize = t.getBoundingClientRect();
+      },
+
+      positionTarget: function() {
+        if (this.relatedTarget) {
+
+          var rect = this.relatedTarget.getBoundingClientRect();
+
+          if (this.halign === 'left') {
+            this.target.style.left = rect.left + 'px';
+          } else if (this.halign === 'right') {
+            this.target.style.right = (window.innerWidth - rect.right) + 'px';
+          } else {
+            this.target.style.left = (rect.left - (rect.width - this.target.cachedSize.width) / 2) + 'px';
+          }
+
+          if (this.valign === 'top') {
+            this.target.style.top = rect.top + 'px';
+          } else if (this.valign === 'bottom') {
+            this.target.style.top = rect.bottom + 'px';
+          } else {
+            this.target.style.top = rect.top + 'px';
+          }
+
+          // this.target.style.top = rect.top + 'px';
+
+        } else {
+          this.super();
+        }
+      }
+
+    });
+  </script>
+</polymer-element>

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

@@ -0,0 +1,19 @@
+/* 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 */
+
+:host(.paper-menu-button-transition) {
+  outline: none;
+  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;
+}
+
+:host(.paper-menu-button-transition.paper-menu-button-opened) {
+  opacity: 1;
+  transform: none;
+  -webkit-transform: none;
+}

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

@@ -0,0 +1,118 @@
+<!--
+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
+@class paper-menu-button-transition
+@extends core-transition-css
+-->
+
+<%= html_import_tag "core/transition/core-transition-css" %>
+<%= html_import_tag "core/animation/web-animations" %>
+
+<polymer-element name="paper-menu-button-transition" extends="core-transition-css" attributes="duration transformOrigin">
+  <template>
+    <%= stylesheet_link_tag "paper-menu-button/paper-menu-button-transition" %>
+  </template>
+  <script>
+    Polymer('paper-menu-button-transition', {
+
+      baseClass: 'paper-menu-button-transition',
+      revealedClass: 'paper-menu-button-revealed',
+      openedClass: 'paper-menu-button-opened',
+      closedClass: 'paper-menu-button-closed',
+
+      duration: 500,
+
+      setup: function(node) {
+        this.super(arguments);
+
+        var bg = node.querySelector('.paper-menu-button-overlay-bg');
+        bg.style.transformOrigin = this.transformOrigin;
+        bg.style.webkitTransformOrigin = this.transformOrigin;
+      },
+
+      transitionOpened: function(node, opened) {
+        this.super(arguments);
+
+        if (opened) {
+          if (this.player) {
+            this.player.cancel();
+          }
+
+          var anims = [];
+
+          var ink = node.querySelector('.paper-menu-button-overlay-ink');
+          var offset = 40 / Math.max(node.cachedSize.width, node.cachedSize.height);
+          anims.push(new Animation(ink, [{
+            'opacity': 0.9,
+            'transform': 'scale(0)',
+          }, {
+            'opacity': 0.9,
+            'transform': 'scale(1)'
+          }], {
+            duration: this.duration * offset
+          }));
+
+          var bg = node.querySelector('.paper-menu-button-overlay-bg');
+          anims.push(new Animation(bg, [{
+            'opacity': 0.9,
+            'transform': 'scale(' + 40 / node.cachedSize.width + ',' + 40 / node.cachedSize.height + ')',
+          }, {
+            'opacity': 1,
+            'transform': 'scale(0.95, 0.5)'
+          }, {
+            'opacity': 1,
+            'transform': 'scale(1, 1)'
+          }], {
+            delay: this.duration * offset,
+            duration: this.duration * (1 - offset),
+            fill: 'forwards'
+          }));
+
+          var nodes = window.ShadowDOMPolyfill ? Platform.queryAllShadows(node.querySelector('core-menu'), 'content').getDistributedNodes() : node.querySelector('core-menu::shadow content').getDistributedNodes().array();
+          var items = nodes.filter(function(n) {
+            return n.nodeType === Node.ELEMENT_NODE;
+          });
+          var itemDelay = offset + (1 - offset) / 2;
+          var itemDuration = this.duration * (1 - itemDelay) / (items.length - 1);
+          items.forEach(function(item, i) {
+            anims.push(new Animation(item, [{
+              'opacity': 0
+            }, {
+              'opacity': 1
+            }], {
+              delay: this.duration * itemDelay + itemDuration * i,
+              duration: itemDuration,
+              fill: 'both'
+            }));
+          }.bind(this));
+
+          var shadow = node.querySelector('paper-shadow');
+          anims.push(new Animation(shadow, function(t, target) {
+            if (t > offset * 2 && shadow.z === 0) {
+              shadow.z = 1
+            }
+          }, {
+            duration: this.duration
+          }));
+
+          var group = new AnimationGroup(anims, {
+            easing: 'cubic-bezier(0.4, 0, 0.2, 1)'
+          });
+          this.player = document.timeline.play(group);
+        }
+      },
+
+    });
+  </script>
+</polymer-element>
+
+<paper-menu-button-transition id="paper-menu-button-transition-top-left" transformOrigin="0% 0%"></paper-menu-button-transition>
+<paper-menu-button-transition id="paper-menu-button-transition-top-right" transformOrigin="100% 0%"></paper-menu-button-transition>
+<paper-menu-button-transition id="paper-menu-button-transition-top-right-slow" transformOrigin="100% 0%" duration="10000"></paper-menu-button-transition>