settings: Use separate lists for the two sidebar panels.

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

View File

@@ -104,8 +104,10 @@ exports.setup_page = function () {
if (tab) {
exports.launch_page(tab);
settings_toggle.highlight_toggle('organization');
}
$("#id_realm_default_language").val(page_params.realm_default_language);
// 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) {
var $active_tab = $("#settings_overlay_container li[data-section='" + tab + "']");
if ($active_tab.hasClass("admin")) {
settings_toggle.highlight_toggle('organization');
}
overlays.open_settings();
$active_tab.click();
};

View File

@@ -740,7 +740,7 @@ exports.initialize = function () {
$this.addClass("active");
$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) {
window.location.hash = "organization/" + section;

View File

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

View File

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

View File

@@ -1155,7 +1155,8 @@ input[type=checkbox].inline-block {
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;
}
@@ -1511,14 +1512,10 @@ input[type=text]#settings_search {
background-repeat: no-repeat;
}
#settings_page .sidebar li.admin {
#settings_page .sidebar .org-settings-list {
display: none;
}
#settings_page .sidebar li.admin .icon {
text-align: center;
}
#settings_page .sidebar li:last-of-type .text {
border-bottom: none;
}

View File

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