10:29 a.m.
That way the plugin only needs to worry about the main content instead
of duplicating the navbar for each tab HTML.
Signed-off-by: Aline Manera <alinefm(a)linux.vnet.ibm.com>
---
ui/css/src/modules/_toolbar.scss | 25 ++++++++++---------------
ui/css/wok.css | 20 ++++----------------
ui/js/src/wok.main.js | 8 ++++++++
ui/pages/tabs/settings.html.tmpl | 5 -----
ui/pages/wok-ui.html.tmpl | 7 +++++++
5 files changed, 29 insertions(+), 36 deletions(-)
diff --git a/ui/css/src/modules/_toolbar.scss b/ui/css/src/modules/_toolbar.scss
index e9d5131..4cdb2ba 100644
--- a/ui/css/src/modules/_toolbar.scss
+++ b/ui/css/src/modules/_toolbar.scss
@@ -57,19 +57,16 @@
}
}
-@each $page,
-$bgcolor in $colors {
- ##{$page}-root-container .navbar-default.toolbar {
- @if $page=='guests' or $page=='templates' or
$page=='storage' or $page=='network' {
- background-color: map-get($colors, guests) !important;
- }
- @else if $page=='host' {
- background-color: map-get($colors, host) !important;
- }
- @else if $page=='wok' {
- background-color: map-get($colors, wok) !important;
- }
- }
+.navbar-default.toolbar.virtualizationSelected {
+ background-color: map-get($colors, guests) !important;
+}
+
+.navbar-default.toolbar.hostSelected {
+ background-color: map-get($colors, host) !important;
+}
+
+.navbar-default.toolbar.wokSelected {
+ background-color: map-get($colors, wok) !important;
}
@each $tab,
@@ -79,8 +76,6 @@ $bgcolor in $colors {
}
}
-
-
@media (min-width: $screen-sm-max) and (max-width: $screen-md-min) {
.host-dashboard .container {
diff --git a/ui/css/wok.css b/ui/css/wok.css
index ca98e38..24b5b81 100644
--- a/ui/css/wok.css
+++ b/ui/css/wok.css
@@ -316,27 +316,15 @@ html.in-progress .disabled {
margin-right: 15px;
}
-#host-root-container .navbar-default.toolbar {
- background-color: #008abf !important;
-}
-
-#guests-root-container .navbar-default.toolbar {
- background-color: #8cc63f !important;
-}
-
-#templates-root-container .navbar-default.toolbar {
+.navbar-default.toolbar.virtualizationSelected {
background-color: #8cc63f !important;
}
-#storage-root-container .navbar-default.toolbar {
- background-color: #8cc63f !important;
-}
-
-#network-root-container .navbar-default.toolbar {
- background-color: #8cc63f !important;
+.navbar-default.toolbar.hostSelected {
+ background-color: #008abf !important;
}
-#wok-root-container .navbar-default.toolbar {
+.navbar-default.toolbar.wokSelected {
background-color: #d9182d !important;
}
diff --git a/ui/js/src/wok.main.js b/ui/js/src/wok.main.js
index 3872580..e4e762f 100644
--- a/ui/js/src/wok.main.js
+++ b/ui/js/src/wok.main.js
@@ -208,10 +208,17 @@ wok.main = function() {
$('#main').html('No plugins installed currently.You can download
the available plugins <a
href="https://github.com/kimchi-project/kimchi">Kimchi</a... and <a
href="https://github.com/kimchi-project/ginger">Ginger</a... from
Github').addClass('noPluginMessage');
} else {
var plugin =
$(tab).parent().find("input[name='funcTab']").val();
+ var toolbar =
$('#toolbar').closest('.navbar-default.toolbar');
+ $('#toolbar ul.tools').html('');
$('#tabPanel').removeClass(function(i, css) {
return (css.match(/\S+Tab/g) || []).join(' ');
});
+
+ $(toolbar).removeClass(function(i, css) {
+ return (css.match(/\S+Selected/g) || []).join(' ');
+ });
+
$('#tabPanel').addClass(plugin + 'Tab');
$('#tabPanel ul li').removeClass('active');
$.each($('#tabPanel li'), function(i, t) {
@@ -224,6 +231,7 @@ wok.main = function() {
$(tab).parent().addClass('active');
$(tab).addClass(plugin + 'Selected').focus();
+ $(toolbar).addClass(plugin + 'Selected');
$('#functionalTabPanel ul li').removeClass('active');
$('#functionalTabPanel ul .' + plugin +
'Tab').parent().addClass('active').focus();
diff --git a/ui/pages/tabs/settings.html.tmpl b/ui/pages/tabs/settings.html.tmpl
index 7bb03d4..dde05c8 100644
--- a/ui/pages/tabs/settings.html.tmpl
+++ b/ui/pages/tabs/settings.html.tmpl
@@ -32,11 +32,6 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA
02110-1301 USA
<body>
<div id="wok-root-container" class="wok">
- <nav class="navbar navbar-default toolbar">
- <div class="container">
- <div id="toolbar"></div>
- </div>
- </nav>
<div class="container">
<div id="wokSettings" class="wok-settings">
<!-- User Log Panel -->
diff --git a/ui/pages/wok-ui.html.tmpl b/ui/pages/wok-ui.html.tmpl
index 22a67e7..c76082a 100644
--- a/ui/pages/wok-ui.html.tmpl
+++ b/ui/pages/wok-ui.html.tmpl
@@ -160,6 +160,13 @@
</div>
</div>
</nav>
+ <nav class="navbar navbar-default toolbar">
+ <div class="container">
+ <div id="toolbar">
+ <ul class="nav navbar-nav navbar-right tools"></ul>
+ </div>
+ </div>
+ </nav>
</div>
<div class="content">
<div id="main">
--
2.7.4