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