RubyGems - polymer-paper-rails - Versions diffs - 0.1.0 → 0.2.0 - Mend

polymer-paper-rails 0.1.0 → 0.2.0

Files changed (558) hide show

data/app/assets/components/core-input/demo.html ADDED Viewed

@@ -0,0 +1,142 @@
+<!--
+    @license
+    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
+-->
+<!doctype html>
+<html>
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+  <title>core-input</title>
+  <script src="../platform/platform.js"></script>
+  <link href="core-input.html" rel="import">
+  <style>
+    body {
+      padding: 24px;
+      margin: 0;
+      -webkit-transform: translateZ(0);
+      font-family: sans-serif;
+      font-size: 16px;
+    }
+    section {
+      margin: 2em 0;
+    }
+    aside {
+      background: #ccc;
+      padding: 1em;
+      margin-right: 2em;
+      font-size: 12px;
+      width: 250px;
+      border-radius: 3px;
+    }
+    core-input {
+      margin: 1em;
+    }
+    core-input[multiline] {
+      border: 1px dotted #ccc;
+    }
+    core-input.sized {
+      width: 500px;
+      height: 200px;
+    }
+    .validation core-input,
+    .validation core-input[multiline] {
+      border: solid 1px lime;
+    }
+    .validation core-input.invalid,
+    .validation core-input[multiline].invalid {
+      border: solid 1px red;
+    }
+  </style>
+</head>
+<body>
+  <section horizontal start layout>
+    <aside>A single-line text input. See console for committed values.</aside>
+    <core-input id="single" placeholder="Type something..."></core-input>
+    <script>
+      var single = document.getElementById('single');
+      single.addEventListener('change', function() {
+        console.log('single: value committed: ', single.value);
+      });
+    </script>
+  </section>
+  <section horizontal start layout>
+    <aside>The <code>type</code> attribute is supported. This is a single-line input with <code>type = password</code>. See console for committed values.</aside>
+    <core-input id="password" type="password" placeholder="Enter password..."></core-input>
+    <script>
+      var password = document.getElementById('password');
+      password.addEventListener('change', function() {
+        console.log('password: value committed: ', password.value);
+      });
+    </script>
+  </section>
+  <section horizontal start layout>
+    <aside>A multi-line text input with 3 rows. The input is normally unstyled but here is styled with a dotted border to show its size.</aside>
+    <core-input multiline rows="3" placeholder="Type many lines here..."></core-input>
+  </section>
+  <section horizontal start layout>
+    <aside>A multi-line text input sized with CSS. The input is normally unstyled but here is styled with a dotted border to show its size.</aside>
+    <core-input class="sized" multiline rows="fit" placeholder="This input is 500px * 200px"></core-input>
+  </section>
+  <section horizontal start layout>
+    <aside>Inputs with the <code>tabindex</code> attribute.</aside>
+    <div>
+      <core-input tabindex="2" placeholder="tabindex = 2"></core-input>
+      <br>
+      <core-input tabindex="3" placeholder="tabindex = 3"></core-input>
+      <br>
+      <core-input tabindex="1" placeholder="tabindex = 1"></core-input>
+    </div>
+  </section>
+  <section horizontal start layout>
+    <aside>Validation examples. The border color reflects the current validation state. See console for validation events.</aside>
+    <div class="validation">
+      <core-input id="validate-number" type="number" placeholder="type = number"></core-input>
+      <br>
+      <core-input id="validate-email" type="email" placeholder="type = email"></core-input>
+      <br>
+      <core-input id="validate-required" required placeholder="required"></core-input>
+      <br>
+      <core-input id="validate-ml-required" multiline rows="3" required placeholder="required (multiline)"></core-input>
+      <br>
+      <core-input id="validate-pattern" pattern="a*bc" placeholder="with pattern = a*bc"></core-input>
+      <br>
+      <core-input id="validate-min-max" type="number" min="5" max="10" placeholder="type = number, min = 5, max = 10"></core-input>
+      <br>
+      <core-input id="validate-step" type="number" step="2" placeholder="type = number, step = 2"></core-input>
+    </div>
+    <script>
+      document.querySelector('.validation').addEventListener('input-invalid', function(e, value, s) {
+        console.log(e.target.id, 'invalid, inputValue:', e.detail.value, e.target.validity);
+      });
+      document.querySelector('.validation').addEventListener('input-valid', function(e, value, s) {
+        console.log(e.target.id, 'valid, inputValue:', e.detail.value, e.target.validity);
+      });
+    </script>
+  </section>
+</body>

data/app/assets/components/core-input/index.html ADDED Viewed

@@ -0,0 +1,22 @@
+<!doctype html>
+<!--
+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
+-->
+<html>
+<head>
+  <script src="../platform/platform.js"></script>
+  <link rel="import" href="../core-component-page/core-component-page.html">
+</head>
+<body unresolved>
+  <core-component-page></core-component-page>
+</body>
+</html>

data/app/assets/components/core-input/metadata.html ADDED Viewed

@@ -0,0 +1,20 @@
+<!--
+    @license
+    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
+-->
+<x-meta id="core-input" label="Input" group="Core" isEditor>
+  <template>
+    <core-input placeholder="Type something..." style="padding: 15px;"></core-input>
+  </template>
+  <template id="imports">
+    <link rel="import" href="core-input.html">
+  </template>
+</x-meta>

data/app/assets/components/core-item/README.md ADDED Viewed

