polymer-paper-elements-rails 0.0.1

data/app/assets/components/paper-dialog-behavior/paper-dialog-common.css

@@ -0,0 +1,58 @@
+/*
+@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
+*/
+
+:host {
+  display: block;
+  margin: 24px 40px;
+
+  background: var(--paper-dialog-background-color, --primary-background-color);
+  color: var(--paper-dialog-color, --primary-text-color);
+
+  @apply(--layout-scroll);
+  @apply(--paper-font-body1);
+  @apply(--shadow-elevation-16dp);
+  @apply(--paper-dialog);
+}
+
+:host > ::content > * {
+  margin-top: 20px;
+  padding: 0 24px;
+}
+
+:host > ::content > .no-padding {
+  padding: 0;
+};
+
+:host > ::content > *:first-child {
+  margin-top: 24px;
+}
+
+:host > ::content > *:last-child {
+  margin-bottom: 24px;
+}
+
+:host > ::content h2 {
+  position: relative;
+  margin: 0;
+  @apply(--paper-font-title);
+
+  @apply(--paper-dialog-title);
+}
+
+:host > ::content .buttons {
+  position: relative;
+  padding: 8px 8px 8px 24px;
+  margin: 0;
+
+  color: var(--paper-dialog-button-color, --default-primary-color);
+
+  @apply(--layout-horizontal);
+  @apply(--layout-end-justified);
+}

data/app/assets/components/paper-dialog-scrollable/hero.svg

@@ -0,0 +1,69 @@
+<?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>
+		<polygon points="0,124 0,126 2,126 		"/>
+		<polygon points="0,111.6 0,114.4 11.6,126 14.4,126 		"/>
+		<polygon points="0,99.1 0,101.9 24.1,126 26.9,126 		"/>
+		<polygon points="0,86.6 0,89.5 36.5,126 39.4,126 		"/>
+		<polygon points="0,74.2 0,77 49,126 51.8,126 		"/>
+		<polygon points="0,61.7 0,64.5 61.5,126 64.3,126 		"/>
+		<polygon points="0,49.2 0,52.1 73.9,126 76.8,126 		"/>
+		<polygon points="0,36.8 0,39.6 86.4,126 89.2,126 		"/>
+		<polygon points="76.7,101 74,101 74,98.3 0,24.3 0,27.1 98.9,126 101.7,126 		"/>
+		<polygon points="74,88.7 74,85.8 0,11.8 0,14.7 		"/>
+		<polygon points="89.2,101 86.3,101 111.3,126 114.2,126 		"/>
+		<polygon points="101.6,101 98.8,101 123.8,126 126.6,126 		"/>
+		<polygon points="74,76.2 74,73.4 0.6,0 0,0 0,2.2 		"/>
+		<polygon points="114.1,101 111.3,101 136.3,126 139.1,126 		"/>
+		<polygon points="74,63.7 74,60.9 13.1,0 10.3,0 		"/>
+		<polygon points="74,51.3 74,48.4 25.6,0 22.7,0 		"/>
+		<polygon points="126.6,101 123.7,101 148.7,126 151.6,126 		"/>
+		<polygon points="74,38.8 74,36 38,0 35.2,0 		"/>
+		<polygon points="139,101 136.2,101 161.2,126 164,126 		"/>
+		<polygon points="74,26.3 74,25 75.5,25 50.5,0 47.7,0 		"/>
+		<polygon points="150,99.5 150,101 148.7,101 173.7,126 176.5,126 		"/>
+		<polygon points="150,87 150,89.9 186.1,126 189,126 		"/>
+		<polygon points="85.1,25 88,25 63,0 60.1,0 		"/>
+		<polygon points="150,74.6 150,77.4 198.6,126 201.4,126 		"/>
+		<polygon points="97.6,25 100.4,25 75.4,0 72.6,0 		"/>
+		<polygon points="150,62.1 150,64.9 211.1,126 213.9,126 		"/>
+		<polygon points="110.1,25 112.9,25 87.9,0 85.1,0 		"/>
+		<polygon points="150,49.7 150,52.5 223.5,126 225,126 225,124.7 		"/>
+		<polygon points="122.5,25 125.3,25 100.3,0 97.5,0 		"/>
+		<polygon points="112.8,0 110,0 135,25 137.8,25 		"/>
+		<polygon points="150,37.2 150,40 225,115 225,112.2 		"/>
+		<polygon points="125.3,0 122.5,0 147.5,25 150,25 150,27.5 225,102.5 225,99.7 		"/>
+		<polygon points="137.7,0 134.9,0 225,90.1 225,87.3 		"/>
+		<polygon points="150.2,0 147.4,0 225,77.6 225,74.8 		"/>
+		<polygon points="162.7,0 159.8,0 225,65.2 225,62.3 		"/>
+		<polygon points="175.1,0 172.3,0 225,52.7 225,49.9 		"/>
+		<polygon points="187.6,0 184.8,0 225,40.2 225,37.4 		"/>
+		<polygon points="200.1,0 197.2,0 225,27.8 225,24.9 		"/>
+		<polygon points="212.5,0 209.7,0 225,15.3 225,12.5 		"/>
+		<polygon points="225,0 222.2,0 225,2.8 225,0 		"/>
+	</g>
+	<path d="M151,102H73V24h78V102z M75,100h74V26H75V100z"/>
+	<rect x="82" y="53" width="26" height="2"/>
+	<rect x="116" y="53" width="26" height="2"/>
+	<rect x="82" y="62" width="26" height="2"/>
+	<rect x="82" y="72" width="26" height="2"/>
+	<rect x="116" y="72" width="26" height="2"/>
+	<rect x="82" y="42" width="26" height="2"/>
+	<circle cx="120" cy="63" r="4"/>
+	<circle cx="134" cy="63" r="4"/>
+	<rect x="116" y="85" width="22" height="5.5"/>
+	<g id="ic_x5F_add_x0D_">
+	</g>
+</g>
+<g id="Guides">
+</g>
+</svg>

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

