Design attempt

This commit is contained in:
jdescottes 2013-11-26 23:49:55 +01:00
parent 5bbbdf64d9
commit c04a645991
4 changed files with 116 additions and 25 deletions

View File

@ -0,0 +1,67 @@
/**
* Piskel specific CSS for spectrum widgets
*/
/* Remove the padding on the input container */
.sp-replacer {
padding: 3px;
height: 50%;
border-width: 0;
box-sizing: border-box;
}
.sp-replacer:first-of-type {
padding-bottom: 0px;
}
.sp-replacer:not(:first-of-type) {
padding-top: 0px;
}
/* Hide the triangle */
.sp-dd {
display: none;
}
/* */
.sp-preview {
margin-right: 0;
border-color: 0;
height: 100%;
width: 39px;
border-width: 0;
}
.sp-palette .sp-thumb-el {
margin : 0 0 5px 0;
}
.sp-picker-container, .sp-palette-container {
padding-top: 5px;
padding-right: 5px;
padding-left: 5px;
}
.sp-palette .sp-thumb-el {
width: 24px;
height: 24px;
}
.sp-slider {
height: 5px;
left: -2px;
right: -2px;
border: 2px solid white;
background: rgba(255,255,255,0);
opacity: 1;
border-radius: 2px;
box-shadow: 0 0 1px 1px rgba(0,0,0,0.5), inset 0 0 1px 1px rgba(0,0,0,0.5);
}
.sp-dragger {
border-radius: 8px;
height: 12px;
width: 12px;
border: 2px solid white;
background: none;
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);
}

View File

@ -14,6 +14,7 @@
<link rel="stylesheet" type="text/css" href="css/tools.css"> <link rel="stylesheet" type="text/css" href="css/tools.css">
<link rel="stylesheet" type="text/css" href="css/cheatsheet.css"> <link rel="stylesheet" type="text/css" href="css/cheatsheet.css">
<link rel="stylesheet" type="text/css" href="css/spectrum/spectrum.css"/> <link rel="stylesheet" type="text/css" href="css/spectrum/spectrum.css"/>
<link rel="stylesheet" type="text/css" href="css/spectrum/spectrum-overrides.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap-tooltip-custom.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap-tooltip-custom.css">
<link rel="stylesheet" type="text/css" href="css/preview-film-section.css"> <link rel="stylesheet" type="text/css" href="css/preview-film-section.css">

View File

