Merge pull request #14433 from huffman/fix/entity-properties-styling

Fix several entity tool window styling issues
2025-04-23 18:13:47 +02:00 · 2018-11-19 16:17:50 -08:00 · 2018-11-19 16:17:50 -08:00 · b7fe3d47be
commit b7fe3d47be
parent 378742f896 007396346c
5 changed files with 69 additions and 65 deletions
--- 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,14 +1549,15 @@ input.rename-entity {
 .container {
    display: flex;
    flex-flow: row nowrap;
-    justify-content: space-around;
    margin-bottom: 8px;
    min-height: 28px;
 }

 .container > label {
    margin-top: 6px;
-    width: 200px;
+    width: 160px;
+    min-width: 160px;
+    max-width: 160px;
 }

 .container > div.checkbox {
@ -1600,6 +1598,8 @@ input.rename-entity {
 .xyz.fstuple, .pyr.fstuple {
    position: relative;
    left: -12px;
+    min-width: 50px;
+    width: 100px;
 }

 .rgb.fstuple .tuple {
@ -1650,3 +1650,15 @@ input.number-slider {
    display: flex;
    width: 100%;
 }
+
+.spacemode-hidden {
+    display: none;
+}
+
+#placeholder-property-type {
+    min-width: 0px;
+}
+
+.collapse-icon {
+    cursor: pointer;
+}
--- a/scripts/system/html/gridControls.html
+++ b/scripts/system/html/gridControls.html
@ -19,47 +19,52 @@
        <script type="text/javascript" src="js/gridControls.js"></script>
    </head>
    <body onload='loaded();'>
-        <div id="grid-section">
-            <div class="section-header">
-                <label>Editing Grid</label>
-            </div>
-            <div class="property checkbox">
-                <input type='checkbox' id="horiz-grid-visible">
+        <div id="grid-section" class="section">
+            <div class="property container">
                <label for="horiz-grid-visible">Visible</label>
+                <div style="width: 100%">
+                    <input type='checkbox' id="horiz-grid-visible" style="width: 100%">
+                    <label for="horiz-grid-visible">&nbsp;</label>
+                </div>
            </div>
-            <div class="property checkbox">
-                <input type="checkbox" id="snap-to-grid">
+            <div class="property container">
                <label for="snap-to-grid">Snap entities to grid</label>
+                <div style="width: 100%">
+                    <input type="checkbox" id="snap-to-grid">
+                    <label for="snap-to-grid">&nbsp;</label>
+                </div>
            </div>
-            <div class="property">
+            <div class="property container">
+                <label for="major-spacing">Major grid size <span class="unit">m</span></label>
                <div class="number">
-                    <label for="major-spacing">Major grid size <span class="unit">m</span></label>
                    <input type="number" id="major-spacing" min="1" step="1" />
                </div>
+            </div>
+            <div class="property container">
+                <label for="minor-spacing">Minor grid size <span class="unit">m</span></label>
                <div class="number">
-                    <label for="minor-spacing">Minor grid size <span class="unit">m</span></label>
                    <input type="number" id="minor-spacing" min="0.2" step="0.2" />
                </div>
            </div>
-            <div class="property number">
+            <div class="property container">
                <label for="horiz-y">Position (Y axis) <span class="unit">m</span></label>
-                <input type="number" id="horiz-y" step="0.1" />
-            </div>
-            <div class="property rgb">
-                <div id="grid-color" class="color-picker"></div>
-                <label>Grid line color</label>
-                <div class="tuple">
-                    <div><input type="number" class="red" id="grid-color-red"><label for="grid-color-red">Red:</label></div>
-                    <div><input type="number" class="green" id="grid-color-green"><label for="grid-color-green">Green:</label></div>
-                    <div><input type="number" class="blue" id="grid-color-blue"><label for="grid-color-blue">Blue:</label></div>
+                <div style="width: 100%">
+                    <input type="number" id="horiz-y" step="0.1" />
                </div>
            </div>
-            <div class="property">
-                <span>
+            <div class="property container">
+                <label>Grid line color</label>
+                <div style="width: 100%">
+                    <div id="grid-color" class="color-picker"></div>
+                </div>
+            </div>
+            <div class="property container">
+                <label>Move Grid</label>
+                <div style="width: 100%">
                    <input type="button" id="move-to-selection" value="Align To Selection">
                    <input type="button" id="move-to-avatar" value="Align To Avatar">
-                </span>
+                </div>
            </div>
        </div>
    </body>
-</html>
+</html>
--- 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";
            }
--- 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,
@ -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",
@ -1244,8 +1247,9 @@ const GROUPS = [
                showPropertyRule: { "collisionless": "false" },
            },
            {
-                label: "Collision sound URL",
+                label: "Collision Sound",
                type: "string",
+                placeholder: "URL",
                propertyID: "collisionSoundURL",
                showPropertyRule: { "collisionless": "false" },
            },
@ -1500,7 +1504,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 +1626,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');
            }
        }
    }
@ -2769,7 +2774,7 @@ function loaded() {
                elLegend.appendChild(createElementFromHTML(`<div class="label">${group.label}</div>`));

                let elSpan = document.createElement('span');
-                elSpan.className = ".collapse-icon";
+                elSpan.className = "collapse-icon";
                elSpan.innerText = "M";
                elLegend.appendChild(elSpan);
                elGroup.appendChild(elLegend);
@ -3309,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) {
--- 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);
            }
        });