polymer-paper-rails 0.1.0

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

@@ -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
+-->
+
+<!--
+`paper-checkbox` is a button that can be either checked or unchecked.  User
+can tap the checkbox to check or uncheck it.  Usually you use checkboxes
+to allow user to select multiple options from a set.  If you have a single
+ON/OFF option, avoid using a single checkbox and use `paper-toggle-button`
+instead.
+
+Example:
+
+    <paper-checkbox></paper-checkbox>
+
+    <paper-checkbox checked></paper-checkbox>
+
+Styling checkbox:
+
+To change the ink color for checked state:
+
+    paper-checkbox::shadow #ink[checked] {
+      color: #4285f4;
+    }
+
+To change the checkbox checked color:
+
+    paper-checkbox::shadow #checkbox.checked {
+      border-color: #4285f4;
+    }
+
+To change the ink color for unchecked state:
+
+    paper-checkbox::shadow #ink {
+      color: #b5b5b5;
+    }
+
+To change the checbox unchecked color:
+
+    paper-checkbox::shadow #checkbox {
+      border-color: #b5b5b5;
+    }
+
+@group Paper Elements
+@element paper-checkbox
+@extends paper-radio-button
+@homepage github.io
+-->
+
+<%= html_import_tag "paper-radio-button/paper-radio-button" %>
+
+<polymer-element name="paper-checkbox" extends="paper-radio-button" role="checkbox">
+<template>
+
+  <%= stylesheet_link_tag "paper-checkbox/paper-checkbox" %>
+
+  <div id="checkboxContainer" class="{{ {labeled: label} | tokenList }}" >
+
+    <paper-ripple id="ink" class="circle recenteringTouch" checked?="{{!checked}}"></paper-ripple>
+
+    <div id="checkbox" on-animationend="{{checkboxAnimationEnd}}" on-webkitAnimationEnd="{{checkboxAnimationEnd}}"></div>
+
+  </div>
+
+  <div id="checkboxLabel" hidden?="{{!label}}">{{label}}<content></content></div>
+
+</template>
+<script>
+
+  Polymer('paper-checkbox', {
+
+    /**
+     * Fired when the checked state changes.
+     *
+     * @event change
+     */
+
+    toggles: true,
+
+    checkedChanged: function() {
+      var cl = this.$.checkbox.classList;
+      cl.toggle('checked', this.checked);
+      cl.toggle('unchecked', !this.checked);
+      cl.toggle('checkmark', !this.checked);
+      cl.toggle('box', this.checked);
+      this.setAttribute('aria-checked', this.checked ? 'true': 'false');
+      this.fire('change');
+    },
+
+    checkboxAnimationEnd: function() {
+      var cl = this.$.checkbox.classList;
+      cl.toggle('checkmark', this.checked && !cl.contains('checkmark'));
+      cl.toggle('box', !this.checked && !cl.contains('box'));
+    }
+
+  });
+
+</script>
+</polymer-element>

data/app/assets/components/paper-dialog/paper-dialog-transition.css

