RubyGems - polymer-iron-rails - Versions diffs - 1.0.0.pre.rc.1 - Mend

polymer-iron-rails 1.0.0.pre.rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (610) hide show

data/app/assets/components/paper-button/README.md ADDED Viewed

@@ -0,0 +1,45 @@
+paper-button
+============
+Material Design: <a href="http://www.google.com/design/spec/components/buttons.html">Buttons</a>
+`paper-button` is a button. When the user touches the button, a ripple effect emanates
+from the point of contact. It may be flat or raised. A raised button is styled with a
+shadow.
+Example:
+```html
+    <paper-button>flat button</paper-button>
+    <paper-button raised>raised button</paper-button>
+    <paper-button noink>No ripple effect</paper-button>
+```
+You may use custom DOM in the button body to create a variety of buttons. For example, to
+create a button with an icon and some text:
+```html
+    <paper-button>
+      <iron-icon icon="favorite"></iron-icon>
+      custom button content
+    </paper-button>
+```
+## Styling
+Style the button with CSS as you would a normal DOM element.
+```css
+    /* make #my-button green with yellow text */
+    #my-button {
+        background: green;
+        color: yellow;
+    }
+```
+By default, the ripple is the same color as the foreground at 25% opacity. You may
+customize the color using this selector:
+```css
+    /* make #my-button use a blue ripple instead of foreground color */
+    #my-button::shadow paper-ripple {
+      color: blue;
+    }
+```
+The opacity of the ripple is not customizable via CSS.

data/app/assets/components/paper-button/bower.json ADDED Viewed

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

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

@@ -0,0 +1,158 @@
+<!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>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+  <title>paper-button demo</title>
+  <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="../../iron-icons/iron-icons.html">
+  <link rel="import" href="../paper-button.html">
+  <style is="custom-style">
+    .horizontal-section {
+      min-width: 130px;
+    }
+    paper-button {
+      display: block;
+      margin-bottom: 24px;
+    }
+    paper-button.colorful {
+      color: #4285f4;
+    }
+    paper-button[raised].colorful {
+      background: #4285f4;
+      color: #fff;
+    }
+    paper-button[toggles] {
+      transition: background-color 0.3s;
+    }
+    paper-button[toggles][active] {
+      background-color: rgba(0, 0, 0, 0.25);
+    }
+    paper-button[toggles][active].colorful {
+      background-color: rgba(66, 133, 244, 0.25);
+    }
+    paper-button[toggles][active][raised].colorful {
+      background-color: rgba(66, 133, 244, 0.75);
+    }
+    paper-button.blue {
+      color: var(--paper-light-blue-500);
+      --paper-button-flat-focus-color: var(--paper-light-blue-50);
+    }
+    paper-button.blue:hover {
+      background: var(--paper-light-blue-50);
+    }
+    paper-button.red {
+      color: var(--paper-red-500);
+      --paper-button-flat-focus-color: var(--paper-red-50);
+    }
+    paper-button.red:hover {
+      background: var(--paper-red-50);
+    }
+    paper-button.green {
+      color: var(--paper-green-500);
+      --paper-button-flat-focus-color: var(--paper-green-50);
+    }
+    paper-button.green:hover {
+      background: var(--paper-green-50);
+    }
+    paper-button.orange {
+      color: var(--paper-orange-500);
+      --paper-button-flat-focus-color: var(--paper-orange-50);
+    }
+    paper-button.orange:hover {
+      background: var(--paper-orange-50);
+    }
+    paper-button.hover:hover {
+      background: #eee;
+    }
+    paper-button.ripple::shadow paper-ripple {
+      color: var(--paper-pink-a200);
+    }
+    paper-button.ripple paper-ripple {
+      color: var(--paper-pink-a200);
+    }
+  </style>
+</head>
+<body>
+  <div class="horizontal center-justified layout">
+    <div>
+      <h4>Flat</h4>
+      <div class="horizontal-section">
+        <paper-button tabindex="0">button</paper-button>
+        <paper-button tabindex="0" class="colorful">colorful</paper-button>
+        <paper-button tabindex="0" disabled>disabled</paper-button>
+        <paper-button tabindex="0" noink>noink</paper-button>
+        <paper-button tabindex="0" class="colorful custom"><iron-icon icon="check"></iron-icon>ok</paper-button>
+        <paper-button tabindex="0" class="custom"><iron-icon icon="clear"></iron-icon>cancel</paper-button>
+      </div>
+    </div>
+    <div>
+      <h4>Raised</h4>
+      <div class="horizontal-section">
+        <paper-button tabindex="0" raised>button</paper-button>
+        <paper-button tabindex="0" raised class="colorful">colorful</paper-button>
+        <paper-button tabindex="0" raised disabled>disabled</paper-button>
+        <paper-button tabindex="0" raised noink>noink</paper-button>
+        <paper-button tabindex="0" raised class="colorful custom"><iron-icon icon="check"></iron-icon>ok</paper-button>
+        <paper-button tabindex="0" raised class="custom"><iron-icon icon="clear"></iron-icon>cancel</paper-button>
+      </div>
+    </div>
+    <div>
+      <h4>Toggleable</h4>
+      <div class="horizontal-section">
+        <paper-button tabindex="0" toggles>button</paper-button>
+        <paper-button tabindex="0" toggles raised noink>noink</paper-button>
+        <paper-button tabindex="0" toggles active class="colorful">colorful</paper-button>
+        <paper-button tabindex="0" toggles raised active class="colorful">colorful</paper-button>
+        <paper-button tabindex="0" toggles class="colorful custom"><iron-icon icon="check"></iron-icon>ok</paper-button>
+        <paper-button tabindex="0" toggles class="custom"><iron-icon icon="clear"></iron-icon>cancel</paper-button>
+      </div>
+    </div>
+    <div>
+      <h4>Color</h4>
+      <div class="horizontal-section">
+        <paper-button tabindex="0" class="blue ripple">button</paper-button>
+        <paper-button tabindex="0" class="red ripple">noink</paper-button>
+        <paper-button tabindex="0" class="orange ripple">colorful</paper-button>
+        <paper-button tabindex="0" class="green ripple">colorful</paper-button>
+        <paper-button tabindex="0" class="red ripple"><iron-icon icon="check"></iron-icon>ok</paper-button>
+        <paper-button tabindex="0" class="blue ripple"><iron-icon icon="clear"></iron-icon>cancel</paper-button>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

