667235 - too many horizontal alignment discontinuities in main mail window theme

Status: NEW

(Thunderbird :: Mail Window Front End, defect)

Description

[Asa Dotzler [:asa]]

Latest Thunderbird nightly builds main mail window has too many disjointed horizontal alignment issues. Look at all of the toolbars and rows of text and note that they never line up. This is especially bad in my preferred three column view. 

The bottom border under "All Folders" selector widget thing doesn't align with the Quick Filter toolbar bottom. The First account in the list doesn't align with the tree column sorter for the threadpane. The headers in the header pane don't align with anything to the left of them (the widgets or text rows in the threadpane or the folder pane). 

It's just all kind of a mess. I don't know how to put it better than that.

Comment 1

[Wayne Mery (:wsmwk)]

(wth)

Comment 2

[Wayne Mery (:wsmwk)]

Attachment: virtical and classic layout

I scratched my head a bit without a screen shot, (a picture ... ).
Here it is.  It is has been slightly irritating. qfb (shown in the vertical layout) makes it even funkier.

I don't follow UI stuff, so someone will need to check what potential dupes exist (there may be multiple), if any.

Comment 3

[Asa Dotzler [:asa]]

Attachment: rough draft of tbird visual alignment based on 2px and 16px grids

Thanks Wayne, for the illustration.  I found a few minutes and here's something that I think is a little more complete. I'm in no way saying that my design is correct here. You might change anything around. The point of this illustration is to show what kind of difference just a little bit of alignment can make in your design.  Look at the middle screenshot and the bottom screenshot. See how much more visually pleasing the middle one is compared to the bottom one? It's not because of which items are placed where, it's simply because the various items are sized and aligned with some basic continuity. This mock-up is based on 2px and 16px. Pick what ever it is you want for basic ratios, that's not the important part. The important part is to get some rudimentary alignment of visual elements.

Comment 4

[Asa Dotzler [:asa]]

oops, 5px and 16px, not 2px and 16px.  but none of that's really important (well, it probably is, but it's not the main point.) what's important is making things line up some.

Comment 5

[Matias Jose]

Based on curent interface I see in the last daily build, I made a mock up (I'm bad with photoshop, sorry) with just a few touches which probably will make this look better.

http://grab.by/b3j4

I've put texts indicating the not so obvious changes.

Besides what you see there, I'd like to take away glass style for the toolbar background. (I'm proposing also to implement the unified toolbar in that view, which will brak-down in a toolbar in between the message list pane and the message contents pane when in classic view). May be if we take away glass background to the toolbar and tabs (for now, until we have tabs on top) we can make it look even nicer.

Comment 6

[Matias Jose]

I suck at photoshop, but here's the screenshot with no glass in the toolbar, just to give an example. Imagine it's all nice and neat:

http://grab.by/b3jo

Comment 7

[Blake Winton (:bwinton) (:☕️)]

