899496 - [Helix][FM][HD] UI tweak for Hidpi device

Status: VERIFIED FIXED

(Firefox OS Graveyard :: Gaia::FMRadio, defect)

Description

[KM Lee [:rexboy] (inactivate after Sep. 22)]

This bug aims for several UI tweaks on FM Apps.
 - The star asset at up-right corner differ between v1.1.0hd and master
 - The measure rule assets differs between @1x and @1.5x
 - V1.1hd buttons (slightly) not in center (Unconfirmed)
 - CSS overlay of "Earphone is not inserted" is not in transparent on master
 - Highlight of favorite (when clicking) is not touching the bottom separator

Comment 1

[KM Lee [:rexboy] (inactivate after Sep. 22)]

Attachment: Screenshot for items 1~3 above

Comment 2

[KM Lee [:rexboy] (inactivate after Sep. 22)]

Attachment: screenshot for item 4

Comment 3

[KM Lee [:rexboy] (inactivate after Sep. 22)]

Attachment: Screenshot for item 5

Comment 4

[KM Lee [:rexboy] (inactivate after Sep. 22)]

We may need Amy's help for items 1~3.
Amy may you confirm that whether we need to change the assets?
Please refer to comment 1.

Thanks a lot!

Comment 5

[KM Lee [:rexboy] (inactivate after Sep. 22)]

Um, sorry. I mean items 1 and 2.

Item 3 may just need a css fix.

Comment 6

[Amy Lee [:amylee] UX]

Attachment: toggle-fav-star-off.png

Hi, 

Here is a revised toggle star to replace the curent @1.5 version.

Comment 7

[Amy Lee [:amylee] UX]

Attachment: [e-mail]

Hi, 

Please replace the current dial notches with this version for @1.5. Thanks!

Comment 8

[KM Lee [:rexboy] (inactivate after Sep. 22)]

Hi Amy:

Thanks for your help!
but toggle-fav-star-off.png still in different color with the original one; and also the size is inconsistent. I think the size should be in consistent with toggle-fav-star-pressed.png.

Comment 9

[KM Lee [:rexboy] (inactivate after Sep. 22)]

Attachment: Screenshot after applying new toggle-fav-star-off.png (left: 1.5x asset; right: 1x asset)

see the screenshot above.

Comment 10

[KM Lee [:rexboy] (inactivate after Sep. 22)]

WIP
https://github.com/rexboy7/gaia/commit/7802930c2b9d28b0227fd0b7aff9628e62412e9a

I found item 4 (CSS overlay of "Earphone is not inserted" is not in transparent on master) is caused by change in bug 866174 without description. Not sure if I need to correct it so I'll hold it for now.

Comment 11

[Amy Lee [:amylee] UX]

Attachment: star_toggle.zip

Hi,

Attached is the toggle star for all 3 settings. These should all be sized the same now and the colour has been changed to a transparency to match the original.

Comment 12

[KM Lee [:rexboy] (inactivate after Sep. 22)]

Attachment: Patch for v1.1.0hd

This is patch for v1.1.0hd.
CSS changes here is for the last item (highlight when tapping). Pzhang may you take a look at it? I'll put screenshot here.

Comment 13

[KM Lee [:rexboy] (inactivate after Sep. 22)]

Attachment: Patch for master

Just slightly different with v1.1.0hd patch: The popup overlay is changed back to background texture.

Comment 14

[KM Lee [:rexboy] (inactivate after Sep. 22)]

Attachment: Screenshot after patching

Comment 15

[Wayne Chang [:wchang]]

HD+ UI bug

Comment 16

[Pin Zhang [:pzhang] (inactive)]

@KM, I looked into the patches on Github, only replaced some images and a small css tweaking for fav channel item, the dialer notches and star icons changed a lot, but I can't aware of the changes for the seek related icons, would you mind to tell me what changes did you made for them?

Comment 17

[KM Lee [:rexboy] (inactivate after Sep. 22)]

Comment on attachment 784169 [details]
Patch for v1.1.0hd

Oh, sorry I just didn't communicate on this. My fault.

I found that seek icons are not centered comparing to the original. So I just moved them
a few pixel away to make sure they looked centered on the button.

I edited them because I think moving a few pixel is a trivial work, but anyway this should
be in Visual's responsibility. Let's ask Amy if she think these images are ok.

Comment 18

[KM Lee [:rexboy] (inactivate after Sep. 22)]

Amy, may you take a look at these images:

https://raw.github.com/rexboy7/gaia/d4348a043568d4dbf89758ef1f3a57e9b4484b68/apps/fm/style/images/[e-mail]
https://raw.github.com/rexboy7/gaia/d4348a043568d4dbf89758ef1f3a57e9b4484b68/apps/fm/style/images/[e-mail]
https://raw.github.com/rexboy7/gaia/d4348a043568d4dbf89758ef1f3a57e9b4484b68/apps/fm/style/images/[e-mail]
https://raw.github.com/rexboy7/gaia/d4348a043568d4dbf89758ef1f3a57e9b4484b68/apps/fm/style/images/[e-mail]

see comment 17, I just moved them a few pixel away to make sure it's located
in center, since I found they are slightly off the center by about 2~3 pixels.
I did it because I think this is just a trivial work, but if this modification
is not OK for you, may you provide assets above? Thanks for your help!

Comment 19

[Amy Lee [:amylee] UX]

@KM

These graphics are okay with me. Just let me know if any graphics are modified so I can update our set of graphics so they match.

Thanks

Comment 20

[Pin Zhang [:pzhang] (inactive)]

Comment on attachment 784169 [details]
Patch for v1.1.0hd

The patches and screenshot look good to me, r=me

Comment 21

[KM Lee [:rexboy] (inactivate after Sep. 22)]

Thanks all!

v1.1.0hd
https://github.com/mozilla-b2g/gaia/commit/0eeb8be23ad1495d50b1d5e24a058a1a737713cb

master
https://github.com/mozilla-b2g/gaia/commit/445a135b4081658bbe7071868ad2e1a40cbf6717

Comment 22

[Al Tsai [:atsai]]

[2013/10/21 Helix Testing]
Gaia:     c829a2042594b6c3a4899ee27979799a0f301534
Gecko:    http://hg.mozilla.org/releases/mozilla-b2g18_v1_1_0_hd/rev/f7c657f6d019
BuildID   20131015042201
Version   18.0