jschaufuss/DiceCloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated color dropdown to Polymer 1 paper-swatch-picker

Browse Source
This commit is contained in:
Stefan Zermatten
2017-01-31 13:36:15 +02:00
parent a869772238
commit 03cb32bf34
7 changed files with 37 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
rpg-docs/client/views/layout/polymerImports.html
View File

@@ -30,6 +30,7 @@
<link rel="import" href="/components/neon-animation/neon-animation.html">
<link rel="import" href="/components/paper-button/paper-button.html">
<link rel="import" href="/components/paper-swatch-picker/paper-swatch-picker.html">
<!--<link rel="import" href="/components/paper-checkbox/paper-checkbox.html"> Using custom one instead -->
<link rel="import" href="/components/paper-dialog/paper-dialog.html">
<link rel="import" href="/components/paper-dropdown-menu/paper-dropdown-menu.html">

10
rpg-docs/client/views/paperTemplates/colorDropdown/colorDropdown.html
View File

@@ -1,10 +1,4 @@
<template name="colorDropdown">
<paper-menu-button class="colorDropdown" horizontal-align="right" dynamic-align>
<paper-icon-button icon="editor:format-paint" class="dropdown-trigger"></paper-icon-button>
<paper-menu class="dropdown-content" attr-for-selected="name" selected={{color}}>
{{#each colors}}
<paper-item name={{key}} class="colorMenuItem {{colorClass key}}">{{className}}</paper-item>
{{/each}}
</paper-menu>
</paper-menu-button>
<paper-swatch-picker column-count="5" horizontal-align="right" color-list={{colors}} color={{selectedColor}}>
</paper-swatch-picker>
</template>

25
rpg-docs/client/views/paperTemplates/colorDropdown/colorDropdown.js
View File

@@ -1,15 +1,28 @@
Template.colorDropdown.helpers({
colors: function(){
return colorOptions;
}
let colors = "";
_.each(colorOptions, (option) => {
colors += !colors ? `["${option.color}"` : `, "${option.color}"`;
});
colors += "]";
return colors;
},
selectedColor: function(){
const selected = _.find(colorOptions, (option) => option.key === this.color);
return selected && selected.color;
},
});
Template.colorDropdown.events({
"click paper-item": function(event, instance){
var color = event.currentTarget.getAttribute("name");
instance.$(".colorDropdown").trigger({
"color-picker-selected": function(event, instance){
var color = event.originalEvent.detail.color;
var option = _.find(colorOptions, (option) => {
return option.color === color.toUpperCase()}
);
var key = option && option.key;
instance.$("paper-swatch-picker").trigger({
type: "color-change",
color: color,
color: key,
});
}
});