[Kimchi-devel] [PATCH] Issue #746 : New navigation bar.
Aline Manera
alinefm at linux.vnet.ibm.com
Tue Nov 17 17:52:29 UTC 2015
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 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
> );
>
> -
> //== 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>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20151117/e20699d0/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: ieeafdjf.
Type: image/jpeg
Size: 50187 bytes
Desc: not available
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20151117/e20699d0/attachment.jpe>
More information about the Kimchi-devel
mailing list