Design attempt

css/spectrum/spectrum-overrides.css

@@ -18,18 +18,11 @@
 /* Remove the padding on the input container */
 .sp-replacer {
   padding: 3px;
-  height: 50%;
+  height: 100%;
   border-width: 0;
   box-sizing: border-box;
   background-color: #888;
 }
-.sp-replacer:first-of-type {
-  padding-bottom: 0px;
-}
-.sp-replacer:not(:first-of-type) {
-  padding-top: 0px;
-}
-
 /* Hide the triangle */
 .sp-dd {
   display: none;

css/tools.css

@@ -149,6 +149,9 @@
   margin-left: 0;
 }
 
+.palette-wrapper {
+  margin-top: 10px;
+}
 
 .palette-color[data-color=TRANSPARENT] {
   position: relative;

js/controller/PaletteController.js

@@ -36,10 +36,13 @@
     var colorPicker = $('#color-picker');
     colorPicker.spectrum($.extend({color: Constants.DEFAULT_PEN_COLOR}, spectrumCfg));
     colorPicker.change({isPrimary : true}, $.proxy(this.onPickerChange_, this));
+    this.setTitleOnPicker_(Constants.DEFAULT_PEN_COLOR, colorPicker);
 
     var secondaryColorPicker = $('#secondary-color-picker');
     secondaryColorPicker.spectrum($.extend({color: Constants.TRANSPARENT_COLOR}, spectrumCfg));
     secondaryColorPicker.change({isPrimary : false}, $.proxy(this.onPickerChange_, this));
+    this.setTitleOnPicker_(Constants.TRANSPARENT_COLOR, secondaryColorPicker);
+
   };
 
   /**
@@ -128,6 +131,12 @@
     } else {
       colorPicker.spectrum("set", color);
     }
+    this.setTitleOnPicker_(color, colorPicker);
+  };
+
+  ns.PaletteController.prototype.setTitleOnPicker_ = function (title, colorPicker) {
+    var spectrumInputSelector = '.sp-replacer';
+    colorPicker.next(spectrumInputSelector).attr('title', title);
   };
 })();
 

js/lib/spectrum/spectrum.js

@@ -524,8 +524,8 @@
 
         function onMousedown (e) {
             var target = $(e.target);
-            var parents = target.parents();
-            var isClickOutsideWidget = !parents.is(container) && !target.is(container);
+            var parents = target.closest();
+            var isClickOutsideWidget = !parents.is(container);
 
             if (isClickOutsideWidget) {
                 hide(e);

templates/drawing-tools.html

@@ -5,12 +5,9 @@
       <div class="palette-wrapper">
         <div class="tool-icon tool-color-picker">
           <input id="color-picker" class="color" type="text"/>
-          <input id="secondary-color-picker" class="secondary-color-picker color" type="text" />
         </div>
-        <div class="tool-icon tool-palette">
-          <div>
-            <span class="tool-icon palette-color" data-color="TRANSPARENT" title="Transparent"></span>
-          </div>
+        <div class="tool-icon tool-color-picker">
+          <input id="secondary-color-picker" class="secondary-color-picker color" type="text" />
         </div>
       </div>
     </div>