Create a new Preview tab in the action bar to contain all preview tools.

User story:

As a marketer, I want to preview my content with different channels and templates while I'm editing the content, so that I can fix issues immediately. I want preview to be easy and immediately accessible everywhere.

Tasks:

• Split the action bar into two tabs: Edit and Preview.
• Implement a preview overlay/view that replaces the editing view (form, page editor or fragment editor) with a preview.

Behavior

• Switching from Edit to Preview tab displays a different set of actions.
• Switching from Edit to Preview tab changes the main view.
• When the action bar is collapsed show the tabs as icons.
• When you hover on the icon, you can a popup with the actions (same as context menu)

Design 

• Content apps / action bar dock side
  • https://zpl.io/aNQ6QRD
•  Content apps / action bar dock side collapsed
  • https://zpl.io/bA1NQ1B
• Pages app / action bar dock side
  • https://zpl.io/aXv6N6X
• Pages app / action bar dock side collapsed
  • https://zpl.io/VOG654Q