@@ -0,0 +1,150 @@
+<!--
+@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
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
+<link rel="import" href="../paper-styles/paper-styles.html">
+
+<!--
+`paper-dialog-scrollable` implements a scrolling area used in a Material Design dialog. It shows
+a divider at the top and/or bottom indicating more content, depending on scroll position. Use this
+together with elements implementing `Polymer.PaperDialogBehavior`.
+
+    <paper-dialog-impl>
+      <h2>Header</h2>
+      <paper-dialog-scrollable>
+        Lorem ipsum...
+      </paper-dialog-scrollable>
+      <div class="buttons">
+        <paper-button>OK</paper-button>
+      </div>
+    </paper-dialog-impl>
+
+It shows a top divider after scrolling if it is not the first child in its parent container,
+indicating there is more content above. It shows a bottom divider if it is scrollable and it is not
+the last child in its parent container, indicating there is more content below. The bottom divider
+is hidden if it is scrolled to the bottom.
+
+@group Paper Elements
+@element paper-dialog-scrollable
+@demo demo/index.html
+@hero hero.svg
+-->
+
+<dom-module id="paper-dialog-scrollable">
+
+  <style>
+
+    :host {
+      display: block;
+      position: relative;
+    }
+
+    :host(.is-scrolled:not(:first-child))::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 1px;
+      background: var(--divider-color);
+    }
+
+    :host(.can-scroll:not(.scrolled-to-bottom):not(:last-child))::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 1px;
+      background: var(--divider-color);
+    }
+
+    .scrollable {
+      padding: 0 24px;
+
+      @apply(--layout-scroll);
+
+      @apply(--paper-dialog-scrollable);
+    }
+  </style>
+
+  <template>
+    <div id="scrollable" class="scrollable">
+      <content></content>
+    </div>
+  </template>
+
+</dom-module>
+
+<script>
+
+(function() {
+
+  Polymer({
+
+    is: 'paper-dialog-scrollable',
+
+    properties: {
+
+      /**
+       * The dialog element that implements `Polymer.PaperDialogBehavior` containing this element.
+       */
+      dialogElement: {
+        type: Object,
+        value: function() {
+          return this.parentNode;
+        }
+      }
+
+    },
+
+    listeners: {
+      'scrollable.scroll': '_onScroll',
+      'iron-resize': '_onIronResize'
+    },
+
+    /**
+     * Returns the scrolling element.
+     */
+    get scrollTarget() {
+      return this.$.scrollable;
+    },
+
+    attached: function() {
+      this.classList.add('no-padding');
+      // Set itself to the overlay sizing target
+      this.dialogElement.sizingTarget = this.scrollTarget;
+      // If the host is sized, fit the scrollable area to the container. Otherwise let it be
+      // its natural size.
+      requestAnimationFrame(function() {
+        if (this.offsetHeight > 0) {
+          this.$.scrollable.classList.add('fit');
+        }
+        this._scroll();
+      }.bind(this));
+    },
+
+    _scroll: function() {
+      this.toggleClass('is-scrolled', this.scrollTarget.scrollTop > 0);
+      this.toggleClass('can-scroll', this.scrollTarget.offsetHeight < this.scrollTarget.scrollHeight);
+      this.toggleClass('scrolled-to-bottom',
+        this.scrollTarget.scrollTop + this.scrollTarget.offsetHeight >= this.scrollTarget.scrollHeight);
+    },
+
+    _onScroll: function() {
+      this._scroll();
+    }
+
+  })
+
+})();
+
+</script>

