728553 - Better styling for checked QFB button on mail-toolbox under OS X

Status: RESOLVED FIXED

(Thunderbird :: Toolbars and Tabs, defect)

Description

[Richard Marti (:Paenglab)]

The checked QFB button on mail-toolbox looks weird because the background is filled with #DDDDDD. Andreas proposed on IRC to use the styling of the Quick-filter-bar buttons.

Comment 1

[Richard Marti (:Paenglab)]

Attachment: QFB button styling

This patch styles the QFB button only on the mail-toolbox. On the tab bar it is still as now. I think the new look wouldn't fit good in this bar.

Comment 2

[Richard Marti (:Paenglab)]

Attachment: screenshot

Screenshot of checked QFB button with text beside icon, only text, only icon and text below icon. Every state in small and big icons.

Comment 3

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

I agree it would look weird on the tab bar.

The bottom-right and middle-right states look a little more round than I'ld like.  Can we add a bit of horizontal padding there?

Thanks,
Blake.

Comment 4

[Richard Marti (:Paenglab)]

Attachment: Big QFB-button with more padding

This is with 8px padding on both sides. Is this better?

Comment 5

[Richard Marti (:Paenglab)]

Attachment: QFB button styling with 8px padding for big icons

This patch adds 8px padding on both sides when in big icons mode.

Comment 6

[Richard Marti (:Paenglab)]

I'm asking for tracking-thunderbird11 because moving the QFB button to the mail-toolbar is possible starting with TB 11 and this style should be here from beginning.

Comment 7

[Andreas Nilsson (:andreasn)]

Attachment: Firefox pressed active toolbar button

I'm not really happy with how this patch looks. Here is an screenshot of how this kind of toolbar button state look in Firefox.

Comment 8

[Andreas Nilsson (:andreasn)]

Attachment: another firefox example

More Firefox samples, as requested by Richard on IRC.

Comment 9

[Andreas Nilsson (:andreasn)]

Attachment: and selected in Firefox

in this is how a pressed icon in Firefox looks like

Comment 10

[Richard Marti (:Paenglab)]

(In reply to Andreas Nilsson (:andreasn) from comment #7)
> Created attachment 598839 [details]
> Firefox pressed active toolbar button
> 
> I'm not really happy with how this patch looks. Here is an screenshot of how
> this kind of toolbar button state look in Firefox.

Andreas, could you add a sketch how this should look?

Comment 11

[Andreas Nilsson (:andreasn)]

Attachment: 4px -moz-border-radius

After talking to Richard on IRC, it seems the Firefox approach was a bit complex, and I think we need to wait until we have landed the glyph icons patch before we attempt do something similar.
Setting the border radius to 4px would make it look less odd in the text-below-text case and it would have the same roundness as the tabs and other elements in the UI.

Comment 12

[Richard Marti (:Paenglab)]

Attachment: QFB button styling with 4px border-radius

Patch with 4px border-radius as asked from Andreas.

Comment 13

[Richard Marti (:Paenglab)]

Attachment: Screenshot of QFB button with 4px radius.

Comment 14

[Richard Marti (:Paenglab)]

Attachment: QFB button styling with 4px border-radius and better border

As agreed on IRC a patch with a better border.

Comment 15

[Andreas Nilsson (:andreasn)]

Comment on attachment 598924 [details] [diff] [review]
QFB button styling with 4px border-radius and better border

Looks good!

Comment 16

[Richard Marti (:Paenglab)]

Comment on attachment 598924 [details] [diff] [review]
QFB button styling with 4px border-radius and better border

[Approval Request Comment]
Regression caused by (bug #): No regression
User impact if declined: No impact
Testing completed (on c-c, etc.): Only review
Risk to taking this patch (and alternatives if risky): Should be no risk because only CSS.

It would be good when this patch can land on TB 11 because from this one the QFB button is movable to the toolbar and the checked state should look good from the beginning.

Comment 17

[Mark Banner (:standard8)]

Checked in: http://hg.mozilla.org/comm-central/rev/1882581fa858

Comment 18

[Mark Banner (:standard8)]

Checked in:

http://hg.mozilla.org/releases/comm-aurora/rev/60a05d6cffa1
http://hg.mozilla.org/releases/comm-beta/rev/937dbe2157f3