985459 - [User Story] Icon Scaling based on Grid Configuration and Screen Characteristics

Status: RESOLVED FIXED

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

Comment 1

[Kevin Grandon :kgrandon]

Taking for now, but will release as appropriate.

Comment 2

[Peter La]

Regarding icon requirements to developers, our current strategy is:

1) Require 256 & 512 sizes which will be scaled to the necessary size(s) needed by the Homescreen.

2) Provide recommended specific sizes (as a hypothetical example: 140, 80, etc.) that developers can submit if they wish to create their own pixel-perfect versions with their desired level of detail at those sizes.

Comment 3

[Kevin Grandon :kgrandon]

Attachment: SpecV2 1 Detailed Visuals.jpg

Comment 4

[Kevin Grandon :kgrandon]

Attachment: SpecV2 2 Layout.jpg

Comment 5

[Kevin Grandon :kgrandon]

Attachment: SpecV2 3 Scrolling.jpg

Comment 6

[Kevin Grandon :kgrandon]

Cristian - this bug is mainly about scaling and ensuring that the icons are the proper size for each screen. This is something that we quickly came up with a solution for user testing, but we probably need to refactor it now. There is a bunch of definitions and code in the zoom.js file. This handles the pinch-to-zoom and also icon sizing dimensions, we can change this though.

You can find visual designs here for various screen sizes: https://mozilla.app.box.com/s/65hcq8nmnm3xpixpazxf

Ideally we would come up with an algorithm that will do it's best to size the icons to the various screens (I don't think it would be good to have any hard-coded pixel values). If this seems interesting to you, feel free to take this - if not, no worries.

Comment 7

[Cristian Rodriguez (:crdlc)]

Attachment: Github pull request

Thanks a lot for the review Kevin

Comment 8

[Kevin Grandon :kgrandon]

Comment on attachment 8418712 [details]
Github pull request

Hey Cristian! Thanks for the work, this is looking really good! I think unfortunately some of the old code from the prototype might be screwing with you at different resolutions. I think we probably need to remove this line: https://github.com/mozilla-b2g/gaia/blob/master/dev_apps/home2/style/css/app.css#L17

And either generate that or set the height of each icon in javascript based on gridIconSize.

I will attach a screenshot of what I am seeing.

Comment 9

[Kevin Grandon :kgrandon]

Attachment: nexus4-icon-sizing.png

Comment 10

[Kevin Grandon :kgrandon]

Comment on attachment 8418712 [details]
Github pull request

Actually this seems like a pretty easy fix. I think I'm going to land your patch along with a follow-up, and we can tweak things later.

Comment 11

[Kevin Grandon :kgrandon]

Ok, landed your original patch here: https://github.com/mozilla-b2g/gaia/commit/cd3eab5ba190a23f1b37a78c4de6a772a00678d4

And a quick follow-up to address the icon height here: https://github.com/mozilla-b2g/gaia/commit/cdb5685e0f7cff8d0281c94eaba9eaece757398d

If you have any concerns/fixes for my follow-up please let me know. I think there might be some weirdness with icon name truncation, but we can revisit that. Thanks a lot for your patch!

Comment 12

[Kevin Grandon :kgrandon]

Mass modify - set status-b2g-v2.0 fixed for fixed bugs under vertical homescreen dependency tree.