RubyGems - polymer-core-rails - Versions diffs - 0.1.0 - Mend

polymer-core-rails 0.1.0

Files changed (83) hide show

data/app/assets/components/core-field/core-field.html.erb ADDED Viewed

@@ -0,0 +1,32 @@
+<!--
+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
+-->
+<!--
+The `core-field` supplies a horizontal layout, anticipating an input.
+Example:
+    <core-field>
+      <core-icon icon="menu" size="48"></core-icon>
+      <label>I'm a label!</label>
+      <input placeholder="I have a label" flex>
+    </core-field>
+@group Polymer Core Elements
+@element core-field
+@homepage github.io
+-->
+<polymer-element name="core-field" noscript center horizontal layout>
+<template>
+  <%= stylesheet_link_tag "core-field/core-field" %>
+  <content select="*"></content>
+</template>
+</polymer-element>

data/app/assets/components/core-header-panel/core-header-panel.css ADDED Viewed

@@ -0,0 +1,75 @@
+/*
+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 {
+  display: block;
+  position: relative;
+}
+#outerContainer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+}
+#mainPanel {
+  position: relative;
+}
+#mainContainer {
+  position: relative;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+}
+#dropShadow {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 6px;
+  box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);
+}
+#dropShadow.hidden {
+  display: none;
+}
+/*
+mode: scroll
+*/
+:host([mode=scroll]) #mainContainer {
+  overflow: visible;
+}
+/*
+mode: cover
+*/
+:host([mode=cover]) #mainPanel {
+  position: static;
+}
+:host([mode=cover]) #mainContainer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+:host([mode=cover]) #dropShadow {
+  position: static;
+  width: 100%;
+}

data/app/assets/components/core-header-panel/core-header-panel.html.erb ADDED Viewed

