<html>
<head>
<meta content="text/html; charset=windows-1252"
http-equiv="Content-Type">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<br>
<br>
<div class="moz-cite-prefix">On 13/10/2015 11:11, Aline Manera
wrote:<br>
</div>
<blockquote cite="mid:561D111D.3030906@linux.vnet.ibm.com"
type="cite">
<meta content="text/html; charset=windows-1252"
http-equiv="Content-Type">
<br>
<br>
<div class="moz-cite-prefix">On 09/10/2015 16:07, Samuel Henrique
De Oliveira Guimaraes wrote:<br>
</div>
<blockquote
cite="mid:abf6edea091042cbad338adbda680dd8@serv031.corp.eldorado.org.br"
type="cite">
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<meta name="Generator" content="Microsoft Word 15 (filtered
medium)">
<!--[if !mso]><style>v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style><![endif]-->
<style><!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0cm;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman",serif;
color:black;}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:#0563C1;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:#954F72;
text-decoration:underline;}
span.EmailStyle17
{mso-style-type:personal;
font-family:"Calibri",sans-serif;
color:#1F497D;}
span.EmailStyle18
{mso-style-type:personal;
font-family:"Calibri",sans-serif;
color:windowtext;}
span.EmailStyle19
{mso-style-type:personal-reply;
font-family:"Calibri",sans-serif;
color:#1F497D;}
.MsoChpDefault
{mso-style-type:export-only;
font-size:10.0pt;}
@page WordSection1
{size:612.0pt 792.0pt;
margin:70.85pt 3.0cm 70.85pt 3.0cm;}
div.WordSection1
{page:WordSection1;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
<div class="WordSection1">
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"
lang="EN-US">Hi,<o:p></o:p></span></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"
lang="EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"
lang="EN-US">Although a lot of articles discourages mixing
top-level tabs with sidebars, I think in this specific
scenario we can make these patterns work but we have to
make sure that the users won’t be redirected to a blank
landing page or we’ll have to create one.</span></p>
</div>
</blockquote>
<br>
It is becoming a mess!!!! That way we will have more menus than
content. It is the same to create a new menu entry for each
collapsed content in Ginger plugin.<br>
<br>
I tend to agree with 2 top-level tabs but *without* any vertical
menu!!!<br>
<br>
</blockquote>
<br>
Just complementing, the vertical menu should be displayed as
collapsed content as we did for Ginger.<br>
<br>
<blockquote cite="mid:561D111D.3030906@linux.vnet.ibm.com"
type="cite">
<blockquote
cite="mid:abf6edea091042cbad338adbda680dd8@serv031.corp.eldorado.org.br"
type="cite">
<div class="WordSection1">
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"
lang="EN-US"><o:p></o:p></span></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"
lang="EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"
lang="EN-US">For instance, suppose Containers second-level
first item has three children, then when clicking in
“Containers” on the top bar, the user should be redirected
to the first item from this list (in the third level).<o:p></o:p></span></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"
lang="EN-US">I’ve done some prototypes in the past with
similar patterns and for the standard user who navigates
on web, this pattern of navigation is confusing. However
the average virtualization, cloud, storage and network
operator users are usually facing UIs more complex than
this. <o:p></o:p></span></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"
lang="EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"
lang="EN-US">Between the two proposals I’m voting for
proposal 1 but I prefer using Hamburger Button to trigger
a floating grouped-menu. This was proposed a few months
ago in the ML.<o:p></o:p></span></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"
lang="EN-US">I was in a workshop with some developers from
Globo.com (Brazilian news portal) two years ago when they
were implementing this menu. The current version is way
more polished than the one they presented at the time and
I really like how it turned. I’m attaching a screenshot,
but you can see it live with animations at <a
moz-do-not-send="true" href="http://g1.globo.com/">http://g1.globo.com/</a>.<o:p></o:p></span></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"
lang="EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"
lang="EN-US">This discussion also brings another question,
should new plugins be restricted only to new tabs on the
first-level top bar or should we create some sort of
“path” in tab-ext.xml? I.e a new plugin can be appended to
a specific region on Hosts Dashboard, on the second-level
(since Aline suggested moving Peer hosts to that area) or
even create a new level on a menu option that previously
had no child items.<o:p></o:p></span></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"
lang="EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"
lang="EN-US">Regards,<o:p></o:p></span></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"
lang="EN-US">Samuel<o:p></o:p></span></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"
lang="EN-US"> <o:p></o:p></span></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"
lang="EN-US"><o:p> </o:p></span></p>
<div>
<div style="border:none;border-top:solid #E1E1E1
1.0pt;padding:3.0pt 0cm 0cm 0cm">
<p class="MsoNormal"><b><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:windowtext">From:</span></b><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:windowtext">
Jan Schneider [<a moz-do-not-send="true"
class="moz-txt-link-freetext"
href="mailto:schneidj@linux.vnet.ibm.com">mailto:schneidj@linux.vnet.ibm.com</a>]
<br>
<b>Sent:</b> sexta-feira, 9 de outubro de 2015 13:06<br>
<b>To:</b> Samuel Henrique De Oliveira Guimaraes <a
moz-do-not-send="true" class="moz-txt-link-rfc2396E"
href="mailto:samuel.guimaraes@eldorado.org.br"><samuel.guimaraes@eldorado.org.br></a>;
Aline Manera <a moz-do-not-send="true"
class="moz-txt-link-rfc2396E"
href="mailto:alinefm@linux.vnet.ibm.com"><alinefm@linux.vnet.ibm.com></a><br>
<b>Cc:</b> <a moz-do-not-send="true"
class="moz-txt-link-abbreviated"
href="mailto:kimchi-devel@ovirt.org">kimchi-devel@ovirt.org</a><br>
<b>Subject:</b> Re: [Kimchi-devel] UI Change Request -
Navigation<o:p></o:p></span></p>
</div>
</div>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal" style="margin-bottom:12.0pt"><span
lang="EN-US">Hi Samuel,<br>
<br>
I just had a discussion with Walter. We found that we need
up to two navigation levels under Host. The third
navigation level however is not always required. <br>
Please have a look at the two attached proposals to
understand our requirements.<br>
<br>
Kind regards<br>
Jan and Walter<br>
<br>
<br>
<br>
<o:p></o:p></span></p>
<div>
<p class="MsoNormal"><span lang="EN-US">On 10/09/2015 04:36
PM, Samuel Henrique De Oliveira Guimaraes wrote:<o:p></o:p></span></p>
</div>
<blockquote style="margin-top:5.0pt;margin-bottom:5.0pt">
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"
lang="EN-US">Hi Jan,</span><span lang="EN-US"><o:p></o:p></span></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"
lang="EN-US"> </span><span lang="EN-US"><o:p></o:p></span></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"
lang="EN-US">I’m not sure if I’m following you. Did you
mean changing the second-level navigation to tabs
instead of panel areas? If so should we merge Hosts and
Admin tab in one page and collapse the panels like
old-ui behavior (maybe keeping the dashboard statistics
on top unchanged) but with new-ui styles OR add two new
tabs to the toolbar?</span><span lang="EN-US"><o:p></o:p></span></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"
lang="EN-US"> </span><span lang="EN-US"><o:p></o:p></span></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"
lang="EN-US">I think the concept of
accordion/collapsible elements works for Admin, but I
don’t see it working for the panels on Hosts tab, unless
we group Basic Information, Repositories and Debug
Reports in one single collapsible area.</span><span
lang="EN-US"><o:p></o:p></span></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"
lang="EN-US"> </span><span lang="EN-US"><o:p></o:p></span></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"
lang="EN-US">I also discussed with Aline if we should
move Peer Hosts from top to the toolbar and make it a
plugin. Here’s a mockup I did with Chrome:</span><o:p></o:p></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"
lang="EN-US"> </span><o:p></o:p></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D"><img
id="Picture_x0020_1"
src="cid:part6.08010900.05070301@linux.vnet.ibm.com"
alt="imap://alinefm@imap.linux.ibm.com:993/fetch%3EUID%3E.kimchi-devel%3E11925?header=quotebody&part=1.1.2&filename=image001.jpg"
height="386" width="1111" border="0"></span><o:p></o:p></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"
lang="EN-US"> </span><o:p></o:p></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D"><img
id="Picture_x0020_2"
src="cid:part7.04050109.06070107@linux.vnet.ibm.com"
alt="imap://alinefm@imap.linux.ibm.com:993/fetch%3EUID%3E.kimchi-devel%3E11925?header=quotebody&part=1.1.3&filename=image002.jpg"
height="388" width="1118" border="0"></span><o:p></o:p></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"
lang="EN-US"> </span><span lang="EN-US"><o:p></o:p></span></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"
lang="EN-US"> </span><span lang="EN-US"><o:p></o:p></span></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"
lang="EN-US">The reason why I think all panels in these
pages can’t be merged in one tab is because if all
panels were collapsed, the page height would be around
3757 pixels. If admin items were hidden, it would be
around 2108 tall. I believe we would have to set the
accordions to hide other items when one item is
collapsed. They don’t seem that tall in the PDF because
the images were resized.</span><span lang="EN-US"><o:p></o:p></span></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"
lang="EN-US"> </span><span lang="EN-US"><o:p></o:p></span></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"
lang="EN-US">I believe we have to study this following a
“mobile-first” approach because once we all agree with
the new design, even if we don’t include the mobile
design in 2.0 release, we’ll have to keep some markup
ready for responsive design to receive the new styles. I
think this new tab design would need some updates in
tab-ext.xml and the JS files before 2.0 release,
assuming other people or teams would start developing
new plugins from 2.0 and on. If we update how the tabs
are built in the UI from 2.0 to 2.1 for instance, that
may turn against us with retro compatibility issues.</span><span
lang="EN-US"><o:p></o:p></span></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"
lang="EN-US"> </span><span lang="EN-US"><o:p></o:p></span></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D"><img
id="Picture_x0020_3"
src="cid:part8.08060200.04060706@linux.vnet.ibm.com"
alt="imap://alinefm@imap.linux.ibm.com:993/fetch%3EUID%3E.kimchi-devel%3E11925?header=quotebody&part=1.1.4&filename=image003.jpg"
height="436" width="1024" border="0"></span><o:p></o:p></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"
lang="EN-US"> </span><span lang="EN-US"><o:p></o:p></span></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"
lang="EN-US">Regards,</span><span lang="EN-US"><o:p></o:p></span></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"
lang="EN-US">Samuel</span><span lang="EN-US"><o:p></o:p></span></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"
lang="EN-US"> </span><span lang="EN-US"><o:p></o:p></span></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:#1F497D;mso-fareast-language:EN-US"
lang="EN-US"> </span><span lang="EN-US"><o:p></o:p></span></p>
<div>
<div style="border:none;border-top:solid #E1E1E1
1.0pt;padding:3.0pt 0cm 0cm 0cm">
<p class="MsoNormal"><b><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:windowtext"
lang="EN-US">From:</span></b><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:windowtext"
lang="EN-US"> </span><a moz-do-not-send="true"
href="mailto:kimchi-devel-bounces@ovirt.org"><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif"
lang="EN-US">kimchi-devel-bounces@ovirt.org</span></a><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:windowtext"
lang="EN-US"> [</span><a moz-do-not-send="true"
href="mailto:kimchi-devel-bounces@ovirt.org"><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif"
lang="EN-US">mailto:kimchi-devel-bounces@ovirt.org</span></a><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:windowtext"
lang="EN-US">] <b>On Behalf Of </b>Jan Schneider<br>
<b>Sent:</b> quinta-feira, 8 de outubro de 2015
13:10<br>
<b>To:</b> Aline Manera </span><a
moz-do-not-send="true"
href="mailto:alinefm@linux.vnet.ibm.com"><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif"
lang="EN-US"><alinefm@linux.vnet.ibm.com></span></a><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:windowtext"
lang="EN-US"><br>
<b>Cc:</b> </span><a moz-do-not-send="true"
href="mailto:kimchi-devel@ovirt.org"><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif"
lang="EN-US">kimchi-devel@ovirt.org</span></a><span
style="font-size:11.0pt;font-family:"Calibri",sans-serif;color:windowtext"
lang="EN-US"><br>
<b>Subject:</b> [Kimchi-devel] UI Change Request -
Navigation</span><span lang="EN-US"><o:p></o:p></span></p>
</div>
</div>
<p class="MsoNormal"><span lang="EN-US"> <o:p></o:p></span></p>
<p class="MsoNormal" style="margin-bottom:12.0pt"><span
lang="EN-US">Hello Aline,<br>
<br>
I refer to the latest version of the <br>
User Interface Design Specification - Kimchi, 2014-12-23
(aka UI Design Spec)<br>
which defines the following structure of
functionalities:<br>
<br>
<b>Host</b> (second level navigation via panel areas)<br>
Performance (System Statistics)<br>
Basic Information<br>
Repositories<br>
Debug Report<br>
Software Updates <br>
<br>
<b>Guests</b><br>
no second level functionalities<br>
<br>
<b>Templates</b><br>
no second level functionalities<br>
<br>
<b>Storage</b><br>
no second level functionalities<br>
<br>
<b>Networks</b><br>
no second level functionalities<br>
<br>
<b>Administration</b> (second level navigation via
collapse/expand)<br>
Firmware Update<br>
SEP Configuration<br>
Power Options<br>
Configuration Backup<br>
Network Configuration<br>
SAN Adapters<br>
Sensor Monitor<br>
<br>
<br>
<br>
</span><b><span style="color:#3333FF" lang="EN-US">Problem
Statement</span></b><span lang="EN-US"><br>
<br>
We already decided to move all Administration
functionalities to Host (currently not updated in the UI
Design Spec).<br>
<br>
We are currently facing the following problems:<br>
1) Host now contains 12 second level functionalities,
all other (Guests, Templates, ...) none.<br>
We need to introduce a second level navigation for
Host other than collapse/expand<br>
2) The navigation bar elements Storage and Network
(refering to Virtualization) also exist in the Host
context. <br>
This might confuse the user.<br>
<br>
<br>
<br>
</span><b><span style="color:#3333FF" lang="EN-US">Proposal</span></b><span
lang="EN-US"><br>
<br>
The described problems can be solved with the following
changes:<br>
<br>
1) Introducing a second level navigation<br>
2) Changing the structure of functionalities as follows:<br>
<br>
<b>Host</b><br>
Performance (System Statistics)<br>
Basic Information<br>
Repositories<br>
Debug Report<br>
Software Updates <br>
Firmware Update<br>
SEP Configuration<br>
Power Options<br>
Configuration Backup<br>
Network Configuration<br>
SAN Adapters<br>
Sensor Monitor<br>
<br>
<b>Virtualization</b><br>
Guests<br>
Templates<br>
Storage<br>
Networks<br>
<br>
<b>Containers (future extension)</b><br>
to be defined<br>
<br>
<br>
<br>
Let's start a discussion on this.<br>
<br>
</span>Kind regards<br>
Jan<o:p></o:p></p>
</blockquote>
<p class="MsoNormal"><o:p> </o:p></p>
</div>
</blockquote>
<br>
<br>
<fieldset class="mimeAttachmentHeader"></fieldset>
<br>
<pre wrap="">_______________________________________________
Kimchi-devel mailing list
<a class="moz-txt-link-abbreviated" href="mailto:Kimchi-devel@ovirt.org">Kimchi-devel@ovirt.org</a>
<a class="moz-txt-link-freetext" href="http://lists.ovirt.org/mailman/listinfo/kimchi-devel">http://lists.ovirt.org/mailman/listinfo/kimchi-devel</a>
</pre>
</blockquote>
<br>
</body>
</html>