org_settings: Add collapse/show settings button for users and guests.

For non-admins some organisation settings tabs are 'collapsed' by default.
A button at the bottom of these settings can be used to toggle
show/collapse for these settings tabs.

Resolves #12313.

static/js/click_handlers.js

@@ -469,6 +469,9 @@ exports.initialize = function () {
         }, 300);
     });
 
+    $("#settings_page").on("click", ".collapse-settings-btn", function () {
+        settings_toggle.toggle_org_setting_collapse();
+    });
 
     // COMPOSE
 

static/js/settings_toggle.js

@@ -31,6 +31,40 @@ exports.initialize = function () {
     $("#settings_overlay_container .tab-container").append(toggler.get());
 };
 
+// Handles the collapse/reveal of some tabs in the org settings for non-admins.
+exports.toggle_org_setting_collapse = function () {
+    var is_collapsed = $(".collapse-org-settings").hasClass("hide-org-settings");
+    var show_fewer_settings_text = i18n.t("Show fewer");
+    var show_more_settings_text = i18n.t("Show more");
+
+    if (is_collapsed) {
+        _.each($(".collapse-org-settings"), function (elem) {
+            $(elem).removeClass("hide-org-settings");
+        });
+
+        $("#toggle_collapse_chevron").removeClass("fa-angle-double-down");
+        $("#toggle_collapse_chevron").addClass("fa-angle-double-up");
+
+        $("#toggle_collapse").text(show_fewer_settings_text);
+
+    } else {
+        _.each($(".collapse-org-settings"), function (elem) {
+            $(elem).addClass("hide-org-settings");
+        });
+
+        $("#toggle_collapse_chevron").removeClass("fa-angle-double-up");
+        $("#toggle_collapse_chevron").addClass("fa-angle-double-down");
+
+        $("#toggle_collapse").text(show_more_settings_text);
+    }
+
+    // If current tab is about to be collapsed, go to default tab.
+    var current_tab = $(".org-settings-list .active");
+    if (current_tab.hasClass("hide-org-settings")) {
+        $(location).attr("href", "/#organization/organization-profile");
+    }
+};
+
 return exports;
 
 }());

static/styles/night_mode.scss

@@ -578,6 +578,10 @@ on a dark background, and don't change the dark labels dark either. */
         background-color: rgb(255, 255, 255);
         box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.33);
     }
+
+    .collapse-settings-btn:hover {
+        color: hsl(200, 79%, 66%);
+    }
 }
 
 @-moz-document url-prefix() {

static/styles/settings.scss

@@ -1921,3 +1921,22 @@ thead .actions {
     margin-top: 13px;
     display: inline-block;
 }
+
+.hide-org-settings {
+    display: none;
+}
+
+.collapse-settings-btn {
+    margin: 10px 0px 0px 10px;
+    color: hsl(200, 100%, 40%);
+}
+
+.collapse-settings-btn:hover {
+    cursor: pointer;
+    color: hsl(208, 56%, 38%);
+}
+
+#toggle_collapse {
+    margin-left: 2px;
+    display: inline-block;
+}

templates/zerver/app/settings_overlay.html

@@ -53,14 +53,14 @@
                     <i class="locked fa fa-lock" title="{{ _('Only organization administrators can edit these settings.') }}"></i>
                     {% endif %}
                 </li>
-                <li tabindex="0" data-section="organization-settings">
+                <li class="collapse-org-settings {% if not is_admin %}hide-org-settings{% endif %}" tabindex="0" data-section="organization-settings">
                     <i class="icon fa fa-flask" aria-hidden="true"></i>
                     <div class="text">{{ _('Organization settings') }}</div>
                     {% if not is_admin %}
                     <i class="locked fa fa-lock" title="{{ _('Only organization administrators can edit these settings.') }}"></i>
                     {% endif %}
                 </li>
-                <li tabindex="0" data-section="organization-permissions">
+                <li class="collapse-org-settings {% if not is_admin %}hide-org-settings{% endif %}" tabindex="0" data-section="organization-permissions">
                     <i class="icon fa fa-lock" aria-hidden="true"></i>
                     <div class="text">{{ _('Organization permissions') }}</div>
                     {% if not is_admin %}
@@ -84,7 +84,7 @@
                     <div class="text">{{ _('User groups') }}</div>
                 </li>
                 {% endif %}
-                <li tabindex="0" data-section="auth-methods">
+                <li class="collapse-org-settings {% if not is_admin %}hide-org-settings{% endif %}" tabindex="0" data-section="auth-methods">
                     <i class="icon fa fa-key" aria-hidden="true"></i>
                     <div class="text">{{ _('Authentication methods') }}</div>
                     {% if not is_admin %}
@@ -116,7 +116,7 @@
                 </li>
                 {% endif %}
                 {% if not is_guest %}
-                <li tabindex="0" data-section="default-streams-list">
+                <li class="collapse-org-settings {% if not is_admin %}hide-org-settings{% endif %}" tabindex="0" data-section="default-streams-list">
                     <i class="icon fa fa-exchange" aria-hidden="true"></i>
                     <div class="text">{{ _('Default streams') }}</div>
                     {% if not is_admin %}
@@ -135,9 +135,6 @@
                 <li tabindex="0" data-section="profile-field-settings">
                     <i class="icon fa fa-user" aria-hidden="true"></i>
                     <div class="text">{{ _('Custom profile fields') }}</div>
-                    {% if not is_admin %}
-                    <i class="locked fa fa-lock" title="{{ _('Only organization administrators can edit these settings.') }}"></i>
-                    {% endif %}
                 </li>
                 {% endif %}
                 {% if is_admin %}
@@ -146,6 +143,12 @@
                     <div class="text">{{ _('Invitations') }}</div>
                 </li>
                 {% endif %}
+                {% if not is_admin %}
+                <div class="collapse-settings-btn">
+                    <i id='toggle_collapse_chevron' class='fa fa-angle-double-down'></i>
+                    <p id='toggle_collapse'>{{ _('Show more') }}</p>
+                </div>
+                {% endif %}
             </ul>
         </div>
     </div>