845110 - Calendar - Create Event Screen Updates

Status: RESOLVED FIXED

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

Description

[Eric Pang [:epang] UX]

Attachment: Calendar - Create Event Screen Mock Up

See image attachment for detailed changes.

Comment 1

[Eric Pang [:epang] UX]

Attachment: Updated Calendar - Create Event Screen Mock Up

See attached image for list of changes

Comment 2

[Eric Pang [:epang] UX]

Part of LG's request for font updates.

Comment 3

[Lukas Blakk [:lsblakk] use ?needinfo]

Mass edit to set tracking-b2g18+ for these UX bugs that were called out for v1.1

Comment 4

[Gareth Aye [:gaye] (back from PTO)]

Attachment: Screenshot of edit event UI on unagi device

Comment 5

[Gareth Aye [:gaye] (back from PTO)]

Attachment: Screenshot of edit event UI on unagi device (bottom)

Comment 6

[Gareth Aye [:gaye] (back from PTO)]

Attachment: Pull request

Comment 7

[Eric Pang [:epang] UX]

(In reply to gaye from comment #5)
> Created attachment 734089 [details]
> Screenshot of edit event UI on unagi device (bottom)

Hi Gareth, thanks for working on this.  It's close, but type in the drop downs and input fields need to be aligned with the header (the way you have 'Notes').  Did Pavel help you figure out how to do this in the other bug?

Comment 8

[Gareth Aye [:gaye] (back from PTO)]

Okay I can move them over. Pavel did help me out with the other bug (the issue was that the spec had wrong line lengths).

Comment 9

[Gareth Aye [:gaye] (back from PTO)]

Attachment: Screenshot of edit event UI on unagi device

Comment 10

[Gareth Aye [:gaye] (back from PTO)]

Attachment: Screenshot of edit event UI on unagi device (bottom)

Comment 11

[Stephany Wilkes]

Thanks - these look good. What needs to happen next?

Comment 12

[Eric Pang [:epang] UX]

(In reply to gaye from comment #10)
> Created attachment 734756 [details]
> Screenshot of edit event UI on unagi device (bottom)
 Looks good, thanks Gareth.  I'll  flag Sam for review.

Comment 13

[Sam Joch [:samjoch]]

Attachment: Left align issue

I do not know which left margin is good but it seems there is an issue with the alignment of the text. 

According to https://bug845110.bugzilla.mozilla.org/attachment.cgi?id=718753, it is seems that we missed the ~15px (~ 1.5rem) left margin alignement. 

Can't r+ right now. Please update the pr and ping me.

Comment 14

[Gareth Aye [:gaye] (back from PTO)]

To my measurement, you put the green line in https://bug845110.bugzilla.mozilla.org/attachment.cgi?id=735190 at ~30px left margin. Am I missing something?

Comment 15

[Eric Pang [:epang] UX]

Attachment: Left Margin

Sam, sorry I missed this in my review.

Hi Gareth, yes, Sam's right.  See the attached image, the input boxes should have a 15px margin while all the text should be aligned with the header with a 30px margin. Thanks!

Comment 16

[Gareth Aye [:gaye] (back from PTO)]

Attachment: Updated screenshot of email settings UI on unagi device

Comment 17

[Eric Pang [:epang] UX]

Attachment: Left Alignment

Hi Gareth, getting closer but a few more changes.

1. There needs to be a 15px margin on the left and right of the input fields/drop boxes.  Currently it's 13px on the left and 19px on the right.

2. The drop down text still isn't aligned with the header 

let me know when you've made the changes, thanks!

Comment 18

[Eric Pang [:epang] UX]

Hi Gareth, have you made the updates?  If you have can you attached an updated screenshot? Thanks!

Comment 19

[Gareth Aye [:gaye] (back from PTO)]

Hi Eric! There's an issue that I'm hashing out with jlal about the time inputs. In your mocks you removed seconds from the times and so in my work I removed the idea of seconds from events. I'm not totally sure this is what we want, but I'll figure it out by the end of the day. Sorry for not keeping you in the loop!

Comment 20

[James Lal [:lightsofapollo]]

Ah sorry for the delay on my part... I may have found a bug. I was not 100% sure if its related to this at all however. I will finish review by EOD. I am OK with landing this as is for now but we need a better solution that handles the differences between 24 hour time and 12 hour time.

Comment 21

[James Lal [:lightsofapollo]]

Comment on attachment 734090 [details]
Pull request

looks good but see my nit.

I am not sure if erics comment is addressed but my r+ carries over for the margin change if needed.

Comment 22

[Gareth Aye [:gaye] (back from PTO)]

Attachment: Updated screenshot on unagi device

Hey Eric! Hopefully this one's better. I don't think my pixel measurement tool is super accurate.

Comment 23

[Eric Pang [:epang] UX]

(In reply to gaye from comment #22)
> Created attachment 740987 [details]
> Updated screenshot on unagi device
> 
> Hey Eric! Hopefully this one's better. I don't think my pixel measurement
> tool is super accurate.

Hi Gareth, looks like the margins are still off.  It's at 13px on the left and 12px on the right now.  Also it looks like "Notes" at the bottom of the screen isn't aligned with the header (30px left margin).  Can you check that all input text is aligned with the header?

Pavel, what tool do you use to measure pixels?  Is there one you can suggest to Gareth?

Thanks guys!

Comment 24

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

I use Adobe PS ... and screenshot from device directly ... it's the best way to do this I think

Comment 25

[Eric Pang [:epang] UX]

(In reply to Pavel Ivanov [:ivanovpavel] from comment #24)
> I use Adobe PS ... and screenshot from device directly ... it's the best way
> to do this I think

ok, thanks Pavel :)

Comment 26

[Eric Pang [:epang] UX]

(In reply to Eric Pang [:epang] from comment #23)
> (In reply to gaye from comment #22)
> > Created attachment 740987 [details]
> > Updated screenshot on unagi device
> > 
> > Hey Eric! Hopefully this one's better. I don't think my pixel measurement
> > tool is super accurate.
> 
> Hi Gareth, looks like the margins are still off.  It's at 13px on the left
> and 12px on the right now.  Also it looks like "Notes" at the bottom of the
> screen isn't aligned with the header (30px left margin).  Can you check that
> all input text is aligned with the header?
> 
> Pavel, what tool do you use to measure pixels?  Is there one you can suggest
> to Gareth?
> 
> Thanks guys!

Hey Gareth, have you had a chance to work on the margin updates?
Let me know, thanks!

Comment 27

[Gareth Aye [:gaye] (back from PTO)]

Attachment: Updated screenshot on unagi device

This should be better epang...

Comment 28

[Gareth Aye [:gaye] (back from PTO)]

Attachment: Updated screenshot on unagi device

Shave a pixel off the left?

Comment 29

[Gareth Aye [:gaye] (back from PTO)]

Attachment: Updated screenshot on unagi device

Another pixel off the left!

Comment 30

[Eric Pang [:epang] UX]

Sergi/Arnau, Gareth has been working on this bug and we've been having problems with alignment of the fields and text.  The input fields and should have 15px margins while the type should start with a 30px left margin. 

Is this something we should be achieving through the use of building blocks?  Can you help us out? Let me know, thanks!

Comment 31

[Sergi]

(In reply to Eric Pang [:epang] from comment #30)
> Sergi/Arnau, Gareth has been working on this bug and we've been having
> problems with alignment of the fields and text.  The input fields and should
> have 15px margins while the type should start with a 30px left margin. 

Yes, that's correct. we should use 15px margin for the input field and 30px for the type inside.

> Is this something we should be achieving through the use of building blocks?
> Can you help us out? Let me know, thanks!

Yes, the correct paddings should be included in the building block.

I'm requesting info from Arnau for him to confirm if the BB is updated to the last version.

Thanks!

Comment 32

[Eric Pang [:epang] UX]

(In reply to Sergi from comment #31)
> (In reply to Eric Pang [:epang] from comment #30)
> > Sergi/Arnau, Gareth has been working on this bug and we've been having
> > problems with alignment of the fields and text.  The input fields and should
> > have 15px margins while the type should start with a 30px left margin. 
> 
> Yes, that's correct. we should use 15px margin for the input field and 30px
> for the type inside.
> 
> > Is this something we should be achieving through the use of building blocks?
> > Can you help us out? Let me know, thanks!
> 
> Yes, the correct paddings should be included in the building block.
> 
> I'm requesting info from Arnau for him to confirm if the BB is updated to
> the last version.
> 
> Thanks!

Thanks Sergi!

Comment 33

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

Eric,
In that case, side margins should be set in the app CSS rather than in the Building Block.

Comment 34

[Eric Pang [:epang] UX]

(In reply to arnau from comment #33)
> Eric,
> In that case, side margins should be set in the app CSS rather than in the
> Building Block.

Thanks Arnau and Sergi!

Gareth, with the info from Arnau and Sergi do you think we can proceed with this bug? Thanks!

Comment 35

[Eric Pang [:epang] UX]

(In reply to Eric Pang [:epang] from comment #34)
> (In reply to arnau from comment #33)
> > Eric,
> > In that case, side margins should be set in the app CSS rather than in the
> > Building Block.
> 
> Thanks Arnau and Sergi!
> 
> Gareth, with the info from Arnau and Sergi do you think we can proceed with
> this bug? Thanks!

Hey Gareth, this bug fell off my radar!  Think we can finish it up?  Let me know, Thanks!

Comment 36

[Eric Pang [:epang] UX]

Pavel, can you help us finish this bug up?

Comment 37

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Yep I can help.

Hey Gareth,
can you update the PR and I will make a r? and if you have any problems I can help you.

If you don't have time for this right now I can take it and create a PR based on your patch if you want.

Comment 38

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Attachment: patch for Gaia/master

Hey Eric,
can you check this patch ... I arranged the form elements and change some font-size to be consistent with current [BB]s

Comment 39

[Eric Pang [:epang] UX]

(In reply to Pavel Ivanov [:ivanovpavel] from comment #38)
> Created attachment 816549 [details]
> patch for Gaia/master
> 
> Hey Eric,
> can you check this patch ... I arranged the form elements and change some
> font-size to be consistent with current [BB]s

Hey Pavel, I tried to load the patch, but I'm not sure if I'm seeing it correctly (since the dates and times are still small).  When you have a device can you attach a screen for me to look at? Thanks!

Comment 40

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Attachment: After patch screenshot

Hey Eric,
I think now the patch is updated correctly, can you check it? I also attached this shot(desktop) because I'm not sure when I will have a device

Comment 41

[Eric Pang [:epang] UX]

(In reply to Pavel Ivanov [:ivanovpavel] from comment #40)
> Created attachment 817394 [details]
> After patch screenshot
> 
> Hey Eric,
> I think now the patch is updated correctly, can you check it? I also
> attached this shot(desktop) because I'm not sure when I will have a device

Hey Pavel, when I load your patch I can't seem to open any of the apps.  Any idea what's going on? Thanks!

Comment 42

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Oh ... I have the same issue with nightly (desktop) but there is some problem with master ... it's not related to this bug ... maybe you should try after few hours

Comment 43

[Eric Pang [:epang] UX]

(In reply to Pavel Ivanov [:ivanovpavel] from comment #42)
> Oh ... I have the same issue with nightly (desktop) but there is some
> problem with master ... it's not related to this bug ... maybe you should
> try after few hours

The issue still seems to be happening..But looking at the screen shot I think the word "Notes" is too small.  It should be the as the other input fields.  Thanks!

Comment 44

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Attachment: After patch screenshot

Comment 45

[Eric Pang [:epang] UX]

Comment on attachment 819364 [details]
After patch screenshot

Hey Pavel, can you check the font sizing.  I feel like some of the sizes are off.

Input fields (Title, Where?, notes) - 8pt
Sub headers (All day event?, Remind me) - 8pt
Value Selectors - 7pt

Can you update the fonts to the sizes listed above, thanks!

Comment 46

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Attachment: After patch shot

Comment 47

[Eric Pang [:epang] UX]

Comment on attachment 822176 [details]
After patch shot

This looks good to me know Pavel, sorry for the delay on providing feedback. Thanks!

Comment 48

[Kevin Grandon :kgrandon]

Comment on attachment 816549 [details]
patch for Gaia/master

Looks fine and seems to work. Thanks!

Comment 49

[Kevin Grandon :kgrandon]

Landed in master: https://github.com/mozilla-b2g/gaia/commit/b4e34df2b2e6249723d239d90f8cf6e4c769a6bc

Comment 50

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Hey Kevin, 
no problem :) thanks for the help :)