Adaptation UI: Combined toolbar / title bar

[eb1]

Adapt It Mobile Version: 0.8.0
Description: This issue describes the changes being made to combine the toolbar and title bar for 1.0 Release beta 5 (milestone 0.8.5).

Currently, the toolbar and title bar are on two separate rows in the UI of the adaptation screen. This works for larger screens, but tends to cause problems for smaller screens, especially when the on-screen software keyboard is present (i.e., when adapting a word or phrase). To work with this, one of the ideas proposed was to combine the toolbar and title bar, in a similar fashion to other mobile apps such as Apple's Pages app for iOS:

• In this proposal, the document title is hidden, allowing for the action buttons from the toolbar to be displayed in the title bar.

• On smaller screen widths, the Placeholder, Phrase, and Retranslation buttons are hidden inside a "More actions" button (visually, an ellipsis "...") that functions like a drop-down menu:
  
  

• On screen widths that can display these three buttons, the "More actions" button is replaced by the three buttons directly:
  

• On the largest tablet displays, button labels can also be displayed, giving users a better idea of what the buttons do:
  

• Also in this change is an "Undo" button, to deal with the lack of a "Cancel edit" on the software keyboard (e.g., an Esc key). You'll notice it as the circular arrow icon, second to the left in the combined toolbar / title bar.

This change will hopefully address some of the usability issues that we're tackling for this next milestone.