1010336 - [Home2] Update divider visual design

Status: RESOLVED DUPLICATE of bug 1017350

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

Description

[Kevin Grandon :kgrandon]

We have an update for dividers to line up with a change in the icon language.  The new divider tapers in an elliptical path toward the sides, with the center being widest.

Comment 1

[Kevin Grandon :kgrandon]

Attachment: Updated Divider Design.zip

Comment 2

[Kevin Grandon :kgrandon]

Attachment: Github pull request

Comment 3

[Kevin Grandon :kgrandon]

Attachment: Divider test page

This is a page that illustrates dividers using CSS and border-radius.

Comment 4

[Kevin Grandon :kgrandon]

Attachment: Dividers take 2

Comment 5

[Kevin Grandon :kgrandon]

Attachment: Building the dividers.

Comment 6

[Kevin Grandon :kgrandon]

This one is a bit tricky. For 2.0 I think we will use a white rectangle with a 40% border radius. The divider width and height should be scalable to device dimensions. At 1080p, the border should be approx 8px thick. I wonder if we would get good results scaling divider height based on icon height. E.g., dividerHeight = iconHeight / 20;

It's unlikely we will match the spec 100% in 2.0. If we have time, or for the future, we can investigate coming up with the control points necessary to draw four bezier curves on a canvas. It wouldn't be too hard to do it exactly on a canvas, we just need the proper equations to find the bezier curves based on device resolution.

Comment 7

[Kevin Grandon :kgrandon]

I think I would like to try using a polynomial regression for the divider heights. Using some online tools, we, the following gets us to where we need to be:

y = 3.813115737·10-7 x^2 + 2.710731412·10-3 x + 1.471893238

Comment 8

[Kevin Grandon :kgrandon]

Attachment: Github pull request

Cristian - what do you think of this approach? Unfortunately this is not as simple as generating the icon sizes, but I think this is a pretty good approach to take for 2.0. Let me know what you think!

Comment 9

[Cristian Rodriguez (:crdlc)]

Comment on attachment 8426930 [details] [review]
Github pull request

LGTM and excellent job! Just a concern/question, I am wondering if we can move the lineHeight to divider as a constant instead of calculating for each divider in the constructor

Comment 10

[Kevin Grandon :kgrandon]

Thanks. I've updated to cache it in GridView.layout. Seems a bit weird, but should work for now!

Comment 11

[Peter La]

Kevin - is this on master yet?  I loaded master last night and my dividers still look like rectangles.  I'm thinking if it looks too off from the spec, we may just have to stick with a rectangular design for now... but I'd like to see it first before making that call.

Comment 12

[Kevin Grandon :kgrandon]

The bug is still open, so it has not landed yet :) We will be landing it soon so you can take a look, but it will not be perfect. For it to be perfect we would need to calculat the bezier curve control points - maybe that is something you can help us do?

Comment 13

[Peter La]

Sure, just let me know what you need exactly.  Have you taken a look at this image? https://bug1010336.bugzilla.mozilla.org/attachment.cgi?id=8424183

It shows exactly how the divider is constructed using ellipses and boolean operations.

Comment 14

[Kevin Grandon :kgrandon]

I just need someone to give me the control points for the two bezier curves necessary to construct the desired shape. I'm not too familiar with doing this, so it would likely take me a week or two to figure out. I just don't see the difference being worth spending that much time on to figure out.

Let's land this and you can take a look to see if we need to spend the time to make it perfect, or get additional resources to do so.

Comment 15

[Kevin Grandon :kgrandon]

Landed a new version of the dividers: https://github.com/mozilla-b2g/gaia/commit/31eddcdb72342e844c6c4a4888ea73be0242ac45

I am fairly sure this is about as far as we will be able to take it for 2.0. If the look and feel of the dividers is still off, let's either reopen this or open a new bug.

Comment 16

[Peter La]

Attachment: FallbackDividerDesignSpec.jpg

Kevin,

I just checked your approximation of the tapered design, and in my opinion, it doesn't quite hit the mark.  I think if we can't implement it exactly, I'd rather fall back on something closer to the original.  It'll look better than what you have now.

I'm attaching a simple spec to outline a rectangular version with a vertical gradient (100% to 50% from top to bottom).

The width stays the same as the tapered design.

Comment 17

[Peter La]

Reopening to implement the fallback design.  This one should be really straightforward.

Comment 18

[Kevin Grandon :kgrandon]

I am going to clone this into another bug so we don't have three iterations of divider styles in a single bug, making it more clear.