paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-11 17:36:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

settings: Use separate lists for the two sidebar panels.

Browse Source 
The list with the options for normal settings now has
the class normal-settings-list.

The list with the options for org settings now has
the class org-settings-list.

The new markup helps us avoid code like this:

    $(".settings-list li:not(.admin)")

We also have funny hacks in our key handlers related
to the old combined-list approach, which we can
eventually eliminate.
This commit is contained in:
Steve Howell
2018-06-03 11:04:28 +00:00
committed by Tim Abbott
parent 7d250cb2f9
commit db514002ec
6 changed files with 29 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
static/js/admin.js
View File

@@ -104,8 +104,10 @@ exports.setup_page = function () {
if (tab) { if (tab) {
exports.launch_page(tab); exports.launch_page(tab);
settings_toggle.highlight_toggle('organization');
} }
$("#id_realm_default_language").val(page_params.realm_default_language); $("#id_realm_default_language").val(page_params.realm_default_language);
// Do this after calling the setup_up methods, so that we can // Do this after calling the setup_up methods, so that we can
@@ -116,10 +118,6 @@ exports.setup_page = function () {
exports.launch_page = function (tab) { exports.launch_page = function (tab) {
var $active_tab = $("#settings_overlay_container li[data-section='" + tab + "']"); var $active_tab = $("#settings_overlay_container li[data-section='" + tab + "']");
if ($active_tab.hasClass("admin")) {
settings_toggle.highlight_toggle('organization');
}
overlays.open_settings(); overlays.open_settings();
$active_tab.click(); $active_tab.click();
}; };

2
static/js/click_handlers.js
View File

@@ -740,7 +740,7 @@ exports.initialize = function () {
$this.addClass("active"); $this.addClass("active");
$this.prev().addClass("no-border"); $this.prev().addClass("no-border");
var is_org_section = $this.hasClass("admin"); var is_org_section = $this.closest('ul').hasClass("org-settings-list");
if (is_org_section) { if (is_org_section) {
window.location.hash = "organization/" + section; window.location.hash = "organization/" + section;

5
static/js/settings.js
View File

@@ -150,16 +150,13 @@ exports.setup_page = function () {
if (tab) { if (tab) {
exports.launch_page(tab); exports.launch_page(tab);
settings_toggle.highlight_toggle('settings');
} }
}; };
exports.launch_page = function (tab) { exports.launch_page = function (tab) {
var $active_tab = $("#settings_overlay_container li[data-section='" + tab + "']"); var $active_tab = $("#settings_overlay_container li[data-section='" + tab + "']");
if (!$active_tab.hasClass("admin")) {
settings_toggle.highlight_toggle('settings');
}
overlays.open_settings(); overlays.open_settings();
$active_tab.click(); $active_tab.click();

9
static/js/settings_toggle.js
View File

@@ -17,15 +17,18 @@ exports.initialize = function () {
{ label: i18n.t("Organization"), key: "organization" }, { label: i18n.t("Organization"), key: "organization" },
], ],
callback: function (name, key, payload) { callback: function (name, key, payload) {
$(".sidebar li").hide(); var normal_list = $('.normal-settings-list');
var org_list = $('.org-settings-list');
if (key === "organization") { if (key === "organization") {
$("li.admin").show(); normal_list.hide();
org_list.show();
if (!payload.dont_switch_tab) { if (!payload.dont_switch_tab) {
$("li[data-section='organization-profile']").click(); $("li[data-section='organization-profile']").click();
} }
} else { } else {
$(".settings-list li:not(.admin)").show(); org_list.hide();
normal_list.show();
if (!payload.dont_switch_tab) { if (!payload.dont_switch_tab) {
$("li[data-section='your-account']").click(); $("li[data-section='your-account']").click();
} }

9
static/styles/settings.scss
View File

@@ -1155,7 +1155,8 @@ input[type=checkbox].inline-block {
border-bottom: 1px solid hsl(0, 0%, 86%); border-bottom: 1px solid hsl(0, 0%, 86%);
} }
#settings_page .sidebar .settings-list { #settings_page .sidebar .normal-settings-list,
#settings_page .sidebar .org-settings-list {
position: relative; position: relative;
} }
@@ -1511,14 +1512,10 @@ input[type=text]#settings_search {
background-repeat: no-repeat; background-repeat: no-repeat;
} }
#settings_page .sidebar li.admin { #settings_page .sidebar .org-settings-list {
display: none; display: none;
} }
#settings_page .sidebar li.admin .icon {
text-align: center;
}
#settings_page .sidebar li:last-of-type .text { #settings_page .sidebar li:last-of-type .text {
border-bottom: none; border-bottom: none;
} }

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

