UX: Query editors general layout improvement

[torkelo]

Think there is some improvement needed in how queries are layout out.

Problem, the current layout of the letter and eye to the right causes some empty unused space on the rows below.

Same problem for elastic search and cloudwatch and OpenTSDB

Idea 1) put query letter and eye to the right,

Idea 2) Put letter to the left outside the rows, move eye to the right
(no image of this idea).

On thing that became apparent was that when I moved the letter and eye to the right spacing between the queries becomes necessary as the queries blend into each other more.

[torkelo]

ping @mattttt

[bulletfactory]

Not sure if it's just because I'm used to seeing the eye and query letter
on the left, but having on the right makes it a little harder to scan. The
important pieces of info (the query properties) are all on the left, so
that's where most of my attention is focused. and it's nice to see the
visibility and letter there.

Taking another look at idea 1, I do like the visual grouping you've added.

I feel like the letter and eye need to live next to each other. Separating
them causes a bit of a disconnect, when in fact the 2 are related (toggling
the visibility of query A, B, etc)

On Sun, Jan 31, 2016 at 12:03 PM Torkel Ödegaard notifications@github.com
wrote:

ping @mattttt https://github.com/mattttt

—
Reply to this email directly or view it on GitHub
#3900 (comment).

[torkelo]

@bulletfactory yea, I agree, the letter and eye work better together and to the left, it's just sad that they require an indentation of the lower rows

[mattttt]

I dont think the issue is really about the unused space, but the perceived waste of space. Im thinking we can detach the Letter and Eye from the tightform somehow, making the query editor itself feel very tight/efficient, and that unused space will disappear to the eye.

I dont like moving the letter to the right, as it feels like a very important identifier (instead of an attribute of the query). Also, agreed with @bulletfactory's point on keep those connected.

Will have to try a few mockups to see if it can work the way I'm thinking.

[mattttt]

Taking a break from something else to explore some ideas here. I prefer the third option.

[bulletfactory]

I think 3 works best as well.

On Tue, Feb 2, 2016 at 4:16 PM Matt Toback notifications@github.com wrote:

Taking a break from something else to explore some ideas here. I prefer
the third option.

[image: image]
https://cloud.githubusercontent.com/assets/2886187/12764467/ef530562-c9c7-11e5-9496-4c367033981d.png

[image: image]
https://cloud.githubusercontent.com/assets/2886187/12764402/8553f57c-c9c7-11e5-8e57-58316bffc911.png

[image: image]
https://cloud.githubusercontent.com/assets/2886187/12764430/b2cd90a8-c9c7-11e5-810e-653995649921.png

—
Reply to this email directly or view it on GitHub
#3900 (comment).

[mattttt]

I'd also like to see a collapsed state introduced somewhere as well. I dont like the way this looks, but just to get the brain juices flowing:

[torkelo]

@mattttt yea, the collapsed state is a great idea, hm.. damit that could be important to nail down before 3.0 beta release as it could affect the query editor shared component, I kind of like the middle option best of your previous comment (with the letter and eye hanging out).

Something else to think about is the blue color and font, never been truly happy with the blue color and boldness (too bold), but never found a good alternative that fills the same function

[mattttt]

@torkelo / @bulletfactory: Would this be a job for....semi-bold?!?!?

[torkelo]

@mattttt that was my thinking as well :)

[torkelo]

think I will close this, maybe create new one issue to discuss what the query editors could look like inspired by / or using the new forms styles

[torkelo]

Testing how the new form styles would look like for InfluxDB Query editor.

Overall works pretty well, but looks a strange with all dark areas sort of creating a tetris like profile.

Like the raw query mode:

Think the raw query mode look could work as a general look for a collapsed state of a query (even for data sources that dont have a string based raw query, the collapsed mode could just show a single line text representation of the query that tries to capture the gist of the query)