Page MenuHomePhabricator

Implement prototype of left TOC with swipe
Closed, ResolvedPublic

Description

This ticket is for implementation of @RHo's proposed solution to the "swipeless TOC" issue. This implementation will be used for user research, so it should be complete but doesn't have to be perfect/production ready.

Design

My proposed solution is to maintain the TOC icon on the same left hand side but re-introduce the swipe gesture.

Mocks

iPhone - TOC.png (667×375 px, 175 KB)
iPhone - TOC open v1 - mid-animating on.png (667×375 px, 109 KB)
iPhone - TOC open v1.png (667×375 px, 50 KB)

Quick web prototype to show animation
https://rawgit.com/reetssydney/prototypes/master/TOC-center-pane/TOC%20-%20center%20overlay.html

Redlines & assets available in Zeplin
https://zpl.io/Z21KiN7 – under the tag 'T145823 Evaluate TOC'

See parent task for context.

Event Timeline

@RHo @pizzzacat for the user test, when showing the old style, should the ToC toolbar button go back to the same side as the ToC?

hey @JoeWalsh – yes the old style has the ToC icon moved back to the right with ToC coming in and anchored on the right side edge of the screen when the icon is tapped or if the user swipes left. In terms of icon order, expect it is easiest to just swap position of the Find in page with ToC button.

The old version is be tested alongside the 'Modal version' on this ticket's description. Key aspects of this new version:

  • the ToC icon is on the left
  • swiping left or tapping the icon will show the ToC
  • ToC also animates in from the right but does not 'stick' to the edge of the screen, rather it is a centered modal.
  • swiping right or tapping on a 'x' icon (which appears over the ToC icon) will dismiss the ToC.

Simulator Screen Shot Oct 20, 2016, 11.20.16 AM.png (1×750 px, 116 KB)

tap.gif (850×480 px, 3 MB)

@RHo @JMinor ^

so it should be complete but doesn't have to be perfect/production ready

Does this qualify as complete but not prod ready (missing rounded rect corners, detached top, shadow style is wrong, button styling is wrong)? Let me know if there's anything else to add before this can go out to the study.

(to clarify, the gif doesn't show it but the swipe gesture to show and hide the ToC does work)

@JoeWalsh – would be great if we can get it closer pending your time, in order of importance:

  • Detach from top
  • Shadow fix
  • Rounded corners
  • Button styling

Thanks!

Prototype implemented and ready for user testing.