From adb612a0b484135b8ba6727f1b5f8bb275abe4ff Mon Sep 17 00:00:00 2001
From: isakhagg <isak.haggstrom@gmail.com>
Date: Thu, 21 Oct 2021 14:11:19 +0200
Subject: [PATCH] settings: Rearrange display settings.

This provides a cleaner organization for our display settings, to make
browsing them more intuitive for new users.

We still need to update the /help/ documentation following this migration.

Fixes #19960.
---
 static/js/settings_config.ts                  |   2 +-
 static/js/settings_display.js                 |   8 +-
 .../templates/settings/display_settings.hbs   | 113 +++++++++---------
 3 files changed, 60 insertions(+), 63 deletions(-)

diff --git a/static/js/settings_config.ts b/static/js/settings_config.ts
index 00177b3f4c..78228b57ee 100644
--- a/static/js/settings_config.ts
+++ b/static/js/settings_config.ts
@@ -87,8 +87,8 @@ export const get_all_display_settings = (): DisplaySettings => ({
             "dense_mode",
             "high_contrast_mode",
             "left_side_userlist",
-            "starred_message_counts",
             "fluid_layout_width",
+            "starred_message_counts",
         ],
     },
     render_only: {
diff --git a/static/js/settings_display.js b/static/js/settings_display.js
index 54faf3f5c2..46f5f2630b 100644
--- a/static/js/settings_display.js
+++ b/static/js/settings_display.js
@@ -45,7 +45,7 @@ export function set_up(settings_panel) {
     const settings_object = settings_panel.settings_object;
     const for_realm_settings = settings_panel.for_realm_settings;
 
-    container.find(".display-settings-status").hide();
+    container.find(".advanced-settings-status").hide();
 
     container.find(".setting_demote_inactive_streams").val(settings_object.demote_inactive_streams);
 
@@ -142,7 +142,7 @@ export function set_up(settings_panel) {
         if (current_emojiset === data.emojiset) {
             return;
         }
-        const spinner = container.find(".emoji-settings-status").expectOne();
+        const spinner = container.find(".theme-settings-status").expectOne();
         loading.make_indicator(spinner, {text: settings_ui.strings.saving});
 
         channel.patch({
@@ -153,7 +153,7 @@ export function set_up(settings_panel) {
                 ui_report.error(
                     settings_ui.strings.failure_html,
                     xhr,
-                    container.find(".emoji-settings-status").expectOne(),
+                    container.find(".theme-settings-status").expectOne(),
                 );
             },
         });
@@ -169,7 +169,7 @@ export async function report_emojiset_change(settings_panel) {
     // update in all active browser windows.
     await emojisets.select(settings_panel.settings_object.emojiset);
 
-    const spinner = $(settings_panel.container).find(".emoji-settings-status");
+    const spinner = $(settings_panel.container).find(".theme-settings-status");
     if (spinner.length) {
         loading.destroy_indicator(spinner);
         ui_report.success(
diff --git a/static/templates/settings/display_settings.hbs b/static/templates/settings/display_settings.hbs
index 55fdfb1d00..8025a49b43 100644
--- a/static/templates/settings/display_settings.hbs
+++ b/static/templates/settings/display_settings.hbs
@@ -1,15 +1,15 @@
 <form class="display-settings-form">
-    {{#unless for_realm_settings}}
-    <div class="lang-settings">
+    <div class="lang-time-settings {{#if for_realm_settings}}org-subsection-parent{{else}}subsection-parent{{/if}}">
+        {{#unless for_realm_settings}}
         <!-- this is inline block so that the alert notification can sit beside
-        it. If there's not an alert, don't make it inline-block. -->
+        it. If there's not an alert, don't make it inline-block.-->
         <div class="subsection-header inline-block">
-            <h3>{{t "Language settings" }}</h3>
+            <h3>{{t "Language and time" }}</h3>
             {{> settings_save_discard_widget section_name="language-settings" show_only_indicator=true }}
         </div>
 
         <div class="input-group">
-            <label class="inline-block title">{{t "Default language" }}</label>
+            <label class="inline-block title">{{t "Language" }}</label>
             <button type="button" class="setting_default_language button btn-link rounded small inline-block">
                 <span class="default_language_name">{{default_language_name}}</span>
                 <i class="fa fa-pencil"></i>
@@ -17,56 +17,7 @@
         </div>
 
         {{> ../default_language_modal language_list=language_list_dbl_col prefix=prefix}}
-    </div>
-    {{/unless}}
-
-    <div class="display-settings {{#if for_realm_settings}}org-subsection-parent{{else}}subsection-parent{{/if}}">
-        <div class="subsection-header">
-            <h3>{{t "Display settings" }}</h3>
-            {{> settings_save_discard_widget section_name="display-settings" show_only_indicator=(not for_realm_settings) }}
-        </div>
-
-        <div class="input-group inline-block">
-            <label for="default_view" class="dropdown-title">{{t "Default view" }}
-                {{> ../help_link_widget link="/help/change-default-view" }}
-            </label>
-            <select name="default_view" class="setting_default_view prop-element" data-setting-widget-type="string">
-                {{> dropdown_options_widget option_values=default_view_values}}
-            </select>
-        </div>
-
-        <div class="input-group">
-            <label for="color_scheme" class="dropdown-title">{{t "Color scheme" }}
-            </label>
-            <select name="color_scheme" class="setting_color_scheme prop-element" data-setting-widget-type="number">
-                {{> dropdown_options_widget option_values=color_scheme_values}}
-            </select>
-        </div>
-
-        {{#each display_settings.settings.user_display_settings}}
-        {{> settings_checkbox
-          setting_name=this
-          is_checked=(lookup ../settings_object this)
-          label=(lookup ../settings_label this)
-          render_only=(lookup ../display_settings.render_only this)
-          prefix=../prefix}}
-        {{/each}}
-
-        <div class="input-group">
-            <label for="demote_inactive_streams" class="dropdown-title">{{t "Demote inactive streams" }}
-                {{> ../help_link_widget link="/help/manage-inactive-streams" }}
-            </label>
-            <select name="demote_inactive_streams" class="setting_demote_inactive_streams prop-element"  data-setting-widget-type="number">
-                {{> dropdown_options_widget option_values=demote_inactive_streams_values}}
-            </select>
-        </div>
-    </div>
-
-    <div class="time-settings {{#if for_realm_settings}}org-subsection-parent{{else}}subsection-parent{{/if}}">
-        <div class="subsection-header">
-            <h3>{{t "Time settings" }}</h3>
-            {{> settings_save_discard_widget section_name="time-settings" show_only_indicator=(not for_realm_settings) }}
-        </div>
+        {{/unless}}
 
         <div class="input-group">
             <label for="twenty_four_hour_time" class="dropdown-title">{{ settings_label.twenty_four_hour_time }}</label>
@@ -76,15 +27,25 @@
                 {{/each}}
             </select>
         </div>
+
     </div>
 
-    <div class="emoji-settings {{#if for_realm_settings}}org-subsection-parent{{else}}subsection-parent{{/if}}">
+
+    <div class="theme-settings {{#if for_realm_settings}}org-subsection-parent{{else}}subsection-parent{{/if}}">
         <div class="subsection-header">
-            <h3 class="light">{{t "Emoji settings" }}</h3>
-            {{> settings_save_discard_widget section_name="emoji-settings" show_only_indicator=(not for_realm_settings) }}
+            <h3 class="light">{{t "Theme" }}</h3>
+            {{> settings_save_discard_widget section_name="theme-settings" show_only_indicator=(not for_realm_settings) }}
         </div>
 
         <div class="input-group">
+            <label for="color_scheme" class="dropdown-title">{{t "Color scheme" }}</label>
+            <select name="color_scheme" class="setting_color_scheme prop-element" data-setting-widget-type="number">
+                {{> dropdown_options_widget option_values=color_scheme_values}}
+            </select>
+        </div>
+
+        <div class="input-group">
+            <label class="emoji-theme title">{{t "Emoji theme" }}</label>
             <div class="emojiset_choices grey-box">
                 {{#each settings_object.emojiset_choices}}
                 <label>
@@ -110,5 +71,41 @@
           is_checked=settings_object.translate_emoticons
           label=settings_label.translate_emoticons
           prefix=prefix}}
+
+    </div>
+
+    <div class="advanced-settings {{#if for_realm_settings}}org-subsection-parent{{else}}subsection-parent{{/if}}">
+        <div class="subsection-header">
+            <h3 class="light">{{t "Advanced" }}</h3>
+            {{> settings_save_discard_widget section_name="advanced-settings" show_only_indicator=(not for_realm_settings) }}
+        </div>
+
+        <div class="input-group inline-block">
+            <label for="default_view" class="dropdown-title">{{t "Default view" }}
+                {{> ../help_link_widget link="/help/change-default-view" }}
+            </label>
+            <select name="default_view" class="setting_default_view prop-element" data-setting-widget-type="string">
+                {{> dropdown_options_widget option_values=default_view_values}}
+            </select>
+        </div>
+
+        <div class="input-group">
+            <label for="demote_inactive_streams" class="dropdown-title">{{t "Demote inactive streams" }}
+                {{> ../help_link_widget link="/help/manage-inactive-streams" }}
+            </label>
+            <select name="demote_inactive_streams" class="setting_demote_inactive_streams prop-element"  data-setting-widget-type="number">
+                {{> dropdown_options_widget option_values=demote_inactive_streams_values}}
+            </select>
+        </div>
+
+        {{#each display_settings.settings.user_display_settings}}
+        {{> settings_checkbox
+          setting_name=this
+          is_checked=(lookup ../settings_object this)
+          label=(lookup ../settings_label this)
+          render_only=(lookup ../display_settings.render_only this)
+          prefix=../prefix}}
+        {{/each}}
+
     </div>
 </form>