<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Generator" content="Microsoft Word 15 (filtered medium)">
<style><!--
/* Font Definitions */
@font-face
        {font-family:Wingdings;
        panose-1:5 0 0 0 0 0 0 0 0 0;}
@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;}
@font-face
        {font-family:Consolas;
        panose-1:2 11 6 9 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
        {margin:0cm;
        margin-bottom:.0001pt;
        font-size:11.0pt;
        font-family:"Calibri",sans-serif;
        color:black;
        mso-fareast-language:EN-US;}
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;}
p
        {mso-style-priority:99;
        mso-margin-top-alt:auto;
        margin-right:0cm;
        mso-margin-bottom-alt:auto;
        margin-left:0cm;
        font-size:11.0pt;
        font-family:"Calibri",sans-serif;
        color:black;
        mso-fareast-language:EN-US;}
pre
        {mso-style-priority:99;
        mso-style-link:"HTML Preformatted Char";
        margin:0cm;
        margin-bottom:.0001pt;
        font-size:10.0pt;
        font-family:"Courier New";
        color:black;
        mso-fareast-language:PT-BR;}
p.MsoListParagraph, li.MsoListParagraph, div.MsoListParagraph
        {mso-style-priority:34;
        margin-top:0cm;
        margin-right:0cm;
        margin-bottom:0cm;
        margin-left:36.0pt;
        margin-bottom:.0001pt;
        font-size:11.0pt;
        font-family:"Calibri",sans-serif;
        color:black;
        mso-fareast-language:EN-US;}
span.HTMLPreformattedChar
        {mso-style-name:"HTML Preformatted Char";
        mso-style-priority:99;
        mso-style-link:"HTML Preformatted";
        font-family:Consolas;
        color:black;
        mso-fareast-language:EN-US;}
span.EmailStyle21
        {mso-style-type:personal;
        font-family:"Calibri",sans-serif;
        color:windowtext;}