@@ -0,0 +1,196 @@
+<!--
+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
+-->
+<!--
+`core-header-panel` contains a header section and a content panel section.
+__Important:__ The `core-header-panel` will not display if its parent does not have a height.
+Using [layout attributes](http://www.polymer-project.org/docs/polymer/layout-attrs.html), you can easily make the `core-header-panel` fill the screen
+    <body fullbleed layout vertical>
+      <core-header-panel flex>
+        <core-toolbar>
+          <div>Hello World!</div>
+        </core-toolbar>
+      </core-header-panel>
+    </body>
+or, if you would prefer to do it in CSS, just give `html`, `body`, and `core-header-panel` a height of 100%:
+    html, body {
+      height: 100%;
+      margin: 0;
+    }
+    core-header-panel {
+      height: 100%;
+    }
+Special
+support is provided for scrolling modes when one uses a core-toolbar or equivalent
+for the header section.
+Example:
+    <core-header-panel>
+      <core-toolbar>Header</core-toolbar>
+      <div>Content goes here...</div>
+    </core-header-panel>
+If you want to use other than `core-toolbar` for the header, add
+`core-header` class to that element.
+Example:
+    <core-header-panel>
+      <div class="core-header">Header</div>
+      <div>Content goes here...</div>
+    </core-header-panel>
+Use `mode` to control the header and scrolling behavior.
+@group Polymer Core Elements
+@element core-header-panel
+@homepage github.io
+-->
+<polymer-element name="core-header-panel">
+<template>
+  <%= stylesheet_link_tag "core-header-panel/core-header-panel" %>
+  <div id="outerContainer" on-scroll="{{scroll}}" vertical layout>
+    <content id="headerContent" select="core-toolbar, .core-header"></content>
+    <div id="mainPanel" flex vertical layout>
+      <div id="mainContainer" flex?="{{mode !== 'cover'}}" on-scroll="{{scroll}}">
+        <content id="mainContent" select="*"></content>
+      </div>
+      <div id="dropShadow"></div>
+    </div>
+  </div>
+</template>
+<script>
+  Polymer('core-header-panel', {
+    publish: {
+      /**
+       * Controls header and scrolling behavior. Options are
+       * `standard`, `seamed`, `waterfall`, `waterfall-tall`,
+       * `waterfall-medium-tall`, `scroll` and `cover`.
+       * Default is `standard`.
+       *
+       * `standard`: The header is a step above the panel. The header will consume the
+       * panel at the point of entry, preventing it from passing through to the
+       * opposite side.
+       *
+       * `seamed`: The header is presented as seamed with the panel.
+       *
+       * `waterfall`: Similar to standard mode, but header is initially presented as
+       * seamed with panel, but then separates to form the step.
+       *
+       * `waterfall-tall`: The header is initially taller (`tall` class is added to
+       * the header).  As the user scrolls, the header separates (forming an edge)
+       * while condensing (`tall` class is removed from the header).
+       *
+       * `scroll`: The header keeps its seam with the panel, and is pushed off screen.
+       *
+       * `cover`: The panel covers the whole `core-header-panel` including the
+       * header. This allows user to style the panel in such a way that the panel is
+       * partially covering the header.
+       *
+       *     <style>
+       *       core-header-panel[mode=cover]::shadow #mainContainer {
+       *         left: 80px;
+       *       }
+       *       .content {
+       *         margin: 60px 60px 60px 0;
+       *       }
+       *     </style>
+       *
+       *     <core-header-panel mode="cover">
+       *       <core-appbar class="tall">
+       *         <core-icon-button icon="menu"></core-icon-button>
+       *       </core-appbar>
+       *       <div class="content"></div>
+       *     </core-header-panel>
+       *
+       * @attribute mode
+       * @type string
+       * @default ''
+       */
+      mode: {value: '', reflect: true},
+      /**
+       * The class used in waterfall-tall mode.  Change this if the header
+       * accepts a different class for toggling height, e.g. "medium-tall"
+       *
+       * @attribute tallClass
+       * @type string
+       * @default 'tall'
+       */
+      tallClass: 'tall',
+      /**
+       * If true, the drop-shadow is always shown no matter what mode is set to.
+       *
+       * @attribute shadow
+       * @type boolean
+       * @default false
+       */
+      shadow: false,
+    },
+    domReady: function() {
+      this.async('scroll');
+    },
+    modeChanged: function() {
+      this.scroll();
+    },
+    get header() {
+      return this.$.headerContent.getDistributedNodes()[0];
+    },
+    scroll: function() {
+      var shadowMode = {'waterfall': 1, 'waterfall-tall': 1};
+      var noShadow = {'seamed': 1, 'cover': 1, 'scroll': 1};
+      var tallMode = {'waterfall-tall': 1};
+      var main = this.$.mainContainer;
+      var header = this.header;
+      var sTop = main.scrollTop;
+      var atTop = sTop === 0;
+      if (header) {
+        this.$.dropShadow.classList.toggle('hidden', !this.shadow &&
+            (atTop && shadowMode[this.mode] || noShadow[this.mode]));
+        if (tallMode[this.mode]) {
+          header.classList.toggle(this.tallClass, atTop);
+        }
+        header.classList.toggle('animate', tallMode[this.mode]);
+      }
+    }
+  });
+</script>
+</polymer-element>

data/app/assets/components/core-icon/core-icon.css ADDED Viewed

@@ -0,0 +1,25 @@
+/* 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 /deep/ core-icon {
+  display: inline-block;
+  vertical-align: middle;
+  background-repeat: no-repeat;
+  fill: currentcolor;
+}
+html /deep/ core-icon[size=""] {
+  position: relative;
+}
+html /deep/ core-icon[size=""] > svg {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}

data/app/assets/components/core-icon/core-icon.html.erb ADDED Viewed

@@ -0,0 +1,126 @@
+<!--
+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
+-->
+<!--
+The `core-icon` element displays an icon using CSS background image. By default an icon renders as 24px square.
+Example using src:
+    <core-icon src="star.png"></core-icon>
+Example setting size to 32px x 32px:
+    <core-icon src="big_star.png" size="32"></core-icon>
+Example using icon from default iconset:
+    <core-icon icon="menu"></core-icon>
+Example using icon `cherry` from custom iconset `fruit`:
+    <core-icon icon="fruit:cherry"></core-icon>
+See [core-iconset](#core-iconset) and [core-iconset-svg](#core-iconset-svg) for more information about
+how to use a custom iconset.
+See [core-icons](http://www.polymer-project.org/components/core-icons/demo.html) for the default set of icons. To use the default set of icons you'll need to include an import for `core-icons.html`.
+@group Polymer Core Elements
+@element core-icon
+@homepage polymer.github.io
+-->
+<%= html_import_tag "core-iconset/core-iconset" %>
+<%= stylesheet_link_tag "core-icon/core-icon"%>
+<polymer-element name="core-icon" attributes="src size icon">
+<script>
+(function() {
+  // mono-state
+  var meta;
+  Polymer('core-icon', {
+    /**
+     * The URL of an image for the icon. If the src property is specified,
+     * the icon property should not be.
+     *
+     * @attribute src
+     * @type string
+     * @default ''
+     */
+    src: '',
+    /**
+     * Specifies the size of the icon in pixel units.
+     *
+     * @attribute size
+     * @type string
+     * @default 24
+     */
+    size: 24,
+    /**
+     * Specifies the icon name or index in the set of icons available in
+     * the icon's icon set. If the icon property is specified,
+     * the src property should not be.
+     *
+     * @attribute icon
+     * @type string
+     * @default ''
+     */
+    icon: '',
+    observe: {
+      'size icon': 'updateIcon'
+    },
+    defaultIconset: 'icons',
+    ready: function() {
+      if (!meta) {
+        meta = document.createElement('core-iconset');
+      }
+      this.updateIcon();
+    },
+    srcChanged: function() {
+      this.style.backgroundImage = 'url(' + this.src + ')';
+      this.style.backgroundPosition = 'center';
+      this.style.backgroundSize = this.size + 'px ' + this.size + 'px';
+    },
+    getIconset: function(name) {
+      return meta.byId(name || this.defaultIconset);
+    },
+    updateIcon: function() {
+      if (this.size) {
+        this.style.width = this.style.height = this.size + 'px';
+      }
+      if (this.icon) {
+        var parts = String(this.icon).split(':');
+        var icon = parts.pop();
+        if (icon) {
+          var set = this.getIconset(parts.pop());
+          if (set) {
+            set.applyIcon(this, icon, this.size / set.iconSize);
+          }
+        }
+      }
+    }
+  });
+})();
+</script>
+</polymer-element>

