From 42862e188dc145574fb920d871c350b7f807fad7 Mon Sep 17 00:00:00 2001
From: jdescottes <julian.descottes@gmail.com>
Date: Wed, 27 Nov 2013 23:24:03 +0100
Subject: [PATCH] Design attempt

---
 css/spectrum/spectrum-overrides.css |  36 +++++++++++++++++++++++-----
 img/favicon.png                     | Bin 0 -> 177 bytes
 js/lib/spectrum/spectrum.js         |  14 +++++++++--
 3 files changed, 42 insertions(+), 8 deletions(-)
 create mode 100644 img/favicon.png

diff --git a/css/spectrum/spectrum-overrides.css b/css/spectrum/spectrum-overrides.css
index 44ed8310..6b9059ec 100644
--- a/css/spectrum/spectrum-overrides.css
+++ b/css/spectrum/spectrum-overrides.css
@@ -2,12 +2,26 @@
  * 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 */
 .sp-replacer {
   padding: 3px;
   height: 50%;
   border-width: 0;
   box-sizing: border-box;
+  background-color: #888;
 }
 .sp-replacer:first-of-type {
   padding-bottom: 0px;
@@ -30,19 +44,24 @@
   border-width: 0;
 }
 
+.sp-palette-row-selection {
+  max-width: 62px;
+}
+
 .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 {
   padding-top: 5px;
   padding-right: 5px;
   padding-left: 5px;
-}
-
-.sp-palette .sp-thumb-el {
-  width: 24px;
-  height: 24px;
+  border-left-width: 0;
+  border-right-width: 0;
 }
 
 .sp-slider {
@@ -64,4 +83,9 @@
   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);
+}
+
+.sp-palette .sp-thumb-el.sp-thumb-active {
+  border-color: gold;
+  box-shadow: 0 0 0px 1px gold;
 }
\ No newline at end of file
diff --git a/img/favicon.png b/img/favicon.png
new file mode 100644
index 0000000000000000000000000000000000000000..f85de46de273c6d0058ee69464c5bad1641e8ae9
GIT binary patch
literal 177
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`6`n4RAr}70DGLM)n!cRA^7ns#
z&bi5IZf+M_oHdfxi{CK(w7YC!N9~>1V-_(y3shtdCLZ|Iz^YpCPvcKwO5E8VrElh6
z^p%5!g}ZL--&H@sL57VjK&B(!R5F06{kIkK<2u$5!{h8cJ+_ZlB&q64Dl}T~0F4n~
YJSEp6=*p+T3v>g6r>mdKI;Vst0Kqpr-~a#s

literal 0
HcmV?d00001

diff --git a/js/lib/spectrum/spectrum.js b/js/lib/spectrum/spectrum.js
index 9d740ee6..35b38b6b 100644
--- a/js/lib/spectrum/spectrum.js
+++ b/js/lib/spectrum/spectrum.js
@@ -502,7 +502,7 @@
             hideAll();
             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
             $(doc).bind("mouseup.spectrum", updateColor);
@@ -522,6 +522,16 @@
             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)
         function updateColor(e) {
             var colorHasChanged = !tinycolor.equals(get(), colorOnShow);
@@ -545,7 +555,7 @@
             if (!visible || flat) { return; }
             visible = false;
 
-            $(doc).unbind("click.spectrum", hide);
+            $(doc).unbind("mousedown.spectrum", onMousedown);
 
             // Piskel-specific
             $(doc).unbind("mouseup.spectrum", updateColor);