1010642 - (vertical-homescreen) Implement new drop shadows for app icon labels

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Gaia::Homescreen, defect, P2)

Description

[Peter La]

All numbers are relative to Flame's 480x854 screen resolution.  Other screen resolutions should scale accordingly.

Every label gets two drop shadows:

1st drop shadow (thin/tight):
Angle: 120
Offset distance: 1 pixel
Size: 3 pixels
Color: #000000 @ 30% opacity

2nd drop shadow (wider):
Angle: 120
Offset distance: 5 pixels
Size: 10 pixels
Color: #000000 @ 40% opacity

Spec/screenshot to be attached.

Comment 1

[Kevin Grandon :kgrandon]

I'm not sure if it's perfect, but this is the closest CSS definition I could come up for this: 

text-shadow: -0.1rem 0.1rem 0.3rem rgba(0, 0, 0, 0.3),
             -0.2rem 0.4rem 1rem rgba(0, 0, 0, 0.4);

Let's implement and see how it turns out.

Comment 2

[Kevin Grandon :kgrandon]

New shadows implemented: https://github.com/mozilla-b2g/gaia/commit/6fabfa9ff7427a41f62eb2c50d1c31092d122fe7

They're not exactly an angle of 120 degrees, but they're about as close as we can get them I think. Let me know what you think.

Comment 3

[Kevin Grandon :kgrandon]

FYI - I think the direction of these shadows might be wrong. This should be fixed when bug 1010640 lands.

Comment 4

[Peter La]

Attachment: Spec_DropShadows_TextLabels.png

Hi Kevin,

Here's a better spec.  I'll load your patch tomorrow to review.

Comment 6

[Kevin Grandon :kgrandon]

Mass modify - set status-b2g-v2.0 fixed for fixed bugs under vertical homescreen dependency tree.