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

RESOLVED FIXED

Status

Firefox OS
Gaia
RESOLVED FIXED
5 years ago
4 years ago

People

(Reporter: epang, Assigned: eragonj)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: visual design, visual-tracking)

Attachments

(4 attachments, 8 obsolete attachments)

(Reporter)

Description

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

Comment 1

4 years ago
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!
(Reporter)

Comment 2

4 years ago
(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!
Flags: needinfo?(sergiov)

Comment 3

4 years ago
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!
Flags: needinfo?(sergiov)
(Reporter)

Comment 4

4 years ago
Created attachment 798504 [details]
bluetooth rename.png

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

Updated

4 years ago
Flags: needinfo?(sergiov)

Comment 5

4 years ago
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.
Flags: needinfo?(sergiov)
(Reporter)

Comment 6

4 years ago
(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!
Flags: needinfo?(swilkes)
(Reporter)

Comment 7

4 years ago
(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!
Flags: needinfo?(swilkes) → needinfo?(timdream)
Ian, could you help?
Flags: needinfo?(timdream) → needinfo?(iliu)
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.
Flags: needinfo?(iliu)
(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.
(Reporter)

Comment 11

4 years ago
Thanks everyone for helping this get implemented!
Assignee: epang → ejchen
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 ?
Attachment #802115 - Flags: feedback?(epang)
(Reporter)

Comment 13

4 years ago
(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?
Flags: needinfo?(sergiov)
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

4 years ago
(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!
Flags: needinfo?(sergiov)

Comment 16

4 years ago
Created attachment 803576 [details]
Bluetooth Rename V2
Attachment #798511 - Attachment is obsolete: true

Comment 17

4 years ago
Created attachment 803577 [details]
Custom Field Input
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

4 years ago
(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!
Flags: needinfo?(arnau)

Comment 20

4 years ago
Created attachment 804344 [details]
Custom Field Input
Attachment #803577 - Attachment is obsolete: true
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.

Updated

4 years ago
Attachment #804344 - Attachment is obsolete: true

Comment 22

4 years ago
Created attachment 804349 [details]
Bluetooth Rename V2
Attachment #803576 - Attachment is obsolete: true

Comment 23

4 years ago
Created attachment 804361 [details]
Bluetooth Rename V2
Attachment #804349 - Attachment is obsolete: true

Updated

4 years ago
Depends on: 916087

Comment 24

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

Thanks!
Hi Sergi, Arnau

I will keep following up this thread. 

Thanks for your helps !
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 :)
Hi Arnau,

I will try the patch tomorrow ! thanks for your great help :P
Created attachment 808960 [details]
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.
Attachment #808960 - Flags: review?(arthur.chen)
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!
Attachment #808960 - Flags: review?(arthur.chen)
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
Attachment #808960 - Flags: review?(arthur.chen)
Comment on attachment 808960 [details]
Pointer to Github pull request 12378.html

r=me, thanks!
Attachment #808960 - Flags: review?(arthur.chen) → review+
(Reporter)

Comment 32

4 years ago
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!
Attachment #802115 - Flags: feedback?(epang) → feedback-
Created attachment 809087 [details]
modal_dialog.png

Hi Eric, 

here comes the attachment. Please take a look !
Attachment #802115 - Attachment is obsolete: true
(Reporter)

Comment 34

4 years ago
(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 :).
Flags: needinfo?(ejchen)
Created attachment 809596 [details]
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 ?
Attachment #809087 - Attachment is obsolete: true
Flags: needinfo?(ejchen)
(Reporter)

Comment 36

4 years ago
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!
Attachment #809596 - Flags: feedback?(epang) → feedback-
Created attachment 810331 [details]
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
Attachment #809596 - Attachment is obsolete: true
Attachment #810331 - Flags: feedback?(epang)

Comment 38

4 years ago
Landed on master: 286031f100fc689027b53c7a12bdf0ba6eef730a
Thanks all ! :P
Status: NEW → RESOLVED
Last Resolved: 4 years ago
Resolution: --- → FIXED
(Reporter)

Comment 40

4 years ago
Comment on attachment 810331 [details]
modal_dialog.png

Looks good, thanks for all your work on this!
Attachment #810331 - Flags: feedback?(epang) → feedback+
You need to log in before you can comment on or make changes to this bug.