@@ -0,0 +1,59 @@
+/* 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-dialog-transition) {
+  outline: none;
+  opacity: 0;
+  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+:host(.paper-dialog-transition.core-opened) {
+  opacity: 1;
+  transform: none;
+  -webkit-transform: none;
+}
+
+:host(.paper-dialog-transition-bottom) {
+  transform: scale(0.9) translateY(200%);
+  -webkit-transform: scale(0.9) translateY(200%);
+}
+
+:host(.paper-dialog-transition-center.core-opened) {
+  animation: paper-dialog-transition-center-keyframes 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  -webkit-animation: paper-dialog-transition-center-keyframes 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes paper-dialog-transition-center-keyframes {
+  0% {
+    transform: scale(0.5) translateY(0);
+    -webkit-transform: scale(0.5) translateY(0);
+  }
+  90% {
+    transform: scale(1) translateY(-10px);
+    -webkit-transform: scale(1) translateY(-10px);
+  }
+  100% {
+    transform: scale(1) translateY(0);
+    -webkit-transform: scale(1) translateY(0);
+  }
+}
+
+@-webkit-keyframes paper-dialog-transition-center-keyframes {
+  0% {
+    transform: scale(0.5) translateY(0);
+    -webkit-transform: scale(0.5) translateY(0);
+  }
+  90% {
+    transform: scale(1) translateY(-10px);
+    -webkit-transform: scale(1) translateY(-10px);
+  }
+  100% {
+    transform: scale(1) translateY(0);
+    -webkit-transform: scale(1) translateY(0);
+  }
+}

data/app/assets/components/paper-dialog/paper-dialog-transition.html.erb

@@ -0,0 +1,27 @@
+<!--
+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/transition/core-transition-css" %>
+
+<polymer-element name="paper-dialog-transition" extends="core-transition-css">
+
+<template>
+  <%= stylesheet_link_tag "paper-dialog/paper-dialog-transition",'no-shim' => true %>
+</template>
+
+<script>
+  Polymer({
+    baseClass: 'paper-dialog-transition'
+  });
+</script>
+
+</polymer-element>
+
+<paper-dialog-transition id="paper-dialog-transition-bottom" transitionType="bottom"></paper-dialog-transition>
+<paper-dialog-transition id="paper-dialog-transition-center" transitionType="center"></paper-dialog-transition>

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

@@ -0,0 +1,176 @@
+<!--
+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
+-->
+
+<!--
+Provides a dialog overlay.
+
+Child elements that include a `dismissive` attribute are positioned in the lower left corner of the dialog. Elements that use the `affirmative` attribute are positioned in the lower right corner.
+
+Child elements that include the `dismissive` or `affirmative` attribute will automatically toggle the dialog when clicked.
+
+One child element should have the `autofocus` attribute so that the Enter key will automatically take action. This is
+especially important for screen reader environments.
+
+Example:
+
+    <paper-dialog heading="Title for dialog">
+      <p>Lorem ipsum ....</p>
+      <p>Id qui scripta ...</p>
+      <paper-button label="More Info..." dismissive></paper-button>
+      <paper-button label="Decline" affirmative></paper-button>
+      <paper-button label="Accept" affirmative autofocus></paper-button>
+    </paper-dialog>
+
+#### Transitions
+
+`<paper-dialog>` can be used with `<paper-transition>` to transition the overlay open and close.
+
+To use a transition, import `paper-dialog-transition.html` alongside paper-dialog:
+
+    <link rel="import" href="paper-dialog/paper-dialog-transition.html">
+
+Then set the `transition` attribute:
+
+    <paper-dialog heading="Title for dialog" transition="paper-transition-center">
+
+    <paper-dialog heading="Title for dialog" transition="paper-transition-bottom">
+
+@group Paper Elements
+@element paper-dialog
+@homepage github.io
+-->
+<!--
+Fired when the dialog's `opened` property changes.
+
+@event core-overlay-open
+@param {Object} detail
+@param {Object} detail.opened the opened state
+-->
+
+<%= html_import_tag "core/overlay/core-overlay" %>
+<%= html_import_tag "paper-shadow/paper-shadow" %>
+
+<polymer-element name="paper-dialog" attributes="opened heading transition autoCloseDisabled backdrop layered closeSelector" role="dialog">
+
+  <template>
+
+    <%= stylesheet_link_tag "paper-dialog/paper-dialog" %>
+
+    <div id="shadow">
+      <paper-shadow z="3" hasPosition></paper-shadow>
+    </div>
+
+    <core-overlay id="overlay" opened="{{opened}}" autoCloseDisabled?="{{autoCloseDisabled}}" backdrop?="{{backdrop}}" layered?="{{layered}}" target="{{}}" sizingTarget="{{$.container}}" closeSelector="{{closeSelector}}" transition="{{transition}}" margin="20"></core-overlay>
+
+    <div id="container" layout vertical>
+
+      <div id="actions" layout horizontal>
+        <content select="[dismissive]"></content>
+        <div flex auto></div>
+        <content select="[affirmative]"></content>
+      </div>
+
+      <div id="main" flex auto>
+        <h1>{{heading}}</h1>
+        <content></content>
+      </div>
+
+    </div>
+
+  </template>
+
+  <script>
+
+    Polymer('paper-dialog', {
+
+      /**
+       * Set opened to true to show the dialog and to false to hide it.
+       * A dialog may be made intially opened by setting its opened attribute.
+
+       * @attribute opened
+       * @type boolean
+       * @default false
+       */
+      opened: false,
+
+      /**
+       * If true, the dialog has a backdrop darkening the rest of the screen.
+       * The backdrop element is attached to the document body and may be styled
+       * with the class `core-overlay-backdrop`. When opened the `core-opened`
+       * class is applied.
+       *
+       * @attribute backdrop
+       * @type boolean
+       * @default false
+       */
+      backdrop: false,
+
+      /**
+       * If true, the dialog is guaranteed to display above page content.
+       *
+       * @attribute layered
+       * @type boolean
+       * @default false
+      */
+      layered: false,
+
+      /**
+       * By default a dialog will close automatically if the user
+       * taps outside it or presses the escape key. Disable this
+       * behavior by setting the `autoCloseDisabled` property to true.
+       * @attribute autoCloseDisabled
+       * @type boolean
+       * @default false
+       */
+      autoCloseDisabled: false,
+
+      /**
+       * This property specifies a selector matching elements that should
+       * close the dialog on tap.
+       *
+       * @attribute closeSelector
+       * @type string
+       * @default ""
+       */
+      closeSelector: '[dismissive],[affirmative]',
+
+      /**
+       * @attribute heading
+       * @type string
+       * @default ''
+       */
+      heading: '',
+
+      /**
+       * Set this property to the id of a <core-transition> element to specify
+       * the transition to use when opening/closing this dialog.
+       *
+       * @attribute transition
+       * @type string
+       * @default ''
+       */
+      transition: '',
+
+      /**
+       * Toggle the dialog's opened state.
+       * @method toggle
+       */
+      toggle: function() {
+        this.$.overlay.toggle();
+      },
+
+      headingChanged: function() {
+        this.setAttribute('aria-label', this.heading);
+      }
+
+    });
+
+  </script>
+
+</polymer-element>

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