data/app/assets/components/paper-button/index.html ADDED Viewed

@@ -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>

data/app/assets/components/paper-button/paper-button.html ADDED Viewed

@@ -0,0 +1,177 @@
+<!--
+@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
+-->
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../paper-material/paper-material.html">
+<link rel="import" href="../paper-ripple/paper-ripple.html">
+<link rel="import" href="../paper-behaviors/paper-button-behavior.html">
+<!--
+Material Design: <a href="http://www.google.com/design/spec/components/buttons.html">Buttons</a>
+`paper-button` is a button. When the user touches the button, a ripple effect emanates
+from the point of contact. It may be flat or raised. A raised button is styled with a
+shadow.
+Example:
+    <paper-button>flat button</paper-button>
+    <paper-button raised>raised button</paper-button>
+    <paper-button noink>No ripple effect</paper-button>
+You may use custom DOM in the button body to create a variety of buttons. For example, to
+create a button with an icon and some text:
+    <paper-button>
+      <core-icon icon="favorite"></core-icon>
+      custom button content
+    </paper-button>
+### Styling
+Style the button with CSS as you would a normal DOM element.
+    /* make #my-button green with yellow text */
+    #my-button {
+        background: green;
+        color: yellow;
+    }
+By default, the ripple is the same color as the foreground at 25% opacity. You may
+customize the color using this selector:
+    /* make #my-button use a blue ripple instead of foreground color */
+    #my-button::shadow paper-ripple {
+      color: blue;
+    }
+The opacity of the ripple is not customizable via CSS.
+The following custom properties and mixins are also available for styling:
+Custom property | Description | Default
+----------------|-------------|----------
+`--paper-button-flat-focus-color` | Background color of a focused flat button | `--paper-grey-200`
+`--paper-button` | Mixin applied to the button | `{}`
+`--paper-button-disabled` | Mixin applied to the disabled button | `{}`
+@demo demo/index.html
+-->
+<dom-module id="paper-button">
+  <style>
+    :host {
+      display: inline-block;
+      position: relative;
+      box-sizing: border-box;
+      min-width: 5.14em;
+      margin: 0 0.29em;
+      background: transparent;
+      text-align: center;
+      font: inherit;
+      text-transform: uppercase;
+      outline: none;
+      border-radius: 3px;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      -webkit-user-select: none;
+      user-select: none;
+      cursor: pointer;
+      z-index: 0;
+      @apply(--paper-button);
+    }
+    .keyboard-focus {
+      font-weight: bold;
+    }
+    :host([disabled]) {
+      background: #eaeaea;
+      color: #a8a8a8;
+      cursor: auto;
+      pointer-events: none;
+      @apply(--paper-button-disabled);
+    }
+    :host([noink]) paper-ripple {
+      display: none;
+    }
+    paper-material {
+      border-radius: inherit;
+    }
+    .content > ::content * {
+      text-transform: inherit;
+    }
+    .content {
+      padding: 0.7em 0.57em
+    }
+  </style>
+  <template>
+    <paper-ripple></paper-ripple>
+    <paper-material class$="[[_computeContentClass(receivedFocusFromKeyboard)]]" elevation="[[_elevation]]" animated>
+      <content></content>
+    </paper-material>
+  </template>
+</dom-module>
+<script>
+  Polymer({
+    is: 'paper-button',
+    behaviors: [
+      Polymer.PaperButtonBehavior
+    ],
+    properties: {
+      /**
+       * If true, the button should be styled with a shadow.
+       */
+      raised: {
+        type: Boolean,
+        reflectToAttribute: true,
+        value: false,
+        observer: '_calculateElevation'
+      }
+    },
+    _calculateElevation: function() {
+      if (!this.raised) {
+        this._elevation = 0;
+      } else {
+        Polymer.PaperButtonBehaviorImpl._calculateElevation.apply(this);
+      }
+    },
+    _computeContentClass: function(receivedFocusFromKeyboard) {
+      var className = 'content ';
+      if (receivedFocusFromKeyboard) {
+        className += ' keyboard-focus';
+      }
+      return className;
+    }
+  });
+</script>

