Skip to main content

Organizing the workspace with dock panels

Each component is contained by a dock panel. Such a panel can be stacked with other dock panels, which allows the user to create a workspace that reflects his way of working. Dock panels can be arranged in any form or shape that you like: the width and height can be changed, just like the order of appearance on the stack, its position on the canvas, and the title.

The dock panels are part of the visualization engine that enables the creation of flexible user interfaces. Behind the scenes there is some technical witchcraft happening to enable the behavior that will be described in the remainder of this document. It is sufficient to know that even though the components inside the dock panels may have radically different functions, the containing dock panels behave exactly the same.

Positioning a dock panelโ€‹

By clicking on and dragging of the panel's title, the panel will be undocked from its stack and is then ready for repositioning. During this action, the application shows a shaded area that indicates the position of the panel if it were to be dropped there.

This is what you get to see before the drop:

Dock panel drag

After dropping, the panel is docked once again to a stack. Depending on the drop position, this may be either an existing or a new stack:

  • For a new stack, the dock panel can be positioned at the top, bottom, left or right of the other stack. The space is then equally divided between the two stacks. It is possible to change the size afterwards.
  • To position a panel as a new tab in a stack, it suffices to drop the component over or next to the other tabs in the panel's title bar.

In the following example, the planning board stack is split into two, creating space for the open tasks grid:

Dock panel drop

Add a componentโ€‹

The same functionalities are accessible for new components as well. This can be done in two ways:

  • The first is done by opening the profile menu in the top bar and dragging an item on the canvas.

  • The second is by selecting a stack first and then click on the requested component. The component will then be wrapped in a dock panel and added to the stack that you selected. The current selected stack is visualized by a slightly lighter shade of the theme.

    Selected stack

Resizing dock panelsโ€‹

It is also possible to change the dimensions of the dock panels. The cursor will have a different icon when you hover over the edge of a stack. When you click - and hold it - you can start resizing the dock panel in any direction.

Here's an example how the width can be changed:

Horizontal resizing

Likewise for the height:

Vertical resizing

Dock panel actionsโ€‹

Every dock panel has three buttons:

  • Edit title
  • Maximize
  • Close

Edit titleโ€‹

It should come as no surprise that the first button will allow you to change the text that is displayed in the dock panel.


Dock panel title before modification


Dock panel title after modification

As the warning text in the modal window indicates, this is a pending change of the profile. The user will need to save the profile if those changes are to be persisted.

Maximize dock panelโ€‹

There is more not-so shocking news to report that maximizing the dock panel will fill up the entire available space on the canvas with just that one component. Minimizing the dock panel will restore the original view.

Maximized dock panel

Just like the previous button, this results in a modification of the profile. The user will need to save the profile if those changes are to be persisted.

Close dock panelโ€‹

Finally, closing the dock panel will remove itself and its component from the user profile. Of course, it is always possible to add that component to the profile again later. However, all changes made to the removed dock panel and its component will be lost.

Note that there are two close buttons: one is to remove the dock panel (located next to the title) and the other is to remove the entire stack. All dock panels inside this stack will be closed subsequently.

Just like the previous button, this results in a modification of the profile. The user will need to save the profile if those changes are to be persisted.