@@ -0,0 +1,27 @@
+:host {
+  box-sizing: border-box;
+  width: 56px;
+  height: 56px;
+  background: #d23f31;
+  border-radius: 28px;
+  fill: #fff;
+}
+
+:host(.mini) {
+  width: 40px;
+  height: 40px;
+  border-radius: 20px;
+}
+
+:host /deep/ #focusBg {
+  display: none;
+}
+
+:host /deep/ #icon {
+  display: block;
+  margin: 16px;
+}
+
+:host(.mini) /deep/ #icon {
+  margin: 8px;
+}

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

@@ -0,0 +1,55 @@
+<!--
+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-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`.
+
+Example:
+
+    <paper-fab icon="favorite"></paper-fab>
+    <paper-fab class="mini"></paper-fab>
+
+@group Paper Elements
+@element paper-fab
+@homepage github.io
+@extends paper-icon-button
+-->
+
+<%= html_import_tag "paper-icon-button/paper-icon-button" %>
+
+<polymer-element name="paper-fab" extends="paper-icon-button">
+
+  <template>
+
+    <%= stylesheet_link_tag "paper-fab/paper-fab" %>
+
+    <shadow></shadow>
+
+  </template>
+
+  <script>
+    Polymer('paper-fab', {
+
+      publish: {
+
+        /**
+         * See [`<paper-button>`](../paper-button).
+         *
+         * @attribute raisedButton
+         * @type boolean
+         * @default true
+         */
+        raisedButton: {value: true, reflect: true}
+
+      }
+
+    });
+  </script>
+</polymer-element>