[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
This commit is contained in:
LaShonda Hopper 2017-11-06 18:04:59 -05:00
parent 7490744fb7
commit 532fc2ca5b
2 changed files with 9 additions and 37 deletions

View file

@ -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>

View file

@ -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 + ")";
}
}));