Improve Create properties for particles + materials

Sizing of input fields is now flexible.
Material scale field labels are no longer obscured.
Material tooltips are corrected.

scripts/system/assets/data/createAppTooltips.json

@@ -267,7 +267,7 @@
         "jsPropertyName": "parentMaterialName"
     },
     "selectSubmesh": {
-        "tooltip": "If enabled, \"Select Submesh\" property will show up, otherwise \"Material Name to Replace\" will be shown.",
+        "tooltip": "If enabled, \"Submesh to Replace\" property will show up, otherwise \"Material to Replace\" will be shown.",
         "skipJSProperty": true
     },
     "priority": {

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

@@ -598,6 +598,7 @@ div.section[collapsed="true"], div.section[collapsed="true"] > .section-header {
 
 .triple-label {
     text-transform: uppercase;
+    text-align: center;
     padding: 6px 0;
 }
 
@@ -605,6 +606,10 @@ div.section[collapsed="true"], div.section[collapsed="true"] > .section-header {
     margin-right: 10px;
 }
 
+.triple-item.rgb.fstuple {
+    display: block !important;
+}
+
 .section-header[collapsed="true"] {
     margin-bottom: -21px;
 }
@@ -911,14 +916,17 @@ div.refresh input[type="button"] {
     clear: both;
 }
 
+.draggable-number-container {
+    flex: 0 1 124px;
+}
 .draggable-number {
     position: relative;
-}
-.draggable-number div {
     height: 28px;
-    width: 124px;
+    flex: 0 1 124px;
 }
-.draggable-number.text {
+
+.draggable-number .text {
+    position: absolute;
     display: inline-block;
     color: #afafaf;
     background-color: #252525;
@@ -930,11 +938,12 @@ div.refresh input[type="button"] {
     width: 100%;
     line-height: 2;
     box-sizing: border-box;
+    z-index: 1;
 }
-.draggable-number.text:hover {
+.draggable-number .text:hover {
     cursor: ew-resize;
 }
-.draggable-number span {
+.draggable-number .left-arrow, .draggable-number .right-arrow {
     position: absolute;
     display: inline-block;
     font-family: HiFi-Glyphs;
@@ -944,12 +953,12 @@ div.refresh input[type="button"] {
 .draggable-number span:hover {
     cursor: default;
 }
-.draggable-number.left-arrow {
+.draggable-number .left-arrow {
     top: 3px;
     left: 0px;
     transform: rotate(180deg);
 }
-.draggable-number.right-arrow {
+.draggable-number .right-arrow {
     top: 3px;
     right: 0px;
 }
@@ -1514,6 +1523,7 @@ input.rename-entity {
     width: 258px;
     min-height: 20px;
     padding: 5px;
+    z-index: 100;
 }
 
 .create-app-tooltip .create-app-tooltip-description {
@@ -1629,10 +1639,6 @@ input.number-slider {
     flex-flow: column;
 }
 
-.flex-column + .flex-column {
-    padding-left: 50px;
-}
-
 .flex-center {
     align-items: center;
 }

scripts/system/html/js/draggableNumber.js

@@ -156,8 +156,8 @@ DraggableNumber.prototype = {
         this.elDiv = document.createElement('div');
         this.elDiv.className = "draggable-number";
         
-        this.elText = document.createElement('label');
-        this.elText.className = "draggable-number text";
+        this.elText = document.createElement('span');
+        this.elText.className = "text";
         this.elText.innerText = " ";
         this.elText.style.visibility = "visible";
         this.elText.addEventListener("mousedown", this.onMouseDown);
@@ -165,15 +165,15 @@ DraggableNumber.prototype = {
         
         this.elLeftArrow = document.createElement('span');
         this.elRightArrow = document.createElement('span');
-        this.elLeftArrow.className = 'draggable-number left-arrow';
+        this.elLeftArrow.className = 'left-arrow';
         this.elLeftArrow.innerHTML = 'D';
         this.elLeftArrow.addEventListener("click", this.onStepDown);
-        this.elRightArrow.className = 'draggable-number right-arrow';
+        this.elRightArrow.className = 'right-arrow';
         this.elRightArrow.innerHTML = 'D';
         this.elRightArrow.addEventListener("click", this.onStepUp);
         
         this.elInput = document.createElement('input');
-        this.elInput.className = "draggable-number input";
+        this.elInput.className = "input";
         this.elInput.setAttribute("type", "number");
         if (this.min !== undefined) {
             this.elInput.setAttribute("min", this.min);
@@ -190,8 +190,8 @@ DraggableNumber.prototype = {
         this.elInput.addEventListener("focus", this.showInput.bind(this));
         
         this.elDiv.appendChild(this.elLeftArrow);
+        this.elDiv.appendChild(this.elText);
         this.elDiv.appendChild(this.elInput);
         this.elDiv.appendChild(this.elRightArrow);
-        this.elDiv.appendChild(this.elText);
     }
 };

scripts/system/html/js/entityProperties.js

@@ -556,22 +556,24 @@ const GROUPS = [
                            { id: "save", label: "Save Material Data", className: "black", onClick: saveMaterialData } ],
                 propertyID: "materialData",
             },
+            {
+                label: "Select Submesh",
+                type: "bool",
+                propertyID: "selectSubmesh",
+            },
             {
                 label: "Submesh to Replace",
                 type: "number",
                 min: 0,
                 step: 1,
                 propertyID: "submeshToReplace",
+                indentedLabel: true,
             },
             {
-                label: "Material Name to Replace",
+                label: "Material to Replace",
                 type: "string",
                 propertyID: "materialNameToReplace",
-            },
-            {
-                label: "Select Submesh",
-                type: "bool",
-                propertyID: "selectSubmesh",
+                indentedLabel: true,
             },
             {
                 label: "Priority",
@@ -582,7 +584,7 @@ const GROUPS = [
             {
                 label: "Material Position",
                 type: "vec2",
-                vec2Type: "xy",
+                vec2Type: "xyz",
                 min: 0,
                 max: 1,
                 step: 0.1,
@@ -593,11 +595,11 @@ const GROUPS = [
             {
                 label: "Material Scale",
                 type: "vec2",
-                vec2Type: "wh",
+                vec2Type: "xyz",
                 min: 0,
                 step: 0.1,
                 decimals: 4,
-                subLabels: [ "width", "height" ],
+                subLabels: [ "x", "y" ],
                 propertyID: "materialMappingScale",
             },
             {
@@ -1858,7 +1860,7 @@ function createNumberProperty(property, elProperty) {
     let elementID = property.elementID;
     let propertyData = property.data;
     
-    elProperty.className = "draggable-number";
+    elProperty.className += " draggable-number-container";
 
     let dragStartFunction = createDragStartFunction(property);
     let dragEndFunction = createDragEndFunction(property);
@@ -1937,7 +1939,7 @@ function createColorProperty(property, elProperty) {
     let elementID = property.elementID;
     let propertyData = property.data;
     
-    elProperty.className = "rgb fstuple";
+    elProperty.className += " rgb fstuple";
     
     let elColorPicker = document.createElement('div');
     elColorPicker.className = "color-picker";
@@ -1978,6 +1980,7 @@ function createColorProperty(property, elProperty) {
         color: '000000',
         submit: false, // We don't want to have a submission button
         onShow: function(colpick) {
+            console.log("Showing");
             $(colorPickerID).attr('active', 'true');
             // The original color preview within the picker needs to be updated on show because
             // prior to the picker being shown we don't have access to the selections' starting color.
@@ -2879,20 +2882,20 @@ function loaded() {
                     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>');
+                        let elWrapper = createElementFromHTML('<div class="triple-item"></div>');
+                        elProperty.appendChild(elWrapper);
 
                         let propertyID = innerPropertyData.propertyID;               
                         let propertyName = innerPropertyData.propertyName !== undefined ? innerPropertyData.propertyName : propertyID;
                         let propertyElementID = "property-" + propertyID;
                         propertyElementID = propertyElementID.replace('.', '-');
 
-                        elWrapper.appendChild(createElementFromHTML(`<div class="triple-label">${innerPropertyData.label}</div>`));
-                        elProperty.appendChild(elWrapper);
-
-                        let property = createProperty(innerPropertyData, propertyElementID, propertyName, propertyID, elWrapper.childNodes[0]);
+                        let property = createProperty(innerPropertyData, propertyElementID, propertyName, propertyID, elWrapper);
                         property.isParticleProperty = group.id.includes("particles");
                         property.elContainer = elContainer;
                         property.spaceMode = propertySpaceMode;
+
+                        elWrapper.appendChild(createElementFromHTML(`<div class="triple-label">${innerPropertyData.label}</div>`));
                         
                         if (property.type !== 'placeholder') {
                             properties[propertyID] = property;