diff --git a/static/js/click_handlers.js b/static/js/click_handlers.js index 6a4207ce18..4b7f117cd5 100644 --- a/static/js/click_handlers.js +++ b/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 diff --git a/static/js/settings_toggle.js b/static/js/settings_toggle.js index 2efd3c15c8..8abf36abaa 100644 --- a/static/js/settings_toggle.js +++ b/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; }()); diff --git a/static/styles/night_mode.scss b/static/styles/night_mode.scss index 689dbd1b0f..6449e0cf54 100644 --- a/static/styles/night_mode.scss +++ b/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() { diff --git a/static/styles/settings.scss b/static/styles/settings.scss index 765b8c141b..638d6c3bd1 100644 --- a/static/styles/settings.scss +++ b/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; +} diff --git a/templates/zerver/app/settings_overlay.html b/templates/zerver/app/settings_overlay.html index 5d27b999aa..af4b37c7df 100644 --- a/templates/zerver/app/settings_overlay.html +++ b/templates/zerver/app/settings_overlay.html @@ -53,14 +53,14 @@ {% endif %} -
{{ _('Show more') }}
+