Lead: Rotem Avidan (Unlicensed) -
| Status | ||||
|---|---|---|---|---|
|
...
Cards are aligned to the top and the center of the details panel.
Cards have a fixed width. Their height may vary according to the content they hold (a card will not contain a scroll bar)
  |
States
StateRegular | Read-Only | SelectedEditable | Comment | ||||||
|---|---|---|---|---|---|---|---|---|---|
Empty stateRegular |   |   | |||||||
Selected | Read-Only | |  |  | The selected card can be read-only or editable depending on the user’s permissions. | Editable | | | Editable cards contain actions button, whereas read-only card do not. |
Interaction
A card must be selected before any editing can be made. A card can be selected in two different ways:
Clicking the card (the user may need to open the details panel first). This will also move the focus to the corresponding element on the workspace.
Selecting an item from the workspace. This will open the Details Panel with details panel (if not already open) and selected the corresponding card selected.
If the Details Panel is pinned (always open), the cards will be visible, allowing the user to select a card by clicking it
Selecting a card moves the focus to the corresponding element on the workspaceClicking an icon button on the status bar will toggle between its states (e.g. locked / unlocked).
On editable mode, updating any input field will enable both the Save and Cancel buttons. In this case:
clicking the Save button will save the data.
clicking the Cancel button will roll back the fields to their previous values.
clicking either Save or Cancel will also disable both buttons.
Clicking the expand button:
in read-only mode: will open a popup window with additional information.
in editable mode: will open a dialog box with additional settings.
Validations & Errors
The card itself does not have any associated validations or errors. However, the item content (text field) may have.
If another item is selected on the screen, the currently selected card should be closed without saving any changes. closed?
Best practices
A card should:
contain information relating to one selected item or topic only.
be easy to scan.
prioritise any actions which can be performed on the item.
A card’s content and action options should be clear and understandable.
...