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

RESOLVED FIXED in Thunderbird 13.0

Status

defect
RESOLVED FIXED
8 years ago
8 years ago

People

(Reporter: Paenglab, Assigned: Paenglab)

Tracking

unspecified
Thunderbird 13.0
x86_64
macOS

Thunderbird Tracking Flags

(thunderbird11+ fixed, thunderbird12 fixed)

Details

Attachments

(8 attachments, 3 obsolete attachments)

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.
Posted patch QFB button styling (obsolete) — Splinter Review
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.
Assignee: nobody → richard.marti
Status: NEW → ASSIGNED
Attachment #598524 - Flags: ui-review?(nisses.mail)
Attachment #598524 - Flags: review?(nisses.mail)
Posted image 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.
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.
This is with 8px padding on both sides. Is this better?
This patch adds 8px padding on both sides when in big icons mode.
Attachment #598524 - Attachment is obsolete: true
Attachment #598635 - Flags: ui-review?(nisses.mail)
Attachment #598635 - Flags: review?(nisses.mail)
Attachment #598524 - Flags: ui-review?(nisses.mail)
Attachment #598524 - Flags: review?(nisses.mail)
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.
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.
More Firefox samples, as requested by Richard on IRC.
in this is how a pressed icon in Firefox looks like
(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?
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.
Attachment #598635 - Flags: ui-review?(nisses.mail)
Attachment #598635 - Flags: ui-review-
Attachment #598635 - Flags: review?(nisses.mail)
Attachment #598635 - Flags: review-
Patch with 4px border-radius as asked from Andreas.
Attachment #598635 - Attachment is obsolete: true
Attachment #598909 - Flags: ui-review?(nisses.mail)
Attachment #598909 - Flags: review?(nisses.mail)
As agreed on IRC a patch with a better border.
Attachment #598909 - Attachment is obsolete: true
Attachment #598924 - Flags: ui-review?(nisses.mail)
Attachment #598924 - Flags: review?(nisses.mail)
Attachment #598909 - Flags: ui-review?(nisses.mail)
Attachment #598909 - Flags: review?(nisses.mail)
Comment on attachment 598924 [details] [diff] [review]
QFB button styling with 4px border-radius and better border

Looks good!
Attachment #598924 - Flags: ui-review?(nisses.mail)
Attachment #598924 - Flags: ui-review+
Attachment #598924 - Flags: review?(nisses.mail)
Attachment #598924 - Flags: review+
Keywords: checkin-needed
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.
Attachment #598924 - Flags: approval-comm-beta?
Attachment #598924 - Flags: approval-comm-aurora?
Attachment #598924 - Flags: approval-comm-beta?
Attachment #598924 - Flags: approval-comm-beta+
Attachment #598924 - Flags: approval-comm-aurora?
Attachment #598924 - Flags: approval-comm-aurora+
Checked in: http://hg.mozilla.org/comm-central/rev/1882581fa858
Status: ASSIGNED → RESOLVED
Closed: 8 years ago
Keywords: checkin-needed
Resolution: --- → FIXED
Target Milestone: --- → Thunderbird 13.0
You need to log in before you can comment on or make changes to this bug.