From db30e36b3bdbe0d630162d6c7f2e58be6c37509b Mon Sep 17 00:00:00 2001 From: David Rowe Date: Wed, 7 Sep 2016 19:11:53 +1200 Subject: [PATCH] Implement expand/collapse action to show/hide table columns --- scripts/system/html/css/edit-style.css | 121 +++++++++++++++++-------- scripts/system/html/entityList.html | 10 +- scripts/system/html/js/entityList.js | 56 +++++++++--- 3 files changed, 133 insertions(+), 54 deletions(-) diff --git a/scripts/system/html/css/edit-style.css b/scripts/system/html/css/edit-style.css index 78fcdca535..454bb682fe 100644 --- a/scripts/system/html/css/edit-style.css +++ b/scripts/system/html/css/edit-style.css @@ -894,8 +894,9 @@ textarea:enabled[scrolling="true"]::-webkit-resizer { border-left: 2px solid #575757; border-right: 2px solid #575757; background-color: #1c1c1c; -} + height: 100px; +} #entity-table { margin-top: -28px; @@ -905,41 +906,6 @@ textarea:enabled[scrolling="true"]::-webkit-resizer { background-color: #1c1c1c; } -#col-type { - width: 10%; -} -#col-name { - width: 19%; -} -#col-url { - width: 19%; -} -#col-locked, #col-visible { - width: 4%; -} -#col-verticesCount { - width: 8%; -} -#col-texturesCount { - width: 8%; -} -#col-texturesSize { - width: 10%; -} -#col-hasTransparent { - width: 4%; -} -#col-drawCalls { - width: 8%; -} -#col-hasScript { - width: 6%; -} - -.verticesCount, .texturesCount, .texturesSize, .drawCalls { - text-align: right; -} - #entity-table thead tr, #entity-table thead tr th, #entity-table tfoot tr, #entity-table tfoot tr td { background: none; @@ -965,6 +931,10 @@ textarea:enabled[scrolling="true"]::-webkit-resizer { overflow: hidden; } +.verticesCount, .texturesCount, .texturesSize, .drawCalls { + text-align: right; +} + #entity-table th { display: inline-block; box-sizing: border-box; @@ -1009,10 +979,11 @@ textarea:enabled[scrolling="true"]::-webkit-resizer { right: 0; width: 11px; background-color: #1c1c1c; + z-index: 100; } #entity-table th #info-toggle span { position: relative; - left: 0; + left: -2px; } #entity-table td { @@ -1036,6 +1007,82 @@ textarea:enabled[scrolling="true"]::-webkit-resizer { width: 100%; } + +#col-type { + width: 16%; +} +#col-name { + width: 34%; +} +#col-url { + width: 34%; +} +#col-locked, #col-visible { + width: 9%; +} +#col-verticesCount, #col-texturesCount, #col-texturesSize, #col-hasTransparent, #col-drawCalls, #col-hasScript { + width: 0; +} + +.showExtraInfo #col-type { + width: 10%; +} +.showExtraInfo #col-name { + width: 19%; +} +.showExtraInfo #col-url { + width: 19%; +} +.showExtraInfo #col-locked, .showExtraInfo #col-visible { + width: 4%; +} +.showExtraInfo #col-verticesCount { + width: 8%; +} +.showExtraInfo #col-texturesCount { + width: 8%; +} +.showExtraInfo #col-texturesSize { + width: 10%; +} +.showExtraInfo #col-hasTransparent { + width: 4%; +} +.showExtraInfo #col-drawCalls { + width: 8%; +} +.showExtraInfo #col-hasScript { + width: 6%; +} + +th#entity-verticesCount, th#entity-texturesCount, th#entity-texturesSize, th#entity-hasTransparent, th#entity-drawCalls, +th#entity-hasScript { + display: none; +} + +.verticesCount, .texturesCount, .texturesSize, .hasTransparent, .drawCalls, .hasScript { + display: none; +} + +#entity-visible { + border: none; +} + +.showExtraInfo #entity-verticesCount, .showExtraInfo #entity-texturesCount, .showExtraInfo #entity-texturesSize, +.showExtraInfo #entity-hasTransparent, .showExtraInfo #entity-drawCalls, .showExtraInfo #entity-hasScript { + display: inline-block; +} + +.showExtraInfo .verticesCount, .showExtraInfo .texturesCount, .showExtraInfo .texturesSize, .showExtraInfo .hasTransparent, +.showExtraInfo .drawCalls, .showExtraInfo .hasScript { + display: table-cell; +} + +.showExtraInfo #entity-visible { + border-right: 1px solid #575757; +} + + #no-entities { display: none; position: absolute; diff --git a/scripts/system/html/entityList.html b/scripts/system/html/entityList.html index f4c2cfb282..af2e6e69bf 100644 --- a/scripts/system/html/entityList.html +++ b/scripts/system/html/entityList.html @@ -51,7 +51,7 @@ - Type + TypeD Name File @@ -61,7 +61,7 @@ T Size ' Draws - kD + k @@ -81,9 +81,9 @@ - - - + + +
diff --git a/scripts/system/html/js/entityList.js b/scripts/system/html/js/entityList.js index 1fb0d1aa85..0c3f47c711 100644 --- a/scripts/system/html/js/entityList.js +++ b/scripts/system/html/js/entityList.js @@ -38,6 +38,9 @@ function loaded() { elFilter = document.getElementById("filter"); elTeleport = document.getElementById("teleport"); elRadius = document.getElementById("radius"); + elEntityTable = document.getElementById("entity-table"); + elInfoToggle = document.getElementById("info-toggle"); + elInfoToggleGlyph = elInfoToggle.firstChild; elFooter = document.getElementById("footer-text"); elNoEntitiesMessage = document.getElementById("no-entities"); elNoEntitiesRadius = document.getElementById("no-entities-radius"); @@ -274,7 +277,7 @@ function loaded() { refreshEntities(); elNoEntitiesRadius.firstChild.nodeValue = elRadius.value; } - + if (window.EventBridge !== undefined) { EventBridge.scriptEventReceived.connect(function(data) { data = JSON.parse(data); @@ -326,22 +329,51 @@ function loaded() { } else { // Reasonable widths if nothing is displayed var tableWidth = document.getElementById("entity-table").offsetWidth - SCROLLABAR_WIDTH; - ths[0].width = 0.10 * tableWidth; - ths[1].width = 0.20 * tableWidth; - ths[2].width = 0.20 * tableWidth; - ths[3].width = 0.04 * tableWidth; - ths[4].width = 0.04 * tableWidth; - ths[5].width = 0.08 * tableWidth; - ths[6].width = 0.08 * tableWidth; - ths[7].width = 0.10 * tableWidth; - ths[8].width = 0.04 * tableWidth; - ths[9].width = 0.08 * tableWidth; - ths[10].width = 0.04 * tableWidth + SCROLLABAR_WIDTH; + if (showExtraInfo) { + ths[0].width = 0.10 * tableWidth; + ths[1].width = 0.20 * tableWidth; + ths[2].width = 0.20 * tableWidth; + ths[3].width = 0.04 * tableWidth; + ths[4].width = 0.04 * tableWidth; + ths[5].width = 0.08 * tableWidth; + ths[6].width = 0.08 * tableWidth; + ths[7].width = 0.10 * tableWidth; + ths[8].width = 0.04 * tableWidth; + ths[9].width = 0.08 * tableWidth; + ths[10].width = 0.04 * tableWidth + SCROLLABAR_WIDTH; + } else { + ths[0].width = 0.16 * tableWidth; + ths[1].width = 0.34 * tableWidth; + ths[2].width = 0.34 * tableWidth; + ths[3].width = 0.08 * tableWidth; + ths[4].width = 0.08 * tableWidth; + } } }; window.onresize = resize; elFilter.onchange = resize; + + + var showExtraInfo = false; + var COLLAPSE_EXTRA_INFO = "E"; + var EXPAND_EXTRA_INFO = "D"; + + function toggleInfo(event) { + showExtraInfo = !showExtraInfo; + if (showExtraInfo) { + elEntityTable.className = "showExtraInfo"; + elInfoToggleGlyph.innerHTML = COLLAPSE_EXTRA_INFO; + } else { + elEntityTable.className = ""; + elInfoToggleGlyph.innerHTML = EXPAND_EXTRA_INFO; + } + resize(); + event.stopPropagation(); + } + elInfoToggle.addEventListener("click", toggleInfo, true); + + resize(); });