Re: [Design update] Style guide for pgAdmin4

Hi

On Tue, May 2, 2017 at 8:47 PM, Shirley Wang <swang(at)pivotal(dot)io> wrote:

> Hello!
>
> *Update on colors*
> As of now, there are several greys are very similar, used across multiple
> areas of pgAdmin with no overlaps on color.
> [image: greys-in-pgAdmin.png]
> Here are the greys organized by scale, with the narrowed down greys
> underneath:
> [image: v1- palette.png]
>
> The palette of 6 greys is flexible enough to be used across all the areas
> within pgAdmin, and easier to map consistency.
>

OK.

> [image: v1.png]
> Here's what it looks like with the 6 greys
>
> *Dropdown menus*
> Change from having white hover to dark grey, keeps text color the same
> [image: Screen Shot 2017-05-02 at 11.35.54 AM.png]
>

That looks fine to me.

>
> *Query tool*
> [image: greys-v2 (1).png]
>

I *really* don't like the dark gray on the grid header - it's too imposing
and grabs the eye away from the data. How would it look if we used the
lighter gray that is seen on the row headers (the first column)? Looking at
Excel, it uses the same colour for both the row and the column headers,
though it's more like the bluish colour we're using for alternate rows (not
that we should use that - see below).

> I think some interesting things with color contrast are introduced once we
> look at the uneditable query editor as accessed through 'View all Data'.
> [image: viewalldata-greys (2).png]
>
I'm not overly convinced about the gray used for the codemirror gutter. It
looks a little blue. Regarding the inactive edit area, I don't think that
looks wrong (unlike one of the earlier drafts where the info bar was the
same colour). However, I'm not against changing it.

> We can address this either by changing the greys in the results table, or
> changing the grey in the query editor. As of now, I think changing the
> query editor grey might work better to make sure that when columns are
> selected in the 'Data Output' panel, they stand out with the blue.
>
> If we lighten the editor table and fade out the text in the editor, it
> would look like this:
> [image: viewalldata-lightgrey-opacity.png]
>

I could live with that (assuming the loss of focus/definition is an
artefact of the mockup).

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?

Thanks!

> Thoughts?
>
> On Wed, Apr 26, 2017 at 11:24 PM Ashesh Vashi <
> ashesh(dot)vashi(at)enterprisedb(dot)com> wrote:
>
>> On Wed, Apr 26, 2017 at 9:56 PM, Dave Page <dpage(at)pgadmin(dot)org> wrote:
>>
>>>
>>>
>>> On Wed, Apr 26, 2017 at 4:45 PM, Shirley Wang <swang(at)pivotal(dot)io> wrote:
>>>
>>>>
>>>>
>>>> I think the addition of icons and some copy would help:
>>>> [image: Screen Shot 2017-04-26 at 11.28.41 AM.png]
>>>>
>>>
>>> Agreed.
>>>
>> +1
>>
>> --
>>
>> Thanks & Regards,
>>
>> Ashesh Vashi
>> EnterpriseDB INDIA: Enterprise PostgreSQL Company
>> <http://www.enterprisedb.com/>
>>
>>
>> *http://www.linkedin.com/in/asheshvashi*
>> <http://www.linkedin.com/in/asheshvashi>
>>
>>>
>>> --
>>> Dave Page
>>> Blog: http://pgsnake.blogspot.com
>>> Twitter: @pgsnake
>>>
>>> EnterpriseDB UK: http://www.enterprisedb.com
>>> The Enterprise PostgreSQL Company
>>>
>>

--
Dave Page
Blog: http://pgsnake.blogspot.com
Twitter: @pgsnake

EnterpriseDB UK: http://www.enterprisedb.com
The Enterprise PostgreSQL Company