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-26 23:49:55 +01:00
parent 5bbbdf64d9
commit c04a645991
4 changed files with 116 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
css/spectrum/spectrum-overrides.css Normal file
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);
}

1
index.html
View File

@ -14,6 +14,7 @@
<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/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-tooltip-custom.css">
<link rel="stylesheet" type="text/css" href="css/preview-film-section.css">

2
js/controller/PaletteController.js
View File

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

71
js/lib/spectrum/spectrum.js
View File

@ -502,7 +502,11 @@
hideAll();
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);
replacer.addClass("sp-active");
container.removeClass("sp-hidden");
@ -518,21 +522,8 @@
boundElement.trigger('show.spectrum', [ colorOnShow ]);
}
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);
$(window).unbind("resize.spectrum", resize);
replacer.removeClass("sp-active");
container.addClass("sp-hidden");
// Piskel-specific (code extracted to method)
function updateColor(e) {
var colorHasChanged = !tinycolor.equals(get(), colorOnShow);
if (colorHasChanged) {
@ -543,6 +534,31 @@
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());
boundElement.trigger('hide.spectrum', [ get() ]);
@ -658,16 +674,18 @@
var s = currentSaturation;
var v = currentValue;
console.log(dragHelperHeight, dragHeight);
// Where to show the little circle in that displays your current selected color
var dragX = s * dragWidth;
var dragY = dragHeight - (v * dragHeight);
var dragY = (dragHeight) - (v * dragHeight);
dragX = Math.max(
-dragHelperHeight,
Math.min(dragWidth - dragHelperHeight, dragX - dragHelperHeight)
-dragHelperHeight/2,
Math.min(dragWidth - dragHelperHeight/2, dragX - dragHelperHeight/2)
);
dragY = Math.max(
-dragHelperHeight,
Math.min(dragHeight - dragHelperHeight, dragY - dragHelperHeight)
-dragHelperHeight/2,
Math.min(dragHeight - dragHelperHeight/2, dragY - dragHelperHeight/2)
);
dragHelper.css({
"top": dragY,
@ -682,7 +700,7 @@
// Where to show the bar that displays your current selected hue
var slideY = (currentHue) * slideHeight;
slideHelper.css({
"top": slideY - slideHelperHeight
"top": slideY - (slideHelperHeight/2)
});
}
@ -697,7 +715,10 @@
colorOnShow = 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) {
callbacks.change(color);
boundElement.trigger('change', [ color ]);
@ -707,10 +728,10 @@
function reflow() {
dragWidth = dragger.width();
dragHeight = dragger.height();
dragHelperHeight = dragHelper.height();
dragHelperHeight = dragHelper.height() + 4;
slideWidth = slider.width();
slideHeight = slider.height();
slideHelperHeight = slideHelper.height();
slideHelperHeight = slideHelper.height() + 4;
alphaWidth = alphaSlider.width();
alphaSlideHelperWidth = alphaSlideHelper.width();