[Kimchi-devel] [PATCH] Issue #746 : New navigation bar.
Aline Manera
alinefm at linux.vnet.ibm.com
Mon Nov 16 14:34:15 UTC 2015
On 11/11/2015 20:34, atreyee at linux.vnet.ibm.com wrote:
> From: Atreyee Mukhopadhyay <atreyee at 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 @@
> }
> }
> }
> +}
> +
> + at 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>
More information about the Kimchi-devel
mailing list