From 556aec94121babbc47a03e1d38ff052bffd29a1a Mon Sep 17 00:00:00 2001 From: Ryan Huffman Date: Thu, 15 Nov 2018 15:27:30 -0800 Subject: [PATCH 1/4] Fix hiding of properties in Create --- scripts/system/html/css/edit-style.css | 12 +++++++++++- scripts/system/html/js/entityProperties.js | 14 ++++++++------ 2 files changed, 19 insertions(+), 7 deletions(-) diff --git a/scripts/system/html/css/edit-style.css b/scripts/system/html/css/edit-style.css index 3a291bf27b..bec926ad03 100644 --- a/scripts/system/html/css/edit-style.css +++ b/scripts/system/html/css/edit-style.css @@ -1559,7 +1559,9 @@ input.rename-entity { .container > label { margin-top: 6px; - width: 200px; + width: 160px; + min-width: 160px; + max-width: 160px; } .container > div.checkbox { @@ -1650,3 +1652,11 @@ input.number-slider { display: flex; width: 100%; } + +.spacemode-hidden { + display: none; +} + +#placeholder-property-type { + min-width: 0px; +} diff --git a/scripts/system/html/js/entityProperties.js b/scripts/system/html/js/entityProperties.js index c49e0d88f6..a4cde98abe 100644 --- a/scripts/system/html/js/entityProperties.js +++ b/scripts/system/html/js/entityProperties.js @@ -29,7 +29,7 @@ const ICON_FOR_TYPE = { const DEGREES_TO_RADIANS = Math.PI / 180.0; -const NO_SELECTION = "w"; +const NO_SELECTION = ","; const PROPERTY_SPACE_MODE = { ALL: 0, @@ -1244,8 +1244,9 @@ const GROUPS = [ showPropertyRule: { "collisionless": "false" }, }, { - label: "Collision sound URL", + label: "Collision Sound", type: "string", + placeholder: "URL", propertyID: "collisionSoundURL", showPropertyRule: { "collisionless": "false" }, }, @@ -1500,7 +1501,7 @@ function disableProperties() { function showPropertyElement(propertyID, show) { let elProperty = properties[propertyID].elContainer; - elProperty.style.display = show ? "flex" : "none"; + elProperty.style.display = show ? "" : "none"; } function resetProperties() { @@ -1622,10 +1623,11 @@ function updateVisibleSpaceModeProperties() { if (properties.hasOwnProperty(propertyID)) { let property = properties[propertyID]; let propertySpaceMode = property.spaceMode; - if (propertySpaceMode !== PROPERTY_SPACE_MODE.ALL) { - showPropertyElement(propertyID, propertySpaceMode === currentSpaceMode); + let elProperty = properties[propertyID].elContainer; + if (propertySpaceMode !== PROPERTY_SPACE_MODE.ALL && propertySpaceMode !== currentSpaceMode) { + elProperty.classList.add('spacemode-hidden'); } else { - showPropertyElement(propertyID, true); + elProperty.classList.remove('spacemode-hidden'); } } } From 193b9752b80981a5a87dfda0ac05dbf4ee2ad533 Mon Sep 17 00:00:00 2001 From: Ryan Huffman Date: Mon, 19 Nov 2018 13:50:56 -0800 Subject: [PATCH 2/4] Fix styling of properties window when narrow --- scripts/system/html/css/edit-style.css | 16 +++++++++------- scripts/system/html/js/entityProperties.js | 11 +++++++---- 2 files changed, 16 insertions(+), 11 deletions(-) diff --git a/scripts/system/html/css/edit-style.css b/scripts/system/html/css/edit-style.css index bec926ad03..5b5c9e057c 100644 --- a/scripts/system/html/css/edit-style.css +++ b/scripts/system/html/css/edit-style.css @@ -590,9 +590,6 @@ div.section[collapsed="true"], div.section[collapsed="true"] > .section-header { background-color: #373737; } -.section-header { - cursor: pointer; -} .section-header span { font-size: 30px; @@ -948,12 +945,12 @@ div.refresh input[type="button"] { } .draggable-number.left-arrow { top: -5px; - right: 106px; + left: 0px; transform: rotate(180deg); } .draggable-number.right-arrow { top: -5px; - left: 106px; + right: 0px; } .draggable-number input[type=number] { position: absolute; @@ -1123,7 +1120,7 @@ textarea:enabled[scrolling="true"]::-webkit-resizer { } -body#entity-list-body { +div#grid-section, body#entity-list-body { padding-bottom: 0; margin: 16px; } @@ -1552,7 +1549,6 @@ input.rename-entity { .container { display: flex; flex-flow: row nowrap; - justify-content: space-around; margin-bottom: 8px; min-height: 28px; } @@ -1602,6 +1598,8 @@ input.rename-entity { .xyz.fstuple, .pyr.fstuple { position: relative; left: -12px; + min-width: 50px; + width: 100px; } .rgb.fstuple .tuple { @@ -1660,3 +1658,7 @@ input.number-slider { #placeholder-property-type { min-width: 0px; } + +.collapse-icon { + cursor: pointer; +} diff --git a/scripts/system/html/js/entityProperties.js b/scripts/system/html/js/entityProperties.js index a4cde98abe..d3e0751732 100644 --- a/scripts/system/html/js/entityProperties.js +++ b/scripts/system/html/js/entityProperties.js @@ -1158,18 +1158,21 @@ const GROUPS = [ label: "Link", type: "string", propertyID: "href", + placeholder: "URL", }, { label: "Script", type: "string", buttons: [ { id: "reload", label: "F", className: "glyph", onClick: reloadScripts } ], propertyID: "script", + placeholder: "URL", }, { label: "Server Script", type: "string", buttons: [ { id: "reload", label: "F", className: "glyph", onClick: reloadServerScripts } ], propertyID: "serverScripts", + placeholder: "URL", }, { label: "Server Script Status", @@ -2771,7 +2774,7 @@ function loaded() { elLegend.appendChild(createElementFromHTML(`
${group.label}
`)); let elSpan = document.createElement('span'); - elSpan.className = ".collapse-icon"; + elSpan.className = "collapse-icon"; elSpan.innerText = "M"; elLegend.appendChild(elSpan); elGroup.appendChild(elLegend); @@ -3311,14 +3314,14 @@ function loaded() { getPropertyInputElement("image").addEventListener('change', createImageURLUpdateFunction('textures', false)); // Collapsible sections - let elCollapsible = document.getElementsByClassName("section-header"); + let elCollapsible = document.getElementsByClassName("collapse-icon"); let toggleCollapsedEvent = function(event) { - let element = this.parentNode; + let element = this.parentNode.parentNode; let isCollapsed = element.dataset.collapsed !== "true"; element.dataset.collapsed = isCollapsed ? "true" : false; element.setAttribute("collapsed", isCollapsed ? "true" : "false"); - element.getElementsByClassName(".collapse-icon")[0].textContent = isCollapsed ? "L" : "M"; + this.textContent = isCollapsed ? "L" : "M"; }; for (let collapseIndex = 0, numCollapsibles = elCollapsible.length; collapseIndex < numCollapsibles; ++collapseIndex) { From 7694aa8e6637cb13fc2bf1fec0c7ae00a2e506cc Mon Sep 17 00:00:00 2001 From: Ryan Huffman Date: Mon, 19 Nov 2018 13:51:25 -0800 Subject: [PATCH 3/4] Fix draggable number going into edit too often --- scripts/system/html/js/draggableNumber.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/system/html/js/draggableNumber.js b/scripts/system/html/js/draggableNumber.js index 1f4bc21441..4d1d008f7f 100644 --- a/scripts/system/html/js/draggableNumber.js +++ b/scripts/system/html/js/draggableNumber.js @@ -32,7 +32,7 @@ DraggableNumber.prototype = { mouseUp: function(event) { if (event.target === this.elText && this.initialMouseEvent) { let dx = event.clientX - this.initialMouseEvent.clientX; - if (dx <= DELTA_X_FOCUS_THRESHOLD) { + if (Math.abs(dx) <= DELTA_X_FOCUS_THRESHOLD) { this.elInput.style.visibility = "visible"; this.elText.style.visibility = "hidden"; } From 007396346c7382783446e26b1ba12031a2e917d7 Mon Sep 17 00:00:00 2001 From: Ryan Huffman Date: Mon, 19 Nov 2018 14:07:24 -0800 Subject: [PATCH 4/4] Fix grid tool styling --- scripts/system/html/gridControls.html | 55 ++++++++++++++------------ scripts/system/html/js/gridControls.js | 24 ++--------- 2 files changed, 33 insertions(+), 46 deletions(-) diff --git a/scripts/system/html/gridControls.html b/scripts/system/html/gridControls.html index cd646fed51..4be002619a 100644 --- a/scripts/system/html/gridControls.html +++ b/scripts/system/html/gridControls.html @@ -19,47 +19,52 @@ -
-
- -
-
- +
+
+
+ + +
-
- +
+
+ + +
-
+
+
-
+
+
+
-
-
+
- -
-
-
- -
-
-
-
+
+
-
- +
+ +
+
+
+
+
+ +
- +
- \ No newline at end of file + diff --git a/scripts/system/html/js/gridControls.js b/scripts/system/html/js/gridControls.js index 70e91071fb..b2d5988938 100644 --- a/scripts/system/html/js/gridControls.js +++ b/scripts/system/html/js/gridControls.js @@ -83,44 +83,26 @@ function loaded() { var gridColor = { red: 255, green: 255, blue: 255 }; var elColor = document.getElementById("grid-color"); - var elColorRed = document.getElementById("grid-color-red"); - var elColorGreen = document.getElementById("grid-color-green"); - var elColorBlue = document.getElementById("grid-color-blue"); elColor.style.backgroundColor = "rgb(" + gridColor.red + "," + gridColor.green + "," + gridColor.blue + ")"; - elColorRed.value = gridColor.red; - elColorGreen.value = gridColor.green; - elColorBlue.value = gridColor.blue; - - var colorChangeFunction = function () { - gridColor = { red: elColorRed.value, green: elColorGreen.value, blue: elColorBlue.value }; - elColor.style.backgroundColor = "rgb(" + gridColor.red + "," + gridColor.green + "," + gridColor.blue + ")"; - emitUpdate(); - }; var colorPickFunction = function (red, green, blue) { - elColorRed.value = red; - elColorGreen.value = green; - elColorBlue.value = blue; gridColor = { red: red, green: green, blue: blue }; emitUpdate(); }; - elColorRed.addEventListener('change', colorChangeFunction); - elColorGreen.addEventListener('change', colorChangeFunction); - elColorBlue.addEventListener('change', colorChangeFunction); $('#grid-color').colpick({ colorScheme: 'dark', - layout: 'hex', + layout: 'rgbhex', color: { r: gridColor.red, g: gridColor.green, b: gridColor.blue }, + submit: false, onShow: function (colpick) { $('#grid-color').attr('active', 'true'); }, onHide: function (colpick) { $('#grid-color').attr('active', 'false'); }, - onSubmit: function (hsb, hex, rgb, el) { + onChange: function (hsb, hex, rgb, el) { $(el).css('background-color', '#' + hex); - $(el).colpickHide(); colorPickFunction(rgb.r, rgb.g, rgb.b); } });