Add settings sections to header.

This adds the settings section that you are in to the page header.

static/js/click_handlers.js

@@ -624,6 +624,8 @@ $(function () {
         var $settings_overlay_container = $("#settings_overlay_container");
         $settings_overlay_container.find(".right").addClass("show");
         $settings_overlay_container.find(".settings-header.mobile").addClass("slide-left");
+
+        settings.set_settings_header($(this).attr("data-section"));
     });
 
     $(".settings-header.mobile .icon-vector-chevron-left").on("click", function () {

static/js/settings.js

@@ -1,6 +1,8 @@
 var settings = (function () {
 
 var exports = {};
+var map = {};
+var map_initialized = false;
 
 $("body").ready(function () {
     var $sidebar = $(".form-sidebar");
@@ -45,6 +47,29 @@ $("body").ready(function () {
 
 
 function _setup_page() {
+    // only run once -- if the map has not already been initialized.
+    if (!map_initialized) {
+        map = {
+            "your-account": i18n.t("Your account"),
+            "display-settings": i18n.t("Display settings"),
+            notifications: i18n.t("Notifications"),
+            "your-bots": i18n.t("Your bots"),
+            "alert-words": i18n.t("Alert words"),
+            "uploaded-files": i18n.t("Uploaded files"),
+            "muted-topics": i18n.t("Muted topics"),
+            "zulip-labs": i18n.t("Zulip labs"),
+            "organization-settings": i18n.t("Organization settings"),
+            "emoji-settings": i18n.t("Emoji settings"),
+            "auth-methods": i18n.t("Authorization methods"),
+            "user-list-admin": i18n.t("Active users"),
+            "deactivated-users-admin": i18n.t("Deactivated users"),
+            "bot-list-admin": i18n.t("Bot list"),
+            "streams-list-admin": i18n.t("Streams"),
+            "default-streams-list": i18n.t("Default streams"),
+            "filter-settings": i18n.t("Filter settings"),
+        };
+    }
+
     var tab = (function () {
         var tab = false;
         var hash_sequence = window.location.hash.split(/\//);
@@ -92,6 +117,15 @@ exports.launch_page = function (tab) {
     $active_tab.click();
 };
 
+exports.set_settings_header = function (key) {
+    if (map[key]) {
+        $(".settings-header h1 .section").text(" / " + map[key]);
+    } else {
+        blueslip.warn("Error: the key '" + key + "' does not exist in the settings" +
+            " header mapping file. Please add it.");
+    }
+};
+
 exports.handle_up_arrow = function (e) {
     var prev = e.target.previousElementSibling;
 

static/styles/settings.css

@@ -800,6 +800,11 @@ input[type=checkbox].inline-block {
     border-bottom: 1px solid #ddd;
 }
 
+#settings_page .content-wrapper .settings-header h1 .section {
+    font-weight: 400;
+    color: #666;
+}
+
 #settings_page .settings-header.mobile {
     display: none;
     border-bottom: 1px solid #ddd;

templates/zerver/settings_overlay.html

@@ -1,7 +1,7 @@
 <div id="settings_page" class="new-style overlay-content">
     <div class="settings-header mobile">
         <div class="icon-vector-chevron-left"></div>
-        <h1>{{ _('Settings') }}</h1>
+        <h1>{{ _('Settings') }}<span class="section"></span></h1>
         <div class="exit">
             <span class="exit-sign">&times;</span>
         </div>
@@ -98,7 +98,7 @@
     </div>
     <div class="content-wrapper right">
         <div class="settings-header">
-            <h1>{{ _('Settings') }}</h1>
+            <h1>{{ _('Settings') }}<span class="section"></span></h1>
             <div class="exit">
                 <span class="exit-sign">&times;</span>
             </div>