span.EmailStyle22
        {mso-style-type:personal;
        font-family:"Calibri",sans-serif;
        color:#1F497D;}
span.EmailStyle23
        {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;}
/* List Definitions */
@list l0
        {mso-list-id:262812166;
        mso-list-type:hybrid;
        mso-list-template-ids:-2083256826 68550657 68550659 68550661 68550657 68550659 68550661 68550657 68550659 68550661;}
@list l0:level1
        {mso-level-number-format:bullet;
        mso-level-text:\F0B7;
        mso-level-tab-stop:none;
        mso-level-number-position:left;
        text-indent:-18.0pt;
        font-family:Symbol;}
@list l0:level2
        {mso-level-number-format:bullet;
        mso-level-text:o;
        mso-level-tab-stop:none;
        mso-level-number-position:left;
        text-indent:-18.0pt;
        font-family:"Courier New";}
@list l0:level3
        {mso-level-number-format:bullet;
        mso-level-text:\F0A7;
        mso-level-tab-stop:none;
        mso-level-number-position:left;
        text-indent:-18.0pt;
        font-family:Wingdings;}
@list l0:level4
        {mso-level-number-format:bullet;
        mso-level-text:\F0B7;
        mso-level-tab-stop:none;
        mso-level-number-position:left;
        text-indent:-18.0pt;
        font-family:Symbol;}
@list l0:level5
        {mso-level-number-format:bullet;
        mso-level-text:o;
        mso-level-tab-stop:none;
        mso-level-number-position:left;
        text-indent:-18.0pt;
        font-family:"Courier New";}
@list l0:level6
        {mso-level-number-format:bullet;
        mso-level-text:\F0A7;
        mso-level-tab-stop:none;
        mso-level-number-position:left;
        text-indent:-18.0pt;
        font-family:Wingdings;}
@list l0:level7
        {mso-level-number-format:bullet;
        mso-level-text:\F0B7;
        mso-level-tab-stop:none;
        mso-level-number-position:left;
        text-indent:-18.0pt;
        font-family:Symbol;}
@list l0:level8
        {mso-level-number-format:bullet;
        mso-level-text:o;
        mso-level-tab-stop:none;
        mso-level-number-position:left;
        text-indent:-18.0pt;
        font-family:"Courier New";}
@list l0:level9
        {mso-level-number-format:bullet;
        mso-level-text:\F0A7;
        mso-level-tab-stop:none;
        mso-level-number-position:left;
        text-indent:-18.0pt;
        font-family:Wingdings;}
@list l1
        {mso-list-id:1469858233;
        mso-list-type:hybrid;
        mso-list-template-ids:482217636 68550657 68550659 68550661 68550657 68550659 68550661 68550657 68550659 68550661;}
@list l1:level1
        {mso-level-number-format:bullet;
        mso-level-text:\F0B7;
        mso-level-tab-stop:none;
        mso-level-number-position:left;
        text-indent:-18.0pt;
        font-family:Symbol;}
@list l1:level2
        {mso-level-number-format:bullet;
        mso-level-text:o;
        mso-level-tab-stop:none;
        mso-level-number-position:left;
        text-indent:-18.0pt;
        font-family:"Courier New";}
@list l1:level3
        {mso-level-number-format:bullet;
        mso-level-text:\F0A7;
        mso-level-tab-stop:none;
        mso-level-number-position:left;
        text-indent:-18.0pt;
        font-family:Wingdings;}
@list l1:level4
        {mso-level-number-format:bullet;
        mso-level-text:\F0B7;
        mso-level-tab-stop:none;
        mso-level-number-position:left;
        text-indent:-18.0pt;
        font-family:Symbol;}
@list l1:level5
        {mso-level-number-format:bullet;
        mso-level-text:o;
        mso-level-tab-stop:none;
        mso-level-number-position:left;
        text-indent:-18.0pt;
        font-family:"Courier New";}
@list l1:level6
        {mso-level-number-format:bullet;
        mso-level-text:\F0A7;
        mso-level-tab-stop:none;
        mso-level-number-position:left;
        text-indent:-18.0pt;
        font-family:Wingdings;}
@list l1:level7
        {mso-level-number-format:bullet;
        mso-level-text:\F0B7;
        mso-level-tab-stop:none;
        mso-level-number-position:left;
        text-indent:-18.0pt;
        font-family:Symbol;}
@list l1:level8
        {mso-level-number-format:bullet;
        mso-level-text:o;
        mso-level-tab-stop:none;
        mso-level-number-position:left;
        text-indent:-18.0pt;
        font-family:"Courier New";}
@list l1:level9
        {mso-level-number-format:bullet;
        mso-level-text:\F0A7;
        mso-level-tab-stop:none;
        mso-level-number-position:left;
        text-indent:-18.0pt;
        font-family:Wingdings;}
ol
        {margin-bottom:0cm;}
ul
        {margin-bottom:0cm;}
--></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]-->
</head>
<body bgcolor="white" lang="PT-BR" link="#0563C1" vlink="#954F72">
<div class="WordSection1">
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D">Created a new variation with a sticky fixed floating sidebar and single contente on the page. I also removed the accordion because if we are going to display only one item per page, we shouldn&#8217;t
 have hidden elements on the page.<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"><o:p>&nbsp;</o:p></span></p>
