Last Comment Bug 728553 - Better styling for checked QFB button on mail-toolbox under OS X
: Better styling for checked QFB button on mail-toolbox under OS X
Status: RESOLVED FIXED
:
Product: Thunderbird
Classification: Client Software
Component: Toolbars and Tabs (show other bugs)
: unspecified
: x86_64 Mac OS X
: -- normal (vote)
: Thunderbird 13.0
Assigned To: Richard Marti (:Paenglab)
:
Mentors:
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2012-02-18 05:46 PST by Richard Marti (:Paenglab)
Modified: 2012-02-21 07:57 PST (History)
2 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
+
fixed
fixed


Attachments
QFB button styling (794 bytes, patch)
2012-02-18 05:51 PST, Richard Marti (:Paenglab)
no flags Details | Diff | Splinter Review
screenshot (40.62 KB, image/png)
2012-02-18 05:54 PST, Richard Marti (:Paenglab)
no flags Details
Big QFB-button with more padding (10.42 KB, image/png)
2012-02-18 14:55 PST, Richard Marti (:Paenglab)
no flags Details
QFB button styling with 8px padding for big icons (957 bytes, patch)
2012-02-19 01:47 PST, Richard Marti (:Paenglab)
bugs: review-
bugs: ui‑review-
Details | Diff | Splinter Review
Firefox pressed active toolbar button (6.82 KB, image/png)
2012-02-20 05:47 PST, Andreas Nilsson (:andreasn)
no flags Details
another firefox example (18.60 KB, image/png)
2012-02-20 06:20 PST, Andreas Nilsson (:andreasn)
no flags Details
and selected in Firefox (19.53 KB, image/png)
2012-02-20 06:22 PST, Andreas Nilsson (:andreasn)
no flags Details
4px -moz-border-radius (18.63 KB, image/png)
2012-02-20 07:09 PST, Andreas Nilsson (:andreasn)
no flags Details
QFB button styling with 4px border-radius (790 bytes, patch)
2012-02-20 10:09 PST, Richard Marti (:Paenglab)
no flags Details | Diff | Splinter Review
Screenshot of QFB button with 4px radius. (20.94 KB, image/png)
2012-02-20 10:10 PST, Richard Marti (:Paenglab)
no flags Details
QFB button styling with 4px border-radius and better border (833 bytes, patch)
2012-02-20 11:11 PST, Richard Marti (:Paenglab)
bugs: review+
bugs: ui‑review+
standard8: approval‑comm‑aurora+
standard8: approval‑comm‑beta+
Details | Diff | Splinter Review

Description Richard Marti (:Paenglab) 2012-02-18 05:46:23 PST
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) 2012-02-18 05:51:07 PST
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.
Comment 2 Richard Marti (:Paenglab) 2012-02-18 05:54:08 PST
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.
Comment 3 Blake Winton (:bwinton) (:☕️) 2012-02-18 13:44:50 PST
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) 2012-02-18 14:55:13 PST
Created attachment 598584 [details]
Big QFB-button with more padding

This is with 8px padding on both sides. Is this better?
Comment 5 Richard Marti (:Paenglab) 2012-02-19 01:47:54 PST
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.
Comment 6 Richard Marti (:Paenglab) 2012-02-19 01:51:25 PST
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) 2012-02-20 05:47:32 PST
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.
Comment 8 Andreas Nilsson (:andreasn) 2012-02-20 06:20:54 PST
Created attachment 598843 [details]
another firefox example

More Firefox samples, as requested by Richard on IRC.
Comment 9 Andreas Nilsson (:andreasn) 2012-02-20 06:22:23 PST
Created attachment 598844 [details]
and selected in Firefox

in this is how a pressed icon in Firefox looks like
Comment 10 Richard Marti (:Paenglab) 2012-02-20 06:34:38 PST
(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) 2012-02-20 07:09:27 PST
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.
Comment 12 Richard Marti (:Paenglab) 2012-02-20 10:09:37 PST
Created attachment 598909 [details] [diff] [review]
QFB button styling with 4px border-radius

Patch with 4px border-radius as asked from Andreas.
Comment 13 Richard Marti (:Paenglab) 2012-02-20 10:10:58 PST
Created attachment 598911 [details]
Screenshot of QFB button with 4px radius.
Comment 14 Richard Marti (:Paenglab) 2012-02-20 11:11:40 PST
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.
Comment 15 Andreas Nilsson (:andreasn) 2012-02-21 03:47:38 PST
Comment on attachment 598924 [details] [diff] [review]
QFB button styling with 4px border-radius and better border

Looks good!
Comment 16 Richard Marti (:Paenglab) 2012-02-21 04:00:49 PST
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) 2012-02-21 07:36:39 PST
Checked in: http://hg.mozilla.org/comm-central/rev/1882581fa858

Note You need to log in before you can comment on or make changes to this bug.