Mobile UX Refinement and optimisation

[tracygardner]

Mobile UX improvements based on input from team review and creative commons UX report:

• Gizmo menu overflows on very narrow phones (and the add-shapes popup gets cut off)
• Flycam message is inappropriate on mobile/touch
• Gizmo menu wastes space in landscape mobile
• Status text takes up too much room on the canvas; coordinate reporting is unclear
• Ctrl + G badges misplaced when gizmos span two rows
• Position readout looks editable when it isn't
• Demo text ignores keyboard and touch controls
• Control docs don't fit below the canvas, and are unreachable in mobile landscape
• Context toolbar issues: misleading enable/disable icon, wrong buttons for detached blocks, missing block tooltips
• HUD doesn't show correctly on iPad
• Selected block is lost on tablet when switching views
• Missing automated test coverage for UI features

[lawsie]

#708
Wrap the gizmo menu to two lines on mobile phones (very narrow screens). As a consequence of this, also reformat the add shapes popup at narrow screen sizes to make sure it is properly visible.

[lawsie]

#710
Show a more appropriate message for flycam on mobile (and translate for locales)

[lawsie]

#712
Display the gizmo menu to the right of the canvas in landscape mobile to give more space

[lawsie]

#713
Move the status text off the canvas to avoid messages taking up a lot of room, especially on mobile. Improve the reporting of coordinates.

[lawsie]

#715
On smaller layouts with two gizmo rows, make the Ctrl + G badges show above the gizmos on the top row

[lawsie]

#729
Restyle the position readout so it doesn't look like it is editable when it isn't

[lawsie]

#730
Update text in demos to also be relevant to keyboard and touch controls

[lawsie]

#732
If there is no room below the canvas to show the contents of the keyboard or on-screen controls documentation tabs, show them in a modal instead. This previously happened in certain cases but didn't properly measure the height available. It should now go modal in all cases where it makes sense.

Also moved the tabs for these documentation panels under the gizmos on mobile landscape otherwise you couldn't even use them.

[lawsie]

#744

• Switch the enable/disable icon in the context toolbar to show the opposite state from current

• Add duplicate/comment buttons to the toolbar for detached blocks, and remove enable/disable because the block is always disabled

• Add tooltips for all blocks (and associated translations)

[lawsie]

• Bug fixes - tablet experience #675
  Bug fixes to make sure HUD shows up on iPad correctly.

• Bug fix - keep selection #676
  Bug fix - keep selected block on tablet when switching views.

• Add tests for UI features #695
  Adds automated tests for various UI-related features