Content Comparison

Lead:  Liav Nadler Asaf Ben-Oved  

...

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

...

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

...

• Hovering a chicklet will show the x icon, allowing the user to remove it (see below)

• Clicking a chicklet:

  • When the filter panel is pinned: switches the filter panel to the selected filter

  • When unpinned: opens the relevant filter panel

• Clicking the x icon:

  • Removes the chicklet

  • Moves the rest of the chicklets to take the place of the chicklet that was removed

  • Clears the corresponding filter

  • Removes the blue indicator from the corresponding filter bar

• Note: on complex scenarios, behaviour may vary (see below)

...