mirror of
https://github.com/overte-org/overte.git
synced 2025-04-20 11:45:36 +02:00
Implement expand/collapse action to show/hide table columns
This commit is contained in:
David Rowe
parent
b372f82f78
commit
db30e36b3b
3 changed files with 133 additions and 54 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@
|
|||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th id="entity-type">Type<span class="sort-order"></span></th>
|
||||
<th id="entity-type">Type<span class="sort-order"></span><span id="info-toggle"><span class="glyph">D</span></span></th>
|
||||
<th id="entity-name">Name<span class="sort-order"></span></th>
|
||||
<th id="entity-url">File<span class="sort-order"></span></th>
|
||||
<th id="entity-locked"><span class="glyph"></span><span class="sort-order"></span></th>
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
<th id="entity-texturesSize">T Size<span class="sort-order"></span></th>
|
||||
<th id="entity-hasTransparent"><span class="glyph">'</span><span class="sort-order"></span></th>
|
||||
<th id="entity-drawCalls">Draws<span class="sort-order"></span></th>
|
||||
<th colspan="2" id="entity-hasScript"><span class="glyph">k</span><span class="sort-order"></span><span id="info-toggle"><span class="glyph">D</span></span></th>
|
||||
<th colspan="1" id="entity-hasScript"><span class="glyph">k</span><span class="sort-order"></span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="list" id="entity-table-body">
|
||||
|
|
@ -81,9 +81,9 @@
|
|||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td id="footer-text" colspan="11"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id="footer-text" colspan="11"> </td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<div id="no-entities">
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue