From: Atreyee Mukhopadhyay <atreyee(a)linux.vnet.ibm.com&gt; 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(a)linux.vnet.ibm.com wrote: >> From: Atreyee Mukhopadhyay&lt;atreyee(a)linux.vnet.ibm.com&gt; >> >> 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> >