Better design for post viewer / editor

[vickychijwani]

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 (Allow uploading post 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 Show Publish action in Toolbar for drafts or for changes to published posts #98.
• Insert image option should move to the editor toolbar at the bottom (linked: Make delightful post editor UX #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)

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) (Make delightful post editor UX #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

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