[Kimchi-devel] [PATCH] [Wok 03/10] Bug fix #173: Get color tab from tab-ext.xml file
Aline Manera
alinefm at linux.vnet.ibm.com
Wed Oct 26 14:30:00 UTC 2016
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 at linux.vnet.ibm.com>
---
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;
- }
- }
- }
- }
-
> .hostname {
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;
-}
-
- at 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
More information about the Kimchi-devel
mailing list