<p class="MsoNormal"><span style="color:#1F497D">Samuel<o:p></o:p></span></p>
<p class="MsoNormal"><span style="color:#1F497D"><o:p>&nbsp;</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 lang="EN-US" style="color:windowtext;mso-fareast-language:PT-BR">From:</span></b><span lang="EN-US" style="color:windowtext;mso-fareast-language:PT-BR"> Aline Manera [mailto:alinefm@linux.vnet.ibm.com]
<br>
<b>Sent:</b> terça-feira, 12 de julho de 2016 09:53<br>
<b>To:</b> Samuel Henrique De Oliveira Guimaraes &lt;samuel.guimaraes@eldorado.org.br&gt;; kimchi-devel@ovirt.org<br>
<b>Subject:</b> Re: [Kimchi-devel] [RFC] Wok / Ginger sidebar<o:p></o:p></span></p>
</div>
</div>
<p class="MsoNormal"><o:p>&nbsp;</o:p></p>
<p class="MsoNormal" style="margin-bottom:12.0pt">Hi Samuel,<br>
<br>
I'd say to keep the menu always visible in a left panel/menu and with a default first view when user enters on Administration tab.<br>
<br>
Regards,<br>
Aline Manera<span style="font-size:12.0pt;mso-fareast-language:PT-BR"><o:p></o:p></span></p>
<div>
<p class="MsoNormal">On 07/11/2016 06:12 PM, Samuel Henrique De Oliveira Guimaraes wrote:<o:p></o:p></p>
</div>
<blockquote style="margin-top:5.0pt;margin-bottom:5.0pt">
<p class="MsoNormal"><span style="color:#1F497D">Hi team,</span><o:p></o:p></p>
<p class="MsoNormal"><span style="color:#1F497D">&nbsp;</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D">Based on the feedback I&#8217;ve created a new mockup putting all Ginger features in a floating vertical menu (I&#8217;ve only put some of them but you&#8217;ll get the idea).</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D">&nbsp;</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D">Samuel</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D">&nbsp;</span><o:p></o:p></p>
<div>
<div style="border:none;border-top:solid #E1E1E1 1.0pt;padding:3.0pt 0cm 0cm 0cm">
<p class="MsoNormal"><b><span lang="EN-US" style="color:windowtext;mso-fareast-language:PT-BR">From:</span></b><span lang="EN-US" style="color:windowtext;mso-fareast-language:PT-BR">
<a href="mailto:kimchi-devel-bounces@ovirt.org">kimchi-devel-bounces@ovirt.org</a> [<a href="mailto:kimchi-devel-bounces@ovirt.org">mailto:kimchi-devel-bounces@ovirt.org</a>]
<b>On Behalf Of </b>Chandra Shekhar Reddy Potula<br>
<b>Sent:</b> quinta-feira, 7 de julho de 2016 09:50<br>
<b>To:</b> <a href="mailto:kimchi-devel@ovirt.org">kimchi-devel@ovirt.org</a><br>
<b>Subject:</b> Re: [Kimchi-devel] [RFC] Wok / Ginger sidebar</span><o:p></o:p></p>
</div>
</div>
<p class="MsoNormal">&nbsp;<o:p></o:p></p>
<p>Hi Samuel,<o:p></o:p></p>
<p>First of all thanks for your extensive investigation on various possibilities in front of us !!!<o:p></o:p></p>
<p>I personally liked the option <span lang="EN-US"><a href="https://www.sitepoint.com/">https://www.sitepoint.com/</a> which would be ideal to have with possibly 3 level navigation.</span><o:p></o:p></p>
<p><span lang="EN-US">Nevertheless, let us start with having side pane to provide immediate relief with the way proposed in the figures
</span>ginger_sidebar_1.png and ginger_storage_2.png and eventually make it more better if it is too complex doing all of it ones.<o:p></o:p></p>
<p>I agree with Daniel recommendation for the for ginger_sidebar*.png, ie. have one second level tab for now and all the functionalities go under the side pane which would be enabler in future some thing similar to your proposal of
<span lang="EN-US"><a href="https://www.sitepoint.com/">https://www.sitepoint.com/</a></span><o:p></o:p></p>
<div>
<p class="MsoNormal">Thanks and Regards<br>
Chandra<br>
<br>
On 7/5/16 12:32 AM, Samuel Henrique De Oliveira Guimaraes wrote:<o:p></o:p></p>
</div>
<blockquote style="margin-top:5.0pt;margin-bottom:5.0pt">
<p class="MsoNormal">Hi team,<o:p></o:p></p>
<p class="MsoNormal">&nbsp;<o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">We currently have an issue with Ginger/Gingerbase navigation bar in small screen resolutions and we also have huge tables in System Services page. Since working on the navigation bar involves editing Wok styles, I&#8217;m sending
 this e-mail to Wok mailing list instead of Ginger group.</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">I looked for successful combinations of sidebar &#43; horizontal navigation bars and so far I couldn&#8217;t find any example that would exactly fit with Wok and its plugins. The majority of examples I&#8217;m listing below are very
 good with traditional pages with deep subcategories and the navigation bars can work as sitemaps and replace breadcrumbs:</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">&nbsp;</span><o:p></o:p></p>
<p class="MsoListParagraph" style="text-indent:-18.0pt;mso-list:l0 level1 lfo2"><![if !supportLists]><span style="font-family:Symbol"><span style="mso-list:Ignore">·<span style="font:7.0pt &quot;Times New Roman&quot;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span></span></span><![endif]><span lang="EN-US"><a href="http://www.worldwildlife.org/">http://www.worldwildlife.org/</a> -
<a href="https://vimeo.com/166812605">https://vimeo.com/166812605</a></span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">&nbsp;</span><o:p></o:p></p>
<p class="MsoListParagraph" style="text-indent:-18.0pt;mso-list:l0 level1 lfo2"><![if !supportLists]><span style="font-family:Symbol"><span style="mso-list:Ignore">·<span style="font:7.0pt &quot;Times New Roman&quot;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span></span></span><![endif]><span lang="EN-US"><a href="https://www.theguardian.com/us">https://www.theguardian.com/us</a> -
<a href="https://vimeo.com/166812599">https://vimeo.com/166812599</a></span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">&nbsp;</span><o:p></o:p></p>
<p class="MsoListParagraph" style="text-indent:-18.0pt;mso-list:l0 level1 lfo2"><![if !supportLists]><span style="font-family:Symbol"><span style="mso-list:Ignore">·<span style="font:7.0pt &quot;Times New Roman&quot;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span></span></span><![endif]><span lang="EN-US"><a href="https://next.ft.com/fastft">https://next.ft.com/fastft</a> -
<a href="https://vimeo.com/166812597">https://vimeo.com/166812597</a></span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">&nbsp;</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">Wok currently has two navigation levels. Kimchi doesn&#8217;t have multiple sections but Ginger and Gingerbase uses collapsible panel groups to separate sections that could be third level elements on a sidebar. This was already
 discussed when we moved some features from Ginger to Gingerbase but I think we could achieve a functional sidebar with up to three levels without using a &#8220;landing page&#8221; for second-level elements.</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">&nbsp;</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">In the attached screenshots ginger_sidebar1 and ginger_sidebar2 are mockups for an off-canvas menu that would slide the main content and hide itself once an option is clicked. It would also hide the other panel accordions.
 Here are two off-canvas menu in action:</span><o:p></o:p></p>