(In reply to Matias Jose from comment #5)
> Based on curent interface I see in the last daily build, I made a mock up
> (I'm bad with photoshop, sorry) with just a few touches which probably will
> make this look better.
> 
> http://grab.by/b3j4

The biggest problem I see with this is that we've lost the visual hierarchy between the message header buttons and the message header itself.  And it will be even worse when we use the Classic View, since then the buttons will be a long way away from the message header.  That's why I think we need a second toolbar, which will float beside the main toolbar in Vertical View, but will be on top of the message header in Classic and Wide view.  Does that make sense to you?

Also, I think the Message header, which you have aligning on a 22-pixel row, should align with the folder list and message list instead.

(In reply to Matias Jose from comment #6)
> I suck at photoshop, but here's the screenshot with no glass in the toolbar,
> just to give an example. Imagine it's all nice and neat:
> http://grab.by/b3jo

I think the removal of glass can wait for tabs-on-top to land instead.  We're making a lot of progress along those lines, and should have something to show soon, I hope.

So, I think this kind of breaks up into a couple of different pieces, and I'm not sure how you want to tackle them.

The first piece is moving the message header buttons into a toolbar of their own, and making sure it gets put in the right place.  That seems pretty tricky, but if you want to tackle it, it kinda makes sense.

The second piece is just getting things lined up with each other, which was the original intent of this bug.

We'll have to re-do the second after the first, but it may be worth doing in the meantime.  I think that's kind of your call.

Thanks,
Blake.

Comment 8

[Matias Jose]

(In reply to Blake Winton (:bwinton - Thunderbird UX) from comment #7)
> (In reply to Matias Jose from comment #5)
> > Based on curent interface I see in the last daily build, I made a mock up
> > (I'm bad with photoshop, sorry) with just a few touches which probably will
> > make this look better.
> > 
> > http://grab.by/b3j4
> 
> The biggest problem I see with this is that we've lost the visual hierarchy
> between the message header buttons and the message header itself.  And it
> will be even worse when we use the Classic View, since then the buttons will
> be a long way away from the message header.  That's why I think we need a
> second toolbar, which will float beside the main toolbar in Vertical View,
> but will be on top of the message header in Classic and Wide view.  Does
> that make sense to you?
> 

Yes, I agree with getting message buttons as a second toolbar that floats besides the main toolbar in that view. Much better than moving buttons around.

> Also, I think the Message header, which you have aligning on a 22-pixel row,
> should align with the folder list and message list instead.
> 

Sorry, I lost it here... Folder list and message list? I think folder list is nor in alignment with message list. I made filter bar and message grid header of 22px height. You imply we should use a smaller height based on the grid row?

> (In reply to Matias Jose from comment #6)
> > I suck at photoshop, but here's the screenshot with no glass in the toolbar,
> > just to give an example. Imagine it's all nice and neat:
> > http://grab.by/b3jo
> 
> I think the removal of glass can wait for tabs-on-top to land instead. 
> We're making a lot of progress along those lines, and should have something
> to show soon, I hope.
> 

Ok! I can't wait!

> So, I think this kind of breaks up into a couple of different pieces, and
> I'm not sure how you want to tackle them.
> 
> The first piece is moving the message header buttons into a toolbar of their
> own, and making sure it gets put in the right place.  That seems pretty
> tricky, but if you want to tackle it, it kinda makes sense.
> 
> The second piece is just getting things lined up with each other, which was
> the original intent of this bug.
> 
> We'll have to re-do the second after the first, but it may be worth doing in
> the meantime.  I think that's kind of your call.
> 
> Thanks,
> Blake.

I think it's worth the effort. Alignment can't take more than a few hours' work

Comment 9

[Blake Winton (:bwinton) (:☕️)]

No, the folder list and message list currently aren't quite lined up, but I think they should be, and that would fall under this bug.  :)

I'm excited to see the code changes you come up with!

Thanks,
Blake.

Comment 10

[Matias Jose]

Should I assign this bug to me?

Comment 11

[Blake Winton (:bwinton) (:☕️)]

Yes, if you can…

Comment 12

[Matias Jose]

Hm... sorry. Either I don't know how to, or I don't have access to it :(

I'm already working on it anyway.

Comment 13

[Blake Winton (:bwinton) (:☕️)]

No worries.  I think we don't generally give out that access until someone's done a little work in a bug already…  In the meantime, I've assigned the bug to you.  ;)

Comment 14

[Wayne Mery (:wsmwk)]

All blocking bugs (bug 689543, bug 691724, bug 691730) have been fixed. 
Is there anything left here to do?

Comment 15

[Matias Jose]

I'm very sorry to inform that I haven't been able to work on this. Even though I apreciate all the help you gave me and I was happy to help, having 6 hours to build a copy of the email client just to test some changes wasn't making it easy for me. I had (and currently have) 2 jobs at development plus 1 musical project and the time just wasn't enough for me. :(