Re: [Kimchi-devel] [PATCH] Issue #746 : New navigation bar.

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>