polymer-paper-rails 0.2.0 → 0.2.5

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

@@ -24,4 +24,4 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 </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>
+<paper-dialog-transition id="paper-dialog-transition-center" transitionType="center"></paper-dialog-transition>

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

@@ -8,169 +8,94 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 -->
 
 <!--
-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.
+Material Design: <a href="http://www.google.com/design/spec/components/dialogs.html">Dialogs</a>
 
-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.
+`paper-dialog` is an overlay with a drop shadow.
 
 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 heading="Dialog Title">
+      <p>Some content</p>
     </paper-dialog>
 
-#### Transitions
+Styling
+-------
+
+Because a `paper-dialog` is `layered` by default, you need to use the `/deep/`
+combinator to style all instances of the `paper-dialog`. Style the position,
+colors and other inherited properties of the dialog using the
+`html /deep/ paper-dialog` selector. Use the `html /deep/ paper-dialog::shadow #scroller` selector to size the dialog. Note that if you provided actions, the height
+of the actions will be added to the height of the dialog.
 
-`<paper-dialog>` can be used with `<paper-transition>` to transition the overlay open and close.
+    html /deep/ paper-dialog {
+        color: green;
+    }
 
-To use a transition, import `paper-dialog-transition.html` alongside paper-dialog:
+    html /deep/ paper-dialog::shadow #scroller {
+        height: 300px;
+        width: 300px;
+    }
 
-    <link rel="import" href="paper-dialog/paper-dialog-transition.html">
+Transitions
+-----------
 
-Then set the `transition` attribute:
+You can use transitions provided by `core-transition` with this element.
+
+    <paper-dialog transition="core-transition-center">
+      <p>Some content</p>
+    </paper-dialog>
 
-    <paper-dialog heading="Title for dialog" transition="paper-dialog-transition-center">
+Accessibility
+-------------
 
-    <paper-dialog heading="Title for dialog" transition="paper-dialog-transition-bottom">
+By default, the `aria-label` will be set to the value of the `heading` attribute.
 
 @group Paper Elements
 @element paper-dialog
+@extends paper-dialog-base
 @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
+@status unstable
 -->
 <link href="../polymer/polymer.html" rel="import">
-<link href="../core-overlay/core-overlay.html" rel="import">
 <link href="../paper-shadow/paper-shadow.html" rel="import">
 
-<polymer-element name="paper-dialog" attributes="opened heading transition autoCloseDisabled backdrop layered closeSelector" role="dialog">
-
-  <template>
-
-    <link href="paper-dialog.css" rel="stylesheet">
-
-    <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>
+<link href="paper-dialog-base.html" rel="import">
+
+<polymer-element name="paper-dialog" extends="paper-dialog-base" role="dialog" noscript>
+
+<template>
+
+  <style>
+    :host {
+      background: #fff;
+      color: rgba(0, 0, 0, 0.87);
+      margin: 32px;
+      overflow: visible !important;
+    }
+
+    h1 {
+      font-size: 20px;
+    }
+
+    #scroller {
+      overflow: auto;
+      box-sizing: border-box;
+      padding: 24px;
+    }
+  </style>
+
+  <paper-shadow z="3" fit></paper-shadow>
+
+  <!-- need this because the host needs to be overflow: visible -->
+  <div id="scroller" relative>
+    <template if="{{heading}}">
+      <h1>{{heading}}</h1>
+    </template>
+
+    <content></content>
+  </div>
+
+</template>
 
 </polymer-element>

data/app/assets/components/{paper-dropdown/paper-dropdown.css → paper-dropdown-menu/paper-dropdown-menu.css}

@@ -41,8 +41,4 @@
 
 core-icon {
   margin: 0.3em 0 0.2em 0.25em;
-}
-
-#menu::shadow #menu {
-  margin: 8px 0;
-}
+}

data/app/assets/components/paper-dropdown-menu/paper-dropdown-menu.html

