876291 - [Bluetooth] Change phone name screen needs to be updated to use building blocks

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Gaia, defect)

Description

[Eric Pang [:epang] UX]

Update visual design of the change phone name screen to use building blocks.

Comment 1

[Stephany Wilkes]

Hi Eric - I'm scanning our list of 1.2 items to see what we did and did not finish from our list. What is the latest on this one? Thanks!

Comment 2

[Eric Pang [:epang] UX]

(In reply to Stephany Wilkes from comment #1)
> Hi Eric - I'm scanning our list of 1.2 items to see what we did and did not
> finish from our list. What is the latest on this one? Thanks!

Hi Stephany, this is something I still need to look into.  Haven't had much time, but I'm planning to look through 1.2 bugs this week.

Sergi, I'm not sure which building block this should be modeled after.  Should I use the confirmation BB? http://buildingfirefoxos.com/building-blocks/confirm.html
If so, should the input field be white (cause the current input field is transparent with only the outline).  Thanks!

Comment 3

[Sergi]

Eric, can you provide a screenshot?

Thanks.

(In reply to Eric Pang [:epang] from comment #2)
> (In reply to Stephany Wilkes from comment #1)
> > Hi Eric - I'm scanning our list of 1.2 items to see what we did and did not
> > finish from our list. What is the latest on this one? Thanks!
> 
> Hi Stephany, this is something I still need to look into.  Haven't had much
> time, but I'm planning to look through 1.2 bugs this week.
> 
> Sergi, I'm not sure which building block this should be modeled after. 
> Should I use the confirmation BB?
> http://buildingfirefoxos.com/building-blocks/confirm.html
> If so, should the input field be white (cause the current input field is
> transparent with only the outline).  Thanks!

Comment 4

[Eric Pang [:epang] UX]

Attachment: bluetooth rename.png

Sure, this is what it currently looks like.  Before and after you press the input field.

Comment 5

[Sergi]

Attachment: Bluetooth Rename V2

IMHO it's ok to use the confirm BB here, but it's a custom confirm build up from other BB. My suggestion is to align the title to match the one used in the default confirm BB, and use the default input field BB (the one with white background). Given the only option the user can perform in this screen is typing a new name or cancel the action, maybe we can show the keyboard instead of making the user tap in the input field.

Find an screenshot attached.

Let me know your thoughts.

Comment 6

[Eric Pang [:epang] UX]

(In reply to Sergi from comment #5)
> Created attachment 798511 [details]
> Bluetooth Rename V2
> 
> IMHO it's ok to use the confirm BB here, but it's a custom confirm build up
> from other BB. My suggestion is to align the title to match the one used in
> the default confirm BB, and use the default input field BB (the one with
> white background). Given the only option the user can perform in this screen
> is typing a new name or cancel the action, maybe we can show the keyboard
> instead of making the user tap in the input field.
> 
> Find an screenshot attached.
> 
> Let me know your thoughts.

Thanks Sergi!  Yes this looks perfect I just wasn't sure if this was in the Building Blocks.

Stephany, do you know who can help us get this implemented? Thanks!

Comment 7

[Eric Pang [:epang] UX]

(In reply to Eric Pang [:epang] from comment #6)
> (In reply to Sergi from comment #5)
> > Created attachment 798511 [details]
> > Bluetooth Rename V2
> > 
> > IMHO it's ok to use the confirm BB here, but it's a custom confirm build up
> > from other BB. My suggestion is to align the title to match the one used in
> > the default confirm BB, and use the default input field BB (the one with
> > white background). Given the only option the user can perform in this screen
> > is typing a new name or cancel the action, maybe we can show the keyboard
> > instead of making the user tap in the input field.
> > 
> > Find an screenshot attached.
> > 
> > Let me know your thoughts.
> 
> Thanks Sergi!  Yes this looks perfect I just wasn't sure if this was in the
> Building Blocks.
> 
> Stephany, do you know who can help us get this implemented? 


Hi Tim! Do you know who can help us have this update implemented? Thanks!

Comment 8

[Tim Guan-tin Chien [:timdream] (please needinfo)]

Ian, could you help?

Comment 9

[[e-mail], [e-mail]]

Sure, I'm able to help on this. Since I'm working on refactor Bluetooth pairing devices for inline pairing, I will go back to the issue later.

Just remember EJ is working on Bug 835243 - [OPEN_][Bluetooth]Bluetooth device name can be unrestricted input and does not have limit. I think he could be familiar with Bluetooth rename section, but not for Building Block. I do not know he has interest in this issue.

Comment 10

[EJ Chen [:eragonj][:小龍哥][Contributor mode on](inactive)]

(In reply to Ian Liu [:ianliu] from comment #9)
> Sure, I'm able to help on this. Since I'm working on refactor Bluetooth
> pairing devices for inline pairing, I will go back to the issue later.
> 
> Just remember EJ is working on Bug 835243 - [OPEN_][Bluetooth]Bluetooth
> device name can be unrestricted input and does not have limit. I think he
> could be familiar with Bluetooth rename section, but not for Building Block.
> I do not know he has interest in this issue.

Hi Ian, Tim

I will check the codebase about this UI change first. 

Thanks.

Comment 11

[Eric Pang [:epang] UX]

Thanks everyone for helping this get implemented!

Comment 12

[EJ Chen [:eragonj][:小龍哥][Contributor mode on](inactive)]

Attachment: modal_dialog.png

Hi Eric,

currently we use custom_dialog.js to trigger these dialogs. I am not sure this UI change is only for bluetooth app or will be a system-wide change? 

In the attachment, you can see that, our custom prompt will not render anything in the Title part.(I put some fake wordings to let you know what I am talking about) and that's why our message will be rendered under the horizontal line. (content part)

Any ideas ?

Comment 13

[Eric Pang [:epang] UX]

(In reply to ejchen from comment #12)
> Created attachment 802115 [details]
> modal_dialog.png
> 
> Hi Eric,
> 
> currently we use custom_dialog.js to trigger these dialogs. I am not sure
> this UI change is only for bluetooth app or will be a system-wide change? 
> 
> In the attachment, you can see that, our custom prompt will not render
> anything in the Title part.(I put some fake wordings to let you know what I
> am talking about) and that's why our message will be rendered under the
> horizontal line. (content part)
> 
> Any ideas ?

I think this would be only for bluetooth since I don't see screens like this appearing often.  Sergi, can I get your thoughts and feedback on use of the custom BB to achieve the mock up you created?

Comment 14

[EJ Chen [:eragonj][:小龍哥][Contributor mode on](inactive)]

Eric, 

sorry for the typo. It is triggered in modal_dialog.js not custom_dialog.js.

According your reply, I think it would be better to create another prompt window like that with custom BB. (I am currently working on this)

Comment 15

[Sergi]

(In reply to Eric Pang [:epang] from comment #13)
> (In reply to ejchen from comment #12)
> > Created attachment 802115 [details]
> > modal_dialog.png
> > 
> > Hi Eric,
> > 
> > currently we use custom_dialog.js to trigger these dialogs. I am not sure
> > this UI change is only for bluetooth app or will be a system-wide change? 
> > 
> > In the attachment, you can see that, our custom prompt will not render
> > anything in the Title part.(I put some fake wordings to let you know what I
> > am talking about) and that's why our message will be rendered under the
> > horizontal line. (content part)
> > 
> > Any ideas ?
> 
> I think this would be only for bluetooth since I don't see screens like this
> appearing often.  Sergi, can I get your thoughts and feedback on use of the
> custom BB to achieve the mock up you created?

Hey guys, i've been reviewing this and, in order to be consistent, we should use a screen with the "Cancel"/"Confirm" controls located in the header. We used this component before to display a custom field from a value selector, so i'd say this should be a system-wide component, and not bluetooth specific. We can also use an optional text field just beneath the input in case you want to better explain to the user the consequences of the change he's about to make.  

I've uploaded a couple of examples.

Let me know if you have any question.

Thanks!

Comment 16

[Sergi]

Attachment: Bluetooth Rename V2

Comment 17

[Sergi]

Attachment: Custom Field Input

Comment 18

[EJ Chen [:eragonj][:小龍哥][Contributor mode on](inactive)]

Hi Sergi, 

I have checked BB and there is no exact the same styles about this one. ( You can see that the height of header is larger, and the font-size of h1 part is different ). For me, if we have to change UI to your design. We still have to customize.

If this is really a system-wide change, maybe we to ask BB developers for this change. Do you know who can we ask for the feedback ?

Comment 19

[Sergi]

(In reply to ejchen from comment #18)
> Hi Sergi, 
> 
> I have checked BB and there is no exact the same styles about this one. (
> You can see that the height of header is larger, and the font-size of h1
> part is different ). For me, if we have to change UI to your design. We
> still have to customize.
> 
> If this is really a system-wide change, maybe we to ask BB developers for
> this change. Do you know who can we ask for the feedback ?

The header size is the same we use in value selectors. The only difference is we're using buttons there.

We can ask Arnau or Ismael about this. Just placed a need info.

Thanks!

Comment 20

[Sergi]

Attachment: Custom Field Input

Comment 21

[Arnau March [:arnau] ( not working in Firefox OS anymore :( )]

We could probably add the top navigation inside the Action menu BB (close and done buttons).
Sergi, if you open a bug with that I could work in it.
And the content (including the input field) should be custom for this app.

Comment 22

[Sergi]

Attachment: Bluetooth Rename V2

Comment 23

[Sergi]

Attachment: Bluetooth Rename V2

Comment 24

[Sergi]

I've created a new bug to solve headers at a BB level.

Thanks!

Comment 25

[EJ Chen [:eragonj][:小龍哥][Contributor mode on](inactive)]

Hi Sergi, Arnau

I will keep following up this thread. 

Thanks for your helps !

Comment 26

[Arnau March [:arnau] ( not working in Firefox OS anymore :( )]

Action menu BB updated! Please check the example in /shared/style/action_menu/header_actions.html
You could use it as a starting point to solve this bug :)

Comment 27

[EJ Chen [:eragonj][:小龍哥][Contributor mode on](inactive)]

Hi Arnau,

I will try the patch tomorrow ! thanks for your great help :P

Comment 28

[EJ Chen [:eragonj][:小龍哥][Contributor mode on](inactive)]

Attachment: Pointer to Github pull request 12378.html

Hi Arthur, 

I updated the code and used BB to show the prompt modal. Please review it when you have time later. 

Thanks for your great help.

Comment 29

[Arthur Chen [:arthurcc][inactive after 6/30]]

Comment on attachment 808960 [details]
Pointer to Github pull request 12378.html

Thanks for the patch! It works well. However there are some comments I would like you to address, detail please check github, thanks!

Comment 30

[EJ Chen [:eragonj][:小龍哥][Contributor mode on](inactive)]

Comment on attachment 808960 [details]
Pointer to Github pull request 12378.html

HI Artuhr, 

I followed your comments and updated the code and it works well.

Please kindly review my code again. Thanks :P

Comment 31

[Arthur Chen [:arthurcc][inactive after 6/30]]

Comment on attachment 808960 [details]
Pointer to Github pull request 12378.html

r=me, thanks!

Comment 32

[Eric Pang [:epang] UX]

Comment on attachment 802115 [details]
modal_dialog.png

EJ, can you add an updated screenshot so I can see how the current screen appears?  Thanks!

Comment 33

[EJ Chen [:eragonj][:小龍哥][Contributor mode on](inactive)]

Attachment: modal_dialog.png

Hi Eric, 

here comes the attachment. Please take a look !

Comment 34

[Eric Pang [:epang] UX]

(In reply to EJ Chen [:eragonj] from comment #33)
> Created attachment 809087 [details]
> modal_dialog.png
> 
> Hi Eric, 
> 
> here comes the attachment. Please take a look !

This is looking really good!  One small request, the text under the div line should have 30px left and right margins (then the text will be aligned with the text in the input area).  Thanks for all your work on this :).

Comment 35

[EJ Chen [:eragonj][:小龍哥][Contributor mode on](inactive)]

Attachment: modal_dialog.png

Hi Eric, 

I put 3rem for left and right padding and took the screenshot again. 

Does this look the same with your original design ?

Comment 36

[Eric Pang [:epang] UX]

Comment on attachment 809596 [details]
modal_dialog.png

Ej, something's off here.  It looks like the margins are 4.6rem.  The copy "Change the name..." should be aligned with "Hamachi". Thanks!

Comment 37

[EJ Chen [:eragonj][:小龍哥][Contributor mode on](inactive)]

Attachment: modal_dialog.png

Eric, 

It looks like the padding of <p> is 1.2rem to make it align the <input>. 

BTW, it looks nice now ! thanks :DD

Comment 38

[Dominic Kuo [:dkuo]]

Landed on master: 286031f100fc689027b53c7a12bdf0ba6eef730a

Comment 39

[EJ Chen [:eragonj][:小龍哥][Contributor mode on](inactive)]

Thanks all ! :P

Comment 40

[Eric Pang [:epang] UX]

Comment on attachment 810331 [details]
modal_dialog.png

Looks good, thanks for all your work on this!