Re: [Design update] Style guide for pgAdmin4

Hello!

*Update on style guide location*
We're going to move the agreed upon styles from Figma onto a webpage that
will be accessible by everyone. We've decided to have a static site, with
the html and css available to copy and paste. We'll add components to the
style guide after we update the current UI with new styles.

*Dropdown styles*
I noticed that some drop downs include a 'x' next to the current option in
the text field:

[image: x in dropdown menu.png]

The 'x' and the down arrow functionally do the same thing, and it seems
redundant to have both. I would suggest removing the 'x' since selecting
another option from the dropdown will automatically replace the current
option.

*Button toggles vs checkboxes*
In some cases within dialogs, a toggle is used to define yes or no, while
in other cases a radio button is used to define yes or no:
[image: toggle.png][image: checkbox.png]

It does seem like 'Connect now?' and 'Save password' (in 'Connection' tab
within 'Create - Server') are the only places where checkboxes are used, is
there a reason why these are different? I think we should just choose one,
unless there was a specific reason as to why both check boxes and toggles
are used.

On Thu, May 4, 2017 at 4:09 AM Dave Page <dpage(at)pgadmin(dot)org> wrote:

> On Wed, May 3, 2017 at 11:06 PM, Shirley Wang <swang(at)pivotal(dot)io> wrote:
>>
>>
>>
>>> So to summarise:
>>>
>>> - I'm happy to see the number of grays reduced as proposed.
>>> - I don't like the dark gray column headers.
>>> - I think the column and row headers should be the same colour.
>>> - I think we should review the bluish-gray used for the codemirror
>>> gutter (though, it looks fine for the alternate rows)
>>> - We should use a light-gray for the disabled codemirror, with slightly
>>> faded text.
>>>
>>> What do you think?
>>>
>>>
>> Gotcha. Here's the query tool with the same grey as the row header.
>> [image: view results- same greys.png]
>> I quite like this grey as a header.
>>
>
> Yes, me too.
>
>
>>
>> And in the 'View all Data'
>> [image: view all data- greys.png]
>> I made the codemirror and codemirror gutter the same color with a 50%
>> opacity on the text. It looks like its lighter in the 'View all data'
>> mockup, but that's because the codemirror being grey makes the gutter lose
>> contrast.
>>
>
> Works for me :-)
>
>
>>
>> I'm not sure why it looks bluish grey for you, it's a neutral grey both
>> times (#f9f9f9). Perhaps try editing the color in Chrome Inspector to see
>> if it makes a difference?
>>
>>
> Likely just my ageing eyes.
>
> --
> Dave Page
> Blog: http://pgsnake.blogspot.com
> Twitter: @pgsnake
>
> EnterpriseDB UK: http://www.enterprisedb.com
> The Enterprise PostgreSQL Company
>