Skip to content
This repository was archived by the owner on Dec 19, 2024. It is now read-only.

Commit 904f615

Browse files
notwaldorfnotwaldorf
committed
Merge pull request #1 from PolymerElements/initial-implementation
initial implementation
2 parents 468874a + 23a4cd8 commit 904f615

File tree

9 files changed

+600
-2
lines changed

9 files changed

+600
-2
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
bower_components

‎README.md‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
1-
# paper-color-picker
2-
A color picker with all the Material Design colours
1+
# polymer-color-picker

‎bower.json‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
{
2+
"name": "paper-swatch-picker",
3+
"version": "1.0.0",
4+
"description": "A color picker element using all the Material Design colours",
5+
"authors": [
6+
"The Polymer Authors"
7+
],
8+
"keywords": [
9+
"web-components",
10+
"polymer",
11+
"color",
12+
"picker"
13+
],
14+
"main": [
15+
"paper-swatch-picker.html"
16+
],
17+
"ignore": [],
18+
"repository": {
19+
"type": "git",
20+
"url": "git://github.com/PolymerElements/paper-swatch-picker.git"
21+
},
22+
"license": "http://polymer.github.io/LICENSE.txt",
23+
"homepage": "https://github.com/PolymerElements/paper-swatch-picker",
24+
"ignore": [],
25+
"dependencies": {
26+
"iron-iconset-svg": "PolymerElements/iron-iconset-svg#^1.0.0",
27+
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
28+
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
29+
"paper-item": "PolymerElements/paper-item#^1.0.0",
30+
"paper-listbox": "PolymerElements/paper-listbox#^1.1.1",
31+
"paper-menu-button": "PolymerElements/paper-menu-button#^1.0.0",
32+
"polymer": "Polymer/polymer#^1.1.0"
33+
},
34+
"devDependencies": {
35+
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
36+
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
37+
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
38+
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
39+
"web-component-tester": "polymer/web-component-tester#^3.4.0"
40+
}
41+
}

‎demo/index.html‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!doctype html>
2+
<!--
3+
@license
4+
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
5+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6+
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7+
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
8+
Code distributed by Google as part of the polymer project is also
9+
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10+
-->
11+
<html>
12+
<head>
13+
<title>paper-swatch-picker demo</title>
14+
15+
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
16+
<meta name="mobile-web-app-capable" content="yes">
17+
<meta name="apple-mobile-web-app-capable" content="yes">
18+
19+
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
20+
<link rel="import" href="../paper-swatch-picker.html">
21+
22+
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
23+
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
24+
25+
<style is="custom-style" include="demo-pages-shared-styles">
26+
paper-swatch-picker {
27+
margin: 0 10px;
28+
}
29+
</style>
30+
</head>
31+
<body unresolved>
32+
<div class="vertical-section-container centered">
33+
<h3>A color picker of all the Material Design colours</h3>
34+
<demo-snippet class="centered-demo">
35+
<template>
36+
<paper-swatch-picker></paper-swatch-picker>
37+
<paper-swatch-picker color="#E91E63"></paper-swatch-picker>
38+
<!-- Disable the ripple on the color picker button -->
39+
<paper-swatch-picker color="#2196F3" noink></paper-swatch-picker>
40+
</template>
41+
</demo-snippet>
42+
43+
<h3>The palette used by the color picker can be configured</h3>
44+
<demo-snippet class="centered-demo">
45+
<template>
46+
<paper-swatch-picker column-count=5 color-list='["#65a5f2", "#2b63ba", "#83be54", "#3b8638", "#f0d551", "#d7be48", "#e5943c", "#cf712e", "#a96ddb", "#6f4196"]' ></paper-swatch-picker>
47+
</template>
48+
</demo-snippet>
49+
50+
<h3>The picker can be styled using custom properties</h3>
51+
<demo-snippet class="centered-demo">
52+
<template>
53+
<style is="custom-style">
54+
paper-swatch-picker.fancy {
55+
--paper-swatch-picker-color-size: 10px;
56+
--paper-swatch-picker-icon-size: 40px;
57+
}
58+
</style>
59+
<paper-swatch-picker class="fancy"></paper-swatch-picker>
60+
</template>
61+
</demo-snippet>
62+
</div>
63+
</body>
64+
</html>

‎index.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!doctype html>
2+
<!--
3+
@license
4+
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
5+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6+
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7+
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
8+
Code distributed by Google as part of the polymer project is also
9+
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10+
-->
11+
<html>
12+
<head>
13+
14+
<meta charset="utf-8">
15+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
16+
17+
<title>paper-swatch-picker</title>
18+
19+
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
20+
<link rel="import" href="../iron-component-page/iron-component-page.html">
21+
22+
</head>
23+
<body>
24+
25+
<iron-component-page></iron-component-page>
26+
27+
</body>
28+
</html>

‎paper-swatch-picker-icon.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<link rel="import" href="../iron-icon/iron-icon.html">
2+
<link rel="import" href="../iron-iconset-svg/iron-iconset-svg.html">
3+
4+
<iron-iconset-svg size="24" name="swatch">
5+
<svg><defs>
6+
<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>
7+
</defs></svg>
8+
</iron-iconset-svg>

0 commit comments

Comments
 (0)