From 865cdc09c6bd0e0fef342f09139a82b5120bf3fd Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Sun, 30 Sep 2018 10:50:05 +0200
Subject: [PATCH] U4-11588 - Adjustments of color picker (#2864)

---
 .../forms/hexbackgroundcolor.directive.js     | 54 +++++++++--------
 .../components/umbcolorswatches.directive.js  | 15 +++--
 .../components/prevalues/multivalues.less     |  1 +
 .../less/components/umb-color-swatches.less   | 59 ++++++++++++++++++-
 .../src/less/property-editors.less            | 29 +--------
 .../overlays/iconpicker/iconpicker.html       |  8 ++-
 .../views/components/umb-color-swatches.html  | 14 +++--
 .../colorpicker/colorpicker.html              | 23 +++-----
 8 files changed, 123 insertions(+), 80 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/hexbackgroundcolor.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/hexbackgroundcolor.directive.js
index 5a425b7c90..eb64439e0b 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/hexbackgroundcolor.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/hexbackgroundcolor.directive.js
@@ -11,32 +11,36 @@ function hexBgColor() {
         restrict: "A",
         link: function (scope, element, attr, formCtrl) {
 
-            var origColor = null;
-            if (attr.hexBgOrig) {
-                //set the orig based on the attribute if there is one
-                origColor = attr.hexBgOrig;
-            }
-            
-            attr.$observe("hexBgColor", function (newVal) {
-                if (newVal) {
-                    if (!origColor) {
-                        //get the orig color before changing it
-                        origColor = element.css("border-color");
-                    }
-                    //validate it - test with and without the leading hash.
-                    if (/^([0-9a-f]{3}|[0-9a-f]{6})$/i.test(newVal)) {
-                        element.css("background-color", "#" + newVal);
-                        return;
-                    }
-                    if (/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(newVal)) {
-                        element.css("background-color", newVal);
-                        return;
-                    }
-                }
-                element.css("background-color", origColor);
-            });
+            // Only add inline hex background color if defined and not "true".
+            if (attr.hexBgInline === undefined || (attr.hexBgInline !== undefined && attr.hexBgInline === "true")) {
 
+                var origColor = null;
+                if (attr.hexBgOrig) {
+                    // Set the orig based on the attribute if there is one.
+                    origColor = attr.hexBgOrig;
+                }
+            
+                attr.$observe("hexBgColor", function (newVal) {
+                    if (newVal) {
+                        if (!origColor) {
+                            // Get the orig color before changing it.
+                            origColor = element.css("border-color");
+                        }
+                        // Validate it - test with and without the leading hash.
+                        if (/^([0-9a-f]{3}|[0-9a-f]{6})$/i.test(newVal)) {
+                            element.css("background-color", "#" + newVal);
+                            return;
+                        }
+                        if (/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(newVal)) {
+                            element.css("background-color", newVal);
+                            return;
+                        }
+                    }
+
+                    element.css("background-color", origColor);
+                });
+            }
         }
     };
 }
-angular.module('umbraco.directives').directive("hexBgColor", hexBgColor);
\ No newline at end of file
+angular.module('umbraco.directives').directive("hexBgColor", hexBgColor);
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcolorswatches.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcolorswatches.directive.js
index 6ed65a9431..dc67cb464b 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcolorswatches.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcolorswatches.directive.js
@@ -1,5 +1,4 @@
-
-/**
+/**
 @ngdoc directive
 @name umbraco.directives.directive:umbColorSwatches
 @restrict E
@@ -15,9 +14,10 @@ Use this directive to generate color swatches to pick from.
     </umb-color-swatches>
 </pre>
 @param {array} colors (<code>attribute</code>): The array of colors.
-@param {string} colors (<code>attribute</code>): The array of colors.
 @param {string} selectedColor (<code>attribute</code>): The selected color.
 @param {string} size (<code>attribute</code>): The size (s, m).
+@param {string} useLabel (<code>attribute</code>): Specify if labels should be used.
+@param {string} useColorClass (<code>attribute</code>): Specify if color values are css classes.
 @param {function} onSelect (<code>expression</code>): Callback function when the item is selected.
 **/
 
