From dba3efd85700d0d9c2b7cd620a86a8c1c42d3ffe Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Wed, 7 Sep 2016 15:04:27 +1200
Subject: [PATCH] Add expand/collapse extra info toggle icon to entities table
 header

---
 scripts/system/html/css/edit-style.css | 33 ++++++++++++++++++++------
 scripts/system/html/entityList.html    | 14 +++++------
 scripts/system/html/js/entityList.js   | 11 +++++----
 3 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/scripts/system/html/css/edit-style.css b/scripts/system/html/css/edit-style.css
index a0e4bf0f82..62d9c13e16 100644
--- a/scripts/system/html/css/edit-style.css
+++ b/scripts/system/html/css/edit-style.css
@@ -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;
 }
diff --git a/scripts/system/html/entityList.html b/scripts/system/html/entityList.html
index fc135aba42..ed9b98333d 100644
--- a/scripts/system/html/entityList.html
+++ b/scripts/system/html/entityList.html
@@ -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>
diff --git a/scripts/system/html/js/entityList.js b/scripts/system/html/js/entityList.js
index c83520b74d..1fb0d1aa85 100644
--- a/scripts/system/html/js/entityList.js
+++ b/scripts/system/html/js/entityList.js
@@ -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;
           }
       };