Skip to content

Commit

Permalink
update style and functionality of picker
Browse files Browse the repository at this point in the history
  • Loading branch information
@jshortall
jshortall committed May 11, 2020
1 parent 2870a8d commit a86f04f
Showing 1 changed file with 152 additions and 29 deletions.
181 changes: 152 additions & 29 deletions paper-swatch-picker.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,20 +60,31 @@

.color {
box-sizing: border-box;
width: var(--paper-swatch-picker-color-size, 20px);
height: var(--paper-swatch-picker-color-size, 20px);
width: var(--paper-swatch-picker-color-size, 25px);
height: var(--paper-swatch-picker-color-size, 25px);
display: inline-block;
padding: 0;
margin: 0;
cursor: pointer;
font-size: 0;
position: relative;
}
.rgbaColor {
box-sizing: border-box;
width: var(--paper-swatch-picker-color-size, 40px);
height: var(--paper-swatch-picker-color-size, 40px);
display: inline-block;
padding: 0;
margin-right: 35px;
cursor: pointer;
font-size: 0;
position: relative;
}

/* If we just scale the paper-item when hovering, this will end up
* adding scrollbars to the paper-listbox that are hard to get rid of.
* An easy workaround is to use an :after pseudo element instead. */
.color:after {
.color:after, .rgbaColor:after {
@apply(--layout-fit);
background: currentColor;
content: '';
Expand All @@ -82,12 +93,37 @@
z-index: 0;
}

.color:hover:after, .color:focus:after {
-webkit-transform: scale(1.3, 1.3);
transform: scale(1.3, 1.3);
.color:hover:after, .rgbaColor:hover:after {
-webkit-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
outline: none;
z-index: 1;
}
.rgbaPicker {
width: 100px;
height: 150px;
margin: 0px 15px 0px;
display: inline-block;
}
.rgbaInput {
display: inline-block;
width: 50px;
margin-left: 5px;
/* height: 20px; */
}
.rgbaRow {
display: flex;
align-items: flex-end;
margin-top: 5px;
height: 30px;
}
.rgbaRow span {
margin-bottom: 5px;
}

paper-menu-button {
@apply(--paper-swatch-picker-button);
}

paper-icon-button {
@apply(--paper-swatch-picker-icon);
Expand All @@ -110,21 +146,53 @@
@apply(--layout-vertical);
@apply(--layout-wrap);
}

#customColor {
border:1px solid black;
}
#iconButton {
height: 24px;
width: 24px;
@apply --shadow-elevation-2dp;
border-radius: 4px;
box-sizing: border-box;
}
</style>

<paper-menu-button vertical-align="[[verticalAlign]]" horizontal-align="[[horizontalAlign]]">
<paper-icon-button
id="iconButton"
icon="[[icon]]"
slot="dropdown-trigger" class="dropdown-trigger"
alt="color picker"
noink$="[[noink]]">
</paper-icon-button>
<paper-listbox slot="dropdown-content" class="dropdown-content" id="container">
<template is="dom-repeat" items="{{colorList}}">
<paper-item class="color">{{item}}</paper-item>
</template>
</paper-listbox>

<paper-menu-button id="menu" vertical-align="[[verticalAlign]]" horizontal-align="[[horizontalAlign]]" no-overlap="[[noOverlap]]">
<!--<paper-icon-button-->
<!-- id="iconButton"-->
<!-- icon="[[icon]]"-->
<!-- slot="dropdown-trigger" class="dropdown-trigger"-->
<!-- alt="color picker"-->
<!-- noink$="[[noink]]">-->
<!--</paper-icon-button>-->
<div id="iconButton" slot="dropdown-trigger" class="dropdown-trigger" alt="color picker"></div>
<div slot="dropdown-content">
<slot></slot>
<div style="display: flex; flex-direction: row; align-items: center; padding: 10px">
<paper-listbox class="dropdown-content" id="container">
<template is="dom-repeat" items="{{colorList}}">
<paper-item class="color">{{item}}</paper-item>
</template>
</paper-listbox>
<div class="rgbaPicker">
<div class="rgbaRow">
<span style="margin-right: 3.109px">r:</span><paper-input id="rValue" no-label-float class="rgbaInput" value="{{rgbaR}}" type="number" min="0" max="255" step="1"></paper-input>
</div>
<div class="rgbaRow">
<span>g:</span><paper-input id="gValue" no-label-float class="rgbaInput" value="{{rgbaG}}" type="number" min="0" max="255" step="1"></paper-input>
</div>
<div class="rgbaRow">
<span>b:</span><paper-input id="bValue" no-label-float class="rgbaInput" value="{{rgbaB}}" type="number" min="0" max="255" step="1"></paper-input>
</div>
<div class="rgbaRow">
<span>a:</span><paper-input id="aValue" no-label-float class="rgbaInput" value="{{rgbaA}}" type="number" min="0" max="1" step="0.1"></paper-input>
</div>
</div>
<paper-item style$="color: rgba([[rgbaR]], [[rgbaG]], [[rgbaB]], [[rgbaA]])" id="customColor" class="rgbaColor" on-click="_onColorTap"></paper-item>
</div>
</div>
</paper-menu-button>
</template>

