991354 - [Camera][Madai] X in cancel button not centered. Pick activity UI

Status: VERIFIED FIXED

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

Description

[Diego Marcos [:dmarcos]]

Attachment: cancelButton.png

The x in the cancel button is not vertically centered (see attached image)

Comment 1

[Justin D'Arcangelo [:justindarc]]

Attachment: pull-request (master)

Comment 2

[Justin D'Arcangelo [:justindarc]]

Attachment: screenshot with patch applied

Here's a screenshot of the cancel button with the patch applied.

Comment 3

[Justin D'Arcangelo [:justindarc]]

Comment on attachment 8400961 [details]
screenshot with patch applied

Amy,
Could you review this screenshot and let me know if the "Cancel" button looks correct?

Comment 4

[Amy Lee [:amylee] UX]

Attachment: Viewfinder_Cancel.svg

Hi, 

It doesn't look like the correct "x" is being used. I've attached the svg file of the correct x. Thanks

Comment 5

[Justin D'Arcangelo [:justindarc]]

Wilson: What is the process for adding new glyphs to our icon font? I don't see a source file for it anywhere, but it is base64-encoded in our CSS. I'm assuming we use something to assemble it like Font Squirrel?

Comment 6

[David Flanagan [:djf]]

Comment on attachment 8400960 [details] [review]
pull-request (master)

Go ahead and land this one-line CSS patch if you want, but then you'll have to file a followup bug when you switch to using the new SVG image in the font. Or, just wait and include the updated font in this patch as well.

Comment 7

[Justin D'Arcangelo [:justindarc]]

I would rather wait and see if Wilson can include the glyph in our icon font before landing this since every other button in the app uses glyphs from the icon font and therefore this "Cancel" button wouldn't require special styling.

Comment 8

[Wilson Page [:wilsonpage]]

justindarc:

1. Go to icomoon.io/app
2. 'Import' app/camera/style/icomoon.json
3. Add new glyphs to the font by uploading SVG files via 'Import to set' option
4. Click the 'Font >' button at the bottom of the screen
5. Click 'preferences'
6. Tick 'Encode and embed...'
7. Click 'Download'
8. Copy over the WOFF url (not TTF)
9. Copy over the list of icon-* selectors (ignore the one that includes font-family)

We should probably dump that in the README. Maybe that could be bundled with this bug?

Comment 9

[Justin D'Arcangelo [:justindarc]]

Attachment: screenshot with patch applied

Amy: Please review this screenshot. I have replaced the "x" icon with the one you provided.

Comment 10

[Amy Lee [:amylee] UX]

Comment on attachment 8401416 [details]
screenshot with patch applied

Look good! (p.s nice shot of "the dude")

Comment 11

[Justin D'Arcangelo [:justindarc]]

Landed to master:

https://github.com/mozilla-b2g/gaia/commit/6d15a4a019bd9029d37d0d23d77ed348443d67e0

Still needs uplifted to 1.4

Hema: Can you flag this as 1.4+? Thanks!

Comment 12

[Ryan VanderMeulen [:RyanVM]]

v1.4: https://github.com/mozilla-b2g/gaia/commit/9ddb20dc1b0ba651760866845b445952c575822a

Comment 13

[sarsenyev]

The bug is no longer reproduces on 1.4 and master build
The "X" icon is centered.

1.4 Environmental Variables:
Device: Buri 1.4 MOZ
BuildID: 20140411000202
Gaia: 6c50349f41d40ba175ea0fc0c2c2cbd739ba7170
Gecko: 28b419f0e857
Version: 30.0a2
Firmware Version: v1.2-device.cfg

1.5 Environmental Variables:
Device: Buri 1.5 Master
BuildID: 20140411040203
Gaia: 1368d716072adf308e1b435ac828f97545a045f1
Gecko: d8c1b10c3a3d
Version: 31.0a1
Firmware Version: v1.2-device.cfg