@@ -0,0 +1,181 @@
+<!--
+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-dropdown-menu` works together with `paper-dropdown` and `core-menu` to
+implement a drop-down menu. The currently selected item is displayed in the
+control. If no item is selected, the `label` is displayed instead.
+
+The child element with the class `dropdown` will be used as the drop-down
+menu. It should be a `paper-dropdown` or other overlay element. You should
+also provide a `core-selector` or other selector element, such as `core-menu`,
+in the drop-down. You should apply the class `menu` to the selector element.
+
+Example:
+
+    <paper-dropdown-menu label="Your favorite pastry">
+        <paper-dropdown class="dropdown">
+            <core-menu class="menu">
+                <paper-item>Croissant</paper-item>
+                <paper-item>Donut</paper-item>
+                <paper-item>Financier</paper-item>
+                <paper-item>Madeleine</paper-item>
+            </core-menu>
+        </paper-dropdown>
+    </paper-dropdown-menu>
+
+This example renders a drop-down menu with 4 options.
+
+@group Paper Elements
+@element paper-dropdown-menu
+@extends core-dropdown-base
+@status unstable
+@homepage github.io
+-->
+
+<!--
+Fired when an item's selection state is changed. This event is fired both
+when an item is selected or deselected. The `isSelected` detail property
+contains the selection state.
+
+@event core-select
+@param {Object} detail
+  @param {boolean} detail.isSelected true for selection and false for deselection
+  @param {Object} detail.item the item element
+-->
+<link href="../polymer/polymer.html" rel="import">
+
+<link href="../core-a11y-keys/core-a11y-keys.html" rel="import">
+<link href="../core-dropdown/core-dropdown-base.html" rel="import">
+<link href="../core-focusable/core-focusable.html" rel="import">
+<link href="../core-icon/core-icon.html" rel="import">
+<link href="../core-icons/core-icons.html" rel="import">
+<link href="../paper-shadow/paper-shadow.html" rel="import">
+
+<style shim-shadowdom>
+  html /deep/ #paper-dropdown-menu-dropdown {
+    margin: 12px;
+    overflow: visible;
+  }
+
+  html /deep/ #paper-dropdown-menu-dropdown #menu {
+    padding: 8px 0;
+    margin: 0;
+  }
+
+  html /deep/ #paper-dropdown-menu-dropdown .menu-container {
+    overflow: auto;
+    max-height: 100%;
+    max-width: 100%;
+  }
+</style>
+
+<polymer-element name="paper-dropdown-menu" extends="core-dropdown-base" relative layout inline horizontal center tabindex="0">
+<template>
+
+  <style>
+    :host {
+      -moz-user-select: none;
+      -ms-user-select: none;
+      -webkit-user-select: none;
+      user-select: none;
+      cursor: pointer;
+      padding: 0.5em 0 0.25em;
+      margin: 0.75em 0;
+      border-bottom: 1px solid #757575;
+      outline: none;
+    }
+
+    #label, #arrow {
+      color: #757575;
+    }
+
+    #label {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  </style>
+
+  <core-a11y-keys target="{{}}" keys="enter space" on-keys-pressed="{{toggleOverlay}}"></core-a11y-keys>
+
+  <div flex auto id="label">{{selectedItemLabel || label}}</div>
+  <core-icon id="arrow" icon="{{opened ? openedIcon : closedIcon}}"></core-icon>
+
+  <content></content>
+
+</template>
+<script>
+
+(function() {
+
+  var p = {
+
+    publish: {
+
+      /**
+       * A label for the control. The label is displayed if no item is selected.
+       *
+       * @attribute label
+       * @type string
+       * @default 'Select an item'
+       */
+      label: 'Select an item',
+
+      /**
+       * The icon to display when the drop-down is opened.
+       *
+       * @attribute openedIcon
+       * @type string
+       * @default 'arrow-drop-up'
+       */
+      openedIcon: 'arrow-drop-up',
+
+      /**
+       * The icon to display when the drop-down is closed.
+       *
+       * @attribute closedIcon
+       * @type string
+       * @default 'arrow-drop-down'
+       */
+      closedIcon: 'arrow-drop-down'
+
+    },
+
+    selectedItemLabel: '',
+
+    overlayListeners: {
+      'core-overlay-open': 'openAction',
+      'core-activate': 'activateAction',
+      'core-select': 'selectAction'
+    },
+
+    activateAction: function(e) {
+      this.opened = false;
+    },
+
+    selectAction: function(e) {
+      var detail = e.detail;
+      if (detail.isSelected) {
+        this.selectedItemLabel = detail.item.label || detail.item.textContent;
+      } else {
+        this.selectedItemLabel = '';
+      }
+    }
+
+  };
+
+  Polymer.mixin2(p, Polymer.CoreFocusable);
+  Polymer(p);
+
+})();
+
+</script>
+</polymer-element>

data/app/assets/components/{polymer/polymer.html → paper-dropdown/paper-dropdown-transition.css}

@@ -1,13 +1,15 @@
-<!--
-Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+/* 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
--->
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt */
 
-<link rel="import" href="layout.html">
+:host(.core-transition) #ripple,
+:host(.core-transition) #background {
+  opacity: 0;
+}
 
-<script src="polymer.js"></script>
-<!--<link rel="import" href="../polymer-dev/polymer.html">--> 
+:host(.core-transition) #scroller {
+  opacity: 0;
+}