@ -21,10 +21,12 @@
var spectrumCfg = { var spectrumCfg = {
showPalette: true, showPalette: true,
showButtons: false,
palette: [ palette: [
['rgba(0,0,0,0)'] ['rgba(0,0,0,0)']
], ],
clickoutFiresChange : true, clickoutFiresChange : true,
beforeShow : function(tinycolor) { beforeShow : function(tinycolor) {
tinycolor.setAlpha(1); tinycolor.setAlpha(1);
} }

View File

@ -502,7 +502,11 @@
hideAll(); hideAll();
visible = true; visible = true;
$(doc).bind("click.spectrum", hide); $(doc).bind("mousedown.spectrum", hide);
// Piskel-specific : change the color as soon as the user does a mouseup
$(doc).bind("mouseup.spectrum", updateColor);
$(window).bind("resize.spectrum", resize); $(window).bind("resize.spectrum", resize);
replacer.addClass("sp-active"); replacer.addClass("sp-active");
container.removeClass("sp-hidden"); container.removeClass("sp-hidden");
@ -518,21 +522,8 @@
boundElement.trigger('show.spectrum', [ colorOnShow ]); boundElement.trigger('show.spectrum', [ colorOnShow ]);
} }
function hide(e) { // Piskel-specific (code extracted to method)
function updateColor(e) {
// Return on right click
if (e && e.type == "click" && e.button == 2) { return; }
// Return if hiding is unnecessary
if (!visible || flat) { return; }
visible = false;
$(doc).unbind("click.spectrum", hide);
$(window).unbind("resize.spectrum", resize);
replacer.removeClass("sp-active");
container.addClass("sp-hidden");
var colorHasChanged = !tinycolor.equals(get(), colorOnShow); var colorHasChanged = !tinycolor.equals(get(), colorOnShow);
if (colorHasChanged) { if (colorHasChanged) {
@ -543,6 +534,31 @@
revert(); revert();
} }
} }
}
function hide(e) {
// Return on right click
if (e && e.type == "click" && e.button == 2) { return; }
// Return if hiding is unnecessary
if (!visible || flat) { return; }
visible = false;
$(doc).unbind("click.spectrum", hide);
// Piskel-specific
$(doc).unbind("mouseup.spectrum", updateColor);
$(window).unbind("resize.spectrum", resize);
replacer.removeClass("sp-active");
container.addClass("sp-hidden");
updateColor(e);
// Piskel-specific
addColorToSelectionPalette(get());
callbacks.hide(get()); callbacks.hide(get());
boundElement.trigger('hide.spectrum', [ get() ]); boundElement.trigger('hide.spectrum', [ get() ]);
@ -658,16 +674,18 @@
var s = currentSaturation; var s = currentSaturation;
var v = currentValue; var v = currentValue;
console.log(dragHelperHeight, dragHeight);
// Where to show the little circle in that displays your current selected color // Where to show the little circle in that displays your current selected color
var dragX = s * dragWidth; var dragX = s * dragWidth;
var dragY = dragHeight - (v * dragHeight); var dragY = (dragHeight) - (v * dragHeight);
dragX = Math.max( dragX = Math.max(
-dragHelperHeight, -dragHelperHeight/2,
Math.min(dragWidth - dragHelperHeight, dragX - dragHelperHeight) Math.min(dragWidth - dragHelperHeight/2, dragX - dragHelperHeight/2)
); );
dragY = Math.max( dragY = Math.max(
-dragHelperHeight, -dragHelperHeight/2,
Math.min(dragHeight - dragHelperHeight, dragY - dragHelperHeight) Math.min(dragHeight - dragHelperHeight/2, dragY - dragHelperHeight/2)
); );
dragHelper.css({ dragHelper.css({
"top": dragY, "top": dragY,
@ -682,7 +700,7 @@
// Where to show the bar that displays your current selected hue // Where to show the bar that displays your current selected hue
var slideY = (currentHue) * slideHeight; var slideY = (currentHue) * slideHeight;
slideHelper.css({ slideHelper.css({
"top": slideY - slideHelperHeight "top": slideY - (slideHelperHeight/2)
}); });
} }
@ -697,7 +715,10 @@
colorOnShow = color; colorOnShow = color;
// Update the selection palette with the current color // Update the selection palette with the current color
addColorToSelectionPalette(color);
// Piskel-specific : commented-out, palette update is done on hide
// addColorToSelectionPalette(color);
if (fireCallback && hasChanged) { if (fireCallback && hasChanged) {
callbacks.change(color); callbacks.change(color);
boundElement.trigger('change', [ color ]); boundElement.trigger('change', [ color ]);
@ -707,10 +728,10 @@
function reflow() { function reflow() {
dragWidth = dragger.width(); dragWidth = dragger.width();
dragHeight = dragger.height(); dragHeight = dragger.height();
dragHelperHeight = dragHelper.height(); dragHelperHeight = dragHelper.height() + 4;
slideWidth = slider.width(); slideWidth = slider.width();
slideHeight = slider.height(); slideHeight = slider.height();
slideHelperHeight = slideHelper.height(); slideHelperHeight = slideHelper.height() + 4;
alphaWidth = alphaSlider.width(); alphaWidth = alphaSlider.width();
alphaSlideHelperWidth = alphaSlideHelper.width(); alphaSlideHelperWidth = alphaSlideHelper.width();