From a2b1b2e0f92e57a2ab454cc36de21628a0ac53f4 Mon Sep 17 00:00:00 2001 From: jmo Date: Mon, 10 Jul 2017 15:49:26 -0600 Subject: [PATCH 1/3] 21356 - Reorder Edit.js Made changes to the 3 sub files for the properties tabs. Although visually the exiting menu looked like it was in different sections, structurally it was all just one run of item after item, with a fair amount of div-itis. I added in fieldsets to provide true groups and replaced much of the div-ities with aditional feidlsets as they are the smeantic element to use here. --- scripts/system/html/css/edit-style.css | 412 +++++++- scripts/system/html/entityProperties.html | 1047 +++++++++++--------- scripts/system/html/js/entityProperties.js | 98 +- 3 files changed, 1007 insertions(+), 550 deletions(-) diff --git a/scripts/system/html/css/edit-style.css b/scripts/system/html/css/edit-style.css index 40f3d682cd..583a832398 100644 --- a/scripts/system/html/css/edit-style.css +++ b/scripts/system/html/css/edit-style.css @@ -449,8 +449,68 @@ input[type=checkbox]:checked + label:hover { border: 1.5pt solid black; } +.shape-section, .light-section, .model-section, .web-section, .hyperlink-section, .text-section, .zone-section { + display: table; +} -.section-header, .sub-section-header, hr { + + +#properties-list fieldset { + position: relative; + /* 0.1px on the top is to prevent margin collapsing between this and it's first child */ + margin: 21px -21px 0px -21px; + padding: 0.1px 21px 0px 21px; + border: none; + border-top: 1px rgb(90,90,90) solid; + box-shadow: 0px -1px 0px rgb(37,37,37); +} + +#properties-list fieldset.fstuple, #properties-list fieldset.fsrow { + margin-top: 21px; + border: none; + box-shadow: none; +} + +#properties-list > fieldset[data-collapsed="true"] + fieldset { + margin-top: 0px; +} + +#properties-list > fieldset[data-collapsed="true"] > *:not(legend) { + display: none !important; +} + +#properties-list legend + fieldset { + margin-top: 0px; + border: none; + box-shadow: none; +} + +#properties-list > fieldset#properties-header { + margin-top: 0px; + padding-bottom: 0px; +} + + + +#properties-list > fieldset > legend { + position: relative; + display: table; + width: 100%; + margin: 21px -21px 0 -21px; + padding: 14px 21px 0 21px; + font-family: Raleway-Regular; + font-size: 12px; + color: #afafaf; + height: 28px; + text-transform: uppercase; + outline: none; + background-color: #404040; + border: none; + border-top: 1px rgb(90,90,90) solid; + box-shadow: 0 -1px 0 rgb(37,37,37), 0 4px 4px 0 rgba(0,0,0,0.75); +} + +div.section-header, .sub-section-header, hr { display: table; width: 100%; margin: 21px -21px 0 -21px; @@ -463,16 +523,18 @@ input[type=checkbox]:checked + label:hover { outline: none; } -.section-header { - position: relative; - background: #404040 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAqCAIAAAAbNW1vAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAmSURBVChTY1BFAgzhSIDBAQmMcoYHRwIJMCgjAQZ9JMBgBQdWVgBh5XmBV5A2FQAAAABJRU5ErkJggg==) repeat-x top left; + + +.column .sub-section-header { + background-image: none; + padding-top: 0; } .sub-section-header, .no-collapse, hr { background: #404040 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAjSURBVBhXY1RVVf3PgARYjIyMoEwIYHRwcEBRwQSloYCBAQCwjgPMiI7W2QAAAABJRU5ErkJggg==) repeat-x top left; } -.section-header:first-child { +div.section-header:first-child { margin-top: -2px; padding-top: 0; background: none; @@ -483,7 +545,7 @@ input[type=checkbox]:checked + label:hover { margin-bottom: -10px; } -.section-header span { +#properties-list > fieldset > legend span, .section-header span { font-family: HiFi-Glyphs; font-size: 30px; float: right; @@ -537,6 +599,18 @@ hr { font-size: 13px; } +.property legend, .number legend { + display: table-cell; + vertical-align: middle; + font-family: Raleway-SemiBold; + font-size: 14px; +} +.property legend .unit, .number legend .unit { + margin-left: 8px; + font-family: Raleway-Light; + font-size: 13px; +} + .value { display: block; min-height: 18px; @@ -546,6 +620,11 @@ hr { vertical-align: top; width: 48px; } +.value legend { + display: inline-block; + vertical-align: top; + width: 48px; +} .value span { font-family: FiraSans-SemiBold; font-size: 15px; @@ -573,6 +652,13 @@ hr { margin-top: -2px; } +.text legend, .url legend, .number legend, .textarea legend, .rgb legend, .xyz legend, .pyr legend, .dropdown legend, .gen legend { + float: left; + margin-left: 1px; + margin-bottom: 3px; + margin-top: -2px; +} + .number > input { clear: both; float: left; @@ -715,6 +801,14 @@ div.refresh input[type="button"] { display: none !important; } +#property-color-control1 { + display: table-cell; + float: none; +} + +#property-color-control1 + label { + border-left: 20px transparent solid; +} .rgb label { float: left; @@ -725,6 +819,15 @@ div.refresh input[type="button"] { clear: both; } +.rgb legend { + float: left; + margin-top: 10px; + margin-left: 21px; +} +.rgb legend + * { + clear: both; +} + .tuple div { display: inline-block; position: relative; @@ -814,6 +917,42 @@ tuple, .blue:focus, .tuple .z:focus, .tuple .roll:focus { display: table-cell; width: 50%; } + +#properties-list fieldset .two-column { + padding-top:21px; + display: flex; +} + +#properties-list .two-column fieldset { + /*display: table-cell;*/ + width: 50%; + margin: 0; + padding: 0; + border-top: none; + box-shadow: none; +} + +#properties-list .two-column fieldset legend { + display: table; + width: 100%; + margin: 21px -21px 0px -21px; + padding: 0px 0px 0px 21px; + font-family: Raleway-Regular; + font-size: 12px; + color: #afafaf; + height: 28px; + text-transform: uppercase; + outline: none; +} + +fieldset .checkbox-sub-props { + margin-top: 0; + } + +fieldset .checkbox-sub-props .property:first-child { + margin-top: 0; +} + .column { vertical-align: top; } @@ -1155,9 +1294,11 @@ th#entity-hasScript { } -#properties-header { +#properties-list #properties-header { display: table-row; height: 28px; + border-top: none; + box-shadow: none; } #properties-header .property { @@ -1262,3 +1403,260 @@ input#reset-to-natural-dimensions { font-size:16px; display:none; } + +#properties-list #collision-info > fieldset:first-of-type { + border-top: none !important; + box-shadow: none; + margin-top: 0; +} + +#properties-list { + display: flex; + flex-direction: column; +} + +/* ----- Order of Menu items for Primitive ----- */ +#properties-list.ShapeMenu #general, +#properties-list.BoxMenu #general, +#properties-list.SphereMenu #general { + order: 1; +} + +#properties-list.ShapeMenu #collision-info, +#properties-list.BoxMenu #collision-info, +#properties-list.SphereMenu #collision-info { + order: 2; +} + +#properties-list.ShapeMenu #physical, +#properties-list.BoxMenu #physical, +#properties-list.SphereMenu #physical { + order: 3; +} + +#properties-list.ShapeMenu #spatial, +#properties-list.BoxMenu #spatial, +#properties-list.SphereMenu #spatial { + order: 4; +} + +#properties-list.ShapeMenu #behavior, +#properties-list.BoxMenu #behavior, +#properties-list.SphereMenu #behavior { + order: 5; +} + +#properties-list.ShapeMenu #hyperlink, +#properties-list.BoxMenu #hyperlink, +#properties-list.SphereMenu #hyperlink { + order: 6; +} + +#properties-list.ShapeMenu #light, +#properties-list.BoxMenu #light, +#properties-list.SphereMenu #light, +#properties-list.ShapeMenu #model, +#properties-list.BoxMenu #model, +#properties-list.SphereMenu #model, +#properties-list.ShapeMenu #zone, +#properties-list.BoxMenu #zone, +#properties-list.SphereMenu #zone, +#properties-list.ShapeMenu #text, +#properties-list.BoxMenu #text, +#properties-list.SphereMenu #text, +#properties-list.ShapeMenu #web, +#properties-list.BoxMenu #web, +#properties-list.SphereMenu #web { + display: none; +} + + +/* ----- Order of Menu items for Light ----- */ +#properties-list.LightMenu #general { + order: 1; +} +#properties-list.LightMenu #light { + order: 2; +} +#properties-list.LightMenu #physical { + order: 3; +} +#properties-list.LightMenu #spatial { + order: 4; +} +#properties-list.LightMenu #behavior { + order: 5; +} +#properties-list.LightMenu #collision-info { + order: 6; +} +#properties-list.LightMenu #hyperlink { + order: 7; +} +/* sections to hide */ +#properties-list.LightMenu #model, +#properties-list.LightMenu #zone, +#properties-list.LightMenu #text, +#properties-list.LightMenu #web { + display: none; +} +/* items to hide */ +#properties-list.LightMenu .shape-group.shape-section.property.dropdown, +#properties-list.LightMenu color-section.color-control1 { + display: none +} + + +/* ----- Order of Menu items for Model ----- */ +#properties-list.ModelMenu #general { + order: 1; +} +#properties-list.ModelMenu #model { + order: 2; +} +#properties-list.ModelMenu #collision-info { + order: 3; +} +#properties-list.ModelMenu #physical { + order: 4; +} +#properties-list.ModelMenu #spatial { + order: 5; +} +#properties-list.ModelMenu #behavior { + order: 6; +} +#properties-list.ModelMenu #hyperlink { + order: 7; +} +/* sections to hide */ +#properties-list.ModelMenu #light, +#properties-list.ModelMenu #zone, +#properties-list.ModelMenu #text, +#properties-list.ModelMenu #web { + display: none; +} +/* items to hide */ +#properties-list.ModelMenu .shape-group.shape-section.property.dropdown, +#properties-list.ModelMenu .color-section.color-control1 { + display: none +} + + +/* ----- Order of Menu items for Zone ----- */ +#properties-list.ZoneMenu #general { + order: 1; +} +#properties-list.ZoneMenu #zone { + order: 2; +} +#properties-list.ZoneMenu #physical { + order: 3; +} +#properties-list.ZoneMenu #spatial { + order: 4; +} +#properties-list.ZoneMenu #behavior { + order: 5; +} +#properties-list.ZoneMenu #collision-info { + order: 6; +} +#properties-list.ZoneMenu #hyperlink { + order: 7; +} +/* sections to hide */ +#properties-list.ZoneMenu #light, +#properties-list.ZoneMenu #model, +#properties-list.ZoneMenu #text, +#properties-list.ZoneMenu #web { + display: none; +} +/* items to hide */ +#properties-list.ZoneMenu .shape-group.shape-section.property.dropdown, +#properties-list.ZoneMenu .color-section.color-control1 { + display: none +} + + +/* ----- Order of Menu items for Web ----- */ +#properties-list.WebMenu #general { + order: 1; +} +#properties-list.WebMenu #web { + order: 2; +} +#properties-list.WebMenu #collision-info { + order: 3; +} +#properties-list.WebMenu #physical { + order: 4; +} +#properties-list.WebMenu #spatial { + order: 5; +} +#properties-list.WebMenu #behavior { + order: 6; +} +#properties-list.WebMenu #hyperlink { + order: 7; +} +/* sections to hide */ +#properties-list.WebMenu #light, +#properties-list.WebMenu #model, +#properties-list.WebMenu #zone, +#properties-list.WebMenu #text { + display: none; +} +/* items to hide */ +#properties-list.WebMenu .shape-group.shape-section.property.dropdown, +#properties-list.WebMenu .color-section.color-control1 { + display: none; +} + + + +/* ----- Order of Menu items for Text ----- */ +#properties-list.TextMenu #general { + order: 1; +} +#properties-list.TextMenu #text { + order: 2; +} +#properties-list.TextMenu #collision-info { + order: 3; +} +#properties-list.TextMenu #physical { + order: 4; +} +#properties-list.TextMenu #spatial { + order: 5; +} +#properties-list.TextMenu #behavior { + order: 6; +} +#properties-list.TextMenu #hyperlink { + order: 7; +} +/* sections to hide */ +#properties-list.TextMenu #light, +#properties-list.TextMenu #model, +#properties-list.TextMenu #zone, +#properties-list.TextMenu #web { + display: none; +} +/* items to hide */ +#properties-list.TextMenu .shape-group.shape-section.property.dropdown, +#properties-list.TextMenu .color-section.color-control1 { + display: none +} + + +/* Currently always hidden */ +#properties-list #polyvox { + display: none; +} + +.skybox-section { + display: none; +} \ No newline at end of file diff --git a/scripts/system/html/entityProperties.html b/scripts/system/html/entityProperties.html index bf65bdad32..ecdd866666 100644 --- a/scripts/system/html/entityProperties.html +++ b/scripts/system/html/entityProperties.html @@ -8,130 +8,267 @@ // See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html --> - - Properties - - - - - - - - - - - - - - -
-
-
- -
-
- - -
-
- - -
+ + + Properties + + + + + + + + + + + + + + + +
+ +
+
+
-
+
+ + +
+
+ + +
+
+ + +
+ + + + + + + + + + + + +
-
- - -
+
+
+ +
+
+
+
+
+ + +
+
+ + +
+
+
+
+
+ + Collides With + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + Grabbing + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + +
+
+
+
-
- -
-
- - - - Saved! + +
+ + PhysicalM + +
+
+ Linear velocity m/s +
+
+
+
+
+
+
+ +
-
-
- -
-
- - -
-
- M -
-
- - -
-
- M -
-
- + +
+
+ Angular velocity deg/s +
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+ Gravity m/s2 +
+
+
+
+
+
+
+ Acceleration m/s2 +
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ + + +
+ + SpatialM + +
+ Position m
-
-
- + +
+ Rotation deg
-
-
- + +
+ Dimensions m
-
-
- + +
+ Registration (pivot offset as ratio of dimension)
-
-
- + +
+ Scale %
-
+
@@ -153,278 +290,311 @@
-
-
- -
-
-
-
+ + + +
+ + BehaviorM + +
+ +
+
+ + + + Saved! +
+
+
+ +
+
+ + +
+ +
+
+ +
-
-
- - -
-
- - -
-
- - -
-
- - -
-
- M -
-
- -
-
-
-
+
+ +
-
-
- - -
-
-
- -
-
-
-
+ +
+
+ + + +
-
-
- - -
-
-
-
-
-
-
+ +
+
+ + +
-
-
-
- -
-
-
-
+
+ +
-
-
- -
-
-
-
+
+
+ +
+ + +
+ + + + + + + +
+ + LightM + +
+
+ Light color +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+ + ModelM + +
+
+ +
-
-
- M -
-
- - -
-
- - -
-
-
-
- Collides With +
+ + +
+
+ + +
+ +
+
+ + +
+ +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
-
-
- - +
+
+ +
-
- - +
+ +
-
- - -
-
- - -
-
- - +
+ +
-
-
- Grabbing -
-
-
- - -
-
- - -
-
- - -
-
- - -
-
+
+
+
+ +
- -
-
- - -
-
- - -
-
-
- - - - -
-
-
- - - -
-
- - -
-
- -
-
- M -
-
- - -
-
- - -
-
- - -
-
-
- - -
-
-
-
- - -
-
- - -
-
- - -
-
- - -
-
-
-
- - -
-
- - -
-
- - -
-
-
-
-
- - -
-
- - -
-
- M -
+
+ + + +
+ + ZoneM + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ +
+
+
+ +
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+ + +
+
+
+ + Stage + +
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+ + Background + +
+ + +
+
+
+ + Skybox + +
+
+ Skybox color +
+
+
+
+
+
+
+ + +
+
+
+ + +
+ + TextM +
@@ -446,116 +616,22 @@
-
+
- + Background color
-
-
- M -
-
- - -
-
- - -
-
- - -
-
-
- - -
-
- -
-
-
- -
-
-
-
-
-
-
- - -
-
-
-
-
-
-
-
-
- - -
-
- - -
-
- -
-
-
-
-
-
-
-
-
- - -
-
-
-
-
-
-
-
-
- -
-
- - -
-
- -
-
-
- -
-
-
-
-
-
-
- - -
-
- M -
+ + + + +
+ + WebM +
@@ -564,36 +640,45 @@
-
- M -
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -
-
-
-
-
-
-
-
-
- - + + + + + + +
+ + Voxel volume size m + +
+
+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + + \ No newline at end of file diff --git a/scripts/system/html/js/entityProperties.js b/scripts/system/html/js/entityProperties.js index 777ef54085..013a43b6ec 100644 --- a/scripts/system/html/js/entityProperties.js +++ b/scripts/system/html/js/entityProperties.js @@ -479,6 +479,7 @@ function loaded() { openEventBridge(function() { var allSections = []; + var elPropertiesList = document.getElementById("properties-list"); var elID = document.getElementById("property-id"); var elType = document.getElementById("property-type"); var elTypeIcon = document.getElementById("type-icon"); @@ -565,7 +566,8 @@ function loaded() { var elJSONEditor = document.getElementById("userdata-editor"); var elNewJSONEditor = document.getElementById('userdata-new-editor'); var elColorSections = document.querySelectorAll(".color-section"); - var elColor = document.getElementById("property-color"); + var elColorControl1 = document.getElementById("property-color-control1"); + var elColorControl2 = document.getElementById("property-color-control2"); var elColorRed = document.getElementById("property-color-red"); var elColorGreen = document.getElementById("property-color-green"); var elColorBlue = document.getElementById("property-color-blue"); @@ -679,7 +681,8 @@ function loaded() { data = JSON.parse(data); if (data.type == "server_script_status") { elServerScriptError.value = data.errorInfo; - elServerScriptError.style.display = data.errorInfo ? "block" : "none"; + // If we just set elServerScriptError's diplay to block or none, we still end up with it's parent contributing 21px bottom padding even when elServerScriptError is display:none. So set it's parent to block or none + elServerScriptError.parentElement.style.display = data.errorInfo ? "block" : "none"; if (data.statusRetrieved === false) { elServerScriptStatus.innerText = "Failed to retrieve status"; } else if (data.isRunning) { @@ -705,6 +708,7 @@ function loaded() { elTypeIcon.style.display = "none"; elType.innerHTML = "No selection"; elID.value = ""; + elPropertiesList.className = ''; disableProperties(); } else if (data.selections && data.selections.length > 1) { deleteJSONEditor(); @@ -733,6 +737,7 @@ function loaded() { elType.innerHTML = type + " (" + data.selections.length + ")"; elTypeIcon.innerHTML = ICON_FOR_TYPE[type]; elTypeIcon.style.display = "inline-block"; + elPropertiesList.className = ''; elID.value = ""; @@ -749,6 +754,7 @@ function loaded() { lastEntityID = '"' + properties.id + '"'; elID.value = properties.id; + elPropertiesList.className = properties.type + 'Menu'; elType.innerHTML = properties.type; elTypeIcon.innerHTML = ICON_FOR_TYPE[properties.type]; elTypeIcon.style.display = "inline-block"; @@ -883,48 +889,20 @@ function loaded() { elHyperlinkHref.value = properties.href; elDescription.value = properties.description; - for (var i = 0; i < allSections.length; i++) { - for (var j = 0; j < allSections[i].length; j++) { - allSections[i][j].style.display = 'none'; - } - } - - for (var i = 0; i < elHyperlinkSections.length; i++) { - elHyperlinkSections[i].style.display = 'table'; - } if (properties.type == "Shape" || properties.type == "Box" || properties.type == "Sphere") { - for (var i = 0; i < elShapeSections.length; i++) { - elShapeSections[i].style.display = 'table'; - } elShape.value = properties.shape; setDropdownText(elShape); - - } else { - for (var i = 0; i < elShapeSections.length; i++) { - elShapeSections[i].style.display = 'none'; - } } if (properties.type == "Shape" || properties.type == "Box" || properties.type == "Sphere" || properties.type == "ParticleEffect") { - for (var i = 0; i < elColorSections.length; i++) { - elColorSections[i].style.display = 'table'; - } elColorRed.value = properties.color.red; elColorGreen.value = properties.color.green; elColorBlue.value = properties.color.blue; - elColor.style.backgroundColor = "rgb(" + properties.color.red + "," + properties.color.green + "," + properties.color.blue + ")"; - } else { - for (var i = 0; i < elColorSections.length; i++) { - elColorSections[i].style.display = 'none'; - } + elColorControl1.style.backgroundColor = elColorControl2.style.backgroundColor = "rgb(" + properties.color.red + "," + properties.color.green + "," + properties.color.blue + ")"; } if (properties.type == "Model") { - for (var i = 0; i < elModelSections.length; i++) { - elModelSections[i].style.display = 'table'; - } - elModelURL.value = properties.modelURL; elShapeType.value = properties.shapeType; setDropdownText(elShapeType); @@ -942,20 +920,9 @@ function loaded() { elModelOriginalTextures.value = properties.originalTextures; setTextareaScrolling(elModelOriginalTextures); } else if (properties.type == "Web") { - for (var i = 0; i < elWebSections.length; i++) { - elWebSections[i].style.display = 'table'; - } - for (var i = 0; i < elHyperlinkSections.length; i++) { - elHyperlinkSections[i].style.display = 'none'; - } - elWebSourceURL.value = properties.sourceUrl; elWebDPI.value = properties.dpi; } else if (properties.type == "Text") { - for (var i = 0; i < elTextSections.length; i++) { - elTextSections[i].style.display = 'table'; - } - elTextText.value = properties.text; elTextLineHeight.value = properties.lineHeight.toFixed(4); elTextFaceCamera.checked = properties.faceCamera; @@ -967,10 +934,6 @@ function loaded() { elTextBackgroundColorGreen.value = properties.backgroundColor.green; elTextBackgroundColorBlue.value = properties.backgroundColor.blue; } else if (properties.type == "Light") { - for (var i = 0; i < elLightSections.length; i++) { - elLightSections[i].style.display = 'table'; - } - elLightSpotLight.checked = properties.isSpotlight; elLightColor.style.backgroundColor = "rgb(" + properties.color.red + "," + properties.color.green + "," + properties.color.blue + ")"; @@ -983,10 +946,6 @@ function loaded() { elLightExponent.value = properties.exponent.toFixed(2); elLightCutoff.value = properties.cutoff.toFixed(2); } else if (properties.type == "Zone") { - for (var i = 0; i < elZoneSections.length; i++) { - elZoneSections[i].style.display = 'table'; - } - elZoneStageSunModelEnabled.checked = properties.stage.sunModelEnabled; elZoneKeyLightColor.style.backgroundColor = "rgb(" + properties.keyLight.color.red + "," + properties.keyLight.color.green + "," + properties.keyLight.color.blue + ")"; elZoneKeyLightColorRed.value = properties.keyLight.color.red; @@ -1023,10 +982,6 @@ function loaded() { showElements(document.getElementsByClassName('skybox-section'), elZoneBackgroundMode.value == 'skybox'); } else if (properties.type == "PolyVox") { - for (var i = 0; i < elPolyVoxSections.length; i++) { - elPolyVoxSections[i].style.display = 'table'; - } - elVoxelVolumeSizeX.value = properties.voxelVolumeSize.x.toFixed(2); elVoxelVolumeSizeY.value = properties.voxelVolumeSize.y.toFixed(2); elVoxelVolumeSizeZ.value = properties.voxelVolumeSize.z.toFixed(2); @@ -1225,20 +1180,41 @@ function loaded() { elColorRed.addEventListener('change', colorChangeFunction); elColorGreen.addEventListener('change', colorChangeFunction); elColorBlue.addEventListener('change', colorChangeFunction); - colorPickers.push($('#property-color').colpick({ + colorPickers.push($('#property-color-control1').colpick({ colorScheme: 'dark', layout: 'hex', color: '000000', onShow: function(colpick) { - $('#property-color').attr('active', 'true'); + $('#property-color-control1').attr('active', 'true'); }, onHide: function(colpick) { - $('#property-color').attr('active', 'false'); + $('#property-color-control1').attr('active', 'false'); }, onSubmit: function(hsb, hex, rgb, el) { $(el).css('background-color', '#' + hex); $(el).colpickHide(); emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b); + // Keep the companion control in sync + elColorControl2.style.backgroundColor = "rgb(" + rgb.r + "," + rgb.g + "," + rgb.b + ")"; + } + })); + colorPickers.push($('#property-color-control2').colpick({ + colorScheme: 'dark', + layout: 'hex', + color: '000000', + onShow: function(colpick) { + $('#property-color-control2').attr('active', 'true'); + }, + onHide: function(colpick) { + $('#property-color-control2').attr('active', 'false'); + }, + onSubmit: function(hsb, hex, rgb, el) { + $(el).css('background-color', '#' + hex); + $(el).colpickHide(); + emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b); + // Keep the companion control in sync + elColorControl1.style.backgroundColor = "rgb(" + rgb.r + "," + rgb.g + "," + rgb.b + ")"; + } })); @@ -1502,11 +1478,9 @@ function loaded() { var elCollapsible = document.getElementsByClassName("section-header"); var toggleCollapsedEvent = function(event) { - var element = event.target; - if (element.nodeName !== "DIV") { - element = element.parentNode; - } - var isCollapsed = element.getAttribute("collapsed") !== "true"; + var element = event.target.parentNode.parentNode; + var isCollapsed = element.dataset.collapsed !== "true"; + element.dataset.collapsed = isCollapsed ? "true" : false element.setAttribute("collapsed", isCollapsed ? "true" : "false"); element.getElementsByTagName("span")[0].textContent = isCollapsed ? "L" : "M"; }; From 003c483ec6c3e26ef03af5139a25fd6868176d32 Mon Sep 17 00:00:00 2001 From: jmo Date: Thu, 27 Jul 2017 15:21:58 -0600 Subject: [PATCH 2/3] stray tabs changed to spaces, and long comment split to multiple lines --- scripts/system/html/js/entityProperties.js | 26 ++++++++++++---------- 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/scripts/system/html/js/entityProperties.js b/scripts/system/html/js/entityProperties.js index 013a43b6ec..d59404ed83 100644 --- a/scripts/system/html/js/entityProperties.js +++ b/scripts/system/html/js/entityProperties.js @@ -479,7 +479,7 @@ function loaded() { openEventBridge(function() { var allSections = []; - var elPropertiesList = document.getElementById("properties-list"); + var elPropertiesList = document.getElementById("properties-list"); var elID = document.getElementById("property-id"); var elType = document.getElementById("property-type"); var elTypeIcon = document.getElementById("type-icon"); @@ -566,8 +566,8 @@ function loaded() { var elJSONEditor = document.getElementById("userdata-editor"); var elNewJSONEditor = document.getElementById('userdata-new-editor'); var elColorSections = document.querySelectorAll(".color-section"); - var elColorControl1 = document.getElementById("property-color-control1"); - var elColorControl2 = document.getElementById("property-color-control2"); + var elColorControl1 = document.getElementById("property-color-control1"); + var elColorControl2 = document.getElementById("property-color-control2"); var elColorRed = document.getElementById("property-color-red"); var elColorGreen = document.getElementById("property-color-green"); var elColorBlue = document.getElementById("property-color-blue"); @@ -681,7 +681,9 @@ function loaded() { data = JSON.parse(data); if (data.type == "server_script_status") { elServerScriptError.value = data.errorInfo; - // If we just set elServerScriptError's diplay to block or none, we still end up with it's parent contributing 21px bottom padding even when elServerScriptError is display:none. So set it's parent to block or none + // If we just set elServerScriptError's diplay to block or none, we still end up with + //it's parent contributing 21px bottom padding even when elServerScriptError is display:none. + // So set it's parent to block or none elServerScriptError.parentElement.style.display = data.errorInfo ? "block" : "none"; if (data.statusRetrieved === false) { elServerScriptStatus.innerText = "Failed to retrieve status"; @@ -1194,11 +1196,11 @@ function loaded() { $(el).css('background-color', '#' + hex); $(el).colpickHide(); emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b); - // Keep the companion control in sync - elColorControl2.style.backgroundColor = "rgb(" + rgb.r + "," + rgb.g + "," + rgb.b + ")"; + // Keep the companion control in sync + elColorControl2.style.backgroundColor = "rgb(" + rgb.r + "," + rgb.g + "," + rgb.b + ")"; } })); - colorPickers.push($('#property-color-control2').colpick({ + colorPickers.push($('#property-color-control2').colpick({ colorScheme: 'dark', layout: 'hex', color: '000000', @@ -1212,8 +1214,8 @@ function loaded() { $(el).css('background-color', '#' + hex); $(el).colpickHide(); emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b); - // Keep the companion control in sync - elColorControl1.style.backgroundColor = "rgb(" + rgb.r + "," + rgb.g + "," + rgb.b + ")"; + // Keep the companion control in sync + elColorControl1.style.backgroundColor = "rgb(" + rgb.r + "," + rgb.g + "," + rgb.b + ")"; } })); @@ -1478,9 +1480,9 @@ function loaded() { var elCollapsible = document.getElementsByClassName("section-header"); var toggleCollapsedEvent = function(event) { - var element = event.target.parentNode.parentNode; - var isCollapsed = element.dataset.collapsed !== "true"; - element.dataset.collapsed = isCollapsed ? "true" : false + var element = event.target.parentNode.parentNode; + var isCollapsed = element.dataset.collapsed !== "true"; + element.dataset.collapsed = isCollapsed ? "true" : false element.setAttribute("collapsed", isCollapsed ? "true" : "false"); element.getElementsByTagName("span")[0].textContent = isCollapsed ? "L" : "M"; }; From e4e4ead4af9ab93c53796823aac9e730b16cb3b8 Mon Sep 17 00:00:00 2001 From: "VRCat\\VRKitten" Date: Wed, 2 Aug 2017 16:56:02 -0600 Subject: [PATCH 3/3] 'Untabified' files --- scripts/system/html/css/edit-style.css | 206 ++++---- scripts/system/html/entityProperties.html | 602 +++++++++++----------- 2 files changed, 404 insertions(+), 404 deletions(-) diff --git a/scripts/system/html/css/edit-style.css b/scripts/system/html/css/edit-style.css index 583a832398..a1631e3db7 100644 --- a/scripts/system/html/css/edit-style.css +++ b/scripts/system/html/css/edit-style.css @@ -450,50 +450,50 @@ input[type=checkbox]:checked + label:hover { } .shape-section, .light-section, .model-section, .web-section, .hyperlink-section, .text-section, .zone-section { - display: table; + display: table; } #properties-list fieldset { - position: relative; - /* 0.1px on the top is to prevent margin collapsing between this and it's first child */ - margin: 21px -21px 0px -21px; + position: relative; + /* 0.1px on the top is to prevent margin collapsing between this and it's first child */ + margin: 21px -21px 0px -21px; padding: 0.1px 21px 0px 21px; - border: none; - border-top: 1px rgb(90,90,90) solid; - box-shadow: 0px -1px 0px rgb(37,37,37); + border: none; + border-top: 1px rgb(90,90,90) solid; + box-shadow: 0px -1px 0px rgb(37,37,37); } #properties-list fieldset.fstuple, #properties-list fieldset.fsrow { - margin-top: 21px; - border: none; - box-shadow: none; + margin-top: 21px; + border: none; + box-shadow: none; } #properties-list > fieldset[data-collapsed="true"] + fieldset { - margin-top: 0px; + margin-top: 0px; } #properties-list > fieldset[data-collapsed="true"] > *:not(legend) { - display: none !important; + display: none !important; } #properties-list legend + fieldset { - margin-top: 0px; - border: none; - box-shadow: none; + margin-top: 0px; + border: none; + box-shadow: none; } #properties-list > fieldset#properties-header { - margin-top: 0px; - padding-bottom: 0px; + margin-top: 0px; + padding-bottom: 0px; } #properties-list > fieldset > legend { - position: relative; + position: relative; display: table; width: 100%; margin: 21px -21px 0 -21px; @@ -504,10 +504,10 @@ input[type=checkbox]:checked + label:hover { height: 28px; text-transform: uppercase; outline: none; - background-color: #404040; - border: none; - border-top: 1px rgb(90,90,90) solid; - box-shadow: 0 -1px 0 rgb(37,37,37), 0 4px 4px 0 rgba(0,0,0,0.75); + background-color: #404040; + border: none; + border-top: 1px rgb(90,90,90) solid; + box-shadow: 0 -1px 0 rgb(37,37,37), 0 4px 4px 0 rgba(0,0,0,0.75); } div.section-header, .sub-section-header, hr { @@ -526,8 +526,8 @@ div.section-header, .sub-section-header, hr { .column .sub-section-header { - background-image: none; - padding-top: 0; + background-image: none; + padding-top: 0; } .sub-section-header, .no-collapse, hr { @@ -802,12 +802,12 @@ div.refresh input[type="button"] { } #property-color-control1 { - display: table-cell; - float: none; + display: table-cell; + float: none; } #property-color-control1 + label { - border-left: 20px transparent solid; + border-left: 20px transparent solid; } .rgb label { @@ -919,23 +919,23 @@ tuple, .blue:focus, .tuple .z:focus, .tuple .roll:focus { } #properties-list fieldset .two-column { - padding-top:21px; - display: flex; + padding-top:21px; + display: flex; } #properties-list .two-column fieldset { /*display: table-cell;*/ width: 50%; - margin: 0; - padding: 0; - border-top: none; - box-shadow: none; + margin: 0; + padding: 0; + border-top: none; + box-shadow: none; } #properties-list .two-column fieldset legend { - display: table; + display: table; width: 100%; - margin: 21px -21px 0px -21px; + margin: 21px -21px 0px -21px; padding: 0px 0px 0px 21px; font-family: Raleway-Regular; font-size: 12px; @@ -946,11 +946,11 @@ tuple, .blue:focus, .tuple .z:focus, .tuple .roll:focus { } fieldset .checkbox-sub-props { - margin-top: 0; + margin-top: 0; } fieldset .checkbox-sub-props .property:first-child { - margin-top: 0; + margin-top: 0; } .column { @@ -1297,8 +1297,8 @@ th#entity-hasScript { #properties-list #properties-header { display: table-row; height: 28px; - border-top: none; - box-shadow: none; + border-top: none; + box-shadow: none; } #properties-header .property { @@ -1405,51 +1405,51 @@ input#reset-to-natural-dimensions { } #properties-list #collision-info > fieldset:first-of-type { - border-top: none !important; - box-shadow: none; - margin-top: 0; + border-top: none !important; + box-shadow: none; + margin-top: 0; } #properties-list { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } /* ----- Order of Menu items for Primitive ----- */ #properties-list.ShapeMenu #general, #properties-list.BoxMenu #general, #properties-list.SphereMenu #general { - order: 1; + order: 1; } #properties-list.ShapeMenu #collision-info, #properties-list.BoxMenu #collision-info, #properties-list.SphereMenu #collision-info { - order: 2; + order: 2; } #properties-list.ShapeMenu #physical, #properties-list.BoxMenu #physical, #properties-list.SphereMenu #physical { - order: 3; + order: 3; } #properties-list.ShapeMenu #spatial, #properties-list.BoxMenu #spatial, #properties-list.SphereMenu #spatial { - order: 4; + order: 4; } #properties-list.ShapeMenu #behavior, #properties-list.BoxMenu #behavior, #properties-list.SphereMenu #behavior { - order: 5; + order: 5; } #properties-list.ShapeMenu #hyperlink, #properties-list.BoxMenu #hyperlink, #properties-list.SphereMenu #hyperlink { - order: 6; + order: 6; } #properties-list.ShapeMenu #light, @@ -1467,196 +1467,196 @@ input#reset-to-natural-dimensions { #properties-list.ShapeMenu #web, #properties-list.BoxMenu #web, #properties-list.SphereMenu #web { - display: none; + display: none; } /* ----- Order of Menu items for Light ----- */ #properties-list.LightMenu #general { - order: 1; + order: 1; } #properties-list.LightMenu #light { - order: 2; + order: 2; } #properties-list.LightMenu #physical { - order: 3; + order: 3; } #properties-list.LightMenu #spatial { - order: 4; + order: 4; } #properties-list.LightMenu #behavior { - order: 5; + order: 5; } #properties-list.LightMenu #collision-info { - order: 6; + order: 6; } #properties-list.LightMenu #hyperlink { - order: 7; + order: 7; } -/* sections to hide */ +/* sections to hide */ #properties-list.LightMenu #model, #properties-list.LightMenu #zone, #properties-list.LightMenu #text, #properties-list.LightMenu #web { - display: none; + display: none; } /* items to hide */ #properties-list.LightMenu .shape-group.shape-section.property.dropdown, #properties-list.LightMenu color-section.color-control1 { - display: none + display: none } /* ----- Order of Menu items for Model ----- */ #properties-list.ModelMenu #general { - order: 1; + order: 1; } #properties-list.ModelMenu #model { - order: 2; + order: 2; } #properties-list.ModelMenu #collision-info { - order: 3; + order: 3; } #properties-list.ModelMenu #physical { - order: 4; + order: 4; } #properties-list.ModelMenu #spatial { - order: 5; + order: 5; } #properties-list.ModelMenu #behavior { - order: 6; + order: 6; } #properties-list.ModelMenu #hyperlink { - order: 7; + order: 7; } -/* sections to hide */ +/* sections to hide */ #properties-list.ModelMenu #light, #properties-list.ModelMenu #zone, #properties-list.ModelMenu #text, #properties-list.ModelMenu #web { - display: none; + display: none; } /* items to hide */ #properties-list.ModelMenu .shape-group.shape-section.property.dropdown, #properties-list.ModelMenu .color-section.color-control1 { - display: none + display: none } /* ----- Order of Menu items for Zone ----- */ #properties-list.ZoneMenu #general { - order: 1; + order: 1; } #properties-list.ZoneMenu #zone { - order: 2; + order: 2; } #properties-list.ZoneMenu #physical { - order: 3; + order: 3; } #properties-list.ZoneMenu #spatial { - order: 4; + order: 4; } #properties-list.ZoneMenu #behavior { - order: 5; + order: 5; } #properties-list.ZoneMenu #collision-info { - order: 6; + order: 6; } #properties-list.ZoneMenu #hyperlink { - order: 7; + order: 7; } -/* sections to hide */ +/* sections to hide */ #properties-list.ZoneMenu #light, #properties-list.ZoneMenu #model, #properties-list.ZoneMenu #text, #properties-list.ZoneMenu #web { - display: none; + display: none; } /* items to hide */ #properties-list.ZoneMenu .shape-group.shape-section.property.dropdown, #properties-list.ZoneMenu .color-section.color-control1 { - display: none + display: none } /* ----- Order of Menu items for Web ----- */ #properties-list.WebMenu #general { - order: 1; + order: 1; } #properties-list.WebMenu #web { - order: 2; + order: 2; } #properties-list.WebMenu #collision-info { - order: 3; + order: 3; } #properties-list.WebMenu #physical { - order: 4; + order: 4; } #properties-list.WebMenu #spatial { - order: 5; + order: 5; } #properties-list.WebMenu #behavior { - order: 6; + order: 6; } #properties-list.WebMenu #hyperlink { - order: 7; + order: 7; } -/* sections to hide */ +/* sections to hide */ #properties-list.WebMenu #light, #properties-list.WebMenu #model, #properties-list.WebMenu #zone, #properties-list.WebMenu #text { - display: none; + display: none; } /* items to hide */ #properties-list.WebMenu .shape-group.shape-section.property.dropdown, #properties-list.WebMenu .color-section.color-control1 { - display: none; + display: none; } /* ----- Order of Menu items for Text ----- */ #properties-list.TextMenu #general { - order: 1; + order: 1; } #properties-list.TextMenu #text { - order: 2; + order: 2; } #properties-list.TextMenu #collision-info { - order: 3; + order: 3; } #properties-list.TextMenu #physical { - order: 4; + order: 4; } #properties-list.TextMenu #spatial { - order: 5; + order: 5; } #properties-list.TextMenu #behavior { - order: 6; + order: 6; } #properties-list.TextMenu #hyperlink { - order: 7; + order: 7; } -/* sections to hide */ +/* sections to hide */ #properties-list.TextMenu #light, #properties-list.TextMenu #model, #properties-list.TextMenu #zone, #properties-list.TextMenu #web { - display: none; + display: none; } /* items to hide */ #properties-list.TextMenu .shape-group.shape-section.property.dropdown, #properties-list.TextMenu .color-section.color-control1 { - display: none + display: none } /* Currently always hidden */ #properties-list #polyvox { - display: none; + display: none; } .skybox-section { - display: none; + display: none; } \ No newline at end of file diff --git a/scripts/system/html/entityProperties.html b/scripts/system/html/entityProperties.html index ecdd866666..24a8b2fee0 100644 --- a/scripts/system/html/entityProperties.html +++ b/scripts/system/html/entityProperties.html @@ -47,114 +47,114 @@
+ + + + + + + + + + + + +
-
-
- -
- -
-
-
- - -
-
- - -
-
-
-
-
- - Collides With - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
-
-
- - Grabbing - -
-
- - -
-
- - -
-
- - -
-
- - -
-
-
-
- - -
-
-
+
+
+ +
+
+
+
+
+ + +
+
+ + +
+
+
+
+
+ + Collides With + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + Grabbing + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + +
+
+
-
+
PhysicalM @@ -297,23 +297,23 @@ BehaviorM -
- -
-
- - - - Saved! -
-
-
- -
-
- - -
+
+ +
+
+ + + + Saved! +
+
+
+ +
+
+ + +
@@ -347,10 +347,10 @@
-
- - -
+
+ + +
@@ -366,38 +366,38 @@ -
- - LightM - -
-
- Light color -
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -
-
-
-
-
-
-
-
-
+
+ + LightM + +
+
+ Light color +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
@@ -412,14 +412,14 @@
+ + + + + + + +
@@ -480,115 +480,115 @@
-
- - ZoneM - -
-
- - -
-
- - -
-
- - -
-
-
-
- - -
-
- -
-
-
- -
-
-
-
-
-
-
- - -
-
-
-
-
-
-
-
-
- - -
-
- - -
-
-
- - Stage - -
-
-
-
-
-
-
-
- - -
-
-
-
-
-
-
-
-
-
- - Background - -
- - -
-
-
- - Skybox - -
-
- Skybox color -
-
-
-
-
-
-
- - -
-
-
+
+ + ZoneM + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ +
+
+
+ +
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+ + +
+
+
+ + Stage + +
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+ + Background + +
+ + +
+
+
+ + Skybox + +
+
+ Skybox color +
+
+
+
+
+
+
+ + +
+
+
@@ -646,37 +646,37 @@ -
- - Voxel volume size m - -
-
-
-
-
-
- - -
-
- - -
-
- - -
-
- - -
-
+
+ + Voxel volume size m + +
+
+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+