From 08dd5c54c156467d7ceb1b880d1a305159efe7ce Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Thu, 14 Apr 2016 15:47:11 +1200
Subject: [PATCH] Keep entity list headings stationary over sort column changes

---
 examples/html/edit-style.css  |  6 ++++++
 examples/html/entityList.html | 16 ++++++++--------
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index e1b797e6d8..425e8f7799 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -834,6 +834,12 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
     position: relative; /* New positioning context. */
 }
 
+#entity-list .sort-order {
+    display: inline-block;
+    width: 6px;
+    text-align: right;
+}
+
 #search-area {
     padding-right: 148px;
     padding-bottom: 24px;
diff --git a/examples/html/entityList.html b/examples/html/entityList.html
index 450d500621..6d41c5ea9a 100644
--- a/examples/html/entityList.html
+++ b/examples/html/entityList.html
@@ -18,11 +18,11 @@
         var entities = {};
         var selectedEntities = [];
         var currentSortColumn = 'type';
-        var currentSortOrder = 'asc';
+        var currentSortOrder = 'des';
         var entityList = null;
         var refreshEntityListTimer = null;
-        const ASCENDING_STRING = '&nbsp;&#x25BE;';
-        const DESCENDING_STRING = '&nbsp;&#x25B4;';
+        const ASCENDING_STRING = '&#x25BE;';
+        const DESCENDING_STRING = '&#x25B4;';
         const DELETE = 46; // Key code for the delete key.
         const MAX_ITEMS = Number.MAX_VALUE; // Used to set the max length of the list of discovered entities.
 
@@ -146,14 +146,14 @@
                   if (currentSortColumn == column) {
                       currentSortOrder = currentSortOrder == "asc" ? "desc" : "asc";
                   } else {
-                      elSortOrder[currentSortColumn].style.display = 'none';
-                      elSortOrder[column].style.display = 'inline';
+                      elSortOrder[currentSortColumn].innerHTML = "";
                       currentSortColumn = column;
                       currentSortOrder = "asc";
                   }
                   elSortOrder[column].innerHTML = currentSortOrder == "asc" ? ASCENDING_STRING : DESCENDING_STRING;
                   entityList.sort(currentSortColumn, { order: currentSortOrder });
               }
+              setSortColumn('type');
               
               function refreshEntities() {
                   clearEntities();
@@ -301,9 +301,9 @@
                 </colgroup>
                 <thead>
                     <tr>
-                        <th id="entity-type" data-sort="type">Type <span class="sort-order" style="display: inline">&nbsp;&#x25BE;</span></th>
-                        <th id="entity-name" data-sort="type">Name <span class="sort-order" style="display: none">&nbsp;&#x25BE;</span></th>
-                        <th id="entity-url" data-sort="url">File <span class="sort-order" style="display: none">&nbsp;&#x25BE;</span></th>
+                        <th id="entity-type" data-sort="type">Type <span class="sort-order"></span></th>
+                        <th id="entity-name" data-sort="type">Name <span class="sort-order"></span></th>
+                        <th id="entity-url" data-sort="url">File <span class="sort-order"></span></th>
                     </tr>
                 </thead>
                 <tbody class="list" id="entity-table-body">