Lead: Shani Laendler (Unlicensed) -
| Status | ||||
|---|---|---|---|---|
|
| Table of Contents |
|---|
Description
...
Widget name is aligned left.
Additional information is aligned to the name, separated by a line separator. It should be short and informative. Avoid presenting a long description that will not be presented to its full under various responsive states.
When space is constrained, the widget name and the additional information will be truncated. The full information (name + info) will be presented in tooltip.
Action buttons:
Includes only actions that are widget-related and NOT content-related (e.g. expand/collapse widget, maximize widget, delete widget, configure widget, etc.). Content-related actions will be presented within the content area only.
Actions are presented in hover
Up to 3 action buttons may be presented. The actions may include (1) Icon Buttons, usually being used for primary actions (2) Action Menu, usually being used for secondary actions.
All actions may be presented in the actions menu (without any icon buttons), especially when there are no primary actions:
Internal Logic
...
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.
...