Closed Bug 1010336 Opened 6 years ago Closed 6 years ago

[Home2] Update divider visual design


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




2.0 S3 (6june)
feature-b2g 2.0


(Reporter: kgrandon, Assigned: kgrandon)



(Whiteboard: [p=2],[systemsfe])


(4 files, 3 obsolete files)

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.
Assignee: nobody → kgrandon
Whiteboard: [p=2],[systemsfe]
Target Milestone: --- → 2.0 S2 (23may)
Attached file Github pull request (obsolete) —
feature-b2g: --- → 2.0
Attached file Divider test page (obsolete) —
This is a page that illustrates dividers using CSS and border-radius.
Attached file Dividers take 2 (obsolete) —
Attachment #8424150 - Attachment is obsolete: true
Attached image Building the dividers.
Attachment #8422557 - Attachment is obsolete: true
Attachment #8424151 - Attachment is obsolete: true
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.
Assignee: kgrandon → nobody
Priority: -- → P2
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
Attached file 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!
Attachment #8426930 - Flags: review?(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
Attachment #8426930 - Flags: review?(crdlc) → review+
Thanks. I've updated to cache it in GridView.layout. Seems a bit weird, but should work for now!
Assignee: nobody → kgrandon
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.
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?
Sure, just let me know what you need exactly.  Have you taken a look at this image?

It shows exactly how the divider is constructed using ellipses and boolean operations.
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.
Landed a new version of the dividers:

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.
Closed: 6 years ago
Resolution: --- → FIXED

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.
Reopening to implement the fallback design.  This one should be really straightforward.
Resolution: FIXED → ---
Target Milestone: 2.0 S2 (23may) → 2.0 S3 (6june)
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.
Closed: 6 years ago6 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 1017350
You need to log in before you can comment on or make changes to this bug.