mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

Design attempt

Browse Source
This commit is contained in:
jdescottes 2013-11-27 23:24:03 +01:00
parent c04a645991
commit 42862e188d
3 changed files with 42 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
css/spectrum/spectrum-overrides.css
View File

@ -2,12 +2,26 @@
* Piskel specific CSS for spectrum widgets * Piskel specific CSS for spectrum widgets
*/ */
/* Widget's main container */
.sp-container {
border-radius: 4px;
background-color: #2B2B2B;
border: solid 4px #888;
padding: 5px;
}
/* Color square container */
.sp-color, .sp-hue {
border : 1px solid #222;
}
/* Remove the padding on the input container */ /* Remove the padding on the input container */
.sp-replacer { .sp-replacer {
padding: 3px; padding: 3px;
height: 50%; height: 50%;
border-width: 0; border-width: 0;
box-sizing: border-box; box-sizing: border-box;
background-color: #888;
} }
.sp-replacer:first-of-type { .sp-replacer:first-of-type {
padding-bottom: 0px; padding-bottom: 0px;
@ -30,19 +44,24 @@
border-width: 0; border-width: 0;
} }
.sp-palette-row-selection {
max-width: 62px;
}
.sp-palette .sp-thumb-el { .sp-palette .sp-thumb-el {
margin : 0 0 5px 0; margin : 0 5px 5px 0;
width: 24px;
height: 24px;
border-color: #444;
} }
.sp-picker-container, .sp-palette-container { .sp-picker-container, .sp-palette-container {
padding-top: 5px; padding-top: 5px;
padding-right: 5px; padding-right: 5px;
padding-left: 5px; padding-left: 5px;
} border-left-width: 0;
border-right-width: 0;
.sp-palette .sp-thumb-el {
width: 24px;
height: 24px;
} }
.sp-slider { .sp-slider {
@ -65,3 +84,8 @@
box-sizing:border-box; box-sizing:border-box;
box-shadow: 0 0 1px 1px rgba(0,0,0,0.5), inset 0 0 1px 1px rgba(0,0,0,0.5); box-shadow: 0 0 1px 1px rgba(0,0,0,0.5), inset 0 0 1px 1px rgba(0,0,0,0.5);
} }
.sp-palette .sp-thumb-el.sp-thumb-active {
border-color: gold;
box-shadow: 0 0 0px 1px gold;
}

BIN
img/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 177 B

14
js/lib/spectrum/spectrum.js
View File

@ -502,7 +502,7 @@
hideAll(); hideAll();
visible = true; visible = true;
$(doc).bind("mousedown.spectrum", hide); $(doc).bind("mousedown.spectrum", onMousedown);
// Piskel-specific : change the color as soon as the user does a mouseup // Piskel-specific : change the color as soon as the user does a mouseup
$(doc).bind("mouseup.spectrum", updateColor); $(doc).bind("mouseup.spectrum", updateColor);
@ -522,6 +522,16 @@
boundElement.trigger('show.spectrum', [ colorOnShow ]); boundElement.trigger('show.spectrum', [ colorOnShow ]);
} }
function onMousedown (e) {
var target = $(e.target);
var parents = target.parents();
var isClickOutsideWidget = !parents.is(container) && !target.is(container);
if (isClickOutsideWidget) {
hide(e);
}
}
// Piskel-specific (code extracted to method) // Piskel-specific (code extracted to method)
function updateColor(e) { function updateColor(e) {
var colorHasChanged = !tinycolor.equals(get(), colorOnShow); var colorHasChanged = !tinycolor.equals(get(), colorOnShow);
@ -545,7 +555,7 @@
if (!visible || flat) { return; } if (!visible || flat) { return; }
visible = false; visible = false;
$(doc).unbind("click.spectrum", hide); $(doc).unbind("mousedown.spectrum", onMousedown);
// Piskel-specific // Piskel-specific
$(doc).unbind("mouseup.spectrum", updateColor); $(doc).unbind("mouseup.spectrum", updateColor);