Closed Bug 612358 Opened 14 years ago Closed 14 years ago

Create artwork for the new JPAKE screen

Categories

(Cloud Services Graveyard :: Firefox Home, defect)

Product:
Cloud Services Graveyard
Component:
Firefox Home
Platform:
x86
macOS
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
VERIFIED FIXED

People

(Reporter: st3fan, Assigned: smartell)

Details

We need an iOS version of the screen where you enter your JPAKE code.

Mocks: http://www.flickr.com/photos/madhava_work/5164827140/sizes/o/

It is the screen that says 'code goes here'.
Assignee: nobody → smartell
I think this is the mockup for the iOS version:
http://www.flickr.com/photos/madhava_work/5164874465/
Hi Sean,

This is a screenshot of the screen as we have it now:

http://sa.tk/24972933.png

I undertand you are ok with this, except for some minor changes. Would you mind adding those to this bug so that I can implement them? Thanks!
http://grab.by/7EyJ

- Helvetica used for all fonts
- medium button for bottom, not stretched/pressed (the screenshot in comment 2 looks as if the button is stretched or pressed based on the edges)
- can the translucent fields be created with CSS or will I have to cut images?
Thanks! I think I can do this with all standard iOS UI elements. Will show you later tonight.
Everything in that mockup I have already cut (except for the code fields). Use the PNG back button + medium button, not the standard iOS buttons.  That way it'll match the buttons in the rest of the app.

Thanks!
There is no Settings screen, that is why went with a simple Cancel button.

Yup, I will use the buttons that we already have.
Settings is the 4th menu item in the app.

I assumed based on the mockup that there would be a way to get to this Sync screen through that Settings screen.
Nope. You can only get to this screen through the Welcome screen. Hitting cancel gets you back to that screen.

You start here: http://sa.tk/6860b5be.png and "I have a Sync Account' will take you to the JPAKE screen. You can only get there from the uninitialized/empty app state.
aha, right! ok, a cancel button should be fine then.
Sean, this is what I have now .. http://sa.tk/63aae010.png

Close enough?

(Will need to test with other locales too though .. have already noticed that for example the German text is too long for the button)
flagging to block 1.1
Flags: blocking-fx-home1.1?
Looks great!

can you have the layout tweak to use the large button if locales need the extra space?
You mean that instead of growing the button horizontally we grow it vertically and have the text wrapped over two lines while keeping the button the same width?
I think that would help keep the layout clean and avoid having the button PNG looking stretched, yes.

If we have the vertical space that is.
How about this?

http://sa.tk/ece0184e.png (just making the font size smaller and wrap to next line)

or

http://sa.tk/4d116e3b.png (also made the button bigger)
bigger button works well for 2 lines.

for both the big and medium buttons, I'd give them a bit more margin from the bottom also.  Perhaps another 10px or so.
Moved the button up ~10px

This is without adjustments when the text fits:

http://sa.tk/a67f226b.png

This is with a bigger button:

http://sa.tk/fdf0d259.png
looks great!
Done!
Status: NEW → RESOLVED
Closed: 14 years ago
Resolution: --- → FIXED
Verified fix on FF Home 1.1 b5
Status: RESOLVED → VERIFIED
Product: Cloud Services → Cloud Services Graveyard
You need to log in before you can comment on or make changes to this bug.