<p class="MsoListParagraph" style="text-indent:-18.0pt;mso-list:l1 level1 lfo4"><![if !supportLists]><span style="font-family:Symbol"><span style="mso-list:Ignore">·<span style="font:7.0pt &quot;Times New Roman&quot;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span></span></span><![endif]><span lang="EN-US"><a href="http://codepen.io/SitePoint/full/uIemr/">http://codepen.io/SitePoint/full/uIemr/</a></span><o:p></o:p></p>
<p class="MsoListParagraph"><span lang="EN-US">&nbsp;</span><o:p></o:p></p>
<p class="MsoListParagraph" style="text-indent:-18.0pt;mso-list:l1 level1 lfo4"><![if !supportLists]><span style="font-family:Symbol"><span style="mso-list:Ignore">·<span style="font:7.0pt &quot;Times New Roman&quot;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span></span></span><![endif]><span lang="EN-US"><a href="https://codepen.io/benske/full/cxrta/">https://codepen.io/benske/full/cxrta/</a></span><o:p></o:p></p>
<p class="MsoListParagraph"><span lang="EN-US">&nbsp;</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">Since this would require a change in Wok tabs and ginger/gingerbase tab-ext.xml, I think we could implement something entirely different that would with Wok and all plugins. This site menu only have first-level options
 on the sidebar but I think we could add collapsible links like a tree-table menu:
<a href="https://www.sitepoint.com/">https://www.sitepoint.com/</a></span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">In addition to the sidebar, we could put a search/filter input on the top that would allow the user to type the desired option and show its position on the menu. Please take a look at the remaining attached screenshots.
 I did one variation with the content aligned to the center and another one aligned to the left.
</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">&nbsp;</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">Regards,</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">Samuel</span><o:p></o:p></p>
<p class="MsoNormal"><span style="font-size:12.0pt"><br>
<br>
<br>
<br>
</span><o:p></o:p></p>
<pre>_______________________________________________<o:p></o:p></pre>
<pre>Kimchi-devel mailing list<o:p></o:p></pre>
<pre><a href="mailto:Kimchi-devel@ovirt.org">Kimchi-devel@ovirt.org</a><o:p></o:p></pre>
<pre><a href="http://lists.ovirt.org/mailman/listinfo/kimchi-devel">http://lists.ovirt.org/mailman/listinfo/kimchi-devel</a><o:p></o:p></pre>
</blockquote>
<p class="MsoNormal"><span style="font-size:12.0pt">&nbsp;</span><o:p></o:p></p>
<p class="MsoNormal"><span style="font-size:12.0pt;font-family:&quot;Times New Roman&quot;,serif;mso-fareast-language:PT-BR"><br>
<br>
<br>
<o:p></o:p></span></p>
<pre>_______________________________________________<o:p></o:p></pre>
<pre>Kimchi-devel mailing list<o:p></o:p></pre>
<pre><a href="mailto:Kimchi-devel@ovirt.org">Kimchi-devel@ovirt.org</a><o:p></o:p></pre>
<pre><a href="http://lists.ovirt.org/mailman/listinfo/kimchi-devel">http://lists.ovirt.org/mailman/listinfo/kimchi-devel</a><o:p></o:p></pre>
</blockquote>
<p class="MsoNormal"><span style="font-size:12.0pt;font-family:&quot;Times New Roman&quot;,serif;mso-fareast-language:PT-BR"><o:p>&nbsp;</o:p></span></p>
</div>
</body>
</html>