settings: Add new sort arrows to all settings tables.

web/shared/icons/sort-arrow-down.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+<path d="M12 5L8 11.9282L4 5L12 5Z" fill="#000000"/>
+</svg>

web/styles/app_components.css

@@ -775,32 +775,36 @@ input.settings_text_input {
         background-color: hsl(0deg 0% 100%);
         word-break: normal;
 
-        &.active::after,
-        &[data-sort]:hover::after {
-            content: " \f0d8";
-            white-space: pre;
-            padding-top: 3px;
-            font: normal normal normal 12px/1 FontAwesome;
-            font-size: inherit;
+        .table-sortable-arrow {
+            /* Sub alignment works perfectly in this context,
+               where the table header is a text node. */
+            vertical-align: sub;
+            transform: rotate(180deg);
+            opacity: 0;
+            transition: opacity 100ms ease-out;
+        }
+
+        &.descend .table-sortable-arrow {
+            transform: rotate(0deg);
+        }
+
+        &:not(.active)[data-sort]:hover .table-sortable-arrow {
+            opacity: 0.3;
+        }
+
+        &.active .table-sortable-arrow {
+            opacity: 1;
         }
 
         &.active {
             opacity: 1;
             transition: opacity 100ms ease-out;
-
-            &.descend::after {
-                content: " \f0d7";
-            }
         }
 
         &[data-sort]:hover {
             cursor: pointer;
             background-color: hsl(0deg 0% 95%) !important;
             transition: background-color 100ms ease-in-out;
-
-            &:not(.active)::after {
-                opacity: 0.3;
-            }
         }
     }
 

web/templates/settings/active_user_list_admin.hbs

@@ -12,10 +12,18 @@
     <div class="progressive-table-wrapper" data-simplebar data-simplebar-tab-index="-1">
         <table class="table table-striped wrapped-table">
             <thead class="table-sticky-headers">
-                <th class="active" data-sort="alphabetic" data-sort-prop="full_name">{{t "Name" }}</th>
-                <th class="settings-email-column" data-sort="email">{{t "Email" }}</th>
-                <th class="user_role" data-sort="role">{{t "Role" }}</th>
-                <th class="last_active" data-sort="last_active">{{t "Last active" }}</th>
+                <th class="active" data-sort="alphabetic" data-sort-prop="full_name">{{t "Name" }}
+                    <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
+                </th>
+                <th class="settings-email-column" data-sort="email">{{t "Email" }}
+                    <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
+                </th>
+                <th class="user_role" data-sort="role">{{t "Role" }}
+                    <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
+                </th>
+                <th class="last_active" data-sort="last_active">{{t "Last active" }}
+                    <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
+                </th>
                 {{#if is_admin}}
                 <th class="actions">{{t "Actions" }}</th>
                 {{/if}}

web/templates/settings/alert_word_settings.hbs

@@ -23,7 +23,9 @@
     <div class="progressive-table-wrapper" data-simplebar data-simplebar-tab-index="-1">
         <table class="table table-striped wrapped-table">
             <thead class="table-sticky-headers">
-                <th data-sort="alphabetic" data-sort-prop="word">{{t "Word" }}</th>
+                <th data-sort="alphabetic" data-sort-prop="word">{{t "Word" }}
+                    <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
+                </th>
                 <th class="actions">{{t "Actions" }}</th>
             </thead>
             <tbody id="alert-words-table" class="alert-words-table"

web/templates/settings/attachments_settings.hbs

@@ -9,10 +9,18 @@
     <div class="progressive-table-wrapper" data-simplebar data-simplebar-tab-index="-1">
         <table class="table table-striped wrapped-table">
             <thead class="table-sticky-headers">
-                <th data-sort="alphabetic" data-sort-prop="name" class="upload-file-name">{{t "File" }}</th>
-                <th class="active upload-date" data-sort="numeric" data-sort-prop="create_time">{{t "Date uploaded" }}</th>
-                <th class="upload-mentioned-in" data-sort="mentioned_in">{{t "Mentioned in" }}</th>
-                <th class="upload-size" data-sort="numeric" data-sort-prop="size">{{t "Size" }}</th>
+                <th data-sort="alphabetic" data-sort-prop="name" class="upload-file-name">{{t "File" }}
+                    <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
+                </th>
+                <th class="active upload-date" data-sort="numeric" data-sort-prop="create_time">{{t "Date uploaded" }}
+                    <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
+                </th>
+                <th class="upload-mentioned-in" data-sort="mentioned_in">{{t "Mentioned in" }}
+                    <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
+                </th>
+                <th class="upload-size" data-sort="numeric" data-sort-prop="size">{{t "Size" }}
+                    <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
+                </th>
                 <th class="upload-actions actions">{{t "Actions" }}</th>
             </thead>
             <tbody data-empty="{{t 'You have not uploaded any files.' }}" data-search-results-empty="{{t 'No uploaded files match your current filter.' }}" id="uploaded_files_table"></tbody>

web/templates/settings/bot_list_admin.hbs

@@ -27,11 +27,21 @@
     <div class="progressive-table-wrapper" data-simplebar data-simplebar-tab-index="-1">
         <table class="table table-striped wrapped-table">
             <thead class="table-sticky-headers">
-                <th class="active" data-sort="alphabetic" data-sort-prop="full_name">{{t "Name" }}</th>
-                <th class="settings-email-column" data-sort="email">{{t "Email" }}</th>
-                <th class="user_role" data-sort="role">{{t "Role" }}</th>
-                <th data-sort="bot_owner">{{t "Owner" }}</th>
-                <th data-sort="alphabetic" data-sort-prop="bot_type" class="bot_type">{{t "Bot type" }}</th>
+                <th class="active" data-sort="alphabetic" data-sort-prop="full_name">{{t "Name" }}
+                    <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
+                </th>
+                <th class="settings-email-column" data-sort="email">{{t "Email" }}
+                    <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
+                </th>
+                <th class="user_role" data-sort="role">{{t "Role" }}
+                    <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
+                </th>
+                <th data-sort="bot_owner">{{t "Owner" }}
+                    <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
+                </th>
+                <th data-sort="alphabetic" data-sort-prop="bot_type" class="bot_type">{{t "Bot type" }}
+                    <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
+                </th>
                 {{#if is_admin}}
                 <th class="actions">{{t "Actions" }}</th>
                 {{/if}}

web/templates/settings/data_exports_admin.hbs

@@ -43,9 +43,13 @@
         <div class="progressive-table-wrapper" data-simplebar data-simplebar-tab-index="-1">
             <table class="table table-striped wrapped-table admin_exports_table">
                 <thead class="table-sticky-headers">
-                    <th class="active" data-sort="user">{{t "Requesting user" }}</th>
+                    <th class="active" data-sort="user">{{t "Requesting user" }}
+                        <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
+                    </th>
                     <th>{{t "Type"}}</th>
-                    <th data-sort="numeric" data-sort-prop="export_time">{{t "Time" }}</th>
+                    <th data-sort="numeric" data-sort-prop="export_time">{{t "Time" }}
+                        <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
+                    </th>
                     <th>{{t "Status" }}</th>
                     <th class="actions">{{t "Actions" }}</th>
                 </thead>

web/templates/settings/deactivated_users_admin.hbs

@@ -15,9 +15,17 @@
     <div class="progressive-table-wrapper" data-simplebar data-simplebar-tab-index="-1">
         <table class="table table-striped wrapped-table">
             <thead class="table-sticky-headers">
-                <th class="active" data-sort="alphabetic" data-sort-prop="full_name">{{t "Name" }}</th>
-                <th class="settings-email-column" {{#if allow_sorting_deactivated_users_list_by_email}}data-sort="email"{{/if}}>{{t "Email" }}</th>
-                <th class="user_role" data-sort="role">{{t "Role" }}</th>
+                <th class="active" data-sort="alphabetic" data-sort-prop="full_name">{{t "Name" }}
+                    <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
+                </th>
+                <th class="settings-email-column" {{#if allow_sorting_deactivated_users_list_by_email}}data-sort="email"{{/if}}>{{t "Email" }}
+                    {{#if allow_sorting_deactivated_users_list_by_email}}
+                    <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
+                    {{/if}}
+                </th>
+                <th class="user_role" data-sort="role">{{t "Role" }}
+                    <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
+                </th>
                 {{#if is_admin}}
                 <th class="actions">{{t "Actions" }}</th>
                 {{/if}}

web/templates/settings/default_streams_list_admin.hbs

@@ -20,7 +20,9 @@
     <div class="progressive-table-wrapper" data-simplebar data-simplebar-tab-index="-1">
         <table class="table table-striped wrapped-table">
             <thead class="table-sticky-headers">
-                <th class="active" data-sort="alphabetic" data-sort-prop="name">{{t "Name" }}</th>
+                <th class="active" data-sort="alphabetic" data-sort-prop="name">{{t "Name" }}
+                    <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
+                </th>
                 {{#if is_admin}}
                 <th class="actions">{{t "Actions" }}</th>
                 {{/if}}

web/templates/settings/emoji_settings_admin.hbs

@@ -20,9 +20,13 @@
     <div class="progressive-table-wrapper" data-simplebar data-simplebar-tab-index="-1">
         <table class="table table-striped wrapped-table admin_emoji_table">
             <thead class="table-sticky-headers">
-                <th class="active" data-sort="alphabetic" data-sort-prop="name">{{t "Name" }}</th>
+                <th class="active" data-sort="alphabetic" data-sort-prop="name">{{t "Name" }}
+                    <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
+                </th>
                 <th class="image">{{t "Image" }}</th>
-                <th class="image" data-sort="author_full_name">{{t "Author" }}</th>
+                <th class="image" data-sort="author_full_name">{{t "Author" }}
+                    <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
+                </th>
                 <th class="actions">{{t "Actions" }}</th>
             </thead>
             <tbody id="admin_emoji_table" data-empty="{{t 'There are no custom emoji.' }}" data-search-results-empty="{{t 'No custom emojis match your current filter.' }}"></tbody>

web/templates/settings/invites_list_admin.hbs

@@ -17,13 +17,23 @@
     <div class="progressive-table-wrapper" data-simplebar data-simplebar-tab-index="-1">
         <table class="table table-striped">
             <thead class="table-sticky-headers">
-                <th class="active" data-sort="invitee">{{t "Invitee" }}</th>
+                <th class="active" data-sort="invitee">{{t "Invitee" }}
+                    <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
+                </th>
                 {{#if is_admin }}
-                <th data-sort="alphabetic" data-sort-prop="referrer_name">{{t "Invited by" }}</th>
+                <th data-sort="alphabetic" data-sort-prop="referrer_name">{{t "Invited by" }}
+                    <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
+                </th>
                 {{/if}}
-                <th data-sort="numeric" data-sort-prop="invited">{{t "Invited at" }}</th>
-                <th data-sort="numeric" data-sort-prop="expiry_date">{{t "Expires at" }}</th>
-                <th data-sort="numeric" data-sort-prop="invited_as">{{t "Invited as" }}</th>
+                <th data-sort="numeric" data-sort-prop="invited">{{t "Invited at" }}
+                    <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
+                </th>
+                <th data-sort="numeric" data-sort-prop="expiry_date">{{t "Expires at" }}
+                    <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
+                </th>
+                <th data-sort="numeric" data-sort-prop="invited_as">{{t "Invited as" }}
+                    <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
+                </th>
                 <th class="actions">{{t "Actions" }}</th>
             </thead>
             <tbody id="admin_invites_table" class="admin_invites_table" data-empty="{{t 'There are no invitations.' }}" data-search-results-empty="{{t 'No invitations match your current filter.' }}"></tbody>

web/templates/settings/muted_users_settings.hbs

@@ -6,8 +6,12 @@
     <div class="progressive-table-wrapper" data-simplebar data-simplebar-tab-index="-1">
         <table class="table table-striped wrapped-table">
             <thead class="table-sticky-headers">
-                <th data-sort="alphabetic" data-sort-prop="user_name">{{t "User" }}</th>
-                <th data-sort="numeric" data-sort-prop="date_muted">{{t "Date muted" }}</th>
+                <th data-sort="alphabetic" data-sort-prop="user_name">{{t "User" }}
+                    <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
+                </th>
+                <th data-sort="numeric" data-sort-prop="date_muted">{{t "Date muted" }}
+                    <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
+                </th>
                 <th class="actions">{{t "Actions" }}</th>
             </thead>
             <tbody id="muted_users_table" data-empty="{{t 'You have not muted any users yet.'}}" data-search-results-empty="{{t 'No users match your current filter.' }}"></tbody>

web/templates/settings/playground_settings_admin.hbs

@@ -74,9 +74,15 @@
         <div class="progressive-table-wrapper" data-simplebar data-simplebar-tab-index="-1">
             <table class="table table-striped wrapped-table admin_playgrounds_table">
                 <thead class="table-sticky-headers">
-                    <th class="active" data-sort="alphabetic" data-sort-prop="pygments_language">{{t "Language" }}</th>
-                    <th data-sort="alphabetic" data-sort-prop="name">{{t "Name" }}</th>
-                    <th data-sort="alphabetic" data-sort-prop="url_template">{{t "URL template" }}</th>
+                    <th class="active" data-sort="alphabetic" data-sort-prop="pygments_language">{{t "Language" }}
+                        <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
+                    </th>
+                    <th data-sort="alphabetic" data-sort-prop="name">{{t "Name" }}
+                        <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
+                    </th>
+                    <th data-sort="alphabetic" data-sort-prop="url_template">{{t "URL template" }}
+                        <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
+                    </th>
                     {{#if is_admin}}
                     <th class="actions">{{t "Actions" }}</th>
                     {{/if}}

web/templates/settings/user_topics_settings.hbs

@@ -17,10 +17,18 @@
     <div class="progressive-table-wrapper" data-simplebar data-simplebar-tab-index="-1">
         <table class="table table-striped wrapped-table">
             <thead class="table-sticky-headers">
-                <th data-sort="alphabetic" data-sort-prop="stream">{{t "Channel" }}</th>
-                <th data-sort="alphabetic" data-sort-prop="topic">{{t "Topic" }}</th>
-                <th data-sort="numeric" data-sort-prop="visibility_policy">{{t "Status" }}</th>
-                <th data-sort="numeric" data-sort-prop="date_updated" class="active topic_date_updated">{{t "Date updated" }}</th>
+                <th data-sort="alphabetic" data-sort-prop="stream">{{t "Channel" }}
+                    <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
+                </th>
+                <th data-sort="alphabetic" data-sort-prop="topic">{{t "Topic" }}
+                    <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
+                </th>
+                <th data-sort="numeric" data-sort-prop="visibility_policy">{{t "Status" }}
+                    <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
+                </th>
+                <th data-sort="numeric" data-sort-prop="date_updated" class="active topic_date_updated">{{t "Date updated" }}
+                    <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
+                </th>
             </thead>
             <tbody id="user_topics_table" data-empty="{{t 'You have not configured any topics yet.'}}" data-search-results-empty="{{t 'No topics match your current filter.' }}"></tbody>
         </table>

web/templates/stream_settings/new_stream_users.hbs

@@ -15,8 +15,12 @@
     <div class="subscriber_list_container" data-simplebar data-simplebar-tab-index="-1">
         <table class="subscriber-list table table-striped">
             <thead class="table-sticky-headers">
-                <th data-sort="alphabetic" data-sort-prop="full_name">{{t "Name" }}</th>
-                <th class="settings-email-column" data-sort="email">{{t "Email" }}</th>
+                <th data-sort="alphabetic" data-sort-prop="full_name">{{t "Name" }}
+                    <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
+                </th>
+                <th class="settings-email-column" data-sort="email">{{t "Email" }}
+                    <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
+                </th>
                 <th>{{t "Action" }}</th>
             </thead>
             <tbody id="create_stream_subscribers" class="subscriber_table" data-empty="{{t 'This channel has no subscribers.' }}" data-search-results-empty="{{t 'No channel subscribers match your current filter.'}}"></tbody>

web/templates/stream_settings/stream_members_table.hbs

@@ -2,8 +2,12 @@
     <div class="subscriber_list_loading_indicator"></div>
     <table id="stream_members_list" class="subscriber-list table table-striped">
         <thead class="table-sticky-headers">
-            <th data-sort="alphabetic" data-sort-prop="full_name">{{t "Name" }}</th>
-            <th class="settings-email-column" data-sort="email">{{t "Email" }}</th>
+            <th data-sort="alphabetic" data-sort-prop="full_name">{{t "Name" }}
+                <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
+            </th>
+            <th class="settings-email-column" data-sort="email">{{t "Email" }}
+                <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
+            </th>
             {{#if can_remove_subscribers}}
             <th>{{t "Actions" }}</th>
             {{/if}}

web/templates/user_group_settings/new_user_group_users.hbs

@@ -21,8 +21,12 @@
     <div class="member_list_container" data-simplebar data-simplebar-tab-index="-1">
         <table class="member-list table table-striped">
             <thead class="table-sticky-headers">
-                <th data-sort="alphabetic" data-sort-prop="full_name">{{t "Name" }}</th>
-                <th class="settings-email-column" data-sort="email">{{t "Email" }}</th>
+                <th data-sort="alphabetic" data-sort-prop="full_name">{{t "Name" }}
+                    <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
+                </th>
+                <th class="settings-email-column" data-sort="email">{{t "Email" }}
+                    <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
+                </th>
                 <th>{{t "Action" }}</th>
             </thead>
             <tbody id="create_user_group_members" class="member_table" data-empty="{{t 'This group has no members.' }}" data-search-results-empty="{{t 'No group members match your current filter.'}}"></tbody>

web/templates/user_group_settings/user_group_members_table.hbs

@@ -2,8 +2,12 @@
     <div class="member_list_loading_indicator"></div>
     <table class="member-list table table-striped">
         <thead class="table-sticky-headers">
-            <th data-sort="name">{{t "Name" }}</th>
-            <th class="settings-email-column" data-sort="email">{{t "Email" }}</th>
+            <th data-sort="name">{{t "Name" }}
+                <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
+            </th>
+            <th class="settings-email-column" data-sort="email">{{t "Email" }}
+                <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
+            </th>
             <th class="user-remove-actions" {{#unless can_remove_members}}style="display:none"{{/unless}}>{{t "Actions" }}</th>
         </thead>
         <tbody class="member_table" data-empty="{{t 'This group has no members.' }}" data-search-results-empty="{{t 'No group members match your current filter.'}}"></tbody>