Mobile client - Design pages

Design mode us used to change the look, layout, responsiveness and behaviours of widgets of a dedicated page.
Depending on user rights, a modification can be saved for the current user only or as a global setting for all users.

In general, design mode is only available when starting the mobile client on a desktop PC.
The available options and additional panels would not fit onto the small screen of mobile devices.
Also, doing exact manipulations of the layout is much easiert with the mouse instead of touch operations with the finger.

To change the layout or other options of a page in the mobile client, use the Design page item in the action panel of the page to be changed. Immediately, the screen will change and wrap the page into a preview area adding serveral panels to modify the layout.

The design page mode is made up of 4 major blocks:

1. Header
   Contains global actions like changing preview mode, undo or save/cancel
2. Left panel / Structure panel
   Shows the current structure of all elements in the page
3. Preview area / Shows the page preview while doing changes
4. Right panel / Options panel
   Shows options which can be applied to the currently selected item

Header

The header contains global actions as described below.

1. Pick a device to set the size of the preview area to be the screen size of this particular device (e.g. iPad, Smartphone) to check on how the page would look like on that device
2. Change the orientation of the preview area to portrait
3. Change the orientation of the preview area to landscape
4. Toggly scaling of the preview area to fully fit onto the screen
5. Discard current layout and create a new one based on defaults
6. Remove all items from the current layout
7. Delete selected item and all it's children from the current layout
8. Undo last change
9. Undo all changes since entering design mode
10. Save current layout
11. Close design mode

Left panel / Structure panel

The left panel is separated into 2 areas:

Content

The Content area is showing the structure of the page:

In the tree showing the page structure, it is possible to drag and drop elements to change their position in the page.
It is also possible to drag an item from the tree to the preview area to simplify the desired positioning.
When selecting an item in the tree options specific to the selected item will show up in the right panel.

Insert

The Insert area is showing elements which can be added to the page.

The upper area shows layout containers which can be added to the page.
The lower area shows properties which can be added to the page.

Preview area

The preview area shows the page layout as it would look like when opening the page outside design mode.

Elements in the preview area can be selected to change their properties using the right panel.

Right panel / Options panel

The right panel shows specific options for a selected item.
As long as no item is selected this panel will be empty.