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

...

• Chicklets gives the user an indication that the data is currently filtered by one or more filters

• There are two types of chicklets:

  • Pre-defined Mandatory- The user can change their value but cannot remove them (for example, when filtering by organization is mandatory)
    Deleting Mandatory - deleting these chicklets will switch the data to empty state, instructing the user to apply all mandatory filters

  • Optional - the user can add, update and delete chickletsdeleting these chicklets will clear the corresponding filters

States

Structure

• The chicklet area stretched to the full width of its container

• 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), allowing the user to remove clear the filter

Placement and Positioning

• The chicklet area appears on the content section of the page, above the data

• In case the chicklet area has no items it will be hidden. Adding the first item chicklet will push all the content below the chicklet area

• Mandatory chicklets will be the first items. Other items will appear in the order they were added

• In case the set of chicklets exceeds the width of the chicklet area, it will wrap to the next row. Exceeding , up to three rows will show a scroll bar. Beyond that point a scrollbar will appear

Interaction

• 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

  • Clears the corresponding filter

  • Removes the relevant corresponding blue indicator from the filter bar

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

...