Lead:  Liav Nadler Asaf Ben-Oved  

...

Default State

• In most cases, no tabs are selected by default

...

• Clicking a tab:

  • Selects it

  • Unselects any other tab

  • If the filter panel is unpinned - opens the filter panel in overlay mode, hiding the content behind it

  • If it’s pinned - shows the relevant content

The Filter Panel

...

Image Added

Structure

• 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

...

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

...