Open Bug 481862 Opened 11 years ago Updated 6 years ago

MailNews Toolbar Small Icons

Categories

(SeaMonkey :: Themes, defect)

defect
Not set

Tracking

(Not tracked)

People

(Reporter: philip.chee, Unassigned)

References

(Depends on 1 open bug, Blocks 1 open bug)

Details

(Keywords: modern)

Attachments

(9 files, 11 obsolete files)

64.14 KB, image/gif
Details
77.94 KB, image/png
Details
121.59 KB, image/png
Details
600.26 KB, image/png
Details
696.53 KB, image/svg+xml
Details
78.88 KB, image/png
Details
24.68 KB, image/png
Details
96.46 KB, patch
Details | Diff | Splinter Review
687.41 KB, image/svg+xml
Details
http://mxr.mozilla.org/comm-central/source/suite/themes/modern/messenger/icons/btn1.gif

Currently we only have large (or normal sized) icons for the buttons in the main mailnews window. We need suitable icons for small button mode which is available in the mailnews window. Unlike classic we cannot simply take the current icon set and shrink them down. These buttons are rather complex and the background gradients and surrounding whitespace are hard coded into the images.

So some of the things we need to do for small icons are:

1. Convert to PNG.
2. Name the new graphic messengericons-small.png.
3. Replace the hard coded background with an alpha transparent background taking care not to destroy the subtle shadows.
4. Remove the hard coded vertical borders (and optionally reproduce them using CSS) since they don't work too well in small button mode.
5. Remove the extra whitespace around the actual button icons and use CSS (padding and margins) instead to size the buttons.
Attached image WIP icons from SVG (obsolete) —
I'm trying to create vectors from given images, just a few done. Please look at them and comment what's wrong, or give directions.
Attachment #366785 - Flags: ui-review?(stefanh)
Attached image half of the work (obsolete) —
I did 7 rows of 19. Some of them i don't like, but it's a good start. And all icons missing shadows, i'll add them when shapes finished.
Attachment #366785 - Attachment is obsolete: true
Attachment #366785 - Flags: ui-review?(stefanh)
Attachment #366801 - Flags: ui-review?(stefanh)
Comment on attachment 366801 [details]
half of the work

Are those icons supposed to replace the large ones as well?
(In reply to comment #6)
> (From update of attachment 366801 [details])
> Are those icons supposed to replace the large ones as well?

The reason I ask is that they differ a bit from the original ones.
I'll try to make SVG as close as possible to original, but on any case using same SVG for both big and small buttons is reasonable.
Attached image almost complete (obsolete) —
I need to do 4 rows to complete. Posting to get feedback before i post all buttons set.
Assignee: nobody → misak
Attachment #366801 - Attachment is obsolete: true
Status: NEW → ASSIGNED
Attachment #366801 - Flags: ui-review?(stefanh)
I'm wondering a bit over the upper part of the folder icons, that part is colored - should it really be colored? The original icons doesn't seem to have it.

That said, it's a bit difficult to compare your icons with the original ones in attachment #365886 [details], because your icons assumes a background-color. Is there any chance you can attach a screenshot of the new icons in action (on the toolbar)?

I also think you need feedback from someone who knows Modern, so I'm cc:ing Neil and KaiRo.
Sorry for unexpected delay, i'm back and finished all parts. Posting to discuss shape and general thing, after final shape polish I'll add shadows and tweak positions.
Attachment #367482 - Attachment is obsolete: true
Attached image some comments addressed (obsolete) —
I rounded arrows and made them little bit smaller, also fixed envelope.
Attachment #369986 - Attachment is obsolete: true
Attached image for review
This is almost final buttons. No other feedback except from Philip Chee and KaiRo received, so it's worth to ask review.
Attachment #370168 - Attachment is obsolete: true
Attachment #370846 - Flags: ui-review?(neil)
Comment on attachment 370846 [details]
for review

These seem OK although I wonder how they'll look at small sizes.
Attachment #370846 - Flags: ui-review?(neil) → ui-review+
Attached image Inkscape Vector File (obsolete) —
I'm uploading SVG file then. There will be some work i think, related to alignment and other stuff, i think Philip Chee will tell me what to do.
One thing is for our other small buttons in Modern:

http://mxr.mozilla.org/comm-central/source/suite/themes/modern/communicator/icons/common-small.png
http://mxr.mozilla.org/comm-central/source/suite/themes/modern/navigator/icons/browser-small.png

1. There is no "dead" white-space between the images. This makes it easier to slice and dice with -moz-image-region.

2. They are basically "square" in that they are as wide as they are tall 19px x 19px.

The large messenger graphics (minus the whitespace) are more oblong - wider than they are tall. If scale them down so that their height is 19px, what is the "standard" width, or does each button have its own unique width?
Comment on attachment 370846 [details]
for review

Some of the mousedown states have a shadow, some don't. Is that intentional?
Attached image buttons aligned (obsolete) —
Here is same buttons aligned as you want probably.
Attached image Buttons in grid (obsolete) —
This shows how buttons aligned in virtual grid
Attached image Aligned buttons for review (obsolete) —
Here is buttons with virtual square grid applied to show their alignment logic. Asking review to make sure i'm aligned them right.
Attachment #371437 - Attachment is obsolete: true
Attachment #371439 - Flags: ui-review?(neil)
Attached image Final buttons, small. (obsolete) —
Here is final 19x19 px buttons.
Attachment #370848 - Attachment is obsolete: true
Attachment #371149 - Attachment is obsolete: true
Attachment #371439 - Attachment is obsolete: true
Attachment #371439 - Flags: ui-review?(neil)
Attachment #371662 - Flags: ui-review?(neil)
> Created an attachment (id=371662)
> Final buttons, small.

> Here is final 19x19 px buttons.

This graphic appears to be 77px x 361 px which means that the individual grid squares are 19.25px x 19.0px.

Also I the top row doesn't seem vertically centred in the first grid row.
Since most of the graphical elements are broader than they are tall. I don't think a 19x19px grid is optimal. I suggest that the grid be widened to (e.g. 19x22 or 19x24) and then the graphis scaled to fill up the dead whitespace as much as possible.
Since most of the graphical elements are broader than they are tall. I don't think a 19x19px grid is optimal. I suggest that the grid be widened to (e.g. 19x22 or 19x24) and then the graphics scaled to fill up the dead whitespace as much as possible.
Attached image buttons aligned 19x24
19x24 is preferred, here is slightly modified buttons.
Attachment #371662 - Attachment is obsolete: true
Attachment #375981 - Flags: ui-review?(philip.chee)
Attachment #371662 - Flags: ui-review?(neil)
Comment on attachment 375981 [details]
buttons aligned 19x24

Switching ui-review to stefanh. I'm not too sure about how to vertically align each graphic within the individual 19h x 24w grid cells so that when they are used on the buttons, the buttons look consistent.
Attachment #375981 - Flags: ui-review?(philip.chee) → ui-review?(stefanh)
I think the icons looks good. I'm curious about the answer to comment #17, though.
Ignore the CSS for the moment. This patch is basically to demonstrate several problems with the small buttons in attachment 375981 [details] .

1. Apply this patch.
2. Switch the mailnews message toolbar to small icon mode.

Problems noticed:

1. Some buttons "wobble" when I hover over them.
2. The light blue in the envelopes is too bright and needs to be greyer.
3. The Reply, Reply-All, Forward, and Delete buttons are too high compared to the other buttons.
Note: I'll need to move the drop markers further to the right, but that's a CSS problem.
You forgot to add a jar.mn diff in your patch ;-)
I think you might be able to fix some of the issues with css, but the best thing to do is probably to use a transparent fill (or maybe use the right bg color?) around each icon and the re-position the icons so they line up.

