From e193dcbc602597f823006a3d2704ac6e838a8c4b Mon Sep 17 00:00:00 2001 From: Thijs Wenker Date: Tue, 27 Nov 2018 18:59:58 +0100 Subject: [PATCH 1/2] - add missing start/middle/finish tooltips - style updates --- .../system/assets/data/createAppTooltips.json | 64 +++++++++++++++++-- scripts/system/html/css/edit-style.css | 5 +- scripts/system/html/js/entityProperties.js | 11 +++- 3 files changed, 73 insertions(+), 7 deletions(-) diff --git a/scripts/system/assets/data/createAppTooltips.json b/scripts/system/assets/data/createAppTooltips.json index 720d4537ee..b3df0fa13b 100644 --- a/scripts/system/assets/data/createAppTooltips.json +++ b/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." diff --git a/scripts/system/html/css/edit-style.css b/scripts/system/html/css/edit-style.css index 5b5c9e057c..8c21965152 100644 --- a/scripts/system/html/css/edit-style.css +++ b/scripts/system/html/css/edit-style.css @@ -599,6 +599,7 @@ div.section[collapsed="true"], div.section[collapsed="true"] > .section-header { .triple-label { text-transform: uppercase; padding: 6px 0; + cursor: default; } .triple-item { @@ -1507,6 +1508,7 @@ input.rename-entity { } .create-app-tooltip { + z-index: 100; position: absolute; background: #6a6a6a; border: 1px solid black; @@ -1644,6 +1646,7 @@ input.number-slider { font-family: Raleway-Light; font-size: 14px; margin: 6px 0; + cursor: default; } #property-name, #property-id { @@ -1656,7 +1659,7 @@ input.number-slider { } #placeholder-property-type { - min-width: 0px; + min-width: 0; } .collapse-icon { diff --git a/scripts/system/html/js/entityProperties.js b/scripts/system/html/js/entityProperties.js index 78e3cd4dc8..60b9c04fbd 100644 --- a/scripts/system/html/js/entityProperties.js +++ b/scripts/system/html/js/entityProperties.js @@ -720,6 +720,7 @@ const GROUPS = [ { type: "triple", label: "Size", + propertyID: "particleRadiusTriple", properties: [ { label: "Start", @@ -771,6 +772,7 @@ const GROUPS = [ { type: "triple", label: "Color", + propertyID: "particleColorTriple", properties: [ { label: "Start", @@ -807,6 +809,7 @@ const GROUPS = [ { type: "triple", label: "Alpha", + propertyID: "particleAlphaTriple", properties: [ { label: "Start", @@ -883,6 +886,7 @@ const GROUPS = [ { type: "triple", label: "Alpha", + propertyID: "particleSpinTriple", properties: [ { label: "Start", @@ -947,6 +951,7 @@ const GROUPS = [ { type: "triple", label: "Horizontal Angle", + propertyID: "particlePolarTriple", properties: [ { label: "Start", @@ -975,6 +980,7 @@ const GROUPS = [ { type: "triple", label: "Vertical Angle", + propertyID: "particleAzimuthTriple", properties: [ { label: "Start", @@ -2886,7 +2892,10 @@ function loaded() { let propertyElementID = "property-" + propertyID; propertyElementID = propertyElementID.replace('.', '-'); - elWrapper.appendChild(createElementFromHTML(`
${innerPropertyData.label}
`)); + let elLabel = createElementFromHTML(`
${innerPropertyData.label}
`); + createAppTooltip.registerTooltipElement(elLabel, propertyID); + + elWrapper.appendChild(elLabel); elProperty.appendChild(elWrapper); let property = createProperty(innerPropertyData, propertyElementID, propertyName, propertyID, elWrapper.childNodes[0]); From ec19d2f119d49093d03a57d4c378d1c00ccb4eab Mon Sep 17 00:00:00 2001 From: Ryan Huffman Date: Wed, 21 Nov 2018 15:31:47 -0800 Subject: [PATCH 2/2] Fix Create tooltips getting pushed down for tall rows --- scripts/system/html/js/entityProperties.js | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/scripts/system/html/js/entityProperties.js b/scripts/system/html/js/entityProperties.js index 60b9c04fbd..7f269aa7ed 100644 --- a/scripts/system/html/js/entityProperties.js +++ b/scripts/system/html/js/entityProperties.js @@ -2858,23 +2858,20 @@ function loaded() { elGroup.appendChild(elContainer); } - elLabel = document.createElement('label'); - elLabel.setAttribute("for", propertyElementID); + let labelText = propertyData.label !== undefined ? propertyData.label : ""; + let className = ''; if (propertyData.indentedLabel || propertyData.showPropertyRule !== undefined) { - let elSpan = document.createElement('span'); - elSpan.className = 'indented'; - elSpan.innerText = propertyData.label !== undefined ? propertyData.label : ""; - elLabel.appendChild(elSpan); - } else { - elLabel.innerText = propertyData.label !== undefined ? propertyData.label : ""; + className = 'indented'; } + elLabel = createElementFromHTML( + ``); elContainer.appendChild(elLabel); } else { elContainer = document.getElementById(propertyData.replaceID); } if (elLabel) { - createAppTooltip.registerTooltipElement(elLabel, propertyID); + createAppTooltip.registerTooltipElement(elLabel.childNodes[0], propertyID); } let elProperty = createElementFromHTML('
');