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

Aline Manera alinefm at linux.vnet.ibm.com
Wed Nov 18 20:05:29 UTC 2015



On 18/11/2015 04:24, Atreye Mukhopadhyay wrote:
> Hi Aline,
> Could you please explain the first comment bit elaborately with 
> example. It will be convenient for me to change the implementation 
> accordingly.

Hi Atreyee,

The first tab level (the line in dark blue) is not filling the whole 
window width.
Please, check the blue squares in the image. It is the same to fill than 
with the dark blue color to continue the first level tab with the window 
width.

Is it better now?

>
> 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/c1c3ce5d/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/c1c3ce5d/attachment.jpe>


More information about the Kimchi-devel mailing list