Replace settings v1 toggle with v2 component toggle.

This replaces the settings toggle which had the same markup as the
current component toggle, but not the same JavaScript, along with
having an issue with inline-block spacing, with the new JS generated
one.
This commit is contained in:
Brock Whittaker
2017-02-21 10:10:50 -08:00
parent e4008bcf1c
commit 021e43356f
4 changed files with 26 additions and 23 deletions

View File

@@ -12,7 +12,7 @@ exports.show_or_hide_menu_item = function () {
item.show(); item.show();
} else { } else {
item.hide(); item.hide();
$(".ind-tab[data-name='admin']").addClass("disabled"); $(".ind-tab[data-tab-key='administration']").addClass("disabled");
$(".settings-list li.admin").hide(); $(".settings-list li.admin").hide();
} }
}; };
@@ -355,6 +355,8 @@ function _setup_page() {
exports.launch_page(tab); exports.launch_page(tab);
} }
exports.show_or_hide_menu_item();
$("#id_realm_default_language").val(page_params.realm_default_language); $("#id_realm_default_language").val(page_params.realm_default_language);
// create loading indicators // create loading indicators
@@ -1066,7 +1068,7 @@ 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")) { if ($active_tab.hasClass("admin")) {
$(".sidebar .ind-tab[data-name='admin']").click(); $(".sidebar .ind-tab[data-tab-key='administration']").click();
} }
$("#settings_overlay_container").addClass("show"); $("#settings_overlay_container").addClass("show");

View File

@@ -629,21 +629,27 @@ $(function () {
}); });
(function () { (function () {
var $parent = $("#settings_overlay_container .sidebar .tab-switcher"); var settings_toggle = components.toggle({
var $tabs = $parent.find(".ind-tab"); name: "settings-toggle",
$tabs.click(function () { values: [
$tabs.removeClass("selected"); { label: "Settings", key: "settings" },
$(this).addClass("selected"); { label: "Administration", key: "administration" },
],
callback: function (name, key) {
$(".sidebar li").hide();
$(".sidebar li").hide(); if (key === "administration") {
if ($(this).data("name") === "admin") { $("li.admin").show();
$("li.admin").show(); $("li[data-section='organization-settings']").click();
$("li[data-section='organization-settings']").click(); } else {
} else { $("li:not(.admin)").show();
$("li:not(.admin)").show(); $("li[data-section='your-account']").click();
$("li[data-section='your-account']").click(); }
} },
}); }).get();
$("#settings_overlay_container .tab-container")
.append(settings_toggle);
}()); }());
}); });

View File

@@ -876,7 +876,7 @@ 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")) { if (!$active_tab.hasClass("admin")) {
$(".sidebar .ind-tab[data-name='settings']").click(); $(".sidebar .ind-tab[data-tab-key='settings']").click();
} }
$("#settings_overlay_container").addClass("show"); $("#settings_overlay_container").addClass("show");

View File

@@ -1,12 +1,7 @@
<div id="settings_page" class="new-style"> <div id="settings_page" class="new-style">
<div class="sidebar"> <div class="sidebar">
<div class="sidebar-list dark-grey small-text"> <div class="sidebar-list dark-grey small-text">
<div class="center tab-container"> <div class="center tab-container"></div>
<div class="tab-switcher">
<div class="ind-tab first selected" data-name="settings">{{ _('Settings') }}</div>
<div class="ind-tab second" data-name="admin">{{ _('Administration') }} </div>
</div>
</div>
<ul class="settings-list"> <ul class="settings-list">
<li tabindex="1" class="active" data-section="your-account"> <li tabindex="1" class="active" data-section="your-account">
<div class="icon icon-vector-user"></div> <div class="icon icon-vector-user"></div>