Merge pull request #14480 from thoys/fix/create/missingStartMiddleFinishTooltips

MS20000: [CreateApp/Tooltips] Add missing start/middle/finish tooltips

scripts/system/assets/data/createAppTooltips.json

@@ -193,22 +193,52 @@
     "emitterShouldTrail": {
         "tooltip": "If enabled, then particles are \"left behind\" as the emitter moves, otherwise they are not."
     },
+    "particleRadiusTriple": {
+        "tooltip": "The size of each particle.",
+        "jsPropertyName": "particleRadius"
+    },
     "particleRadius": {
         "tooltip": "The size of each particle."
     },
+    "radiusStart": {
+        "tooltip": "The start size of each particle."
+    },
+    "radiusFinish": {
+        "tooltip": "The finish size of each particle."
+    },
     "radiusSpread": {
         "tooltip": "The spread in size that each particle is given, resulting in a variety of sizes."
     },
+    "particleColorTriple": {
+        "tooltip": "The color of each particle.",
+        "jsPropertyName": "color"
+    },
     "particleColor": {
         "tooltip": "The color of each particle.",
         "jsPropertyName": "color"
     },
+    "colorStart": {
+        "tooltip": "The start color of each particle."
+    },
+    "colorFinish": {
+        "tooltip": "The finish color of each particle."
+    },
     "colorSpread": {
         "tooltip": "The spread in color that each particle is given, resulting in a variety of colors."
     },
+    "particleAlphaTriple": {
+        "tooltip": "The alpha of each particle.",
+        "jsPropertyName": "alpha"
+    },
     "alpha": {
         "tooltip": "The alpha of each particle."
     },
+    "alphaStart": {
+        "tooltip": "The start alpha of each particle."
+    },
+    "alphaFinish": {
+        "tooltip": "The finish alpha of each particle."
+    },
     "alphaSpread": {
         "tooltip": "The spread in alpha that each particle is given, resulting in a variety of alphas."
     },
@@ -218,20 +248,44 @@
     "accelerationSpread": {
         "tooltip": "The spread in accelerations that each particle is given, resulting in a variety of accelerations."
     },
