Clarify header ordering indicators

Author: MartinFournier

msgfmt:ui/lib/client.js

@@ -264,6 +264,15 @@ Template.mfTransLang.helpers({
   caseInsensitiveOrdering: function() {
     return Session.get('caseInsensitiveOrdering');
   },
+  sortOrderHeaderClass: function(headerSortField) {
+    var classes = '';
+    var sortField = Session.get('translationSortField');
+    var sortOrder = Session.get('translationSortOrder');
+    if (headerSortField === sortField) {
+      classes += ' active-sort ' + sortOrder;
+    }
+    return classes
+  },
   stateClass: function() {
     if (this.fuzzy)
       return 'fuzzy';

msgfmt:ui/lib/ui.css

@@ -77,6 +77,18 @@ div.mfTransGraph.untrans { background: #800; border-right: 1px solid black; }
 
 #mfTransLang .options label { margin-right: 10px; }
 
+#mfTransLang th { position: relative; }
+#mfTransLang th.active-sort { background-color: #CCC; }
+#mfTransLang th.active-sort a { font-weight: 500; }
+#mfTransLang th.active-sort::after {
+	font-size: 0.6em;
+	position: absolute;
+  top: 5px;
+  right: 10px;
+}
+#mfTransLang th.active-sort.asc::after { content: '▲'; }
+#mfTransLang th.active-sort.desc::after { content: '▼'; }
+
 #mfTransLang textarea {
 	font-family: monospace;
 	height: 5em; width: 100%;

msgfmt:ui/lib/ui.html

@@ -74,10 +74,16 @@ <h2>{{mf 'mf_site_translations' 'Site Translations'}}</h2>
         <thead>
           <tr>
             {{#if showKey}}
-              <th><a href="#" class="translationSort" data-sortField="key">Key</a></th>
+              <th class="{{sortOrderHeaderClass 'key'}}">
+                <a href="#" class='translationSort' data-sortField="key">Key</a>
+              </th>
             {{/if}}
-            <th><a href="#" class="translationSort" data-sortField="orig">Original String ({{origLang}})</a></th>
-            <th><a href="#" class="translationSort" data-sortField="trans">Translation ({{destLang}})</a></th>
+            <th class="{{sortOrderHeaderClass 'orig'}}">
+              <a href="#" class="translationSort" data-sortField="orig">Original String ({{origLang}})</a>
+            </th>
+            <th class="{{sortOrderHeaderClass 'trans'}}">
+              <a href="#" class="translationSort" data-sortField="trans">Translation ({{destLang}})</a>
+            </th>
           </tr>
         </thead>
       </table>
@@ -104,9 +110,10 @@ <h2>{{mf 'mf_site_translations' 'Site Translations'}}</h2>
       </label>
       <label>
         <input type='checkbox' id='translationCaseInsensitiveOrdering' {{isCheckboxChecked caseInsensitiveOrdering}}>
-        Case Insensitive Ordering
+        Case insensitive ordering
       </label>
-      Use ctrl-up and ctrl-down to quickly change keys
+      <br />
+      Use ctrl-up and ctrl-down to quickly change keys & click on headers to reorder the columns.
     </p>
     <span><b>{{keyInfo.key}}</b> in {{keyInfo.file}}:{{keyInfo.line
       }}{{#if keyInfo.template}} (template