data/app/assets/components/paper-button/test/index.html ADDED Viewed

@@ -0,0 +1,25 @@
+<!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>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+  <title>paper-button tests</title>
+  <script src="../../web-component-tester/browser.js"></script>
+</head>
+<body>
+  <script>
+    WCT.loadSuites([
+      'paper-button.html'
+    ]);
+  </script>
+</body>
+</html>

data/app/assets/components/paper-button/test/paper-button.html ADDED Viewed

@@ -0,0 +1,83 @@
+<!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>
+  <meta charset="UTF-8">
+  <title>paper-button basic tests</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../test-fixture/test-fixture-mocha.js"></script>
+  <script src="../../iron-test-helpers/mock-interactions.js"></script>
+  <link rel="import" href="../paper-button.html">
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+</head>
+<body>
+  <test-fixture id="TrivialButton">
+    <template>
+      <paper-button>Button</paper-button>
+    </template>
+  </test-fixture>
+  <script>
+    suite('<paper-button>', function() {
+      var button;
+      setup(function() {
+        button = fixture('TrivialButton');
+      });
+      test('can be raised imperatively', function(done) {
+        button.raised = true;
+        expect(button.hasAttribute('raised')).to.be.eql(true);
+        Polymer.Base.async(function() {
+          try {
+            expect(button._elevation).to.be.eql(1);
+            done();
+          } catch (e) {
+            done(e);
+          }
+        }, 1);
+      });
+      test('has aria role "button"', function() {
+        expect(button.getAttribute('role')).to.be.eql('button');
+      });
+      test('can be disabled imperatively', function() {
+        button.disabled = true;
+        expect(button.getAttribute('aria-disabled')).to.be.eql('true');
+        expect(button.hasAttribute('disabled')).to.be.eql(true);
+      });
+      test('can be triggered with space', function(done) {
+        button.addEventListener('click', function() {
+          done();
+        });
+        MockInteractions.pressSpace(button);
+      });
+      test('can be triggered with enter', function(done) {
+        button.addEventListener('click', function() {
+          done();
+        });
+        MockInteractions.pressEnter(button);
+      });
+    });
+  </script>
+</body>
+</html>