data/app/assets/components/paper-dialog/hero.svg

@@ -0,0 +1,58 @@
+<?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>
+		<polygon points="0,124 0,126 2,126 		"/>
+		<polygon points="0,111.6 0,114.4 11.6,126 14.4,126 		"/>
+		<polygon points="0,99.1 0,101.9 24.1,126 26.9,126 		"/>
+		<polygon points="0,86.6 0,89.5 36.5,126 39.4,126 		"/>
+		<polygon points="0,74.2 0,77 49,126 51.8,126 		"/>
+		<polygon points="0,61.7 0,64.5 61.5,126 64.3,126 		"/>
+		<polygon points="0,49.2 0,52.1 73.9,126 76.8,126 		"/>
+		<polygon points="0,36.8 0,39.6 86.4,126 89.2,126 		"/>
+		<polygon points="0,24.3 0,27.1 98.9,126 101.7,126 		"/>
+		<polygon points="75.2,87 74,87 74,85.8 0,11.8 0,14.7 111.3,126 114.2,126 		"/>
+		<polygon points="87.6,87 84.8,87 123.8,126 126.6,126 		"/>
+		<polygon points="74,76.2 74,73.4 0.6,0 0,0 0,2.2 		"/>
+		<polygon points="74,63.7 74,60.9 13.1,0 10.3,0 		"/>
+		<polygon points="100.1,87 97.3,87 136.3,126 139.1,126 		"/>
+		<polygon points="112.6,87 109.7,87 148.7,126 151.6,126 		"/>
+		<polygon points="74,51.3 74,48.4 25.6,0 22.7,0 		"/>
+		<polygon points="125,87 122.2,87 161.2,126 164,126 		"/>
+		<polygon points="74.2,39 77,39 38,0 35.2,0 		"/>
+		<polygon points="86.7,39 89.5,39 50.5,0 47.7,0 		"/>
+		<polygon points="137.5,87 134.7,87 173.7,126 176.5,126 		"/>
+		<polygon points="150,87 147.1,87 186.1,126 189,126 		"/>
+		<polygon points="99.1,39 102,39 63,0 60.1,0 		"/>
+		<polygon points="150,74.6 150,77.4 198.6,126 201.4,126 		"/>
+		<polygon points="111.6,39 114.4,39 75.4,0 72.6,0 		"/>
+		<polygon points="150,62.1 150,64.9 211.1,126 213.9,126 		"/>
+		<polygon points="124.1,39 126.9,39 87.9,0 85.1,0 		"/>
+		<polygon points="100.3,0 97.5,0 136.5,39 139.3,39 		"/>
+		<polygon points="150,49.7 150,52.5 223.5,126 225,126 225,124.7 		"/>
+		<polygon points="112.8,0 110,0 149,39 150,39 150,40 225,115 225,112.2 		"/>
+		<polygon points="125.3,0 122.5,0 225,102.5 225,99.7 		"/>
+		<polygon points="137.7,0 134.9,0 225,90.1 225,87.3 		"/>
+		<polygon points="150.2,0 147.4,0 225,77.6 225,74.8 		"/>
+		<polygon points="162.7,0 159.8,0 225,65.2 225,62.3 		"/>
+		<polygon points="175.1,0 172.3,0 225,52.7 225,49.9 		"/>
+		<polygon points="187.6,0 184.8,0 225,40.2 225,37.4 		"/>
+		<polygon points="200.1,0 197.2,0 225,27.8 225,24.9 		"/>
+		<polygon points="212.5,0 209.7,0 225,15.3 225,12.5 		"/>
+		<polygon points="225,0 222.2,0 225,2.8 225,0 		"/>
+	</g>
+	<g id="ic_x5F_add_x0D_">
+	</g>
+	<path d="M151,88H73V38h78V88z M75,86h74V40H75V86z"/>
+</g>
+<g id="Guides">
+</g>
+</svg>

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

