user settings: Enhance Uploaded files sorting.

Fixes #7149

static/js/list_render.js

@@ -371,8 +371,16 @@ $(function () {
             return;
         }
 
+        if ($this.hasClass("active")) {
+            // Table has already been sorted by this property; do not re-sort.
+            return;
+        }
+
         // if `prop_name` is defined, it will trigger the generic codepath,
         // and not if it is undefined.
         list.sort(sort_type, prop_name);
+
+        $this.siblings(".active").removeClass("active");
+        $this.addClass("active");
     });
 });

static/styles/settings.css

@@ -953,6 +953,26 @@ input[type=checkbox].inline-block {
 #settings_page .table-striped thead th {
     background-color: inherit;
     color: inherit;
+    opacity: 0.5;
+}
+
+#settings_page .table-striped thead th.active {
+    opacity: 1;
+    -webkit-transition: opacity 100ms ease-out;
+    -moz-transition: opacity 100ms ease-out;
+    -o-transition: opacity 100ms ease-out;
+    transition: opacity 100ms ease-out;
+}
+
+#settings_page .table-striped thead th.active:after {
+  content: " \f0d7";
+  white-space: pre;
+  display: inline-block;
+  font: normal normal normal 12px/1 FontAwesome;
+  font-size: inherit;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 #settings_page input.search {

static/templates/settings/attachments-settings.handlebars

@@ -6,7 +6,7 @@
     <table class="table table-condensed table-striped wrapped-table">
         <thead>
             <th data-sort="alphabetic" data-sort-prop="name" class="wrapped-cell">{{t "File" }}</th>
-            <th data-sort="numeric" data-sort-prop="create_time">{{t "Date uploaded" }}</th>
+            <th class="active" data-sort="numeric" data-sort-prop="create_time">{{t "Date uploaded" }}</th>
             <th data-sort="mentioned-in">{{t "Mentioned in" }}</th>
             <th class="upload-size" data-sort="numeric" data-sort-prop="size">{{t "Size" }}</th>
             <th class="upload-actions">{{t "Actions" }}</th>