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

RESOLVED FIXED in Thunderbird 13.0

Status

Thunderbird
Toolbars and Tabs
RESOLVED FIXED
5 years ago
5 years ago

People

(Reporter: Paenglab, Assigned: Paenglab)

Tracking

unspecified
Thunderbird 13.0
x86_64
Mac OS X

Thunderbird Tracking Flags

(thunderbird11+ fixed, thunderbird12 fixed)

Details

Attachments

(8 attachments, 3 obsolete attachments)

(Assignee)

Description

5 years ago
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.
(Assignee)

Comment 1

5 years ago
Created attachment 598524 [details] [diff] [review]
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.
Assignee: nobody → richard.marti
Status: NEW → ASSIGNED
Attachment #598524 - Flags: ui-review?(nisses.mail)
Attachment #598524 - Flags: review?(nisses.mail)
(Assignee)

Comment 2

5 years ago
Created attachment 598525 [details]
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.
(Assignee)

Comment 4

5 years ago
Created attachment 598584 [details]
Big QFB-button with more padding

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

Comment 5

5 years ago
Created attachment 598635 [details] [diff] [review]
QFB button styling with 8px padding for big icons

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)
(Assignee)

Comment 6

5 years ago
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.
tracking-thunderbird11: --- → ?
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.
Created attachment 598843 [details]
another firefox example

More Firefox samples, as requested by Richard on IRC.
Created attachment 598844 [details]
and selected in Firefox

in this is how a pressed icon in Firefox looks like
(Assignee)

Comment 10

5 years ago
(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?
Created attachment 598858 [details]
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-
(Assignee)

Comment 12

5 years ago
Created attachment 598909 [details] [diff] [review]
QFB button styling with 4px border-radius

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)
(Assignee)

Comment 13

5 years ago
Created attachment 598911 [details]
Screenshot of QFB button with 4px radius.
(Assignee)

Comment 14

5 years ago
Created attachment 598924 [details] [diff] [review]
QFB button styling with 4px border-radius and better border

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+
(Assignee)

Updated

5 years ago
Keywords: checkin-needed
(Assignee)

Comment 16

5 years ago
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
Last Resolved: 5 years ago
tracking-thunderbird11: ? → +
Keywords: checkin-needed
Resolution: --- → FIXED
Target Milestone: --- → Thunderbird 13.0
Checked in:

http://hg.mozilla.org/releases/comm-aurora/rev/60a05d6cffa1
http://hg.mozilla.org/releases/comm-beta/rev/937dbe2157f3
status-thunderbird11: --- → fixed
status-thunderbird12: --- → fixed
You need to log in before you can comment on or make changes to this bug.