@@ -10,7 +10,7 @@
<div class="sidebar left"> <div class="sidebar left">
<div class="sidebar-list dark-grey small-text"> <div class="sidebar-list dark-grey small-text">
<div class="center tab-container"></div> <div class="center tab-container"></div>
<ul class="settings-list"> <ul class="normal-settings-list">
<li tabindex="0" class="active" data-section="your-account"> <li tabindex="0" class="active" data-section="your-account">
<div class="icon icon-vector-user"></div> <div class="icon icon-vector-user"></div>
<div class="text">{{ _('Your account') }}</div> <div class="text">{{ _('Your account') }}</div>
@@ -39,61 +39,63 @@
<div class="icon icon-vector-eye-close"></div> <div class="icon icon-vector-eye-close"></div>
<div class="text">{{ _('Muted topics') }}</div> <div class="text">{{ _('Muted topics') }}</div>
</li> </li>
</ul>
<li class="admin" tabindex="0" data-section="organization-profile"> <ul class="org-settings-list">
<li tabindex="0" data-section="organization-profile">
<i class="icon icon-vector-lock"></i> <i class="icon icon-vector-lock"></i>
<div class="text">{{ _('Organization profile') }}</div> <div class="text">{{ _('Organization profile') }}</div>
</li> </li>
<li class="admin" tabindex="0" data-section="organization-settings"> <li tabindex="0" data-section="organization-settings">
<i class="icon icon-vector-beaker"></i> <i class="icon icon-vector-beaker"></i>
<div class="text">{{ _('Organization settings') }}</div> <div class="text">{{ _('Organization settings') }}</div>
</li> </li>
<li class="admin" tabindex="0" data-section="organization-permissions"> <li tabindex="0" data-section="organization-permissions">
<i class="icon icon-vector-lock"></i> <i class="icon icon-vector-lock"></i>
<div class="text">{{ _('Organization permissions') }}</div> <div class="text">{{ _('Organization permissions') }}</div>
</li> </li>
<li class="admin" tabindex="0" data-section="emoji-settings"> <li tabindex="0" data-section="emoji-settings">
<i class="icon icon-vector-smile"></i> <i class="icon icon-vector-smile"></i>
<div class="text">{{ _('Custom emoji') }}</div> <div class="text">{{ _('Custom emoji') }}</div>
</li> </li>
<li class="admin" tabindex="0" data-section="user-groups-admin"> <li tabindex="0" data-section="user-groups-admin">
<i class="icon icon-vector-group"></i> <i class="icon icon-vector-group"></i>
<div class="text">{{ _('User groups') }}</div> <div class="text">{{ _('User groups') }}</div>
</li> </li>
<li class="admin" tabindex="0" data-section="auth-methods"> <li tabindex="0" data-section="auth-methods">
<i class="icon icon-vector-lock"></i> <i class="icon icon-vector-lock"></i>
<div class="text">{{ _('Authentication methods') }}</div> <div class="text">{{ _('Authentication methods') }}</div>
</li> </li>
<li class="admin" tabindex="0" data-section="user-list-admin"> <li tabindex="0" data-section="user-list-admin">
<i class="icon icon-vector-user"></i> <i class="icon icon-vector-user"></i>
<div class="text">{{ _('Users') }}</div> <div class="text">{{ _('Users') }}</div>
</li> </li>
{% if is_admin %} {% if is_admin %}
<li class="admin" tabindex="0" data-section="deactivated-users-admin"> <li tabindex="0" data-section="deactivated-users-admin">
<i class="icon icon-vector-trash"></i> <i class="icon icon-vector-trash"></i>
<div class="text">{{ _('Deactivated users') }}</div> <div class="text">{{ _('Deactivated users') }}</div>
</li> </li>
{% endif %} {% endif %}
<li class="admin" tabindex="0" data-section="bot-list-admin"> <li tabindex="0" data-section="bot-list-admin">
<i class="icon icon-vector-github"></i> <i class="icon icon-vector-github"></i>
<div class="text">{{ _('Bots') }}</div> <div class="text">{{ _('Bots') }}</div>
</li> </li>
<li class="admin" tabindex="0" data-section="default-streams-list"> <li tabindex="0" data-section="default-streams-list">
<i class="icon icon-vector-exchange"></i> <i class="icon icon-vector-exchange"></i>
<div class="text">{{ _('Default streams') }}</div> <div class="text">{{ _('Default streams') }}</div>
</li> </li>
<li class="admin" tabindex="0" data-section="filter-settings"> <li tabindex="0" data-section="filter-settings">
<i class="icon icon-vector-font"></i> <i class="icon icon-vector-font"></i>
<div class="text">{{ _('Filter settings') }}</div> <div class="text">{{ _('Filter settings') }}</div>
</li> </li>
{% if development_environment %} {% if development_environment %}
<li class="admin" tabindex="0" data-section="profile-field-settings"> <li tabindex="0" data-section="profile-field-settings">
<i class="icon icon-vector-user"></i> <i class="icon icon-vector-user"></i>
<div class="text">{{ _('Custom profile fields') }}</div> <div class="text">{{ _('Custom profile fields') }}</div>
</li> </li>
{% endif %} {% endif %}
{% if is_admin %} {% if is_admin %}
<li class="admin" tabindex="0" data-section="invites-list-admin"> <li tabindex="0" data-section="invites-list-admin">
<i class="icon icon-vector-user"></i> <i class="icon icon-vector-user"></i>
<div class="text">{{ _('Invitations') }}</div> <div class="text">{{ _('Invitations') }}</div>
</li> </li>