data/app/assets/components/core-icon-button/core-icon-button.css ADDED Viewed

@@ -0,0 +1,70 @@
+/*
+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
+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
+*/
+:host {
+  display: inline-block;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  width: 38px;
+  height: 38px;
+  background-image: none;
+  border-radius: 2px;
+  padding: 7px;
+  margin: 2px;
+  vertical-align: middle;
+  font-size: 1rem;
+  cursor: pointer;
+}
+:host([disabled]) {
+  opacity: 0.6;
+  pointer-events: none;
+}
+:host(.outline) {
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
+}
+:host(:hover:not([disabled])) {
+  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.1);
+}
+:host(.selected:not([disabled])) {
+  background-color: rgba(0, 0, 0, 0.05);
+  box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.12);
+}
+:host(:active:not([disabled]), .selected:active:not([disabled])) {
+  background-color: rgba(0, 0, 0, 0.05);
+  box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.12);
+}
+:host(.core-dark-theme.outline) {
+  background-color: rgba(200, 200, 200, 0.05);
+  box-shadow: 0 0 0 1px rgba(200, 200, 200, 0.1);
+}
+:host(.core-dark-theme:hover) {
+  background-color: rgba(200, 200, 200, 0.05);
+  box-shadow: 0 1px 0 0 rgba(200, 200, 200, 0.12), 0 0 0 1px rgba(200, 200, 200, 0.1);
+}
+:host(.core-dark-theme.selected) {
+  background-color: rgba(220, 220, 220, 0.05);
+  box-shadow: inset 0 1px 0 0 rgba(200, 200, 200, 0.05), 0 0 0 1px rgba(200, 200, 200, 0.12);
+}
+:host(.core-dark-theme:active, .core-dark-theme.selected:active) {
+  background-color: rgba(200, 200, 200, 0.05);
+  box-shadow: inset 0 1px 0 0 rgba(200, 200, 200, 0.1), 0 0 0 1px rgba(200, 200, 200, 0.12);
+}
+core-icon {
+  pointer-events: none;
+}

data/app/assets/components/core-icon-button/core-icon-button.html.erb ADDED Viewed

@@ -0,0 +1,83 @@
+<!--
+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
+-->
+<!--
+`core-icon-button` is an icon with button behaviors.
+    <core-icon-button src="star.png"></core-icon-button>
+`core-icon-button` includes a default icon set.  Use `icon` to specify
+which icon from the icon set to use.
+    <core-icon-button icon="menu"></core-icon-button>
+See [`core-iconset`](#core-iconset) for more information about
+how to use a custom icon set.
+@group Polymer Core Elements
+@element core-icon-button
+@homepage github.io
+-->
+<%= html_import_tag "core-icon/core-icon" %>
+<%= html_import_tag "core-icons/core-icons" %>
+<polymer-element name="core-icon-button" attributes="src icon active">
+  <template>
+    <%= stylesheet_link_tag "core-icon-button/core-icon-button"%>
+    <core-icon src="{{src}}" icon="{{icon}}"><content></content></core-icon>
+  </template>
+  <script>
+    Polymer('core-icon-button', {
+      /**
+       * The URL of an image for the icon.  Should not use `icon` property
+       * if you are using this property.
+       *
+       * @attribute src
+       * @type string
+       * @default ''
+       */
+      src: '',
+      /**
+       * If true, border is placed around the button to indicate it's
+       * active state.
+       *
+       * @attribute active
+       * @type boolean
+       * @default false
+       */
+      active: false,
+      /**
+       * Specifies the icon name or index in the set of icons available in
+       * the icon set.  Should not use `src` property if you are using this
+       * property.
+       *
+       * @attribute icon
+       * @type string
+       * @default ''
+       */
+      icon: '',
+      activeChanged: function() {
+        this.classList.toggle('selected', this.active);
+      }
+    });
+  </script>
+</polymer-element>

data/app/assets/components/core-icons/core-icons.html ADDED Viewed

@@ -0,0 +1,14 @@
+<!--
+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
+-->
+<!-- import core-icon for convenience
+  TODO(sorvell): we'd rather do this in core-iconset but we can't until
+  crbug.com/373461 is addressed
+-->
+<%= html_import_tag "core-icons/core-icons" %>
+<%= html_import_tag "core-iconset-svg/core-iconset-svg" %>