Closed Bug 1010336 Opened 6 years ago Closed 6 years ago
[Home2] Update divider visual design
678.62 KB, application/zip
165.28 KB, image/jpeg
46 bytes, text/x-github-pull-request
|Details | Review|
218.62 KB, image/jpeg
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
Status: NEW → ASSIGNED
Target Milestone: --- → 2.0 S2 (23may)
This is a page that illustrates dividers using CSS and border-radius.
Attachment #8424150 - Attachment is obsolete: true
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
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
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? https://bug1010336.bugzilla.mozilla.org/attachment.cgi?id=8424183 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: 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.
Status: ASSIGNED → RESOLVED
Closed: 6 years ago
Resolution: --- → FIXED
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.
Reopening to implement the fallback design. This one should be really straightforward.
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
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.
Status: REOPENED → RESOLVED
Closed: 6 years ago → 6 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 1017350
You need to log in before you can comment on or make changes to this bug.