Closed
Bug 1010336
Opened 10 years ago
Closed 10 years ago
[Home2] Update divider visual design
Categories
(Firefox OS Graveyard :: Gaia::Homescreen, defect, P2)
Tracking
(feature-b2g:2.0)
People
(Reporter: kgrandon, Assigned: kgrandon)
References
Details
(Whiteboard: [p=2],[systemsfe])
Attachments
(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 | ||
Comment 1•10 years ago
|
||
Assignee | ||
Updated•10 years ago
|
Assignee: nobody → kgrandon
Status: NEW → ASSIGNED
Whiteboard: [p=2],[systemsfe]
Target Milestone: --- → 2.0 S2 (23may)
Assignee | ||
Comment 2•10 years ago
|
||
Updated•10 years ago
|
feature-b2g: --- → 2.0
Assignee | ||
Comment 3•10 years ago
|
||
This is a page that illustrates dividers using CSS and border-radius.
Assignee | ||
Comment 4•10 years ago
|
||
Assignee | ||
Updated•10 years ago
|
Attachment #8424150 -
Attachment is obsolete: true
Assignee | ||
Comment 5•10 years ago
|
||
Assignee | ||
Updated•10 years ago
|
Attachment #8422557 -
Attachment is obsolete: true
Assignee | ||
Updated•10 years ago
|
Attachment #8424151 -
Attachment is obsolete: true
Assignee | ||
Comment 6•10 years ago
|
||
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
Updated•10 years ago
|
Priority: -- → P2
Assignee | ||
Comment 7•10 years ago
|
||
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
Assignee | ||
Comment 8•10 years ago
|
||
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 9•10 years ago
|
||
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+
Assignee | ||
Comment 10•10 years ago
|
||
Thanks. I've updated to cache it in GridView.layout. Seems a bit weird, but should work for now!
Assignee: nobody → kgrandon
Comment 11•10 years ago
|
||
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.
Assignee | ||
Comment 12•10 years ago
|
||
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•10 years ago
|
||
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.
Assignee | ||
Comment 14•10 years ago
|
||
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.
Assignee | ||
Comment 15•10 years ago
|
||
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: 10 years ago
Resolution: --- → FIXED
Comment 16•10 years ago
|
||
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•10 years ago
|
||
Reopening to implement the fallback design. This one should be really straightforward.
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
Updated•10 years ago
|
Target Milestone: 2.0 S2 (23may) → 2.0 S3 (6june)
Assignee | ||
Comment 18•10 years ago
|
||
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.
Assignee | ||
Updated•10 years ago
|
Status: REOPENED → RESOLVED
Closed: 10 years ago → 10 years ago
Resolution: --- → DUPLICATE
You need to log in
before you can comment on or make changes to this bug.
Description
•