Merge branch 'feat/ui-updates' of github.com:huffman/hifi into newPropertySliders

scripts/system/html/css/edit-style.css

@@ -876,6 +876,7 @@ div.refresh input[type="button"] {
 }
 .rgb div.legend + * {
     clear: both;
+<<<<<<< HEAD
 }
 
 .draggable-number {
@@ -903,6 +904,8 @@ div.refresh input[type="button"] {
 .draggable-number input::-webkit-inner-spin-button {
     -webkit-appearance: none;
     visibility: hidden;
+=======
+>>>>>>> a787f55506f73c2617ce12e5fd6b2d129c9bb03e
 }
 
 .row .property {
@@ -1441,6 +1444,7 @@ th#entity-hasScript {
     display: inline-block;
 }
 
+<<<<<<< HEAD
 /*
 #properties-base #div-property-locked {
     position: absolute;
@@ -1464,6 +1468,8 @@ th#entity-hasScript {
 }
 */
 
+=======
+>>>>>>> a787f55506f73c2617ce12e5fd6b2d129c9bb03e
 #properties-base .checkbox label span {
     font-family: HiFi-Glyphs;
     font-size: 20px;
@@ -1489,9 +1495,11 @@ th#entity-hasScript {
 }
 
 input#property-scale-button-rescale {
+    margin-top: 6px;
     min-width: 50px;
 }
 input#property-scale-button-reset {
+    margin-top: 6px;
     margin-right: 0;
 }
 
@@ -1700,3 +1708,104 @@ input.number-slider {
 #toggle-space-mode.space-mode-world::before {
     content: "\e02c";
 }
+<<<<<<< HEAD
+=======
+
+.container {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-around;
+    margin-bottom: 8px;
+    min-height: 28px;
+}
+
+.container > label {
+    margin-top: 6px;
+    width: 200px;
+}
+
+.container > div.checkbox {
+    padding-top: 6px;
+}
+
+.container > .value {
+    width: 100%;
+}
+
+.container .row {
+    display: flex;
+    flex-flow: row nowrap;
+}
+
+.container.shrink {
+    width: min-content;
+}
+
+.fstuple {
+    display: flex;
+    flex-flow: row;
+}
+.fstuple input {
+    margin-left: 4px;
+    margin-right: 10px;
+}
+.fstuple label.red, .fstuple label.x {
+    color: #C62147;
+}
+.fstuple label.green, .fstuple label.y {
+    color: #359D85;
+}
+.fstuple label.blue, .fstuple label.z {
+    color: #0093C5;
+}
+
+.xyz.fstuple, .pyr.fstuple {
+    position: relative;
+    left: -12px;
+}
+
+.rgb.fstuple .tuple {
+    display: none;
+}
+
+input.number-slider {
+    background: #575757;
+    border-radius: 4px;
+    color: white;
+}
+
+.fstuple > div {
+    display: flex;
+    align-items: center;
+    justify-content: left;
+}
+
+.flex-row {
+    display: flex;
+    flex-flow: row;
+}
+
+.flex-column {
+    display: flex;
+    flex-flow: column;
+}
+
+.flex-center {
+    align-items: center;
+}
+
+.flex-evenly-spaced {
+    flex: 1;
+}
+
+#property-serverScripts-status {
+    font-family: Raleway-Light;
+    font-size: 14px;
+    margin: 6px 0;
+}
+
+#property-name, #property-id {
+    display: flex;
+    width: 100%;
+}
+>>>>>>> a787f55506f73c2617ce12e5fd6b2d129c9bb03e

scripts/system/html/js/entityProperties.js

