[Kimchi-devel] [PATCH] [Wok 03/10] Bug fix #173: Get color tab from tab-ext.xml file

The color tab must be specified by plugin instead of hardcoded on Wok source code. So 2 atrributes were added to <functionality> tag: colorTab1 for the first tab level color and colorTab2 for the second tab level color. This patch also removes CSS configuration related to the navigation bar as it is now set on JS per plugin configuration. Signed-off-by: Aline Manera <alinefm(a)linux.vnet.ibm.com&gt; --- ui/config/tab-ext.xml | 2 +- ui/css/bootstrap.custom.css | 61 ------------------------------------ ui/css/src/modules/_navbar-flat.scss | 15 --------- ui/css/src/modules/_toolbar.scss | 19 ----------- ui/css/wok.css | 60 ----------------------------------- ui/js/src/wok.main.js | 42 ++++++++++++++----------- 6 files changed, 24 insertions(+), 175 deletions(-) diff --git a/ui/config/tab-ext.xml b/ui/config/tab-ext.xml index 91ecdf3..348e13e 100644 --- a/ui/config/tab-ext.xml +++ b/ui/config/tab-ext.xml @@ -1,6 +1,6 @@ <?xml version="1.0" encoding="utf-8"?> <tabs-ext> - <functionality>Wok</functionality> + <functionality colorTab1="#930c0c" colorTab2="#d9182d">Wok</functionality> <tab> <access role="admin" mode="admin"/> <access role="user" mode="none"/> diff --git a/ui/css/bootstrap.custom.css b/ui/css/bootstrap.custom.css index 1b615a0..76a6367 100644 --- a/ui/css/bootstrap.custom.css +++ b/ui/css/bootstrap.custom.css @@ -4353,67 +4353,6 @@ tbody.collapse.in { background-color: transparent; } -.navbar-default .navbar-nav > .active > a.hostSelected, .navbar-default .navbar-nav > .active > a.hostSelected:hover, .navbar-default .navbar-nav > .active > a.hostSelected:focus { - height: 41px; - background-color: #008abf !important; -} - -.navbar-default .navbar-nav > .active > a.host, .navbar-default .navbar-nav > .active > a.host:hover, .navbar-default .navbar-nav > .active > a.host:focus { - height: 41px; - background-color: #008abf !important; -} - -.navbar-default .navbar-nav > .active > a.guests, .navbar-default .navbar-nav > .active > a.guests:hover, .navbar-default .navbar-nav > .active > a.guests:focus { - height: 41px; - background-color: #8cc63f !important; -} - -.navbar-default .navbar-nav > .active > a.templates, .navbar-default .navbar-nav > .active > a.templates:hover, .navbar-default .navbar-nav > .active > a.templates:focus { - height: 41px; - background-color: #00a6a0 !important; -} - -.navbar-default .navbar-nav > .active > a.storage, .navbar-default .navbar-nav > .active > a.storage:hover, .navbar-default .navbar-nav > .active > a.storage:focus { - height: 41px; - background-color: #feb813 !important; - color: #000 !important; -} - -.navbar-default .navbar-nav > .active > a.network, .navbar-default .navbar-nav > .active > a.network:hover, .navbar-default .navbar-nav > .active > a.network:focus { - height: 41px; - background-color: #7f1c7d !important; -} - -.navbar-default .navbar-nav > .active > a.wok, .navbar-default .navbar-nav > .active > a.wok:hover, .navbar-default .navbar-nav > .active > a.wok:focus { - height: 41px; - background-color: #d9182d !important; -} - -.navbar-default .navbar-nav > .active > a.virtualizationTab, .navbar-default .navbar-nav > .active > a.virtualizationTab:hover, .navbar-default .navbar-nav > .active > a.virtualizationTab:focus { - height: 41px; - background-color: #59930c !important; -} - -.navbar-default .navbar-nav > .active > a.hostTab, .navbar-default .navbar-nav > .active > a.hostTab:hover, .navbar-default .navbar-nav > .active > a.hostTab:focus { - height: 41px; - background-color: #00578c !important; -} - -.navbar-default .navbar-nav > .active > a.virtualizationSelected, .navbar-default .navbar-nav > .active > a.virtualizationSelected:hover, .navbar-default .navbar-nav > .active > a.virtualizationSelected:focus { - height: 41px; - background-color: #8cc63f !important; -} - -.navbar-default .navbar-nav > .active > a.wokTab, .navbar-default .navbar-nav > .active > a.wokTab:hover, .navbar-default .navbar-nav > .active > a.wokTab:focus { - height: 41px; - background-color: #930c0c !important; -} - -.navbar-default .navbar-nav > .active > a.wokSelected, .navbar-default .navbar-nav > .active > a.wokSelected:hover, .navbar-default .navbar-nav > .active > a.wokSelected:focus { - height: 41px; - background-color: #d9182d !important; -} - .navbar-default .navbar-nav > .hostname { margin: 0; padding: 8px 10px; diff --git a/ui/css/src/modules/_navbar-flat.scss b/ui/css/src/modules/_navbar-flat.scss index f352de9..7b4aee1 100644 --- a/ui/css/src/modules/_navbar-flat.scss +++ b/ui/css/src/modules/_navbar-flat.scss @@ -622,21 +622,6 @@ } - @each $page, $bgcolor in $colors { - - > .active > a.#{$page} { - &, - &:hover, - &:focus { - height: 41px; - background-color: $bgcolor !important; - @if $page == 'storage' { - color: $gray-base !important; - } - } - } - } - margin: 0; padding: 8px 10px; diff --git a/ui/css/src/modules/_toolbar.scss b/ui/css/src/modules/_toolbar.scss index 4cdb2ba..dba1106 100644 --- a/ui/css/src/modules/_toolbar.scss +++ b/ui/css/src/modules/_toolbar.scss @@ -57,25 +57,6 @@ } } -.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, -$bgcolor in $colors { - #tabPanel.#{$tab} { - background-color: map-get($colors, $tab) !important; - } -} - @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 24b5b81..ba1246e 100644 --- a/ui/css/wok.css +++ b/ui/css/wok.css @@ -316,66 +316,6 @@ html.in-progress .disabled { margin-right: 15px; } -.navbar-default.toolbar.virtualizationSelected { - background-color: #8cc63f !important; -} - -.navbar-default.toolbar.hostSelected { - background-color: #008abf !important; -} - -.navbar-default.toolbar.wokSelected { - background-color: #d9182d !important; -} - -#tabPanel.hostSelected { - background-color: #008abf !important; -} - -#tabPanel.host { - background-color: #008abf !important; -} - -#tabPanel.guests { - background-color: #8cc63f !important; -} - -#tabPanel.templates { - background-color: #00a6a0 !important; -} - -#tabPanel.storage { - background-color: #feb813 !important; -} - -#tabPanel.network { - background-color: #7f1c7d !important; -} - -#tabPanel.wok { - background-color: #d9182d !important; -} - -#tabPanel.virtualizationTab { - background-color: #59930c !important; -} - -#tabPanel.hostTab { - background-color: #00578c !important; -} - -#tabPanel.virtualizationSelected { - background-color: #8cc63f !important; -} - -#tabPanel.wokTab { - background-color: #930c0c !important; -} - -#tabPanel.wokSelected { - background-color: #d9182d !important; -} - @media (min-width: 991px) and (max-width: 992px) { .host-dashboard .container { padding-right: 10px; diff --git a/ui/js/src/wok.main.js b/ui/js/src/wok.main.js index e4e762f..90f3b1b 100644 --- a/ui/js/src/wok.main.js +++ b/ui/js/src/wok.main.js @@ -51,6 +51,8 @@ wok.main = function() { '</a>', '<input name="funcTab" class="sr-only" value="' + functionality.toLowerCase() + '" type="hidden"/>', '<input name="helpPath" class="sr-only" value="' + helpPath + '" type="hidden"/>', + '<input name="colorTab1" class="sr-only" value="' + tab['colorTab1'] + '" type="hidden"/>', + '<input name="colorTab2" class="sr-only" value="' + tab['colorTab2'] + '" type="hidden"/>', '</li>' ); @@ -81,25 +83,31 @@ wok.main = function() { var parseTabs = function(xmlData) { var tabs = []; - var functionality = $(xmlData).find('functionality').text(); + var funcNode = $(xmlData).find('functionality'); + var functionality = funcNode.text(); + var colorTab1 = funcNode.attr('colorTab1'); + var colorTab2 = funcNode.attr('colorTab2'); + wok.pluginsColor[plugin] = colorTab2; $(xmlData).find('tab').each(function() { - var $tab = $(this); - var titleKey = $tab.find('title').text(); + var tab = $(this); + var titleKey = tab.find('title').text(); var title = i18n[titleKey] ? i18n[titleKey] : titleKey; - var path = $tab.find('path').text(); + var path = tab.find('path').text(); var roles = wok.cookie.get('roles'); - var order = $tab.find('order').text(); + var order = tab.find('order').text(); if (roles) { var role = JSON.parse(roles)[titleKey.toLowerCase()]; - var mode = $tab.find('[role="' + role + '"]').attr('mode'); + var mode = tab.find('[role="' + role + '"]').attr('mode'); wok.tabMode[titleKey.toLowerCase()] = mode; tabs.push({ functionality: functionality, title: title, path: path, mode: mode, - order: order + order: order, + colorTab1: colorTab1, + colorTab2: colorTab2 }); } else { document.location.href = 'login.html'; @@ -208,19 +216,14 @@ 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 colorTab1 = $(tab).parent().find("input[name='colorTab1']").val(); + var colorTab2 = $(tab).parent().find("input[name='colorTab2']").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').css('background-color', colorTab1); $('#tabPanel ul li').removeClass('active'); + $('#tabPanel ul li a').removeAttr('style'); $.each($('#tabPanel li'), function(i, t) { if ($(t).hasClass(plugin + 'Tab')) { $(t).css('display', 'block'); @@ -230,11 +233,13 @@ wok.main = function() { }); $(tab).parent().addClass('active'); - $(tab).addClass(plugin + 'Selected').focus(); - $(toolbar).addClass(plugin + 'Selected'); + $(tab).css('background-color', colorTab2).focus(); + $(toolbar).css('background-color', colorTab2); $('#functionalTabPanel ul li').removeClass('active'); + $('#functionalTabPanel ul li').removeAttr('style'); $('#functionalTabPanel ul .' + plugin + 'Tab').parent().addClass('active').focus(); + $('#functionalTabPanel ul .' + plugin + 'Tab').parent().css('background-color', colorTab1); // Disable Help button according to selected tab if ($(tab).hasClass("disableHelp")) { @@ -351,7 +356,6 @@ wok.main = function() { var firstTab = $('#tabPanel ul.navbar-nav li.' + plugin + 'Tab').first(); $(firstTab).addClass('active'); - $('a.item', firstTab).addClass(plugin + 'Selected'); var href = $('a.item', firstTab).attr('href'); location.hash = href.substring(0,href.lastIndexOf('.')); -- 2.7.4