From ed3e9be142eee45ace13a8a7fe917f48e1828162 Mon Sep 17 00:00:00 2001 From: vinitS101 Date: Mon, 13 May 2019 04:13:21 +0530 Subject: [PATCH] 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 | 3 ++ static/js/settings_toggle.js | 34 ++++++++++++++++++++++ static/styles/night_mode.scss | 4 +++ static/styles/settings.scss | 19 ++++++++++++ templates/zerver/app/settings_overlay.html | 17 ++++++----- 5 files changed, 70 insertions(+), 7 deletions(-) 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 %} -
  • +
  • {{ _('Organization settings') }}
    {% if not is_admin %} {% endif %}
    • -
  • +
  • {{ _('Organization permissions') }}
    {% if not is_admin %} @@ -84,7 +84,7 @@
    {{ _('User groups') }}
    • {% endif %} -
  • +
  • {{ _('Authentication methods') }}
    {% if not is_admin %} @@ -116,7 +116,7 @@
    • {% endif %} {% if not is_guest %} -
  • +
  • {{ _('Default streams') }}
    {% if not is_admin %} @@ -135,9 +135,6 @@
  • {{ _('Custom profile fields') }}
    - {% if not is_admin %} - - {% endif %}
    • {% endif %} {% if is_admin %} @@ -146,6 +143,12 @@
    {{ _('Invitations') }}
    {% endif %} + {% if not is_admin %} +
    + +

    {{ _('Show more') }}

    +
    + {% endif %}