944945 - Improve vcard styling

Status: RESOLVED FIXED

(Thunderbird :: Theme, defect)

Description

[Josiah Bruner [:jsbruner]]

Attachment: The issue.

The current vcard box styling isn't very attractive. Not to mention the fact that on OS X there is a pretty major icon glitch. Let's make things nicer.

Comment 1

[Josiah Bruner [:jsbruner]]

Attachment: Patch.

This updates the styling to make it a little more attractive, fixes the OS X bug, and makes the code 100% consistent on all platforms.

Flagging Richard for review.

Comment 2

[Josiah Bruner [:jsbruner]]

Attachment: New Look.

Here's a screenshot of the change.

Comment 3

[Richard Marti (:Paenglab)]

Comment on attachment 8340705 [details] [diff] [review]
Patch.

Review of attachment 8340705 [details] [diff] [review]:
-----------------------------------------------------------------

I've only commented on the Linux changes as all three files are changing the same. r- because of the missing RTL rules and it isn't working as on your screenshot.

I like the use of the new image and it fixes the issue.

I'm not so happy with the box-shadow and only one rounded corner. On your screenshot it looks good on the bottom left, but on all my systems I have a 8px margin in body (do you have a userContent.css rule to set this or is this message setting 0px margin?). Also if the message is shorter than the view the vcard isn't at the bottom and makes it looking weird. ui-r- because of those.

What about giving all corners a 5px radius and a 1px ThreeDLightShadow border? And giving a background-color: rgba(0, 0, 0, 0.05) althought this wouldn't be visible on black message backgrounds.

::: mail/themes/linux/mail/messageBody.css
@@ +92,5 @@
>  
>  /* ::::: vcard ::::: */
>  
>  .moz-vcard-table {
> +  border-radius: 0px 5px 0px 0px; /* Round the top right corner. */

border-bottom-right-radius: 5px; would do the same. The other corners are already 0px.

This rule would need a additional rule for RTL languages.

@@ +97,2 @@
>    margin-top: 10px;
> +  box-shadow: -4px 4px 4px lightgray inset;

Maybe it would be better to use a system color to work properly on all themes.

@@ +107,5 @@
> +  margin-top: 2px;
> +  height: 32px;
> +  width: 32px;
> +  background-image: url("chrome://messenger/skin/addressbook/icons/contact-generic.png");
> +  background-size: 100% 100%; /* This allows us to ignore any @2x resolutions */

Nit: this comment isn't really needed on non-OS X platforms.

Comment 4

[Richard Marti (:Paenglab)]

Attachment: patch appearance on my system

This screenshot shows the left-margin and how it looks with a short message not filling the view. When it would fill the view on bottom is the same margin.

Comment 5

[Josiah Bruner [:jsbruner]]

Attachment: Patch.

Hopefully this looks a little better.

(And turns out the margin problem was related to that specific email, they overrode the margin)

Comment 6

[Josiah Bruner [:jsbruner]]

Attachment: Patch.

This patch switches to a flatter design. I think it does look a little nicer.

Comment 7

[Richard Marti (:Paenglab)]

Comment on attachment 8340801 [details] [diff] [review]
Patch.

Review of attachment 8340801 [details] [diff] [review]:
-----------------------------------------------------------------

Yeah, this looks good.

Thank you Josiah!

Comment 8

[Josiah Bruner [:jsbruner]]

https://hg.mozilla.org/comm-central/rev/47cc6378ca23