@@ -0,0 +1,4 @@
+core-item
+=========
+See the [component page](http://polymer-project.org/docs/elements/core-elements.html#core-item) for more information.

data/app/assets/components/core-item/bower.json ADDED Viewed

@@ -0,0 +1,8 @@
+{
+  "name": "core-item",
+  "private": true,
+  "dependencies": {
+    "core-icon": "Polymer/core-icon#>=0.4.0 <1.0.0",
+    "core-icons": "Polymer/core-icons#>=0.4.0 <1.0.0"
+  }
+}

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

@@ -0,0 +1,44 @@
+/*
+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-item {
+  display: block;
+  position: relative;
+  min-height: 40px;
+  white-space: nowrap;
+}
+html /deep/ core-item.font-scalable {
+  min-height: 2.5em;
+}
+html /deep/ core-item.core-selected {
+  font-weight: bold;
+}
+html /deep/ core-item::shadow core-icon {
+  margin: 0 16px 0 4px;
+}
+html /deep/ core-item.font-scalable::shadow core-icon {
+  margin: 0 1em 0 0.25em;
+  height: 1.5em;
+  width: 1.5em;
+}
+html /deep/ core-item::shadow ::content > a {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  /* IE10 styling to ensure link is clickable. Cannot be completely
+  transparent or minifiers change it to `transparent` which does not work. */
+  background-color: rgba(0, 0, 0, 0.000001);
+}

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

@@ -0,0 +1,74 @@
+<!--
+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-item` is a simple line-item object: a label and/or an icon that can also
+act as a link.
+Example:
+    <core-item icon="settings" label="Settings"></core-item>
+To use as a link, put &lt;a&gt; element in the item.
+Example:
+    <core-item icon="settings" label="Settings">
+      <a href="#settings" target="_self"></a>
+    </core-item>
+@group Polymer Core Elements
+@element core-item
+@homepage github.io
+-->
+<link rel="import" href="../core-icon/core-icon.html">
+<link rel="stylesheet" href="core-item.css" shim-shadowdom>
+<polymer-element name="core-item" attributes="label icon src" horizontal center layout>
+<template>
+  <core-icon src="{{src}}" icon="{{icon}}" hidden?="{{!src && !icon}}"></core-icon>
+  <div id="label">{{label}}</div>
+  <content></content>
+</template>
+<script>
+  Polymer('core-item', {
+    /**
+     * The URL of an image for the icon.
+     *
+     * @attribute src
+     * @type string
+     * @default ''
+     */
+    /**
+     * Specifies the icon from the Polymer icon set.
+     *
+     * @attribute icon
+     * @type string
+     * @default ''
+     */
+    /**
+     * Specifies the label for the menu item.
+     *
+     * @attribute label
+     * @type string
+     * @default ''
+     */
+  });
+</script>
+</polymer-element>

data/app/assets/components/core-item/demo.html ADDED Viewed

@@ -0,0 +1,92 @@
+<!--
+    @license
+    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
+-->
+<!doctype html>
+<html>
+<head>
+  <title>core-item</title>
+  <script src="../platform/platform.js"></script>
+  <link rel="import" href="../core-icons/core-icons.html">
+  <link rel="import" href="core-item.html">
+  <style>
+    body {
+      font-family: sans-serif;
+      font-size: 16px;
+      margin: 20px;
+    }
+    core-item {
+      width: 300px;
+    }
+    core-item.big {
+      font-size: 24px;
+    }
+    core-item.small {
+      font-size: 12px;
+    }
+    core-item.contact-item {
+      height: 50px;
+      background-color: #efefef;
+      border: 1px solid #ddd;
+    }
+    core-item.contact-item .name {
+      font-size: 1.125em;
+    }
+    core-item.contact-item .address {
+      font-size: 0.75em;
+    }
+  </style>
+</head>
+<body unresolved>
+    <h2>items with icon and label:</h2>
+    <core-item icon="settings" label="Settings"></core-item>
+    <core-item icon="account-box" label="Account"></core-item>
+    <h2>items with label only:</h2>
+    <core-item label="Settings"></core-item>
+    <core-item label="Account"></core-item>
+    <h2>links (via &lt;a&gt;):</h2>
+    <core-item icon="settings" label="Settings"><a href="#settings" target="_self"></a></core-item>
+    <core-item icon="account-box" label="Account"><a href="#account" target="_self"></a></core-item>
+    <h2>items sized with CSS:</h2>
+    <core-item icon="settings" label="Settings" class="font-scalable big"></core-item>
+    <core-item icon="account-box" label="Account" class="font-scalable big"></core-item>
+    <core-item icon="settings" label="Settings" class="font-scalable small"></core-item>
+    <core-item icon="account-box" label="Account" class="font-scalable small"></core-item>
+    <h2>custom item:</h2>
+    <core-item icon="account-circle" class="contact-item">
+      <div flex>
+        <div class="name">John Doe</div>
+        <div class="address">123 A Street, San Francisco, CA</div>
+      </div>
+      <core-icon icon="more-vert"></core-icon>
+    </core-item>
+</body>
+</html>

data/app/assets/components/core-item/index.html ADDED Viewed

@@ -0,0 +1,22 @@
+<!doctype html>
+<!--
+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
+-->
+<html>
+<head>
+  <script src="../platform/platform.js"></script>
+  <link rel="import" href="../core-component-page/core-component-page.html">
+</head>
+<body unresolved>
+  <core-component-page></core-component-page>
+</body>
+</html>

data/app/assets/components/core-item/metadata.html ADDED Viewed

@@ -0,0 +1,24 @@
+<!--
+    @license
+    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
+-->
+<x-meta id="core-item" label="Item" group="Core">
+  <template>
+    <core-item icon="settings" label="Item"></core-item>
+  </template>
+  <template id="imports">
+    <link rel="import" href="core-item.html">
+  </template>
+</x-meta>