Design attempt

css/spectrum/spectrum-overrides.css

@@ -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);
+}

index.html

@@ -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">

js/controller/PaletteController.js

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

js/lib/spectrum/spectrum.js

@@ -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();