Expand Down Expand Up @@ -157,7 +225,22 @@
notify: true,
observer: '_colorChanged'
},

rgbaR: {
type: Number,
value: 0
},
rgbaG: {
type: Number,
value: 0
},
rgbaB: {
type: Number,
value: 0
},
rgbaA: {
type: Number,
value: 1
},
/**
* The colors to be displayed. By default, these are the Material Design
* colors. This array is arranged by "generic color", so for example,
Expand All @@ -183,6 +266,12 @@
observer: '_columnCountChanged'
},


noOverlap:{
type:Boolean,
reflectToAttribute:true
},

/**
* The orientation against which to align the menu dropdown
* horizontally relative to the dropdown trigger.
Expand Down Expand Up @@ -239,6 +328,24 @@
*/
defaultColors: function() {
return [
// '#ffffff', '#ffcdd2', '#ef9a9a', '#e57373', '#ef5350', '#f44336', '#e53935', '#d32f2f', '#c62828', '#b71c1c',
// '#fce4ec', '#f8bbd0', '#f48fb1', '#f06292', '#ec407a', '#e91e63', '#d81b60', '#c2185b', '#ad1457', '#880e4f',
// '#f3e5f5', '#e1bee7', '#ce93d8', '#ba68c8', '#ab47bc', '#9c27b0', '#8e24aa', '#7b1fa2', '#6a1b9a', '#4a148c',
// '#ede7f6', '#d1c4e9', '#b39ddb', '#9575cd', '#7e57c2', '#673ab7', '#5e35b1', '#512da8', '#4527a0', '#311b92',
// '#e8eaf6', '#c5cae9', '#9fa8da', '#7986cb', '#5c6bc0', '#3f51b5', '#3949ab', '#303f9f', '#283593', '#1a237e',
// '#e3f2fd', '#bbdefb', '#90caf9', '#64b5f6', '#42a5f5', '#2196f3', '#1e88e5', '#1976d2', '#1565c0', '#0d47a1',
// '#e1f5fe', '#b3e5fc', '#81d4fa', '#4fc3f7', '#29b6f6', '#03a9f4', '#039be5', '#0288d1', '#0277bd', '#01579b',
// '#e0f7fa', '#b2ebf2', '#80deea', '#4dd0e1', '#26c6da', '#00bcd4', '#00acc1', '#0097a7', '#00838f', '#006064',
// '#e0f2f1', '#b2dfdb', '#80cbc4', '#4db6ac', '#26a69a', '#009688', '#00897b', '#00796b', '#00695c', '#004d40',
// '#e8f5e9', '#c8e6c9', '#a5d6a7', '#81c784', '#66bb6a', '#4caf50', '#43a047', '#388e3c', '#2e7d32', '#1b5e20',
// '#f1f8e9', '#dcedc8', '#c5e1a5', '#aed581', '#9ccc65', '#8bc34a', '#7cb342', '#689f38', '#558b2f', '#33691e',
// '#f9fbe7', '#f0f4c3', '#e6ee9c', '#dce775', '#d4e157', '#cddc39', '#c0ca33', '#afb42b', '#9e9d24', '#827717',
// '#fffde7', '#fff9c4', '#fff59d', '#fff176', '#ffee58', '#ffeb3b', '#fdd835', '#fbc02d', '#f9a825', '#f57f17',
// '#fff8e1', '#ffecb3', '#ffe082', '#ffd54f', '#ffca28', '#ffc107', '#ffb300', '#ffa000', '#ff8f00', '#ff6f00',
// '#fff3e0', '#ffe0b2', '#ffcc80', '#ffb74d', '#ffa726', '#ff9800', '#fb8c00', '#f57c00', '#ef6c00', '#e65100',
// '#fbe9e7', '#ffccbc', '#ffab91', '#ff8a65', '#ff7043', '#ff5722', '#f4511e', '#e64a19', '#d84315', '#bf360c',
// '#efebe9', '#d7ccc8', '#bcaaa4', '#a1887f', '#8d6e63', '#795548', '#6d4c41', '#5d4037', '#4e342e', '#3e2723',
// '#fafafa', '#f5f5f5', '#eeeeee', '#e0e0e0', '#bdbdbd', '#9e9e9e', '#757575', '#616161', '#424242', '#000000'
'#ffebee', '#ffcdd2', '#ef9a9a', '#e57373', '#ef5350', '#f44336', '#e53935', '#d32f2f', '#c62828', '#b71c1c',
'#fce4ec', '#f8bbd0', '#f48fb1', '#f06292', '#ec407a', '#e91e63', '#d81b60', '#c2185b', '#ad1457', '#880e4f',
'#f3e5f5', '#e1bee7', '#ce93d8', '#ba68c8', '#ab47bc', '#9c27b0', '#8e24aa', '#7b1fa2', '#6a1b9a', '#4a148c',
Expand All @@ -256,7 +363,7 @@
'#fff3e0', '#ffe0b2', '#ffcc80', '#ffb74d', '#ffa726', '#ff9800', '#fb8c00', '#f57c00', '#ef6c00', '#e65100',
'#fbe9e7', '#ffccbc', '#ffab91', '#ff8a65', '#ff7043', '#ff5722', '#f4511e', '#e64a19', '#d84315', '#bf360c',
'#efebe9', '#d7ccc8', '#bcaaa4', '#a1887f', '#8d6e63', '#795548', '#6d4c41', '#5d4037', '#4e342e', '#3e2723',
'#fafafa', '#f5f5f5', '#eeeeee', '#e0e0e0', '#bdbdbd', '#9e9e9e', '#757575', '#616161', '#424242', '#212121'
'#ffffff', '#f5f5f5', '#eeeeee', '#e0e0e0', '#bdbdbd', '#9e9e9e', '#757575', '#616161', '#424242', '#000000'
];
},

