[ovirt-devel] New design for the Gerrit UI

Wed May 10 20:56:56 UTC 2017

It looks great to me, except for one issue. The contrast between the box
around the active item on the second row and the header background color is
too low to make the active item easily identifiable. The same goes for the
box on the first row, but the underline makes it a non-issue. I recommend
either adding an underline to the second row active item or selecting a
better background color for it.

-Phillip Bailey

On Mon, May 8, 2017 at 2:40 AM, Eldan Hildesheim <info at eldanet.com> wrote:

> Hi,
> Can we insert a new css package easily? Perhaps I can merge Patternfly
> inside which will be very suitable for this case.
> E.
>
> On May 7, 2017, at 11:41 PM, Roy Golan <rgolan at redhat.com> wrote:
>
>
> The footer links are useful but the footer itself has no presence.  Most
> dashboards will fill a page and with such a thin footer nobody is going to
> look at what is has to offer. So we can make the footer in a different
> color and noticeable etc or move the links to the header.
>
> On Sun, May 7, 2017 at 10:35 AM Barak Korren <bkorren at redhat.com> wrote:
>
>> The current scheme seems a little buggy on FF. See how the top green bar
>> is not stretched to cover the top of the oVirt logo.
>>
>>
>>
>> On 6 May 2017 at 12:49, Yaniv Kaul <ykaul at redhat.com> wrote:
>>
>>>
>>>
>>> On Fri, May 5, 2017 at 5:33 PM, Greg Sheremeta <gshereme at redhat.com>
>>> wrote:
>>>
>>>> Here's my take.
>>>>
>>>> The line on the top is a little thicker than I like, but we have the
>>>> same thickness in oVirt (I checked). I'm ok with shrinking it in both
>>>> places.
>>>>
>>>> I put in the logo from the oVirt login page. I added patternfly and
>>>> bootstrap. Changed the font to OpenSans. Positioned things and fixed
>>>> paddings. Changed the button and form field to patternfly type (blue button)
>>>>
>>>
>>> Looks very good now. I wonder how far are we from being ADA compliant
>>> (also a general question to our UI - I know Patternfly should help us there
>>> as well).
>>> Y.
>>>
>>>
>>>
>>>>
>>>> Best wishes,
>>>> Greg
>>>>
>>>>
>>>> On Fri, May 5, 2017 at 2:15 AM, Roy Golan <rgolan at redhat.com> wrote:
>>>>
>>>>>
>>>>> Adding UX people +Eldan Hildesheim <info at eldanet.com> +Alexander Wels
>>>>> <awels at redhat.com> +Greg Sheremeta <gshereme at redhat.com>
>>>>>
>>>>> On Fri, May 5, 2017 at 2:32 AM Martin Perina <mperina at redhat.com>
>>>>> wrote:
>>>>>
>>>>>> On Thu, May 4, 2017 at 1:13 PM, Nir Soffer <nsoffer at redhat.com> wr
>>>>>> ote:
>>>>>>
>>>>>>>
>>>>>>>
>>>>>>> On Thu, May 4, 2017 at 4:26 PM Evgheni Dereveanchin <
>>>>>>> ederevea at redhat.com> wrote:
>>>>>>>
>>>>>>>> Thanks everyone for the great feedback!
>>>>>>>>
>>>>>>>> So there's two options I see now:
>>>>>>>> 1) keep the default header scheme with white background, just add
>>>>>>>> the project logo into the corner
>>>>>>>> 2) try to adapt to the Patternfly scheme as used in oVirt's Admin
>>>>>>>> UI currently.
>>>>>>>>
>>>>>>>> I've swapped the header background color to #393f45 as used in
>>>>>>>> oVirt for a quick test:
>>>>>>>> https://gerrit-staging.phx.ovirt.org/
>>>>>>>>
>>>>>>>
>>>>>>> Looks good!
>>>>>>>
>>>>>>
>>>>>> Much better for my eyes now, thanks a lot!
>>>>>> 
>>>>>>
>>>>>>
>>>>>>>
>>>>>>> The oVirt logo needs little more space around it, and it also should
>>>>>>> be centered vertically.
>>>>>>> Modifying the logo margin to 8px and width to 108px works for me
>>>>>>> using chrome,
>>>>>>> see attached screenshot.
>>>>>>>
>>>>>>> <Screenshot from 2017-05-04 20-11-39.png>
>>>>>>>
>>>>>>> Nir
>>>>>>>
>>>>>>> Is this more readable? If yes - I can continue working in this
>>>>>>>> direction to add gradients
>>>>>>>> and other patternfly style elements.
>>>>>>>>
>>>>>>> Otherwise I'll just go with option 1 and stick to the default style
>>>>>>>> we have now.
>>>>>>>>
>>>>>>>> On Thu, May 4, 2017 at 2:45 PM, Martin Sivak <msivak at redhat.com>
>>>>>>>> wrote:
>>>>>>>>
>>>>>>>>> > It will help if someone can suggest an alternate CSS which we
>>>>>>>>> can use or specific color codes,
>>>>>>>>>
>>>>>>>>> Well.. keep it as it is or make it really dark (like the
>>>>>>>>> patternfly menu). I do not care about logos but big area filled with
>>>>>>>>> non-neutral color is always going to be an issue.
>>>>>>>>>
>>>>>>>>> Martin
>>>>>>>>>
>>>>>>>>> On Thu, May 4, 2017 at 2:15 PM, Eyal Edri <eedri at redhat.com>
>>>>>>>>> wrote:
>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> On Thu, May 4, 2017 at 3:05 PM, Martin Perina <mperina at redhat.com
>>>>>>>>>> > wrote:
>>>>>>>>>>
>>>>>>>>>>> I agree with Milan and Martin, even after few minutes looking at
>>>>>>>>>>> it, the green
>>>>>>>>>>> with combination of white background just made my eyes burning
>>>>>>>>>>> :-(
>>>>>>>>>>>
>>>>>>>>>>> Would it be possible to use more darker colors (at least for top
>>>>>>>>>>> banner/menu)?
>>>>>>>>>>> For example darker colors we use in oVirt engine welcome page ...
>>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> Thanks for the feedback,
>>>>>>>>>> It will help if someone can suggest an alternate CSS which we can
>>>>>>>>>> use or specific color codes,
>>>>>>>>>> otherwise it will be long trial and error process until we'll
>>>>>>>>>> find something that will suite everyone.
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>>
>>>>>>>>>>>
>>>>>>>>>>> Martin
>>>>>>>>>>>
>>>>>>>>>>> On Thu, May 4, 2017 at 5:53 AM, Martin Sivak <msivak at redhat.com>
>>>>>>>>>>>  wrote:
>>>>>>>>>>>
>>>>>>>>>>>> I agree with Milan here. The light green background makes the
>>>>>>>>>>>> menu
>>>>>>>>>>>> items to be almost unreadable, the search button (slightly
>>>>>>>>>>>> different
>>>>>>>>>>>> green color) blends with the background and generally the color
>>>>>>>>>>>> pulls
>>>>>>>>>>>> my eyes away from the content. I wouldn't feel comfortable
>>>>>>>>>>>> looking at
>>>>>>>>>>>> the screen for a whole day.
>>>>>>>>>>>>
>>>>>>>>>>>> Martin
>>>>>>>>>>>>
>>>>>>>>>>>> On Thu, May 4, 2017 at 9:57 AM, Milan Zamazal <
>>>>>>>>>>>> mzamazal at redhat.com> wrote:
>>>>>>>>>>>> > Evgheni Dereveanchin <ederevea at redhat.com> writes:
>>>>>>>>>>>> >
>>>>>>>>>>>> >> The Infra team is working on customizing the look of Gerrit
>>>>>>>>>>>> to make it fit
>>>>>>>>>>>> >> better with other oVirt services. I want to share the result
>>>>>>>>>>>> of this
>>>>>>>>>>>> >> effort. Hopefully we can gather some feedback before
>>>>>>>>>>>> applying the design to
>>>>>>>>>>>> >> oVirt's instance of Gerrit.
>>>>>>>>>>>> >>
>>>>>>>>>>>> >> Please visit the Staging instance to check it out:
>>>>>>>>>>>> >>
>>>>>>>>>>>> >>   https://gerrit-staging.phx.ovirt.org/
>>>>>>>>>>>> >
>>>>>>>>>>>> > Thank you for the preview.  While it fits better with oVirt
>>>>>>>>>>>> services,
>>>>>>>>>>>> > there is one thing that makes me uncomfortable with it: low
>>>>>>>>>>>> contrast.
>>>>>>>>>>>> > The top green bar is probably directly violating Web
>>>>>>>>>>>> Accessibility
>>>>>>>>>>>> > Guidelines (AA level; see
>>>>>>>>>>>> > https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast),
>>>>>>>>>>>> but I
>>>>>>>>>>>> > find all the green parts harder to read than in the current
>>>>>>>>>>>> version.
>>>>>>>>>>>> > So it would be nice if the contrast could be improved.
>>>>>>>>>>>> >
>>>>>>>>>>>> > Thanks,
>>>>>>>>>>>> > Milan
>>>>>>>>>>>> > _______________________________________________
>>>>>>>>>>>> > Devel mailing list
>>>>>>>>>>>> > Devel at ovirt.org
>>>>>>>>>>>> > http://lists.ovirt.org/mailman/listinfo/devel
>>>>>>>>>>>> _______________________________________________
>>>>>>>>>>>> Devel mailing list
>>>>>>>>>>>> Devel at ovirt.org
>>>>>>>>>>>> http://lists.ovirt.org/mailman/listinfo/devel
>>>>>>>>>>>>
>>>>>>>>>>>
>>>>>>>>>>>
>>>>>>>>>>> _______________________________________________
>>>>>>>>>>> Infra mailing list
>>>>>>>>>>> Infra at ovirt.org
>>>>>>>>>>> http://lists.ovirt.org/mailman/listinfo/infra
>>>>>>>>>>>
>>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> --
>>>>>>>>>> EYAL EDRI
>>>>>>>>>>
>>>>>>>>>> ASSOCIATE MANAGER
>>>>>>>>>>
>>>>>>>>>> RHV DEVOPS
>>>>>>>>>>
>>>>>>>>>> EMEA VIRTUALIZATION R&D
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> Red Hat EMEA <https://www.redhat.com/>
>>>>>>>>>> <https://red.ht/sig> TRIED. TESTED. TRUSTED.
>>>>>>>>>> <https://redhat.com/trusted>
>>>>>>>>>> phone: +972-9-7692018 <+972%209-769-2018>
>>>>>>>>>> irc: eedri (on #tlv #rhev-dev #rhev-integ)
>>>>>>>>>>
>>>>>>>>>
>>>>>>>>>
>>>>>>>>> _______________________________________________
>>>>>>>>> Devel mailing list
>>>>>>>>> Devel at ovirt.org
>>>>>>>>> http://lists.ovirt.org/mailman/listinfo/devel
>>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>> --
>>>>>>>> Regards,
>>>>>>>> Evgheni Dereveanchin
>>>>>>>> _______________________________________________
>>>>>>>> Devel mailing list
>>>>>>>> Devel at ovirt.org
>>>>>>>> http://lists.ovirt.org/mailman/listinfo/devel
>>>>>>>>
>>>>>>>
>>>>>>> _______________________________________________
>>>>>>> Devel mailing list
>>>>>>> Devel at ovirt.org
>>>>>>> http://lists.ovirt.org/mailman/listinfo/devel
>>>>>>>
>>>>>> _______________________________________________
>>>>>> Infra mailing list
>>>>>> Infra at ovirt.org
>>>>>> http://lists.ovirt.org/mailman/listinfo/infra
>>>>>>
>>>>>
>>>>
>>>>
>>>> --
>>>> Greg Sheremeta, MBA
>>>> Sr. Software Engineer
>>>> Red Hat, Inc.
>>>> gshereme at redhat.com
>>>>
>>>> _______________________________________________
>>>> Devel mailing list
>>>> Devel at ovirt.org
>>>> http://lists.ovirt.org/mailman/listinfo/devel
>>>>
>>>
>>>
>>> _______________________________________________
>>> Infra mailing list
>>> Infra at ovirt.org
>>> http://lists.ovirt.org/mailman/listinfo/infra
>>>
>>>
>>
>>
>> --
>> Barak Korren
>> RHV DevOps team , RHCE, RHCi
>> Red Hat EMEA
>> redhat.com | TRIED. TESTED. TRUSTED. | redhat.com/trusted
>> _______________________________________________
>> Infra mailing list
>> Infra at ovirt.org
>> http://lists.ovirt.org/mailman/listinfo/infra
>>
>
>
> _______________________________________________
> Devel mailing list
> Devel at ovirt.org
> http://lists.ovirt.org/mailman/listinfo/devel
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.ovirt.org/pipermail/devel/attachments/20170510/7416bc86/attachment-0001.html>