This repository has been archived by the owner. It is now read-only.

Better design for post viewer / editor #94

Closed
vickychijwani opened this Issue Aug 20, 2015 · 0 comments

Comments

Projects
None yet
1 participant
@vickychijwani
Owner

vickychijwani commented Aug 20, 2015

Mockup: https://vickyc.proto.io/share/?id=a072ad8f-be2a-4022-b387-3d440407e4cc&v=3

Todo list

  • Tabs + ViewPager as in design # 2
  • Settings drawer on the right
    • Tags
    • Cover image (#89)
    • Allow removing post image
  • Toolbar / tabs color using Palette API
  • Remove ActionModeManager, just allow editing title freely, same as the post body
  • Is the Save action really needed? It's only marginally useful because we don't have periodic saving yet, so that at least qualifies it to be thrown into the overflow menu. The rest of its function (namely, prompting and then saving changes to published posts) should be merged with the proposed "Publish" action in #98.
  • Insert image option should move to the editor toolbar at the bottom (linked: #22)
  • Test thoroughly: edit a lot of stuff (body, title, cover image, tags), check onPause handling, preview performance with huge post, etc.

Possible designs

Winner: Design # 2

# 1 (awkward location of tabs, between title and body, Play Newsstand-style)

2015-08-21-045310_1366x768_scrot

Notes:

  • Tags and cover image setting is in the right drawer (accessible by tapping a "settings" icon not shown above)
  • The scrim on the cover image is either the dominant color in the image or a random vibrant + dark color (if the dominant color is unsuitable / too light, or if the cover image is not set altogether)
  • The tab indicator is a complementary color of the scrim color (Android's Palette API supports those I think)
  • The WYSIWYG controls at the bottom are only visible on the edit tab (transition in from bottom) (#22)
  • Tapping the title in preview mode does nothing (or shows a tooltip asking the user to switch to edit mode first) -- but this is strange behaviour because then the tabs hierarchically should be placed above the title / tags; however I cannot seem to find a way to do it without the tabs looking weird and floaty. Alternative: keep the cover image and tabs as they are (same dimensions) and move the title and tags below those -- not sure if it'll waste too much space.

# 2 (I like this one best)

  • Hierarchy is logical (unlike design # 1)
  • Cover image has sufficient space but at the same time space is not wasted
  • No chance of accidentally hitting the <- back arrow as in design # 3
  • Additional space is available for adding new actions in the future

2015-08-21-054354_1366x768_scrot

# 3 (tap target for switching tabs is small and there's a high chance of hitting the <- back arrow!)

2015-08-21-054404_1366x768_scrot

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.