903915 - [Flatfish][Homescreen] add support for large device

Status: RESOLVED FIXED

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

Description

[[e-mail]]

Expect:

Modify and Merge experiment tablet work from 

https://github.com/gaia-local/gaia

to master

Comment 1

[[e-mail]]

Attachment: pull request redirect to github

1. landscape 3x5 (Maximum 15 icons for page)
2. 5 dock icons by default

Comment 2

[Andreas Gal :gal]

Looks like you have a merge conflict there and you should ask for review.

Comment 3

[[e-mail]]

Attachment: screenshot for large device

This is a WIP (need some CSS polish to align page icons and dock icons)
I push it out early for reference howto setup the review environment (in github PR comment).

BTW, UX responded that they might have some ideas beyond the basic homescreen interactions. So we'd hold back the system and homecreen work for large device.

Comment 4

[[e-mail]]

Attachment: screenshot for large device

@Tim, I've fixed current homescreen layouts from gaia-local to master. 
But at gaia-local we only have landscape view.

Should I send for review or wait UX to provide portrait design?

Comment 5

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

I'll wait until tomorrow. The scheduling and scope issue should be resolved by that time.

Comment 6

[[e-mail]]

Attachment: screenshot while enabled the software button

Comment 7

[Andreas Gal :gal]

Can we use a simple geometric shape like a white hollow circle as we did on the other devices? Thanks.

Comment 8

[[e-mail]]

You mean software button? software button asset issue is filed in bug 905957

Comment 9

[[e-mail]]

I've send mail to @neo and he will handle the UX issue.

Neo, is the minimum tablet homescreen UX looks as you expect?

Comment 10

[Andreas Gal :gal]

Fred, the icons are scaled very badly. If we use this resolution for them we need new assets. Is there a bug for that?

Comment 11

[[e-mail]]

After checking with current 1x/2x images, both are not clear enough for tablet device. Need UX's help to provide icons. fired in bug 906594

Comment 12

[[e-mail]]

Comment on attachment 788829 [details]
pull request redirect to github

The environment setup for large device is described in github PR descriptions

Comment 13

[Cristian Rodriguez (:crdlc)]

Comment on attachment 788829 [details]
pull request redirect to github

The CSS looks perfect for me.

My concern is in JS code. If I understood the goal of this pr is to support large devices in landscape, in other words, 15 icons per page, right?

IMHO we should touch here and add this new number of icons:

https://github.com/mozilla-b2g/gaia/blob/master/apps/homescreen/js/grid.js#L43

Just a question, on this kind of devices are there orientation changes on homescreen?

Thanks and good work!

Comment 14

[[e-mail]]

Thanks for catch that! I found css is not enough to strict the icon number (but just hide it), will wait bug 903913 land and change the default icons to 5x3.


There will be orientation changes on tablet homescreen, but not sure if it happens in 1.2. The portrait mode will be a separate bug since orientation is not ready in real device yet.

Comment 15

[Cristian Rodriguez (:crdlc)]

ok thanks a lot Fred

Comment 16

[[e-mail]]

Comment on attachment 788829 [details]
pull request redirect to github

the ScreenLayout script is landed, we can use `if (ScreenLayout.getCurrentLayout() !== 'tiny')`

to detect devices larger than phone(tiny).


sizes denotes:

  - tiny(phone)
  - small(tablet)
  - medium(desktop)
  - large (wide screen)

Comment 17

[Neo Hsieh [:neo]]

Hi Fred, As I mentioned, Patryk is our visual design lead in this project now. Any visual design issues please let him know. Thanks

Comment 18

[[e-mail]]

crdic, can you help review this?

Comment 19

[[e-mail]]

update:

In current design, the homescreen will fixed in landscape mode in tablet, fixed in portrait mode in phone.

So there will be a new orientation mode called 'default', which will specify the default orientation mode in gecko. And present the correspondent mode per device. (will do that in another patch after that feature is implemented)

Comment 20

[[e-mail]]

above comment tracked in bug 911668

Comment 21

[Cristian Rodriguez (:crdlc)]

I have to review this one during today, my apologies for the delay because of I am busy

Comment 22

[Cristian Rodriguez (:crdlc)]

Hi Fred, 

   Please review the comments on Github. When you will address comments or reply me, please add a comment here because sometimes I don't follow github e-mails every hours

Thanks

Comment 23

[[e-mail]]

Hi I fixed all addressed issues (calculated icon size on page.js, remove redundant font color settings, comments), please kindly review again

regards -moz-box-sizing, its still '-moz-box-sizing' now, only IE/old opera browser use un-prefixed 'box-sizing'
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Comment 24

[Cristian Rodriguez (:crdlc)]

Comment on attachment 788829 [details]
pull request redirect to github

Good work! please review the latest comments, thanks for all

Comment 25

[[e-mail]]

Thanks! I'll fix unit-test issue before merge it.

Comment 26

[[e-mail]]

fixed unit-test issue and merged into gaia-master
https://github.com/mozilla-b2g/gaia/commit/d77edfa4987d1eaf32e815151e3e55b013ea2b87

thanks!