@@ -28,6 +28,11 @@ Use this directive to generate color swatches to pick from.
 
         function link(scope, el, attr, ctrl) {
 
+            // Set default to true if not defined
+            if (angular.isUndefined(scope.useColorClass)) {
+                scope.useColorClass = false;
+            }
+            
             scope.setColor = function (color) {
                 //scope.selectedColor({color: color });
                 scope.selectedColor = color;
@@ -47,7 +52,9 @@ Use this directive to generate color swatches to pick from.
                 colors: '=?',
                 size: '@',
                 selectedColor: '=',
-                onSelect: '&'
+                onSelect: '&',
+                useLabel: '=',
+                useColorClass: '=?'
             },
             link: link
         };
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/prevalues/multivalues.less b/src/Umbraco.Web.UI.Client/src/less/components/prevalues/multivalues.less
index 5363a8db9b..43f6697eb1 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/prevalues/multivalues.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/prevalues/multivalues.less
@@ -10,6 +10,7 @@
 .umb-prevalues-multivalues__left {
     display: flex;
     flex: 1 1 auto;
+    overflow: hidden;
 }
 
 .umb-prevalues-multivalues__right {
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-color-swatches.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-color-swatches.less
index e27bd0d654..df80aef2ce 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-color-swatches.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-color-swatches.less
@@ -1,18 +1,22 @@
 .umb-color-swatches {
+    display: flex;
+    flex-flow: row wrap;
 
     .umb-color-box {
         border: none;
         color: white;
         cursor: pointer;
-        padding: 5px;
+        padding: 1px;
         text-align: center;
         text-decoration: none;
-        display: inline-block;
         margin: 5px;
         border-radius: 3px;
         width: 30px;
         height: 30px;
         transition: box-shadow .3s;
+        display: flex;
+        align-items: center;
+        justify-content: center;
 
         &:hover, &:focus {
             box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
@@ -34,4 +38,55 @@
             }
         }
     }
+
+    &.with-labels {
+
+        .umb-color-box {
+            width: 120px;
+            height: 100%;
+            display: flex;
+            flex-flow: row wrap;
+
+            .umb-color-box-inner {
+                display: flex;
+                flex-flow: column wrap;
+                flex: 0 0 100%;
+                max-width: 100%;
+                min-height: 80px;
+                padding-top: 10px;
+
+                .umb-color-box__label {
+                    background: #fff;
+                    font-size: 14px;
+                    display: flex;
+                    flex-flow: column wrap;
+                    flex: 0 0 100%;
+                    padding: 1px 5px;
+                    max-width: 100%;
+                    margin-top: auto;
+                    margin-bottom: -3px;
+                    margin-left: -1px;
+                    margin-right: -1px;
+                    text-indent: 0;
+                    text-align: left;
+                    border: 1px solid @gray-8;
+                    border-bottom-left-radius: 3px;
+                    border-bottom-right-radius: 3px;
+                    overflow: hidden;
+
+                    .umb-color-box__name {
+                        color: @black;
+                        font-weight: bold;
+                        margin-top: 3px;
+                    }
+
+                    .umb-color-box__description {
+                        font-size: 12px;
+                        line-height: 1.5em;
+                        color: @gray-3;
+                    }
+                }
+            }
+        }
+    }
 }
