<html>
<head>
<meta content="text/html; charset=windows-1252"
http-equiv="Content-Type">
</head>
<body text="#000000" bgcolor="#FFFFFF">
<br>
<br>
<div class="moz-cite-prefix">On 18/11/2015 04:24, Atreye
Mukhopadhyay wrote:<br>
</div>
<blockquote cite="mid:564C1989.5060108@linux.vnet.ibm.com"
type="cite">
<meta content="text/html; charset=windows-1252"
http-equiv="Content-Type">
Hi Aline,<br>
Could you please explain the first comment bit elaborately with
example. It will be convenient for me to change the implementation
accordingly.<br>
</blockquote>
<br>
Hi Atreyee,<br>
<br>
The first tab level (the line in dark blue) is not filling the whole
window width.<br>
Please, check the blue squares in the image. It is the same to fill
than with the dark blue color to continue the first level tab with
the window width.<br>
<br>
Is it better now?<br>
<br>
<blockquote cite="mid:564C1989.5060108@linux.vnet.ibm.com"
type="cite"> <br>
Thanks,<br>
Atreyee <br>
<br>
<div class="moz-cite-prefix">On 11/17/2015 11:22 PM, Aline Manera
wrote:<br>
</div>
<blockquote cite="mid:564B695D.1030507@linux.vnet.ibm.com"
type="cite">
<meta content="text/html; charset=windows-1252"
http-equiv="Content-Type">
<br>
After removing the former CSS files I was able to get a better
view of the new navigation bar.<br>
Thanks, Walter, for the directions!<br>
<br>
My overall comments (in additional to those I made in the code):<br>
<br>
1. Set the whole first level tab with dark blue. So it will have
the width than the second level.<br>
<br>
2. The "Host" tab in light blue is overloading the "Host" tab in
dark blue<br>
<br>
3. Align "localhost" text with the first tab text in the second
level<br>
So "localhost" would be aligned with "Host" in light blue.
(The same applies to Kimchi tabs)<br>
<br>
<img src="cid:part1.03080803.00030103@linux.vnet.ibm.com" alt=""><br>
<br>
<div class="moz-cite-prefix">Let me know you thoughts on it.<br>
<br>
Regards,<br>
Aline Manera<br>
<br>
<br>
On 11/11/2015 20:34, <a moz-do-not-send="true"
class="moz-txt-link-abbreviated"
href="mailto:atreyee@linux.vnet.ibm.com">atreyee@linux.vnet.ibm.com</a>
wrote:<br>
</div>
<blockquote
cite="mid:1447281287-2042-2-git-send-email-atreyee@linux.vnet.ibm.com"
type="cite">
<pre wrap="">From: Atreyee Mukhopadhyay <a moz-do-not-send="true" class="moz-txt-link-rfc2396E" href="mailto:atreyee@linux.vnet.ibm.com"><atreyee@linux.vnet.ibm.com></a>
First level navigation bar with Host and Virtualization tabs.
Second level tab navigation based on first level navigation.
---
src/wok/plugins/gingerbase/ui/config/tab-ext.xml | 1 +
src/wok/plugins/kimchi/ui/config/tab-ext.xml | 1 +
ui/css/src/modules/_toolbar.scss | 9 ++-
ui/css/src/modules/_wok-variables.scss | 7 +-
ui/js/src/wok.main.js | 81 +++++++++++++++++++++---
ui/pages/wok-ui.html.tmpl | 6 +-
6 files changed, 91 insertions(+), 14 deletions(-)
diff --git a/src/wok/plugins/gingerbase/ui/config/tab-ext.xml b/src/wok/plugins/gingerbase/ui/config/tab-ext.xml
index 8366f1f..17112ef 100644
--- a/src/wok/plugins/gingerbase/ui/config/tab-ext.xml
+++ b/src/wok/plugins/gingerbase/ui/config/tab-ext.xml
@@ -7,4 +7,5 @@
<title>Host</title>
<path>plugins/gingerbase/host.html</path>
</tab>
+ <functionality>Host</functionality>
</tabs-ext>
diff --git a/src/wok/plugins/kimchi/ui/config/tab-ext.xml b/src/wok/plugins/kimchi/ui/config/tab-ext.xml
index 415dbf1..9adabe0 100644
--- a/src/wok/plugins/kimchi/ui/config/tab-ext.xml
+++ b/src/wok/plugins/kimchi/ui/config/tab-ext.xml
@@ -1,5 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<tabs-ext>
+ <functionality>Virtualization</functionality>
<tab>
<access role="admin" mode="admin"/>
<access role="user" mode="byInstance"/>
diff --git a/ui/css/src/modules/_toolbar.scss b/ui/css/src/modules/_toolbar.scss
index 744d48d..43e48a8 100644
--- a/ui/css/src/modules/_toolbar.scss
+++ b/ui/css/src/modules/_toolbar.scss
@@ -47,7 +47,7 @@
vertical-align: middle;
padding: 6px 0 !important;
margin-left: 50px !important;
- font-weight: 600;
+ font-weight: 400;
width: auto;
min-width: auto;
}
@@ -74,4 +74,11 @@
}
}
}
+}
+
+@each $tab, $bgcolor in $colors {
+
+#tabPanel.#{$tab}{
+ background-color: map-get($colors,$tab) !important;
+ }
}
\ No newline at end of file
diff --git a/ui/css/src/modules/_wok-variables.scss b/ui/css/src/modules/_wok-variables.scss
index d67672d..7381335 100644
--- a/ui/css/src/modules/_wok-variables.scss
+++ b/ui/css/src/modules/_wok-variables.scss
@@ -60,10 +60,11 @@ $colors: (
templates: #00a6a0,
storage: #feb813,
network: #7f1c7d,
- administration: #d9182d
+ administration: #d9182d,
+ Virtualization-tab: #59930c,
+ Host-tab: #00578c
);
-
//== Scaffolding
//
//## Settings for some of the most global styles.
@@ -978,4 +979,4 @@ $color-grey-arrow: rgb(204, 204, 204);
$width-default: 220px;
-$zindex-select-dropdown: 1035 !default;
\ No newline at end of file
+$zindex-select-dropdown: 1035 !default;
diff --git a/ui/js/src/wok.main.js b/ui/js/src/wok.main.js
index 1330ac1..6043832 100644
--- a/ui/js/src/wok.main.js
+++ b/ui/js/src/wok.main.js
@@ -25,6 +25,7 @@ wok.main = function() {
var genTabs = function(tabs) {
var tabsHtml = [];
+ //var tabs = allTabs[$(funcItem).text()];
$(tabs).each(function(i, tab) {
var title = tab['title'];
var cssClass = tab['css'];
@@ -44,10 +45,30 @@ wok.main = function() {
}
});
return tabsHtml.join('');
+ //var tabElements = tabsHtml.join('')
+ //$(tabElements).appendTo($('tabPanel'));
};
+ var genFunctTabs = function(tabs){
+ var functionalTabHtml = [];
+ var functionalTabs = Object.keys(tabs);
+ var css ="";
+ $(functionalTabs).each(function(i, tab) {
+ functionalTabHtml.push(
+ '<li>',
+ '<a class="item',' ',tab,'-tab','" href="#">',
+ tab,
+ '</a>',
+ '</li>'
+ );
+ });
+ return functionalTabHtml.join('');
+ }
+
var parseTabs = function(xmlData) {
var tabs = [];
+ var functionalTabs = {};
+ var functionality = $(xmlData).find('functionality').text();
$(xmlData).find('tab').each(function() {
var $tab = $(this);
var titleKey = $tab.find('title').text();
@@ -69,8 +90,17 @@ wok.main = function() {
document.location.href = 'login.html';
}
});
+ var tabsDetails = JSON.parse(wok.cookie.get('tabs'));
- return tabs;
+ var isExisting = tabsDetails[functionality] && (tabsDetails[functionality].length)>0;
+
+ if(isExisting){
+ tabs.push.apply(tabs,tabsDetails[functionality]);
+ }
+
+ functionalTabs[functionality] = tabs;
+
+ return functionalTabs;
};
var retrieveTabs = function(url) {
@@ -89,7 +119,8 @@ wok.main = function() {
var pluginI18nUrl = 'plugins/{plugin}/i18n.json';
var DEFAULT_HASH;
var buildTabs = function(callback) {
- var tabs = [];
+ var tabs = {};
+ wok.cookie.set('tabs',JSON.stringify(tabs));
wok.listPlugins(function(plugins) {
$(plugins).each(function(i, p) {
var url = wok.substitute(pluginConfigUrl, {
@@ -101,10 +132,19 @@ wok.main = function() {
wok.getI18n(function(i18nObj){ $.extend(i18n, i18nObj)},
function(i18nObj){ //i18n is not define by plugin
}, i18nUrl, true);
- tabs.push.apply(tabs, retrieveTabs(url));
+ //tabs.push.apply(tabs, retrieveTabs(url));
+ tabs = $.extend({},tabs, retrieveTabs(url));
+ wok.cookie.set('tabs',JSON.stringify(tabs));
+ });
+
+ var orderedtabs ={};
+ Object.keys(tabs).sort().forEach(function(key){
+ orderedtabs[key]=tabs[key];
});
- var defaultTab = tabs[0]
+ var defaultFunctionalTab = Object.keys(orderedtabs)[0];
+
+ var defaultTab = tabs[defaultFunctionalTab][0];
var defaultTabPath = defaultTab && defaultTab['path']
@@ -116,7 +156,11 @@ wok.main = function() {
DEFAULT_HASH = defaultTabPath &&
defaultTabPath.substring(0, defaultTabPath.lastIndexOf('.'))
}
- $('#nav-menu ul.navbar-nav li.hostname').after(genTabs(tabs));
+ $('#nav-menu ul.navbar-nav li.hostname').after(genFunctTabs(orderedtabs));
+ $('#nav-menu ul.navbar-nav li a.item').first().parent().addClass('active').focus();
+ $('#tabPanel').addClass(defaultFunctionalTab+'-tab');
+ $(genTabs(tabs[defaultFunctionalTab])).appendTo('#tabPanel ul');
+
wok.getHostname();
callback && callback();
@@ -146,7 +190,7 @@ wok.main = function() {
* point to the tab. If nothing found, inform user the URL is invalid
* and clear location.hash to jump to home page.
*/
- var tab = $('#nav-menu ul li a[href="' + url + '"]');
+ var tab = $('#tabPanel ul.navbar-nav li a[href="' + url + '"]');
if (tab.length === 0 && url!='wok-empty.html') {
location.hash = '';
return;
@@ -158,7 +202,7 @@ wok.main = function() {
}else{
// Update the visual style of tabs; focus the selected one.
- $('#nav-menu ul li').removeClass('active');
+ $('#tabPanel ul li').removeClass('active');
$(tab).parent().addClass('active');
$(tab).focus();
@@ -238,7 +282,7 @@ wok.main = function() {
* Register click listener of tabs. Replace the default reloading page
* behavior of <a> with Ajax loading.
*/
- $('#nav-menu ul li').on('click', 'a.item', function(event) {
+ $('#tabPanel ul').on('click', 'a.item', function(event) {
var href = $(this).attr('href');
// Remove file extension from 'href'
location.hash = href.substring(0,href.lastIndexOf('.'))
@@ -254,6 +298,25 @@ wok.main = function() {
event.preventDefault();
});
+ $('#nav-menu ul li').on('click', 'a.item', function(event) {
+ var functionalTab = $(this).text();
+ var previousSelection = $('#nav-menu ul li.active a').text();
+ $('#tabPanel').removeClass(previousSelection+'-tab');
+
+ $('#nav-menu ul li').removeClass('active');
+ $(this).parent().addClass('active').focus();
+
+ $('#tabPanel').addClass(functionalTab+'-tab');
+ var tabs = JSON.parse(wok.cookie.get('tabs'));
+ $('#tabPanel ul').empty();
+ $(genTabs(tabs[functionalTab])).appendTo('#tabPanel ul');
+ var firstTab = $('#tabPanel ul.navbar-nav li').first();
+ $(firstTab).addClass('active');
+ var href= $('a.item',firstTab).attr('href');
+ location.hash = href.substring(0,href.lastIndexOf('.'));
+ event.preventDefault();
+
+ });
// Perform logging out via Ajax request.
$('#btn-logout').on('click', function() {
wok.logout(function() {
@@ -392,4 +455,4 @@ wok.openHelp = function(e) {
var url = $(tab).parent().find("input[name='helpPath']").val();
window.open(url, "Wok Help");
e.preventDefault();
-};
\ No newline at end of file
+};
diff --git a/ui/pages/wok-ui.html.tmpl b/ui/pages/wok-ui.html.tmpl
index acfae27..d3f45ea 100644
--- a/ui/pages/wok-ui.html.tmpl
+++ b/ui/pages/wok-ui.html.tmpl
@@ -133,10 +133,14 @@
</button>
</div>
<div class="collapse navbar-collapse" id="nav-menu">
- <ul class="nav navbar-nav">
+ <ul id="functionalTabPanel" class="nav navbar-nav">
<li class="hostname"><span class="host-location"></span></li>
</ul>
</div>
+ <div class="collapse navbar-collapse" id="tabPanel">
+ <ul class="nav navbar-nav">
+ </ul>
+ </div>
</div>
</nav>
</div>
</pre>
</blockquote>
<br>
</blockquote>
<br>
</blockquote>
<br>
</body>
</html>