@@ -1043,7 +1043,7 @@ const GROUPS = [
                 vec3Type: "pyr",
                 step: 0.1,
                 decimals: 4,
-                subLabels: [ "pitch", "yaw", "roll" ],
+                subLabels: [ "x", "y", "z" ],
                 unit: "deg",
                 propertyID: "localRotation",
                 spaceMode: PROPERTY_SPACE_MODE.LOCAL,
@@ -1421,7 +1421,7 @@ function debugPrint(message) {
 }
 
 function createElementFromHTML(htmlString) {
-    var elTemplate = document.createElement('template');
+    let elTemplate = document.createElement('template');
     elTemplate.innerHTML = htmlString.trim();
     return elTemplate.content.firstChild;
 }
@@ -1828,7 +1828,7 @@ function createNumberProperty(property, elProperty) {
     let propertyData = property.data;
     
     elProperty.className = "draggable-number";
-    
+
     let elDraggableNumber = new DraggableNumber(propertyData.min, propertyData.max, propertyData.step);
     
     let defaultValue = propertyData.defaultValue;   
@@ -1856,11 +1856,6 @@ function createVec3Property(property, elProperty) {
 
     elProperty.className = propertyData.vec3Type + " fstuple";
     
-    //let elTuple = document.createElement('div');
-    //elTuple.className = "tuple";
-    
-    //elProperty.appendChild(elTuple);
-    
     let elNumberX = createTupleNumberInput(elProperty, elementID, propertyData.subLabels[VECTOR_ELEMENTS.X_INPUT], 
                                            propertyData.min, propertyData.max, propertyData.step);
     let elNumberY = createTupleNumberInput(elProperty, elementID, propertyData.subLabels[VECTOR_ELEMENTS.Y_INPUT], 
@@ -2030,9 +2025,7 @@ function createIconProperty(property, elProperty) {
 
     elProperty.appendChild(elSpan);
     
-    let elResult = [];
+    return elSpan;
-    elResult[ICON_ELEMENTS.ICON] = elSpan;
-    return elResult;
 }
 
 function createTextureProperty(property, elProperty) { 
@@ -2095,9 +2088,7 @@ function createButtonsProperty(property, elProperty, elLabel) {
     elProperty.className = "text";
                         
     let hasLabel = propertyData.label !== undefined;
-    if (hasLabel) {
+
-    }
-    
     if (propertyData.buttons !== undefined) {
         addButtons(elProperty, elementID, propertyData.buttons, false);
     }
@@ -2836,7 +2827,7 @@ function loaded() {
                 } else {
                     elContainer = document.getElementById(propertyData.replaceID);
                 }
-                
+
                 if (elLabel) {
                     createAppTooltip.registerTooltipElement(elLabel, propertyID);
                 }
@@ -2844,9 +2835,9 @@ function loaded() {
                 let elProperty = createElementFromHTML('<div style="width: 100%;"></div>');
                 elContainer.appendChild(elProperty);
 
-                if (propertyType == 'triple') {
+                if (propertyType === 'triple') {
                     elProperty.className = 'flex-row';
-                    for (var i = 0; i < propertyData.properties.length; ++i) {
+                    for (let i = 0; i < propertyData.properties.length; ++i) {
                         let innerPropertyData = propertyData.properties[i];
 
                         let elWrapper = createElementFromHTML('<div class="flex-column flex-center triple-item"><div></div></div>');
@@ -2862,6 +2853,8 @@ function loaded() {
                         let property = createProperty(innerPropertyData, propertyElementID, propertyName, propertyID, elWrapper.childNodes[0]);
                         property.isParticleProperty = group.id.includes("particles");
                         property.elContainer = elContainer;
+
+                        property.spaceMode = propertySpaceMode;
                         
                         if (property.type !== 'placeholder') {
                             properties[propertyID] = property;
@@ -2869,10 +2862,9 @@ function loaded() {
                     }
                 } else {
                     let property = createProperty(propertyData, propertyElementID, propertyName, propertyID, elProperty);
-                    property.elementID = propertyElementID;
-                    property.name = propertyName;
                     property.isParticleProperty = group.id.includes("particles");
                     property.elContainer = elContainer;
+                    property.spaceMode = propertySpaceMode;
                     
                     if (property.type !== 'placeholder') {
                         properties[propertyID] = property;