diff --git a/src/Umbraco.Web.UI.Client/src/less/property-editors.less b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
index fabe7c2291..88e5842b91 100644
--- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less
+++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
@@ -133,33 +133,6 @@ div.umb-codeeditor .umb-btn-toolbar {
 //
 // Color picker
 // --------------------------------------------------
-ul.color-picker li {
-    padding: 2px;
-    margin: 3px;
-    border: 2px solid transparent;
-    width: 60px;
-
-    &.active {
-        .check_circle {
-            opacity: 1;
-        }
-    }
-
-    .thumbnail{
-        min-width: auto;
-        width: inherit;
-        padding: 0;
-    }
-
-    a {
-        height: 50px;
-        display:flex;
-        align-items: center;
-        justify-content: center;
-        cursor:pointer;
-        margin: 0 0 5px;
-    }
-}
 
 /* pre-value editor */
 .control-group.color-picker-preval {
@@ -180,7 +153,7 @@ ul.color-picker li {
     div.color-picker-prediv {
         display: inline-flex;
         align-items: center;
-        max-width: 80%;
+        max-width: 85%;
 
         pre {
             display: inline-flex;
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/iconpicker/iconpicker.html b/src/Umbraco.Web.UI.Client/src/views/common/overlays/iconpicker/iconpicker.html
index 0098463cb4..de99c2a143 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/iconpicker/iconpicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/iconpicker/iconpicker.html
@@ -1,5 +1,3 @@
-
-
 <div ng-controller="Umbraco.Overlays.IconPickerOverlay">
 
     <div class="umb-control-group">
@@ -17,7 +15,11 @@
     </div>
 
     <div class="umb-control-group">
-        <umb-color-swatches colors="colors" selected-color="color" size="s"></umb-color-swatches>
+        <umb-color-swatches colors="colors"
+                            selected-color="color"
+                            size="s"
+                            use-color-class="true">
+        </umb-color-swatches>
     </div>
 
     <umb-load-indicator ng-if="loading"></umb-load-indicator>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-color-swatches.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-color-swatches.html
index eae299e579..a89e51ab32 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-color-swatches.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-color-swatches.html
@@ -1,8 +1,14 @@
-<div class="umb-color-swatches">
+<div class="umb-color-swatches" ng-class="{ 'with-labels': useLabel }">
 
-    <button class="umb-color-box umb-color-box--{{size}} btn-{{color.value}}" ng-repeat="color in colors" title="{{color.name}}" ng-class="{active:color.value === selectedColor}" ng-click="setColor(color.value)">
-        <div class="check_circle">
-            <i class="icon icon-check small"></i>
+    <button type="button" class="umb-color-box umb-color-box--{{size}} btn-{{color.value}}" ng-repeat="color in colors" title="{{color.label}}" hex-bg-inline="{{useColorClass === false}}" hex-bg-color="{{color.value}}" ng-class="{ 'active': color.value === selectedColor }" ng-click="setColor(color.value)">
+        <div class="umb-color-box-inner">
+            <div class="check_circle">
+                <i class="icon icon-check small"></i>
+            </div>
+            <div class="umb-color-box__label" ng-if="useLabel">
+                <div class="umb-color-box__name truncate">{{ color.label }}</div>
+                <div class="umb-color-box__description">#{{ color.value }}</div>
+            </div>
         </div>
     </button>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.html
index 8e4a8d2a63..ccea7519ac 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.html
@@ -1,20 +1,15 @@
 <div ng-controller="Umbraco.PropertyEditors.ColorPickerController">
 
-	<div ng-if="!isConfigured" >
-		<localize key="colorpicker_noColors">You haven't defined any colors</localize>
-	</div>
+    <div ng-if="!isConfigured">
+        <localize key="colorpicker_noColors">You haven't defined any colors</localize>
+    </div>
 
-    <ul class="thumbnails color-picker">
-        <li ng-repeat="(key, val) in model.config.items" ng-class="{active: isActiveColor(val)}">
-            <a ng-click="toggleItem(val)" class="thumbnail" hex-bg-color="{{val.value}}">
-                <div class="check_circle">
-                    <i class="icon icon-check small"></i>
-                </div>
-            </a>
-            <span class="color-label" ng-if="model.useLabel" ng-bind="val.label"></span>
-        </li>
-    </ul>
+    <umb-color-swatches colors="model.config.items"
+                        selected-color="model.value.value"
+                        size="m"
+                        use-label="model.useLabel">
+    </umb-color-swatches>
 
-    <input type="hidden" name="modelValue" ng-model="model.value" val-property-validator="validateMandatory"/>
+    <input type="hidden" name="modelValue" ng-model="model.value" val-property-validator="validateMandatory" />
 
 </div>