From 532fc2ca5b9e77c42e69642ad381bcf25271493f Mon Sep 17 00:00:00 2001
From: LaShonda Hopper <lashonda@1stplayable.com>
Date: Mon, 6 Nov 2017 18:04:59 -0500
Subject: [PATCH] [Case 7049] Remove duplicate color fields for shapes (details
 below).

There are 2 types or styles of color picker controls.
    * color-control1: Composed of only a color picker
    * color-control2: Composed of a color picker and rgb fields.  The color can be
      manipulated by either.

Previously for shapes, the Properties tab utilized both types of color controls.
Color-control1 was displayed within the quick properties section; whereas, color-control2 was
displayed farther down within the more detailed sections of Properties tab.

This commit removes the duplication of the fields, opting to utilize color-control2 within
the quick properties portion of the Properties tab.

Changes Committed:
    modified:   scripts/system/html/entityProperties.html
    modified:   scripts/system/html/js/entityProperties.js
---
 scripts/system/html/entityProperties.html  | 20 ++++++-----------
 scripts/system/html/js/entityProperties.js | 26 ++--------------------
 2 files changed, 9 insertions(+), 37 deletions(-)

diff --git a/scripts/system/html/entityProperties.html b/scripts/system/html/entityProperties.html
index 8b2a088d83..e95646e3fa 100644
--- a/scripts/system/html/entityProperties.html
+++ b/scripts/system/html/entityProperties.html
@@ -66,9 +66,14 @@
                 <label for="property-name">Name</label>
                 <input type="text" id="property-name">
             </div>
-            <div class="physical-group color-section property color-control1">
-                <div class="color-picker" id="property-color-control1"></div>
+            <div class="physical-group color-section property rgb fstuple">
+                <div class="color-picker" id="property-color-control2"></div>
                 <label>Entity color</label>
+                <div class="tuple">
+                    <div><input type="number" class="red" id="property-color-red"><label for="property-color-red">Red:</label></div>
+                    <div><input type="number" class="green" id="property-color-green"><label for="property-color-green">Green:</label></div>
+                    <div><input type="number" class="blue" id="property-color-blue"><label for="property-color-blue">Blue:</label></div>
+                </div>
             </div>
         </fieldset>
         <fieldset id="collision-info">
@@ -216,17 +221,6 @@
                     </div>
                 </fieldset>
             </fieldset>
-            <fieldset class="minor">
-                <div class="physical-group color-section property rgb fstuple">
-                    <div class="color-picker" id="property-color-control2"></div>
-                    <label>Entity color</label>
-                    <div class="tuple">
-                        <div><input type="number" class="red" id="property-color-red"><label for="property-color-red">Red:</label></div>
-                        <div><input type="number" class="green" id="property-color-green"><label for="property-color-green">Green:</label></div>
-                        <div><input type="number" class="blue" id="property-color-blue"><label for="property-color-blue">Blue:</label></div>
-                    </div>
-                </div>
-            </fieldset>
         </fieldset>
 
 
diff --git a/scripts/system/html/js/entityProperties.js b/scripts/system/html/js/entityProperties.js
index f54394a353..3286b06998 100644
--- a/scripts/system/html/js/entityProperties.js
+++ b/scripts/system/html/js/entityProperties.js
@@ -592,8 +592,7 @@ function loaded() {
         var elJSONEditor = document.getElementById("userdata-editor");
         var elNewJSONEditor = document.getElementById('userdata-new-editor');
         var elColorSections = document.querySelectorAll(".color-section");
-        var elColorControl1 = document.getElementById("property-color-control1");
-        var elColorControl2 = document.getElementById("property-color-control2");
+        var elColorControlVariant2 = document.getElementById("property-color-control2");
         var elColorRed = document.getElementById("property-color-red");
         var elColorGreen = document.getElementById("property-color-green");
         var elColorBlue = document.getElementById("property-color-blue");
@@ -977,7 +976,7 @@ function loaded() {
                             elColorRed.value = properties.color.red;
                             elColorGreen.value = properties.color.green;
                             elColorBlue.value = properties.color.blue;
-                            elColorControl1.style.backgroundColor = elColorControl2.style.backgroundColor = "rgb(" + properties.color.red + "," + properties.color.green + "," + properties.color.blue + ")";
+                            elColorControlVariant2.style.backgroundColor = "rgb(" + properties.color.red + "," + properties.color.green + "," + properties.color.blue + ")";
                         }
 
                         if (properties.type == "Model") {
@@ -1303,24 +1302,6 @@ function loaded() {
         elColorRed.addEventListener('change', colorChangeFunction);
         elColorGreen.addEventListener('change', colorChangeFunction);
         elColorBlue.addEventListener('change', colorChangeFunction);
-        colorPickers.push($('#property-color-control1').colpick({
-            colorScheme: 'dark',
-            layout: 'hex',
-            color: '000000',
-            onShow: function(colpick) {
-                $('#property-color-control1').attr('active', 'true');
-            },
-            onHide: function(colpick) {
-                $('#property-color-control1').attr('active', 'false');
-            },
-            onSubmit: function(hsb, hex, rgb, el) {
-                $(el).css('background-color', '#' + hex);
-                $(el).colpickHide();
-                emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b);
-                // Keep the companion control in sync
-                elColorControl2.style.backgroundColor = "rgb(" + rgb.r + "," + rgb.g + "," + rgb.b + ")";
-            }
-        }));
         colorPickers.push($('#property-color-control2').colpick({
             colorScheme: 'dark',
             layout: 'hex',
@@ -1335,9 +1316,6 @@ function loaded() {
                 $(el).css('background-color', '#' + hex);
                 $(el).colpickHide();
                 emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b);
-                // Keep the companion control in sync
-                elColorControl1.style.backgroundColor = "rgb(" + rgb.r + "," + rgb.g + "," + rgb.b + ")";
-
             }
         }));