Re: [Design update] Style guide for pgAdmin4

Hi,

I agree with both the spacing, and the height. Other questions:

- Should icons have a dividing line between them? I think so.

- What determines the light blue shading of a row? I believe it should
always be the one with focus (assuming there is one with focus)

On Wed, Apr 19, 2017 at 9:49 PM, Shirley Wang <swang(at)pivotal(dot)io> wrote:

> Hi,
>
> As I was going through the app, I noticed some inconsistencies with tables
> in popups, namely the height of each row and width between icons.
>
> Unclear as which should be considered the right one.
> [image: current_styles.png]
>
> I propose documenting this:
>
> - Even spacing between icons
> - height of each row is always at 28px, regardless if there's a drop down
> menu or not.
> [image: dropdown-icons_spaced.png]
>
> [image: text_input-icons_spaced.png]
>
> Is there anything I'm missing?
>
> Shirley
>
>
> On Tue, Apr 18, 2017 at 12:11 PM Shirley Wang <swang(at)pivotal(dot)io> wrote:
>
>> Hello Hackers,
>>
>> We've started to work on creating a style guide for pgAdmin4.
>>
>> Our goals with the style guide are to:
>> - have a single source of truth for visual design and workflows
>> - make it easier when adding or updating a section to the app to maintain
>> consistency
>>
>> How we'll know we're successful:
>> - conversations about design are more high level, driven by user needs
>> and pains
>> - decreasing (or at least not adding to) current css bloat due to
>> templating and overwrites
>>
>> Process for creating a style guide
>> We're going to start from the smallest building blocks of the site and
>> use that to define larger and larger components. Currently, we're taking
>> inventory of current styles in the app, including colors, typography,
>> buttons, dialogs etc.
>>
>> Given how the front end is currently structured, we were thinking that
>> static documentation of styles would be a good MVP, at least until we
>> determine what the best documentation for developers on the community would
>> be. Attached is the inventory of styles as of now, including a Sketch file
>> (a tool for creating design mockups, also where I've been keeping track of
>> styles). You can also access files here on Google drive here:
>> https://drive.google.com/drive/folders/0B7jMyxF3NH5lb2JxREUxclp1Unc?
>> usp=sharing
>>
>> Please feel free to edit the Sketch file- my only ask is new versions
>> hare named accordingly.
>>
>> *If you have worked on front end features in pgAdmin before, we'd like to
>> chat with you about your process and what it was like to implement styles. *Let
>> us know some times for a chat!
>>
>> Thanks,
>> Shirley
>>
>>

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

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