971492 - [Camera][Madai] 1.4 Visual Design Zoom Bar

Status: RESOLVED FIXED

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

Description

[Amy Lee [:amylee] UX]

User Story

1. As a user, while taking a picture using the camera app I want the ability to pinch zoom in and zoom out so I can make the subject appear bigger or smaller
2. As a user, while pinching to zoom in or zoom out I want to see a slide bar where sliding up increases the zoom level

Specs to come

Comment 1

[Justin D'Arcangelo [:justindarc]]

Amy, in the 2/7 UX spec, the screenshots show a "1.0x", "2.5x" and "4.0x" label above the camera shutter button. Is this text supposed to fade in/out with the Zoom Bar? (e.g.: fade out after 3 seconds of inactivity)

Comment 2

[Amy Lee [:amylee] UX]

Hi Justin, 

Yes :-)

Comment 3

[Justin D'Arcangelo [:justindarc]]

Amy, also.. In the 2/7 UX spec I've seen, the two-tone "bar" portion of the Zoom Bar component is stated to be 4x480. However, on Helix, the total height of the screen is only 533 CSS pixels. I have already re-styled the Zoom Bar component to match these specs and the Zoom Bar appears way too big for the screen. So, are the dimensions stated in the spec assuming *device* pixels rather than CSS pixels? The devicePixelRatio for Helix is 1.5. If I size it for *device* pixels, it becomes 2.667x320 which seems to be closer to what is portrayed in the screen mock-ups. Also, I haven't seen any info as to how the Zoom Bar should be displayed in landscape orientation. If it should simply rotate with the screen to go from left-to-right, then we should be ok. But, if it should counter-rotate to remain vertical, then we won't have enough room to fit it.

Also, before I forget, I already talked to Peter about how the circular indicators are specified as radii, when they are actually in diameters.

Comment 4

[Amy Lee [:amylee] UX]

Attachment: Camera_Zoom.png

Hi, 

This is the spec for the zoom bar. This is for the Madai camera which has a screen size of 720x1280. I've also attached the orientation specs for the zoom bar. Let me know if this clarifies things.

Comment 5

[Amy Lee [:amylee] UX]

Attachment: Dual_Shutter_Orientation.png

This is the orientation spec for zoom bar. Thanks

Comment 6

[Amy Lee [:amylee] UX]

Attachment: CSS_Pixels_Camera_Zoom.jpg

Comment 7

[Amy Lee [:amylee] UX]

Attachment: CSS_Pixels_Dual_Shutter_Orientation.png

Updated orientation spec for controls

Comment 8

[Amy Lee [:amylee] UX]

Attachment: CSS_Pixels_Camera_Zoom.png

Updated spec. Zoom text (1.0x, 2.5x, etc.) should be Fira Sans Medium.

Comment 9

[Justin D'Arcangelo [:justindarc]]

Resolved as part of 933902

Comment 10

[Jason Smith [:jsmith]]

Mass-modify - removal of no longer relevant blocking flags.