Add expand/collapse extra info toggle icon to entities table header

This commit is contained in:
David Rowe 2016-09-07 15:04:27 +12:00
parent 156866f835
commit dba3efd857
3 changed files with 39 additions and 19 deletions

View file

@ -918,10 +918,10 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
width: 4%;
}
#col-verticesCount {
width: 10%;
width: 8%;
}
#col-texturesCount {
width: 10%;
width: 8%;
}
#col-texturesSize {
width: 10%;
@ -930,7 +930,7 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
width: 4%;
}
#col-drawCalls {
width: 10%;
width: 8%;
}
#col-hasScript {
width: 4%;
@ -960,12 +960,18 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
top: 49px;
left: 0;
width: 100%;
word-wrap: nowrap;
white-space: nowrap;
overflow: hidden;
}
#entity-table thead th {
#entity-table th {
display: inline-block;
box-sizing: border-box;
padding: 0 0 0 8px;
padding: 5px 0 0 0;
vertical-align: middle;
overflow: hidden;
text-overflow: ellipsis;
}
#entity-table th:focus {
@ -974,7 +980,15 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
#entity-table th .glyph {
position: relative;
left: 0;
left: 4px;
}
#entity-table th .glyph + .sort-order {
position: relative;
left: 4px;
}
#entity-table th#entity-hasScript {
overflow: visible;
}
#entity-table th#entity-hasScript .glyph {
@ -985,10 +999,15 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
display: inline-block;
width: 8px;
margin: -5px 0 -3px 0;
text-align: right;
vertical-align: middle;
}
#entity-table th #info-toggle {
position: absolute;
left: initial;
right: 4px;
}
#entity-table td {
box-sizing: border-box;
}

View file

@ -61,23 +61,23 @@
<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></th>
<th colspan="2" id="entity-hasScript"><span class="glyph">k</span><span class="sort-order"></span><span id="info-toggle" class="glyph">D</span></th>
</tr>
</thead>
<tbody class="list" id="entity-table-body">
<tr>
<td class="type">Type</td>
<td class="name">Name</td>
<td class="url"><div class='outer'><div class='inner'>URL</div></div></td>
<td class="locked glyph">?</td>
<td class="visible glyph">?</td>
<td class="type"></td>
<td class="name"></td>
<td class="url"><div class='outer'><div class='inner'></div></div></td>
<td class="locked glyph"></td>
<td class="visible glyph"></td>
<td class="verticesCount"></td>
<td class="texturesCount"></td>
<td class="texturesSize"></td>
<td class="hasTransparent glyph"></td>
<td class="drawCalls"></td>
<td class="hasScript glyph"></td>
<td class="id" style="display: none">ID</td>
<td class="id" style="display: none"></td>
</tr>
</tbody>
<tfoot>

View file

@ -315,6 +315,7 @@ function loaded() {
// Take up available window space
elEntityTableScroll.style.height = window.innerHeight - 207;
var SCROLLABAR_WIDTH = 21;
var tds = document.querySelectorAll("#entity-table-body tr:first-child td");
var ths = document.querySelectorAll("#entity-table thead th");
if (tds.length >= ths.length) {
@ -324,18 +325,18 @@ function loaded() {
}
} else {
// Reasonable widths if nothing is displayed
var tableWidth = document.getElementById("entity-table").offsetWidth;
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.10 * tableWidth;
ths[6].width = 0.10 * 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.10 * tableWidth;
ths[10].width = 0.04 * tableWidth;
ths[9].width = 0.08 * tableWidth;
ths[10].width = 0.04 * tableWidth + SCROLLABAR_WIDTH;
}
};