Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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.
This commit is contained in:
vinitS101 2019-05-13 04:13:21 +05:30 committed by Tim Abbott
parent 20e6f67e70
commit ed3e9be142
5 changed files with 70 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
static/js/click_handlers.js
View File

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

34
static/js/settings_toggle.js
View File

@ -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;
}());

4
static/styles/night_mode.scss
View File

@ -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() {

19
static/styles/settings.scss
View File

@ -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;
}

17
templates/zerver/app/settings_overlay.html
View File

@ -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>