[Kimchi-devel] [PATCH] [Wok 02/10] Bug fix #174: Automatic create navigation toolbar when loading plugin

[Aline Manera]

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