Closed
Bug 835984
Opened 12 years ago
Closed 11 years ago
Work - Push tiles away in 3D space when pressing them
Categories
(Firefox for Metro Graveyard :: Theme, defect)
Tracking
(Not tracked)
RESOLVED
FIXED
Firefox 25
People
(Reporter: fryn, Assigned: sfoster)
References
Details
(Whiteboard: feature=work)
Attachments
(1 file, 3 obsolete files)
9.82 KB,
patch
|
jwilde
:
review+
|
Details | Diff | Splinter Review |
When pressing a tile on a non-autocomplete/search view, the tile should appear to be pushed away from the user via a short animation and 3D transformation.
The angle, amplitude, and origin of the transformation/rotation should depend upon the location of the event (click or touch) relative to the tile.
Updated•12 years ago
|
Whiteboard: feature=work
Updated•12 years ago
|
Component: General → Theme
Updated•12 years ago
|
Assignee: fyan → sfoster
Assignee | ||
Comment 1•12 years ago
|
||
This is probably about ready for review, but I need to finalize bug 858388 before this is meaningful.
Assignee | ||
Comment 2•11 years ago
|
||
Attempting to use event delegation from the grid itself was getting complicated (we need the capture phase for mousedown/touchstart) so the handlers are on the item and applying/removing the transform shared on the grid.
Attachment #768476 -
Flags: review?(fyan)
Reporter | ||
Comment 3•11 years ago
|
||
Comment on attachment 768476 [details] [diff] [review]
Add bendItem transition implementation to richgrid and event handling for items
Review of attachment 768476 [details] [diff] [review]:
-----------------------------------------------------------------
Everything looks good, except the following:
::: browser/metro/base/content/bindings/grid.xml
@@ +906,5 @@
> + <handler event="mousedown" button="0" phase="capturing" action="this.control.bendItem(this, event)"/>
> + <handler event="touchstart" phase="capturing" action="this.control.bendItem(this, event.touches[0])"/>
> + <handler event="mouseup" button="0" action="this.control.unbendItem(this)"/>
> + <handler event="mouseout" button="0" action="this.control.unbendItem(this)"/>
> + <handler event="touchend" phase="capturing" action="this.control.unbendItem(this)"/>
This isn't quite the condition we want for unbending the item when using touch. Tiles should unbend immediately when a cross-slide begins. They should also unbend immediately when a scroll begins once we fix bug 886584.
Attachment #768476 -
Flags: review?(fyan) → review-
Assignee | ||
Comment 4•11 years ago
|
||
* touch/mouse event handlers moved to the richgrid binding.
* added calls to unbendItem when a cross-slide gesture begins, and when it cancels (which should cover the pan/scroll case).
* added an attribute flag for "bending" state
Applies over the patch on bug 886584 (on inbound but not m-c yet).
Attachment #768476 -
Attachment is obsolete: true
Attachment #770292 -
Flags: review?(fryn)
Reporter | ||
Updated•11 years ago
|
Attachment #759658 -
Attachment is obsolete: true
Reporter | ||
Comment 5•11 years ago
|
||
Comment on attachment 770292 [details] [diff] [review]
Add bendItem transition implementation to richgrid and event handling for items
Review of attachment 770292 [details] [diff] [review]:
-----------------------------------------------------------------
On the Surface Pro, when trying to pan the start screen horizontally with a touch that begins on a tile, the pan and unbend do not occur until the touch ends.
Reporter | ||
Comment 6•11 years ago
|
||
Comment on attachment 770292 [details] [diff] [review]
Add bendItem transition implementation to richgrid and event handling for items
Review of attachment 770292 [details] [diff] [review]:
-----------------------------------------------------------------
Almost there! Thanks for working on this! :)
Attachment #770292 -
Flags: review?(fryn) → review-
Assignee | ||
Comment 7•11 years ago
|
||
This update reworks the mouse/touchmove logic to only consume the event when we're truly committed to the gesture.
Attachment #770292 -
Attachment is obsolete: true
Attachment #771078 -
Flags: review?(jwilde)
Comment 8•11 years ago
|
||
Comment on attachment 771078 [details] [diff] [review]
Add bendItem transition implementation to richgrid and event handling for items
Review of attachment 771078 [details] [diff] [review]:
-----------------------------------------------------------------
::: browser/metro/base/content/bindings/grid.xml
@@ +656,5 @@
> + let x = (event.clientX - rect.left) / rect.width;
> + let y = (event.clientY - rect.top) / rect.height;
> +
> + if (Math.abs(x - .5) < .1 && Math.abs(y - .5) < .1) {
> + bendNode.style.transform = "perspective(450px) translateZ(-10px)";
Is there any reason why we're applying the perspective property inline, rather than in a CSS richgrid[bending=true] style?
Similar situation for translateZ (though, I guess we'd have to add a separate class or attribute on top of [bending=true] to denote center presses, which is some added complexity). At the very least, it would be good to get these sorts of values moved into constants.
Attachment #771078 -
Flags: review?(jwilde) → review+
Assignee | ||
Comment 9•11 years ago
|
||
Yeah I tried breaking out the bend function into CSS rules, but there are too many variables and it got unwieldy fast. But I'll have a go at extracting those parts out that are static into stylesheet rules. I think the center press can be the default state for [bending] and inline properties can override where necessary.
Assignee | ||
Comment 10•11 years ago
|
||
I ended up refactoring the bendItem method a little to move some of the magic and/or duplicated values into variables. I did moved the center/middle case into CSS, but was unable to move out the transform parts into the stylesheet in any way without breaking the effect.
Carrying r+, landed on inbound: https://hg.mozilla.org/integration/mozilla-inbound/rev/d65cb3cb55f5
Comment 11•11 years ago
|
||
Status: ASSIGNED → RESOLVED
Closed: 11 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 25
Updated•10 years ago
|
OS: Windows 8 Metro → Windows 8.1
You need to log in
before you can comment on or make changes to this bug.
Description
•