Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Lead:  Liav Nadler Asaf Ben-Oved  

Status
colourBlue
titledone

...

State

Image

Comments

Regular

TBD

Hover

TBD

Selected

TBD

Only one tab can be selected at any given time

In Focus

TBD

Default State

  • In most cases, no tabs are selected by default

...

  • The filter panel contains the following elements:

    • At the top:

      • A title, similar to the title on the filter bar

      • A pin icon, allowing the user to switch between pinned and unpinned states

      • A help icon (optional)

    • The area under the title is the main content area of the panel. See content below

    • The bottom of the panel may contain the following elements:

      • An Apply button:

        • This button is mandatory, unless the panel contains only one possible selection

        • The button is disabled until the content of the panel is changed

      • An indicator showing the number of selected items (e.g. 4 queues selected)

      • A Cancel button:

        • The button is disabled until the content of the panel is changed

      • A Reset button (TBD)

        • The button is disabled until the filter was applied

...

State

Image

Comments

Regular

TBD

Hover

TBD

Selected

TBD

In Focus

TBD

Structure

  • Each chicklet contains:

    • An icon, similar to the relevant icon on the filter bar

    • A label, showing the filter value (e.g. Last 24 hours). In case of multiple selection the chicklet will show the name of the filter, followed by the number of items in brackets (e.g. Interactions (3)). In this case, hovering the chicklet will show a tooltip with the full list of items

    • A closing icon (x, showing on hover), allowing the user to clear the filter

...