+    "particleSpinTriple": {
+        "tooltip": "The spin of each particle.",
+        "jsPropertyName": "particleSpin"
+    },
     "particleSpin": {
-        "tooltip": "The spin of each particle in the system."
+        "tooltip": "The spin of each particle."
+    },
+    "spinStart": {
+        "tooltip": "The start spin of each particle."
+    },
+    "spinFinish": {
+        "tooltip": "The finish spin of each particle."
     },
     "spinSpread": {
         "tooltip": "The spread in spin that each particle is given, resulting in a variety of spins."
     },
     "rotateWithEntity": {
-        "tooltip": "If enabled, each particle will spin relative to the roation of the entity as a whole."
+        "tooltip": "If enabled, each particle will spin relative to the rotation of the entity as a whole."
+    },
+    "particlePolarTriple": {
+        "tooltip": "The angle range in deg at which particles are emitted. Starts in the entity's -z direction, and rotates around its y axis.",
+        "skipJSProperty": true
     },
     "polarStart": {
-        "tooltip": "The angle in deg at which particles are emitted. Starts in the entity's -z direction, and rotates around its y axis."
+        "tooltip": "The start angle in deg at which particles are emitted. Starts in the entity's -z direction, and rotates around its y axis."
+    },
+    "polarFinish": {
+        "tooltip": "The finish angle in deg at which particles are emitted. Starts in the entity's -z direction, and rotates around its y axis."
+    },
+    "particleAzimuthTriple": {
+        "tooltip": "The angle range in deg at which particles are emitted.  Starts in the entity's -x direction, and rotates around its z axis.",
+        "skipJSProperty": true
     },
     "azimuthStart": {
-        "tooltip": "The angle in deg at which particles are emitted.  Starts in the entity's -z direction, and rotates around its y axis."
+        "tooltip": "The start angle in deg at which particles are emitted.  Starts in the entity's -x direction, and rotates around its z axis."
+    },
+    "azimuthFinish": {
+        "tooltip": "The finish angle in deg at which particles are emitted.  Starts in the entity's -x direction, and rotates around its z axis."
     },
     "lightColor": {
         "tooltip": "The color of the light emitted.",
@@ -352,7 +406,7 @@
         "tooltip": "The URL of a sound to play when the entity collides with something else."
     },
     "grab.grabbable": {
-        "tooltip": "If enabled, this entity will allow grabbing input and will be moveable."
+        "tooltip": "If enabled, this entity will allow grabbing input and will be movable."
     },
     "grab.triggerable": {
         "tooltip": "If enabled, the collider on this entity is used for triggering events."

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

@@ -600,6 +600,7 @@ div.section[collapsed="true"], div.section[collapsed="true"] > .section-header {
     text-transform: uppercase;
     text-align: center;
     padding: 6px 0;
+    cursor: default;
 }
 
 .triple-item {
@@ -1521,6 +1522,7 @@ input.rename-entity {
 }
 
 .create-app-tooltip {
+    z-index: 100;
     position: absolute;
     background: #6a6a6a;
     border: 1px solid black;
@@ -1655,6 +1657,7 @@ input.number-slider {
     font-family: Raleway-Light;
     font-size: 14px;
     margin: 6px 0;
+    cursor: default;
 }
 
 #property-name, #property-id {
@@ -1667,7 +1670,7 @@ input.number-slider {
 }
 
 #placeholder-property-type {
-    min-width: 0px;
+    min-width: 0;
 }
 
 .collapse-icon {

scripts/system/html/js/entityProperties.js

@@ -735,6 +735,7 @@ const GROUPS = [
             {
                 type: "triple",
                 label: "Size",
+                propertyID: "particleRadiusTriple",
                 properties: [
                     {
                         label: "Start",
@@ -786,6 +787,7 @@ const GROUPS = [
             {
                 type: "triple",
                 label: "Color",
+                propertyID: "particleColorTriple",
                 properties: [
                     {
                         label: "Start",
@@ -822,6 +824,7 @@ const GROUPS = [
             {
                 type: "triple",
                 label: "Alpha",
+                propertyID: "particleAlphaTriple",
                 properties: [
                     {
                         label: "Start",
@@ -898,6 +901,7 @@ const GROUPS = [
             {
                 type: "triple",
                 label: "Spin",
+                propertyID: "particleSpinTriple",
                 properties: [
                     {
                         label: "Start",
@@ -962,6 +966,7 @@ const GROUPS = [
             {
                 type: "triple",
                 label: "Horizontal Angle",
+                propertyID: "particlePolarTriple",
                 properties: [
                     {
                         label: "Start",
@@ -990,6 +995,7 @@ const GROUPS = [
             {
                 type: "triple",
                 label: "Vertical Angle",
+                propertyID: "particleAzimuthTriple",
                 properties: [
                     {
                         label: "Start",
@@ -2888,23 +2894,20 @@ function loaded() {
                         elGroup.appendChild(elContainer);
                     }
 
-                    elLabel = document.createElement('label');
+                    let labelText = propertyData.label !== undefined ? propertyData.label : "";
-                    elLabel.setAttribute("for", propertyElementID);
+                    let className = '';
                     if (propertyData.indentedLabel || propertyData.showPropertyRule !== undefined) {
-                        let elSpan = document.createElement('span');
+                        className = 'indented';
-                        elSpan.className = 'indented';
-                        elSpan.innerText = propertyData.label !== undefined ? propertyData.label : "";
-                        elLabel.appendChild(elSpan);
-                    } else {
-                        elLabel.innerText = propertyData.label !== undefined ? propertyData.label : "";
                     }
+                    elLabel = createElementFromHTML(
+                        `<label><span class="${className}">${labelText}</span></label>`);
                     elContainer.appendChild(elLabel);
                 } else {
                     elContainer = document.getElementById(propertyData.replaceID);
                 }
 
                 if (elLabel) {
-                    createAppTooltip.registerTooltipElement(elLabel, propertyID);
+                    createAppTooltip.registerTooltipElement(elLabel.childNodes[0], propertyID);
                 }
 
                 let elProperty = createElementFromHTML('<div style="width: 100%;"></div>');
@@ -2928,7 +2931,10 @@ function loaded() {
                         property.elContainer = elContainer;
                         property.spaceMode = propertySpaceMode;
 
-                        elWrapper.appendChild(createElementFromHTML(`<div class="triple-label">${innerPropertyData.label}</div>`));
+                        let elLabel = createElementFromHTML(`<div class="triple-label">${innerPropertyData.label}</div>`);
+                        createAppTooltip.registerTooltipElement(elLabel, propertyID);
+
+                        elWrapper.appendChild(elLabel);
                         
                         if (property.type !== 'placeholder') {
                             properties[propertyID] = property;