MAGETWO-89657: Add color formats and converters

 - added preferred color format converter

Author: Robert He

app/code/Magento/Ui/view/base/web/js/form/element/colorPicker.js

@@ -8,9 +8,8 @@ define([
     'uiLayout',
     'mage/translate',
     'Magento_Ui/js/form/element/abstract',
-    'spectrum',
-    'tinycolor'
-], function ($, _, layout, $t, Abstract, spectrum, tinycolor) {
+    'spectrum'
+], function ($, _, layout, $t, Abstract, spectrum) {
     'use strict';
 
     var defaultColorPalette = [
@@ -45,8 +44,16 @@ define([
         initialize: function () {
             this._super();
             this.colorPickerConfig.value = this.value;
+            // $(document).on('click', '.sp-replacer', function () {
+            //     this.focused(true);
+            // });
             return this;
-        }
+        },
+
+        // setFocus: function () {
+        //     this.focused(true);
+        // }
+
     });
 });
 

app/code/Magento/Ui/view/base/web/js/lib/knockout/bindings/colorPicker.js

@@ -23,17 +23,22 @@ define([
         init: function (element, valueAccessor, allBindings, viewModel) {
             var config = valueAccessor();
             config.change = function (value) {
+                if (value == null) {
+                    value = '';
+                }
                 config.value(value.toString());
             };
             config.hide = function (value) {
+                if (value == null) {
+                    value = '';
+                }
                 config.value(value.toString());
             };
             $(element).spectrum(config);
         },
 
         update: function(element, valueAccessor, allBindings, viewModel) {
             var config = valueAccessor();
-            console.log(config.value());
             $(element).spectrum("set", config.value());
         }
     };

app/code/Magento/Ui/view/base/web/templates/form/element/colorPicker.html

@@ -7,11 +7,9 @@
 <div class="admin__field"
      visible="visible"
      css="$data.additionalClasses">
-    <input type="hidden" class="colorpicker-spectrum" data-bind="
-        colorPicker: colorPickerConfig,
-        " style="display: none"/>
+    <input type="hidden" class="colorpicker-spectrum" data-bind="colorPicker: colorPickerConfig" />
     <input type="text" class="colorpicker-input" data-bind="
         value: value,
-        hasFocus: focused,
-        " style="vertical-align: middle"/>
+        hasFocus: true,
+        attr: { placeholder: placeholder }" />
 </div>

app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/module/spectrum.less

@@ -6,6 +6,14 @@ Author: Brian Grinstead
 License: MIT
 ***/
 
+.colorpicker-spectrum {
+  display: none;
+}
+
+.colorpicker-input {
+  vertical-align: middle;
+}
+
 .sp-container {
   position:absolute;
   margin-top: 2px;
@@ -377,6 +385,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   background: #eaeaea;
   color: #333;
   vertical-align: middle;
+  box-sizing: border-box;
 }
 .sp-replacer:hover, .sp-replacer.sp-active {
   border-color: #1979c3;
@@ -396,8 +405,8 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 }
 .sp-preview {
   position:relative;
-  width:25px;
-  height: 24px;
+  width: 25px;
+  height: 25px;
   border: solid 1px #9d9d9d;
   float:left;
   z-index: 0;
@@ -505,7 +514,9 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 .sp-clear-display {
   background-repeat:no-repeat;
   background-position: center;
-  background-image: url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==);
+  //background-image: url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==);
+  background-color: #fff;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSIyNSIgc3R5bGU9ImJhY2tncm91bmQ6I2ZmZiIgdmlld0JveD0iMCAwIDI1IDI1Ij4KICA8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNGMDAiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIGQ9Ik0wLjUsMC41IEwyNS41LDI0LjUiLz4KPC9zdmc+Cg==);
 }
 
 .sp-palette-row-selection {