From 7088d9aa332826f4899ed523425d76aba11cda88 Mon Sep 17 00:00:00 2001
From: GMartigny <guillaume.martigny@gmail.com>
Date: Sat, 5 Mar 2016 17:23:25 +0100
Subject: [PATCH] Revert modifications after discussion

---
 src/css/spectrum/spectrum.css          |  2 +-
 src/css/tools.css                      |  7 -------
 src/js/controller/PaletteController.js | 28 +++++++-------------------
 src/templates/drawing-tools.html       |  1 -
 4 files changed, 8 insertions(+), 30 deletions(-)

diff --git a/src/css/spectrum/spectrum.css b/src/css/spectrum/spectrum.css
index c21fad6a..850e1930 100644
--- a/src/css/spectrum/spectrum.css
+++ b/src/css/spectrum/spectrum.css
@@ -13,7 +13,7 @@ License: MIT
     *display: inline;
     *zoom: 1;
     /* https://github.com/bgrins/spectrum/issues/40 */
-    z-index: 20000;
+    z-index: 9999994;
     overflow: hidden;
 }
 .sp-container.sp-flat {
diff --git a/src/css/tools.css b/src/css/tools.css
index 18565425..0b13b42b 100644
--- a/src/css/tools.css
+++ b/src/css/tools.css
@@ -159,10 +159,3 @@
   );
 }
 
-.palette-value-displayer{
-    color: #FFF;
-    text-align: center;
-    clear: both;
-    padding-top: 3px;
-    min-height: 1em;
-}
diff --git a/src/js/controller/PaletteController.js b/src/js/controller/PaletteController.js
index 8170bdcc..9bc45fff 100644
--- a/src/js/controller/PaletteController.js
+++ b/src/js/controller/PaletteController.js
@@ -1,9 +1,7 @@
 (function () {
   var ns = $.namespace('pskl.controller');
 
-  ns.PaletteController = function () {
-    this.displayer = $('.palette-value-displayer');
-  };
+  ns.PaletteController = function () {};
 
   /**
    * @public
@@ -34,14 +32,12 @@
     var colorPicker = $('#color-picker');
     colorPicker.spectrum($.extend({color: Constants.DEFAULT_PEN_COLOR}, spectrumCfg));
     colorPicker.change({isPrimary : true}, $.proxy(this.onPickerChange_, this));
-    colorPicker.parent().mouseenter({isPrimary : true}, $.proxy(this.showValueDisplayer_, this))
-      .mouseleave($.proxy(this.hideValueDisplayer_, 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));
-    secondaryColorPicker.parent().mouseenter({isPrimary : false}, $.proxy(this.showValueDisplayer_, this))
-      .mouseleave($.proxy(this.hideValueDisplayer_, this));
+    this.setTitleOnPicker_(Constants.TRANSPARENT_COLOR, secondaryColorPicker);
 
     var swapColorsIcon = $('.swap-colors-button');
     swapColorsIcon.click(this.swapColors.bind(this));
@@ -110,21 +106,11 @@
     } else {
       colorPicker.spectrum('set', color);
     }
+    this.setTitleOnPicker_(color, colorPicker);
   };
 
-  /**
-   * @private
-   */
-  ns.PaletteController.prototype.showValueDisplayer_ = function (evt) {
-    var color = evt.data.isPrimary ?
-      pskl.app.selectedColorsService.getPrimaryColor() :
-      pskl.app.selectedColorsService.getSecondaryColor();
-    this.displayer.html(color);
-  };
-  /**
-   * @private
-   */
-  ns.PaletteController.prototype.hideValueDisplayer_ = function (evt) {
-    this.displayer.html('');
+  ns.PaletteController.prototype.setTitleOnPicker_ = function (title, colorPicker) {
+    var spectrumInputSelector = '.sp-replacer';
+    colorPicker.next(spectrumInputSelector).attr('title', title);
   };
 })();
diff --git a/src/templates/drawing-tools.html b/src/templates/drawing-tools.html
index f1254817..638e6646 100644
--- a/src/templates/drawing-tools.html
+++ b/src/templates/drawing-tools.html
@@ -33,7 +33,6 @@
           rel="tooltip"
           data-placement="right"
         ></div>
-        <div class="palette-value-displayer"></div>
       </div>
     </div>
   </div>