...
...
...
...
...
...
| colour | Yellow |
|---|---|
| title | ongoing |
| Table of Contents |
|---|
Description
A widget is a self-contained entity that is designed to work within a certain workspace
...
State | Image |
|---|---|
Regular |  |
Hover |  |
Hover- Draggable |  A frame will be added as a visual indication for draggability |
Active (relevant for draggable widgets only, while being dragged) |  |
Disabled | TBD - graphic design |
Error | - |
Focused | - |
Focused Hover | - |
Focused Active | - |
Focused Disabled | - |
...
(optional) expand or collapse of widgets can be done by clicking a button in the action buttons area.
The widget will be collapsed and expanded in animation
(optional) drag:
Hover over the widget will change the widget to ‘hover-draggable’ state.
Hover over the header area will change the mouse cursor to dragging state
The user can click-and-hold to drag the widget to a new location (see Drag and Drop for more info).
A drag handle may also be presented in hover:
...
(optional) resize: hovering over the boundaries of the widget will allow to resize it horizontally/ vertically/ diagonally.
In hover:
The mouse cursor will change to drag horizontally/vertically/diagonally
The boundary line will be visually presented as resizable
The hover and resize area should be at list 6 pixels wide.
Click-and-hold while changing the mouse location will resize the widget.
...