As for the icons, the color on the envelopes was what comment #10 was about.

Should we use the same origin for large and small icons? The reason I ask is that it might be difficult to match colors etc for large and small icons if we used different origins.
> You forgot to add a jar.mn diff in your patch ;-)
Sigh. New patch soon(ish).

> I think you might be able to fix some of the issues with css, but the best
> thing to do is probably to use a transparent fill (or maybe use the right bg
> color?) around each icon and the re-position the icons so they line up.

Not sure what you mean. The new PNG should have an alpha transparent background. And I'd prefer to fix the alignment problems in the PNG directly (since we have the SVG source) instead of working around them via CSS.

> As for the icons, the color on the envelopes was what comment #10 was about.
I think it's too bright (luminosity) as well as too "blue". Also is it just me or is the small junk icon too dark or even black?
> You forgot to add a jar.mn diff in your patch ;-)
Now with added jar.m&n goodness.
Attachment #376926 - Attachment is obsolete: true
All problems easy to fix, but just one quick question - as these icons contain also address book icons, is it possible to test them too?
> as these icons contain
> also address book icons, is it possible to test them too?

I think you can take one of the small buttons in attachment 377162 [details] [diff] [review] and just change the css e.g.

+toolbar[iconsize="small"] #button-mark {
+  list-style-image: url("chrome://messenger/skin/icons/messengericons-small.png"); <- change this
+  -moz-image-region: rect(76px 23px 94px 0); <- and change this
+}
+
+toolbar[iconsize="small"] #button-mark:hover {
+  -moz-image-region: rect(76px 47px 94px 24px); <- and change this, etc.
[...]
Attached image Inkscape File 19x24
I decided to publish Inkscape File, to make possible someone else to pick up work. Unfortunately i'm very bad on CSS, and Ratty on graphics stuff, so if someone knows both can easily inalise our work.
Attachment #375981 - Flags: ui-review?(stefanh)
Comment on attachment 375981 [details]
buttons aligned 19x24

Removing obsolete request.
I think Matt is working on this in bug 526210
Depends on: 526210
I am swapping the block/depend on this as this will be fixed as apart of the modern theme meta bug.
Blocks: 526210
Status: ASSIGNED → NEW
No longer depends on: 526210
Assignee: misak.bugzilla → nobody
Severity: enhancement → normal
Hijacking this bug, setting dependency on 883722, and preparing this bug for completion.

All Previous attachments and comments from this bug are now obsolete.
Assignee: nobody → email
Depends on: 883722
Summary: The Main MailNews window needs suitable button icons for small button mode. → MailNews Toolbar Small Icons
Assignee: email → nobody
You need to log in before you can comment on or make changes to this bug.