[PATCH] New Navigation bar
From: Atreyee Mukhopadhyay <atreyee@linux.vnet.ibm.com> This patch is to implement new feature mentioned in issue #746. First level navigation bar with Host and Virtualization tabs. Second level tab navigation based on first level navigation. Atreyee Mukhopadhyay (1): Issue #746 : New navigation bar. 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(-) -- 2.1.0
From: Atreyee Mukhopadhyay <atreyee@linux.vnet.ibm.com> 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> -- 2.1.0
On 11/11/2015 20:34, atreyee@linux.vnet.ibm.com wrote:
From: Atreyee Mukhopadhyay <atreyee@linux.vnet.ibm.com>
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
1) I suggest to user "virtualization" and "host", all letters in lower case and in one word. 2) The "virtualization" and "host" color will be used for the whole plugin, ie, all the tabs in the second level will have the same color of the tab in the first level. I think we will also need a second color to represent when the tab is selected in the second level. So remove all the color for each tab (also update the tab-ext.xml accordingly) and add: virtualization, virtualization-selected, host and host-selected.
);
- //== 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'));
Please, remove all those commented lines.
};
+ 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));
Please, remove the above commented line
+ 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>
After removing the former CSS files I was able to get a better view of the new navigation bar. Thanks, Walter, for the directions! My overall comments (in additional to those I made in the code): 1. Set the whole first level tab with dark blue. So it will have the width than the second level. 2. The "Host" tab in light blue is overloading the "Host" tab in dark blue 3. Align "localhost" text with the first tab text in the second level So "localhost" would be aligned with "Host" in light blue. (The same applies to Kimchi tabs) Let me know you thoughts on it. Regards, Aline Manera On 11/11/2015 20:34, atreyee@linux.vnet.ibm.com wrote:
From: Atreyee Mukhopadhyay <atreyee@linux.vnet.ibm.com>
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>
Hi Aline, Could you please explain the first comment bit elaborately with example. It will be convenient for me to change the implementation accordingly. Thanks, Atreyee On 11/17/2015 11:22 PM, Aline Manera wrote:
After removing the former CSS files I was able to get a better view of the new navigation bar. Thanks, Walter, for the directions!
My overall comments (in additional to those I made in the code):
1. Set the whole first level tab with dark blue. So it will have the width than the second level.
2. The "Host" tab in light blue is overloading the "Host" tab in dark blue
3. Align "localhost" text with the first tab text in the second level So "localhost" would be aligned with "Host" in light blue. (The same applies to Kimchi tabs)
Let me know you thoughts on it.
Regards, Aline Manera
On 11/11/2015 20:34, atreyee@linux.vnet.ibm.com wrote:
From: Atreyee Mukhopadhyay<atreyee@linux.vnet.ibm.com>
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>
On 18/11/2015 04:24, Atreye Mukhopadhyay wrote:
Hi Aline, Could you please explain the first comment bit elaborately with example. It will be convenient for me to change the implementation accordingly.
Hi Atreyee, The first tab level (the line in dark blue) is not filling the whole window width. 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. Is it better now?
Thanks, Atreyee
On 11/17/2015 11:22 PM, Aline Manera wrote:
After removing the former CSS files I was able to get a better view of the new navigation bar. Thanks, Walter, for the directions!
My overall comments (in additional to those I made in the code):
1. Set the whole first level tab with dark blue. So it will have the width than the second level.
2. The "Host" tab in light blue is overloading the "Host" tab in dark blue
3. Align "localhost" text with the first tab text in the second level So "localhost" would be aligned with "Host" in light blue. (The same applies to Kimchi tabs)
Let me know you thoughts on it.
Regards, Aline Manera
On 11/11/2015 20:34, atreyee@linux.vnet.ibm.com wrote:
From: Atreyee Mukhopadhyay<atreyee@linux.vnet.ibm.com>
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>
Hi Atreyee, My overall comments: 1) The "Host"/"Virtualization" tabs are not being displayed as a Tab. You need to its background and also the first level second level tab. It is the same on imaging the blue squares in the image below filled with blue color. (does that make sense?) To distinguish a selected tab in the second level we can use a darker color, ie, a darker blue (for ginger) or a darker green (for kimchi). 2) The first and the seconds level of tabs will have the same color. For Kimchi, we continue to have one different color per tab which is odd IMO. 3) I'd suggest to align the "localhost" text with the first tab in the second level. So the "Host" tab will be left shifted to have the "Host" text aligned with "localhost". The same for Kimchi. You can check the red lines in the images below. 4) More comments in the patch related to the code. On 11/11/2015 20:34, atreyee@linux.vnet.ibm.com wrote:
From: Atreyee Mukhopadhyay <atreyee@linux.vnet.ibm.com>
This patch is to implement new feature mentioned in issue #746. First level navigation bar with Host and Virtualization tabs. Second level tab navigation based on first level navigation.
Atreyee Mukhopadhyay (1): Issue #746 : New navigation bar.
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(-)
Aline, the snapshots you have taken and the problems you described make me suspect that the scss changes didn't really make it into the css files. Atreyee struggled last week with this issue till Samuel pointed out that she may have to delete the css files before issuing the make. Chandra adressed this problem in Issue #757 and I think that patch is available in the meantime. On 16.11.2015 15:28, Aline Manera wrote:
Hi Atreyee,
My overall comments:
1) The "Host"/"Virtualization" tabs are not being displayed as a Tab. You need to its background and also the first level second level tab. It is the same on imaging the blue squares in the image below filled with blue color. (does that make sense?) To distinguish a selected tab in the second level we can use a darker color, ie, a darker blue (for ginger) or a darker green (for kimchi).
2) The first and the seconds level of tabs will have the same color. For Kimchi, we continue to have one different color per tab which is odd IMO.
3) I'd suggest to align the "localhost" text with the first tab in the second level. So the "Host" tab will be left shifted to have the "Host" text aligned with "localhost". The same for Kimchi. You can check the red lines in the images below.
4) More comments in the patch related to the code.
On 11/11/2015 20:34, atreyee@linux.vnet.ibm.com wrote:
From: Atreyee Mukhopadhyay<atreyee@linux.vnet.ibm.com>
This patch is to implement new feature mentioned in issue #746. First level navigation bar with Host and Virtualization tabs. Second level tab navigation based on first level navigation.
Atreyee Mukhopadhyay (1): Issue #746 : New navigation bar.
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(-)
_______________________________________________ Kimchi-devel mailing list Kimchi-devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel
On 16/11/2015 13:47, Walter Niklaus wrote:
Aline, the snapshots you have taken and the problems you described make me suspect that the scss changes didn't really make it into the css files. Atreyee struggled last week with this issue till Samuel pointed out that she may have to delete the css files before issuing the make. Chandra adressed this problem in Issue #757 and I think that patch is available in the meantime.
Whew! I will test again tomorrow. But I still believe some of my comments applies.
On 16.11.2015 15:28, Aline Manera wrote:
Hi Atreyee,
My overall comments:
1) The "Host"/"Virtualization" tabs are not being displayed as a Tab. You need to its background and also the first level second level tab. It is the same on imaging the blue squares in the image below filled with blue color. (does that make sense?) To distinguish a selected tab in the second level we can use a darker color, ie, a darker blue (for ginger) or a darker green (for kimchi).
2) The first and the seconds level of tabs will have the same color. For Kimchi, we continue to have one different color per tab which is odd IMO.
3) I'd suggest to align the "localhost" text with the first tab in the second level. So the "Host" tab will be left shifted to have the "Host" text aligned with "localhost". The same for Kimchi. You can check the red lines in the images below.
4) More comments in the patch related to the code.
On 11/11/2015 20:34, atreyee@linux.vnet.ibm.com wrote:
From: Atreyee Mukhopadhyay<atreyee@linux.vnet.ibm.com>
This patch is to implement new feature mentioned in issue #746. First level navigation bar with Host and Virtualization tabs. Second level tab navigation based on first level navigation.
Atreyee Mukhopadhyay (1): Issue #746 : New navigation bar.
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(-)
_______________________________________________ Kimchi-devel mailing list Kimchi-devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel
_______________________________________________ Kimchi-devel mailing list Kimchi-devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel
participants (4)
-
Aline Manera -
Atreye Mukhopadhyay -
atreyee＠linux.vnet.ibm.com
-
Walter Niklaus