Merge pull request #1 from PolymerElements/initial-implementation

initial implementation
PolymerElements · Feb 22, 2016 · 904f615 · 904f615
2 parents 468874a + 23a4cd8
commit 904f615
Show file tree

Hide file tree

Showing 9 changed files with 600 additions and 2 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+bower_components
diff --git a/README.md b/README.md
@@ -1,2 +1 @@
-# paper-color-picker
-A color picker with all the Material Design colours
+# polymer-color-picker
diff --git a/bower.json b/bower.json
@@ -0,0 +1,41 @@
+{
+  "name": "paper-swatch-picker",
+  "version": "1.0.0",
+  "description": "A color picker element using all the Material Design colours",
+  "authors": [
+    "The Polymer Authors"
+  ],
+  "keywords": [
+    "web-components",
+    "polymer",
+    "color",
+    "picker"
+  ],
+  "main": [
+    "paper-swatch-picker.html"
+  ],
+  "ignore": [],
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/paper-swatch-picker.git"
+  },
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "homepage": "https://github.com/PolymerElements/paper-swatch-picker",
+  "ignore": [],
+  "dependencies": {
+    "iron-iconset-svg": "PolymerElements/iron-iconset-svg#^1.0.0",
+    "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
+    "paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
+    "paper-item": "PolymerElements/paper-item#^1.0.0",
+    "paper-listbox": "PolymerElements/paper-listbox#^1.1.1",
+    "paper-menu-button": "PolymerElements/paper-menu-button#^1.0.0",
+    "polymer": "Polymer/polymer#^1.1.0"
+  },
+  "devDependencies": {
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
+    "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
+    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
+    "web-component-tester": "polymer/web-component-tester#^3.4.0"
+  }
+}
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2016 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>
+    <title>paper-swatch-picker demo</title>
+
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <link rel="import" href="../paper-swatch-picker.html">
+
+    <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
+    <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
+
+    <style is="custom-style" include="demo-pages-shared-styles">
+      paper-swatch-picker {
+        margin: 0 10px;
+      }
+    </style>
+  </head>
+  <body unresolved>
+    <div class="vertical-section-container centered">
+      <h3>A color picker of all the Material Design colours</h3>
+      <demo-snippet class="centered-demo">
+        <template>
+          <paper-swatch-picker></paper-swatch-picker>
+          <paper-swatch-picker color="#E91E63"></paper-swatch-picker>
+          <!-- Disable the ripple on the color picker button -->
+          <paper-swatch-picker color="#2196F3" noink></paper-swatch-picker>
+        </template>
+      </demo-snippet>
+
+      <h3>The palette used by the color picker can be configured</h3>
+      <demo-snippet class="centered-demo">
+        <template>
+          <paper-swatch-picker column-count=5 color-list='["#65a5f2", "#2b63ba", "#83be54", "#3b8638", "#f0d551", "#d7be48", "#e5943c", "#cf712e", "#a96ddb", "#6f4196"]' ></paper-swatch-picker>
+        </template>
+      </demo-snippet>
+
+      <h3>The picker can be styled using custom properties</h3>
+      <demo-snippet class="centered-demo">
+        <template>
+          <style is="custom-style">
+            paper-swatch-picker.fancy {
+              --paper-swatch-picker-color-size: 10px;
+              --paper-swatch-picker-icon-size: 40px;
+            }
+          </style>
+          <paper-swatch-picker class="fancy"></paper-swatch-picker>
+        </template>
+      </demo-snippet>
+    </div>
+  </body>
+</html>
diff --git a/index.html b/index.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2016 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, initial-scale=1.0">
+
+  <title>paper-swatch-picker</title>
+
+  <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>
diff --git a/paper-swatch-picker-icon.html b/paper-swatch-picker-icon.html
@@ -0,0 +1,8 @@
+<link rel="import" href="../iron-icon/iron-icon.html">
+<link rel="import" href="../iron-iconset-svg/iron-iconset-svg.html">
+
+<iron-iconset-svg size="24" name="swatch">
+<svg><defs>
+<g id="format-color-fill"><path d="M16.56 8.94L7.62 0 6.21 1.41l2.38 2.38-5.15 5.15c-.59.59-.59 1.54 0 2.12l5.5 5.5c.29.29.68.44 1.06.44s.77-.15 1.06-.44l5.5-5.5c.59-.58.59-1.53 0-2.12zM5.21 10L10 5.21 14.79 10H5.21zM19 11.5s-2 2.17-2 3.5c0 1.1.9 2 2 2s2-.9 2-2c0-1.33-2-3.5-2-3.5z"></path><path fill-opacity=".36" d="M0 20h24v4H0z"></path></g>
+</defs></svg>
+</iron-iconset-svg>