Expand All @@ -282,16 +389,32 @@

_onColorTap: function(event) {
var item = event.detail.item;
// The inner `span` element has the background color;
var color = item.style.color;

// If it's in rgb format, convert it first.
this.color = color.indexOf('rgb') === -1 ? color : this._rgbToHex(color);
if (item != undefined) {
// The inner `span` element has the background color;
this.color = w3color(item.style.color).toRgb();

this.rgbaR = this.color.r
this.rgbaG = this.color.g
this.rgbaB = this.color.b
this.rgbaA = this.color.a
}
else {
if (!Number.isInteger(Number(this.rgbaR)) || !Number.isInteger(Number(this.rgbaG)) || !Number.isInteger(Number(this.rgbaB)) || isNaN(this.rgbaA)
|| this.rgbaR < 0 || this.rgbaR > 255 || this.rgbaG < 0 || this.rgbaG > 255 || this.rgbaB < 0 || this.rgbaB > 255 || this.rgbaA < 0 || this.rgbaA > 1) {
this.fire('toast', 'Please enter valid numbers');
return;
}
else {
this.color = w3color('rgba(' + this.rgbaR + ',' + this.rgbaG + ',' + this.rgbaB + ',' + this.rgbaA + ')').toRgb();
}
this.$.menu.close();
}
this.color = 'rgba(' + this.rgbaR + ',' + this.rgbaG + ',' + this.rgbaB + ',' + this.rgbaA + ')'
this.fire('color-picker-selected', {color: this.color});
},

_colorChanged: function() {
this.$.iconButton.style.color = this.color;
this.$.iconButton.style.backgroundColor = this.color;
},

_colorListChanged: function() {
Expand Down Expand Up @@ -329,7 +452,7 @@
// width to fit all the columns.
var sizeOfAColorDiv = this.getComputedStyleValue('--paper-swatch-picker-color-size');
if (!sizeOfAColorDiv || sizeOfAColorDiv == '') { // Default value case
sizeOfAColorDiv = 20;
sizeOfAColorDiv = 25;
} else {
sizeOfAColorDiv = sizeOfAColorDiv.replace('px', '');
}
Expand Down

0 comments on commit a86f04f

Please sign in to comment.