Re: [Design Update] Visual design of query editor and results table

On Wed, Apr 12, 2017 at 11:26 AM Dave Page <dpage(at)pgadmin(dot)org> wrote:

> Hi
>
> On Wed, Apr 12, 2017 at 4:20 PM, Shirley Wang <swang(at)pivotal(dot)io> wrote:
>
> Hello!
>
> Our team is starting to work on changes to the results table, including:
>
> 1. changing unselected columns and row colors to grey
>
>
> I'd like to see the entire window to see if that seems to make things too
> flat, but no objection to a colour change in principal.
>

We're still working on styling the top navigation and also the bar with
data output, explain, messages, and history, but here's what it looks like
now with the current navigation styling. Because styles for the results
table isn't impacting other modules or dialogs (exception being 'view data'
options), we can come to a conclusion about styling for the table first,
and take the results table into consideration when it comes to styling
other parts of the editor.

I think that the table styling patch can be merged independently from top
navigation styles (this way we're not held up by design and we can release
and gather feedback on the results table). Here's what it would look like
with the current navigation in pgAdmin4.

*open query tool and see results*

*[image: results table wcurrent nav.png]*
*select columns and rows*
[image: results table wcurrent nav - selected.png]

*Right click on tables in browser > view all data*
[image: results table _view-all-data.png]

*Right click on tables in browser > view all data, select columns and rows*
[image: results table_ view-all-data-selected.png]

> 3. differentiating header text so that field name is bold and datatype is
> in brackets
>
>
> Not sure about the brackets - for example, it might look weird with array
> types, e.g.
>
> [character varying(50)[]]
>
> Given that the column name is in bold, and the type isn't, perhaps the
> brackets should be omitted?
>

Oh good point. It seems like there are a few datatypes that require
brackets. I think having font size for datatypes be slightly smaller than
field name also works in establishing some visual hierarchy within the
text.

Just a note about the screens with highlighting - the selection implies
that using the shift (or command or control) key to select a group of cells
will work. This keyboard shortcut does not exist now, but is future work.
The screens are done that way to show what highlighted columns and rows
would look like.