285325 - Use css for smileys in mail_help.xhtml

Status: RESOLVED FIXED

(SeaMonkey :: Help Documentation, defect)

Description

[Stefan [:stefanh]]

By using the css in communicator/skin/smileys.css we can get rid of 4 images in
Help.

Comment 1

[Stefan [:stefanh]]

Attachment: Use css for smiley images

This will make the 4 smiley-images in /images obsolete, so they can be removed.
I had to add some style to the spans in order to avoid the top/bottom of the
smileys to be cut off at small font-sizes (default on mac, unfortunately).

Ian, I saved the css overhaul for another bug ;)

Comment 2

[Stefan [:stefanh]]

Attachment: more accurate css for the span

Actually, padding-top and padding-bottom might be a bit more accurate, since
that is actually what we want here.

Comment 3

[Stefan [:stefanh]]

Comment on attachment 176763 [details] [diff] [review]
Use css for smiley images

Terribly sorry for all the bugspam...

Comment 4

[[e-mail]]

You shouldn't have to add padding, smileys.css should handle everything.
If it doesn't then it will affect mail anyway :-P

Comment 5

[Stefan [:stefanh]]

(In reply to comment #4)
> You shouldn't have to add padding, smileys.css should handle everything.
> If it doesn't then it will affect mail anyway :-P

It does affects mail. On mac, the smileys are cut-off at the top and bottom 
using default font-size. I can try to fix that first in a separate bug if you 
want.

Comment 6

[[e-mail]]

Actually I think it might have already been filed, but I would rather see it
fixed globally instead of having a help-specific hack.

Comment 7

[Stefan [:stefanh]]

(In reply to comment #6)
> Actually I think it might have already been filed, but I would rather see it
> fixed globally instead of having a help-specific hack.

Hmm, for the moment I can only think of two ways to fix that:

1) Add padding-top and padding-bottom

If you add, for instance, 10px top and bottom padding the smiley will never be
cut-off. The downside is that it will overlap the text if you make the text smaller.

2) Use a larger font-size (18-19) to fix the issue in mac default (100% text zoom)

Smileys will be cut off at text zoom < 100% and gap between lines (that has a
smiley) will be wider than it is now.

Comment 8

[Stefan [:stefanh]]

Attachment: one attempt to fix the problem globally

Here's one attempt to fix the underlaying problem: Using :after. One issue
might be that the smileys are not 100% vertically centered, despite the usage
of vertical-align: center. Comments are welcome.

Comment 9

[Stefan [:stefanh]]

Comment on attachment 178936 [details] [diff] [review]
one attempt to fix the problem globally

Just note that I forgot to change one entry in the css file...

Comment 10

[Stefan [:stefanh]]

Comment on attachment 178936 [details] [diff] [review]
one attempt to fix the problem globally

Hmm, this doesn't work. You can't remove an added smiley when you compose a
message in html format :(

Comment 11

[Stefan [:stefanh]]

We've been talking about getting new smileys for the two themes. If we had
smaller icons we could avoid the problem of smileys being cut-off at 100% and
90% text zoom in MailNews...

Comment 12

[[e-mail]]

Maybe we could fix it using XBL?

Comment 13

[Stefan [:stefanh]]

(In reply to comment #12)
> Maybe we could fix it using XBL?

You mean fixing the Help stuff or the global issue?

Comment 14

[Stefan [:stefanh]]

Attachment: Updated patch

I think it's time to fix this now... ;-) Maybe they're not perfectly (vertically) aligned, but I didn't tried replacing the old images and the existing ones are not really centered either.

Comment 15

[Stefan [:stefanh]]

(In reply to comment #14)

> and the
> existing ones are not really centered either.

"And the old images are not..."

Comment 16

[Ian Neal]

Comment on attachment 373193 [details] [diff] [review]
Updated patch

Looks good change from 21x21 to 16x16 does not seem to have broken anything from what I can see.

Comment 17

[Stefan [:stefanh]]

http://hg.mozilla.org/comm-central/rev/b32c39c77951