Closed Bug 728553 Opened 9 years ago Closed 9 years ago

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

Categories

(Thunderbird :: Toolbars and Tabs, defect)

x86_64
macOS
defect
Not set
normal

Tracking

(thunderbird11+ fixed, thunderbird12 fixed)

RESOLVED FIXED
Thunderbird 13.0
Tracking Status
thunderbird11 + fixed
thunderbird12 --- fixed

People

(Reporter: Paenglab, Assigned: Paenglab)

Details

Attachments

(8 files, 3 obsolete files)

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.
Attached 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)
Attached 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.
Attached image another firefox example
More Firefox samples, as requested by Richard on IRC.
Attached image and selected in Firefox
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?
Attached image 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.
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: 9 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.