polymer-paper-rails 0.2.6 → 1.0.0.pre.rc.1

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

@@ -1,5 +1,6 @@
 <!--
-Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+@license
+Copyright (c) 2015 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
@@ -7,290 +8,157 @@ 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-toast` provides lightweight feedback about an operation in a small popup 
-at the base of the screen on mobile and at the lower left on desktop. Toasts are 
-above all other elements on screen, including the FAB.
-
-Toasts automatically disappear after a timeout or after user interaction 
-elsewhere on the screen, whichever comes first. Toasts can be swiped off 
-screen.  There can be only one on the screen at a time.
-
-Example:
-
-    <paper-toast text="Your draft has been discarded." onclick="discardDraft(el)"></paper-toast>
-    
-    <script>
-      function discardDraft(el) {
-        el.show();
-      }
-    </script>
-    
-An action button can be presented in the toast.
-
-Example (using Polymer's data-binding features):
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../paper-styles/typography.html">
+<link rel="import" href="../iron-a11y-announcer/iron-a11y-announcer.html">
 
-    <paper-toast id="toast2" text="Connection timed out. Showing limited messages.">
-      <div style="color: blue;" on-tap="{{retry}}">Retry</div>
-    </paper-toast>
-    
-Positioning toast:
-
-A standard toast appears near the lower left of the screen.  You can change the
-position by overriding bottom and left positions.
+<!--
+`paper-toast` provides a subtle notification toast.
 
-    paper-toast {
-      bottom: 40px;
-      left: 10px;
+@group Paper Elements
+@element paper-toast
+@demo demo/index.html
+@hero hero.svg
+-->
+<dom-module id="paper-toast">
+  <style>
+    :host {
+      display: inline-block;
+      position: fixed;
+
+      background: #323232;
+      color: #f1f1f1;
+      min-height: 48px;
+      min-width: 288px;
+      padding: 16px 24px 12px;
+      box-sizing: border-box;
+      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+      border-radius: 2px;
+      bottom: 12px;
+      left: 12px;
+      font-size: 14px;
+      cursor: default;
+
+      -webkit-transition: visibility 0.3s, -webkit-transform 0.3s;
+      transition: visibility 0.3s, transform 0.3s;
+
+      -webkit-transform: translateY(100px);
+      transform: translateY(100px);
+
+      visibility: hidden;
     }
-    
-To position the toast to the right:
 
-    paper-toast {
-      right: 10px;
-      left: auto;
-    } 
-  
-To make it fit at the bottom of the screen:
+    :host(.capsule) {
+      border-radius: 24px;
+    }
 
-    paper-toast {
+    :host(.fit-bottom) {
       bottom: 0;
       left: 0;
       width: 100%;
+      min-width: 0;
+      border-radius: 0;
     }
-  
-When the screen size is smaller than the `responsiveWidth` (default to 480px),
-the toast will automatically fits at the bottom of the screen.
-
-@group Paper Elements
-@element paper-toast
-@homepage github.io
--->
-<!--
-Fired when the `paper-toast`'s `opened` property changes.
-
-@event core-overlay-open
-@param {boolean} detail the opened state
--->
-<!--
-Fired when the `paper-toast` has completely opened.
-
-@event core-overlay-open-completed
--->
-<!--
-Fired when the `paper-toast` has completely closed.
-
-@event core-overlay-close-completed
--->
-<link rel="import" href="../core-overlay/core-overlay.html">
-<link rel="import" href="../core-transition/core-transition-css.html">
-<link rel="import" href="../core-media-query/core-media-query.html">
-
-<polymer-element name="paper-toast" attributes="text duration opened responsiveWidth swipeDisabled autoCloseDisabled" role="status">
-
-<template>
-
-  <link rel="stylesheet" href="paper-toast.css" >
-
-  <core-overlay id="overlay" autoFocusDisabled autoCloseDisabled="{{autoCloseDisabled}}" opened="{{opened}}" target="{{}}" transition="core-transition-bottom"></core-overlay>
-
-  <div class="toast-container" horizontal layout>
 
-    <div class="toast-text" flex>{{text}}</div>
-    
-    <div class="toast-text toast-action" on-tap="{{dismiss}}">
-      <content></content>
-    </div>
+    :host(.paper-toast-open){
+      visibility: visible;
 
-  </div>
-  
-  <core-media-query query="max-width: {{responsiveWidth}}" queryMatches="{{narrowMode}}"></core-media-query>
-
-</template>
+      -webkit-transform: translateY(0px);
+      transform: translateY(0px);
+    }
+  </style>
+  <template>
+    <span id="label">{{text}}</span>
+    <content></content>
+  </template>
+</dom-module>
 <script>
+(function() {
 
-  (function() {
-  
-    var currentToast;
-  
-    Polymer('paper-toast', {
-  
-      /**
-       * The text shows in a toast.
-       *
-       * @attribute text
-       * @type string
-       * @default ''
-       */
-      text: '',
-      
+  var PaperToast = Polymer({
+    is: 'paper-toast',
+
+    properties: {
       /**
        * The duration in milliseconds to show the toast.
-       *
-       * @attribute duration
-       * @type number
-       * @default 3000
-       */
-      duration: 3000,
-      
-      /**
-       * Set opened to true to show the toast and to false to hide it.
-       *
-       * @attribute opened
-       * @type boolean
-       * @default false
-       */
-      opened: false,
-      
-      /**
-       * Min-width when the toast changes to narrow layout.  In narrow layout,
-       * the toast fits at the bottom of the screen when opened.
-       *
-       * @attribute responsiveWidth
-       * @type string
-       * @default '480px'
-       */
-      responsiveWidth: '480px',
-      
-      /**
-       * If true, the toast can't be swiped.
-       *
-       * @attribute swipeDisabled
-       * @type boolean
-       * @default false
-       */
-      swipeDisabled: false,
-      
-      /**
-       * By default, the toast 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,
-      
-      narrowMode: false,
-      
-      eventDelegates: {
-        trackstart: 'trackStart',
-        track: 'track',
-        trackend: 'trackEnd',
-        transitionend: 'transitionEnd'
-      },
-      
-      narrowModeChanged: function() {
-        this.classList.toggle('fit-bottom', this.narrowMode);
-        if (this.opened) {
-          this.$.overlay.resizeHandler();
-        }
-      },
-      
-      openedChanged: function() {
-        if (this.opened) {
-          this.dismissJob = this.job(this.dismissJob, this.dismiss, this.duration);
-        } else {
-          this.dismissJob && this.dismissJob.stop();
-          this.dismiss();
-        }
-      },
-      
-      /** 
-       * Toggle the opened state of the toast.
-       * @method toggle
        */
-      toggle: function() {
-        this.opened = !this.opened;
+      duration: {
+        type: Number,
+        value: 3000
       },
-      
-      /** 
-       * Show the toast for the specified duration
-       * @method show
+
+      /**
+       * The text to display in the toast.
        */
-      show: function() {
-        if (currentToast) {
-          currentToast.dismiss();
-        }
-        currentToast = this;
-        this.opened = true;
+      text: {
+        type: String,
+        value: ""
       },
-      
-      /** 
-       * Dismiss the toast and hide it.
-       * @method dismiss
+
+      /**
+       * True if the toast is currently visible.
        */
-      dismiss: function() {
-        if (this.dragging) {
-          this.shouldDismiss = true;
-        } else {
-          this.opened = false;
-          if (currentToast === this) {
-            currentToast = null;
-          }
-        }
-      },
-      
-      trackStart: function(e) {
-        if (!this.swipeDisabled) {
-          e.preventTap();
-          this.vertical = e.yDirection;
-          this.w = this.offsetWidth;
-          this.h = this.offsetHeight;
-          this.dragging = true;
-          this.classList.add('dragging');
-        }
-      },
-      
-      track: function(e) {
-        if (this.dragging) {
-          var s = this.style;
-          if (this.vertical) {
-            var y = e.dy;
-            s.opacity = (this.h - Math.abs(y)) / this.h;
-            s.transform = s.webkitTransform = 'translate3d(0, ' + y + 'px, 0)';
-          } else {
-            var x = e.dx;
-            s.opacity = (this.w - Math.abs(x)) / this.w;
-            s.transform = s.webkitTransform = 'translate3d(' + x + 'px, 0, 0)';
-          }
-        }
-      },
-      
-      trackEnd: function(e) {
-        if (this.dragging) {
-          this.classList.remove('dragging');
-          this.style.opacity = '';
-          this.style.transform = this.style.webkitTransform = '';
-          var cl = this.classList;
-          if (this.vertical) {
-            cl.toggle('fade-out-down', e.yDirection === 1 && e.dy > 0);
-            cl.toggle('fade-out-up', e.yDirection === -1 && e.dy < 0);
-          } else {
-            cl.toggle('fade-out-right', e.xDirection === 1 && e.dx > 0);
-            cl.toggle('fade-out-left', e.xDirection === -1 && e.dx < 0);
-          }
-          this.dragging = false;
-        }
-      },
-      
-      transitionEnd: function() {
-        var cl = this.classList;
-        if (cl.contains('fade-out-right') || cl.contains('fade-out-left') || 
-            cl.contains('fade-out-down') || cl.contains('fade-out-up')) {
-          this.dismiss();
-          cl.remove('fade-out-right', 'fade-out-left', 
-              'fade-out-down', 'fade-out-up');
-        } else if (this.shouldDismiss) {
-          this.dismiss();
-        }
-        this.shouldDismiss = false;
+      visible: {
+        type: Boolean,
+        readOnly: true,
+        value: false,
+        observer: '_visibleChanged'
+      }
+    },
+
+    created: function() {
+      Polymer.IronA11yAnnouncer.requestAvailability();
+    },
+
+    ready: function() {
+      this.async(function() {
+        this.hide();
+      });
+    },
+
+    /**
+     * Show the toast.
+     * @method show
+     */
+    show: function() {
+      if (PaperToast.currentToast) {
+        PaperToast.currentToast.hide();
+      }
+      PaperToast.currentToast = this;
+      this.removeAttribute('aria-hidden');
+      this._setVisible(true);
+      this.fire('iron-announce', {
+        text: this.text
+      });
+      this.debounce('hide', this.hide, this.duration);
+    },
+
+    /**
+     * Hide the toast
+     */
+    hide: function() {
+      this.setAttribute('aria-hidden', 'true');
+      this._setVisible(false);
+    },
+
+    /**
+     * Toggle the opened state of the toast.
+     * @method toggle
+     */
+    toggle: function() {
+      if (!this.visible) {
+        this.show();
+      } else {
+        this.hide();
       }
-  
-    });
-    
-  })();
+    },
+
+    _visibleChanged: function(visible) {
+      this.toggleClass('paper-toast-open', visible);
+    }
+  });
+
+  PaperToast.currentToast = null;
 
+})();
 </script>
-</polymer-element>

data/app/assets/components/paper-toggle-button/README.md

@@ -0,0 +1,26 @@
+paper-toggle-button
+===================
+
+`paper-toggle-button` provides a ON/OFF switch that user can toggle the state
+by tapping or by dragging the swtich.
+
+Example:
+
+```html
+<paper-toggle-button></paper-toggle-button>
+```
+
+Styling toggle-button:
+
+```html
+<style is="custom-style">
+  * {
+    --paper-toggle-button-unchecked-bar-color: #FF4081;
+    --paper-toggle-button-unchecked-button-color: #9c27b0;
+    --paper-toggle-button-unchecked-ink-color: #009688;
+    --paper-toggle-button-checked-bar-color: #5677fc;
+    --paper-toggle-button-checked-button-color: #ff4081;
+    --paper-toggle-button-checked-ink-color: #ff4081;
+  }
+</style>
+```

data/app/assets/components/paper-toggle-button/bower.json

@@ -0,0 +1,36 @@
+{
+  "name": "paper-toggle-button",
+  "version": "1.0.2",
+  "description": "A material design toggle button control",
+  "authors": [
+    "The Polymer Authors"
+  ],
+  "keywords": [
+    "web-components",
+    "polymer",
+    "toggle",
+    "control"
+  ],
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/paper-toggle-button"
+  },
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "homepage": "https://github.com/PolymerElements/paper-toggle-button",
+  "ignore": [],
+  "dependencies": {
+    "paper-ripple": "PolymerElements/paper-ripple#^1.0.0",
+    "paper-styles": "PolymerElements/paper-styles#^1.0.0",
+    "paper-behaviors": "PolymerElements/paper-behaviors#^1.0.0",
+    "polymer": "Polymer/polymer#^1.0.0"
+  },
+  "devDependencies": {
+    "web-component-tester": "*",
+    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
+    "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+  }
+}

data/app/assets/components/paper-toggle-button/demo/index.html

@@ -0,0 +1,106 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 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>
+  <head>
+    <title>paper-toggle-button demo</title>
+
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <link rel="import" href="../../paper-styles/paper-styles.html">
+    <link rel="import" href="../../paper-styles/demo-pages.html">
+    <link rel="import" href="../paper-toggle-button.html">
+
+    <style is="custom-style">
+      .line {
+        margin-bottom: 40px;
+      }
+
+      .line span {
+        margin-left: 24px;
+      }
+
+      paper-toggle-button.blue {
+        --paper-toggle-button-checked-bar-color:  var(--paper-light-blue-500);
+        --paper-toggle-button-checked-button-color:  var(--paper-light-blue-500);
+        --paper-toggle-button-checked-ink-color: var(--paper-light-blue-500);
+        --paper-toggle-button-unchecked-bar-color:  var(--paper-light-blue-900);
+        --paper-toggle-button-unchecked-button-color:  var(--paper-light-blue-900);
+        --paper-toggle-button-unchecked-ink-color: var(--paper-light-blue-900);
+      }
+
+      paper-toggle-button.red {
+        --paper-toggle-button-checked-bar-color:  var(--paper-red-500);
+        --paper-toggle-button-checked-button-color:  var(--paper-red-500);
+        --paper-toggle-button-checked-ink-color: var(--paper-red-500);
+        --paper-toggle-button-unchecked-bar-color:  var(--paper-red-900);
+        --paper-toggle-button-unchecked-button-color:  var(--paper-red-900);
+        --paper-toggle-button-unchecked-ink-color: var(--paper-red-900);
+      }
+
+      paper-toggle-button.green {
+        --paper-toggle-button-checked-bar-color:  var(--paper-green-500);
+        --paper-toggle-button-checked-button-color:  var(--paper-green-500);
+        --paper-toggle-button-checked-ink-color: var(--paper-green-500);
+        --paper-toggle-button-unchecked-bar-color:  var(--paper-green-900);
+        --paper-toggle-button-unchecked-button-color:  var(--paper-green-900);
+        --paper-toggle-button-unchecked-ink-color: var(--paper-green-900);
+      }
+
+      paper-toggle-button.orange {
+        --paper-toggle-button-checked-bar-color:  var(--paper-orange-500);
+        --paper-toggle-button-checked-button-color:  var(--paper-orange-500);
+        --paper-toggle-button-checked-ink-color: var(--paper-orange-500);
+        --paper-toggle-button-unchecked-bar-color:  var(--paper-orange-900);
+        --paper-toggle-button-unchecked-button-color:  var(--paper-orange-900);
+        --paper-toggle-button-unchecked-ink-color: var(--paper-orange-900);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="horizontal center-justified layout">
+      <div>
+        <h4>Enabled</h4>
+        <div class="horizontal-section">
+          <div class="line"><paper-toggle-button></paper-toggle-button><span>Oxygen</span></div>
+          <div class="line"><paper-toggle-button></paper-toggle-button><span>Carbon</span></div>
+          <div class="line"><paper-toggle-button checked></paper-toggle-button><span>Hydrogen</span></div>
+          <div class="line"><paper-toggle-button checked></paper-toggle-button><span>Nitrogen</span></div>
+          <div class="line"><paper-toggle-button checked></paper-toggle-button><span>Calcium</span></div>
+        </div>
+      </div>
+
+      <div>
+        <h4>Disabled</h4>
+        <div class="horizontal-section">
+          <div class="line"><paper-toggle-button disabled></paper-toggle-button><span>Oxygen</span></div>
+          <div class="line"><paper-toggle-button disabled></paper-toggle-button><span>Carbon</span></div>
+          <div class="line"><paper-toggle-button checked disabled></paper-toggle-button><span>Hydrogen</span></div>
+          <div class="line"><paper-toggle-button checked disabled></paper-toggle-button><span>Nitrogen</span></div>
+          <div class="line"><paper-toggle-button checked disabled></paper-toggle-button><span>Calcium</span></div>
+        </div>
+      </div>
+
+      <div>
+        <h4>Color</h4>
+        <div class="horizontal-section">
+          <div class="line"><paper-toggle-button class="blue"></paper-toggle-button><span>Oxygen</span></div>
+          <div class="line"><paper-toggle-button class="red"></paper-toggle-button><span>Carbon</span></div>
+          <div class="line"><paper-toggle-button checked class="orange"></paper-toggle-button><span>Hydrogen</span></div>
+          <div class="line"><paper-toggle-button checked class="green"></paper-toggle-button><span>Nitrogen</span></div>
+          <div class="line"><paper-toggle-button checked class="blue"></paper-toggle-button><span>Calcium</span></div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>

data/app/assets/components/paper-toggle-button/hero.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 225 126" enable-background="new 0 0 225 126" xml:space="preserve">
+<g id="background" display="none">
+	<rect display="inline" fill="#B0BEC5" width="225" height="126"/>
+</g>
+<g id="label">
+</g>
+<g id="art">
+	<g>
+		<circle cx="123.8" cy="63" r="15.7"/>
+		<path d="M123,77H98.5c-7.7,0-14-6.3-14-14s6.3-14,14-14H123c7.7,0,14,6.3,14,14S130.7,77,123,77z M98.5,51c-6.6,0-12,5.4-12,12
+			s5.4,12,12,12H123c6.6,0,12-5.4,12-12s-5.4-12-12-12H98.5z"/>
+	</g>
+	<g id="ic_x5F_add_x0D_">
+	</g>
+</g>
+<g id="Guides">
+</g>
+</svg>

data/app/assets/components/paper-toggle-button/index.html

@@ -0,0 +1,26 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 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
+The complete set of authors may be found at http://polymer.github.io/AUTHORS
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
+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
+-->
+<html>
+<head>
+
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../iron-component-page/iron-component-page.html">
+
+</head>
+<body>
+
+  <iron-component-page></iron-component-page>
+
+</body>
+</html>