@@ -0,0 +1,122 @@
+<!--
+@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
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../neon-animation/neon-animation-runner-behavior.html">
+<link rel="import" href="../paper-dialog-behavior/paper-dialog-behavior.html">
+<link rel="import" href="../paper-styles/paper-styles.html">
+
+<!--
+`<paper-dialog>` is a dialog with Material Design styling and optional animations when it is
+opened or closed. It provides styles for a header, content area, and an action area for buttons.
+You can use the `<paper-dialog-scrollable` element (in its own repository) if you need a scrolling
+content area. See `Polymer.PaperDialogBehavior` for specifics.
+
+For example, the following code implements a dialog with a header, scrolling content area and
+buttons.
+
+    <paper-dialog>
+      <h2>Header</h2>
+      <paper-dialog-scrollable>
+        Lorem ipsum...
+      </paper-dialog-scrollable>
+      <div class="buttons">
+        <paper-button dialog-dismiss>Cancel</paper-button>
+        <paper-button dialog-confirm>Accept</paper-button>
+      </div>
+    </paper-dialog>
+
+### Styling
+
+See the docs for `Polymer.PaperDialogBehavior` for the custom properties available for styling
+this element.
+
+### Animations
+
+Set the `entry-animation` and/or `exit-animation` attributes to add an animation when the dialog
+is opened or closed. See the documentation in
+[PolymerElements/neon-animation](https://github.com/PolymerElements/neon-animation) for more info.
+
+For example:
+
+    <link rel="import" href="components/neon-animation/animations/scale-up-animation.html">
+    <link rel="import" href="components/neon-animation/animations/fade-out-animation.html">
+
+    <paper-dialog entry-animation="scale-up-animation"
+                  exit-animation="fade-out-animation">
+      <h2>Header</h2>
+      <div>Dialog body</div>
+    </paper-dialog>
+
+### Accessibility
+
+See the docs for `Polymer.PaperDialogBehavior` for accessibility features implemented by this
+element.
+
+@group Paper Elements
+@element paper-dialog
+@hero hero.svg
+@demo demo/index.html
+-->
+
+<dom-module id="paper-dialog">
+
+  <link rel="import" type="css" href="../paper-dialog-behavior/paper-dialog-common.css">
+
+  <template>
+    <content></content>
+  </template>
+
+</dom-module>
+
+<script>
+
+(function() {
+
+  Polymer({
+
+    is: 'paper-dialog',
+
+    behaviors: [
+      Polymer.PaperDialogBehavior,
+      Polymer.NeonAnimationRunnerBehavior
+    ],
+
+    listeners: {
+      'neon-animation-finish': '_onNeonAnimationFinish'
+    },
+
+    _renderOpened: function() {
+      if (this.withBackdrop) {
+        this.backdropElement.open();
+      }
+      this.playAnimation('entry');
+    },
+
+    _renderClosed: function() {
+      if (this.withBackdrop) {
+        this.backdropElement.close();
+      }
+      this.playAnimation('exit');
+    },
+
+    _onNeonAnimationFinish: function() {
+      if (this.opened) {
+        this._finishRenderOpened();
+      } else {
+        this._finishRenderClosed();
+      }
+    }
+
+  });
+
+})();
+
+</script>