data/app/assets/components/paper-header-panel/README.md ADDED Viewed

@@ -0,0 +1,105 @@
+# paper-header-panel
+`paper-header-panel` contains a header section and a content panel section.
+__Important:__ The `paper-header-panel` will not display if its parent does not have a height.
+Using [layout classes](http://www.polymer-project.org/docs/polymer/layout-attrs.html), you can make
+the `paper-header-panel` fill the screen
+```html
+<body class="fullbleed layout vertical">
+  <paper-header-panel class="flex">
+    <paper-toolbar>
+      <div>Hello World!</div>
+    </paper-toolbar>
+  </paper-header-panel>
+</body>
+```
+Special support is provided for scrolling modes when one uses a `paper-toolbar` or equivalent for the header section. For example:
+```html
+<paper-header-panel>
+  <paper-toolbar>Header</paper-toolbar>
+  <div>Content goes here...</div>
+</paper-header-panel>
+```
+If you want to use other than `paper-toolbar` for the header, add `paper-header` class to that
+element:
+```html
+<paper-header-panel>
+  <div class="paper-header">Header</div>
+  <div>Content goes here...</div>
+</paper-header-panel>
+```
+To have the content fit to the main area, use the `fit` class:
+```html
+<paper-header-panel>
+  <div class="paper-header">standard</div>
+  <div class="content fit">content fits 100% below the header</div>
+</paper-header-panel>
+```
+### Mode
+Controls header and scrolling behavior. Options are `standard`, `seamed`, `waterfall`, `waterfall-tall`, `scroll` and
+`cover`. Default is `standard`.
+Mode | Description
+----------------|-------------
+`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 `paper-header-panel` including the header. This allows user to style the panel in such a way that the panel is partially covering the header.
+Example:
+```html
+<paper-header-panel mode="waterfall">
+  <div class="paper-header">standard</div>
+  <div class="content fit">content fits 100% below the header</div>
+</paper-header-panel>
+```
+### Styling header panel:
+To change the shadow that shows up underneath the header:
+```css
+paper-header-panel {
+  --paper-header-panel-shadow: {
+      height: 6px;
+      bottom: -6px;
+      box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);
+  };
+}
+```
+To change the panel container:
+```css
+paper-slider {
+  --paper-header-panel-standard-container: {
+    border: 1px solid gray;
+  };
+  --paper-header-panel-cover-container: {
+    border: 1px solid gray;
+  };
+  --paper-header-panel-waterfall-container: {
+    border: 1px solid gray;
+  };
+  --paper-header-panel-waterfall-tall-container: {
+    border: 1px solid gray;
+  };
+}
+```

data/app/assets/components/paper-header-panel/bower.json ADDED Viewed

@@ -0,0 +1,28 @@
+{
+  "name": "paper-header-panel",
+  "version": "1.0.1",
+  "description": "A header and content wrapper for layout with headers",
+  "authors": [
+    "The Polymer Authors"
+  ],
+  "keywords": [
+    "web-components",
+    "polymer",
+    "layout"
+  ],
+  "private": true,
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "homepage": "https://github.com/PolymerElements/paper-header-panel",
+  "ignore": [],
+  "dependencies": {
+    "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
+    "polymer": "Polymer/polymer#^1.0.0"
+  },
+  "devDependencies": {
+    "web-component-tester": "*",
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
+    "paper-styles": "PolymerElements/paper-styles#^1.0.0"
+  }
+}