[Kimchi-devel] [PATCH] Issue #746 : New navigation bar.
Atreye Mukhopadhyay
atreyee at linux.vnet.ibm.com
Wed Nov 18 06:24:09 UTC 2015
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 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/20151118/2e819b40/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: not available
Type: image/jpeg
Size: 50187 bytes
Desc: not available
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20151118/2e819b40/attachment.jpe>
More information about the Kimchi-devel
mailing list