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

...

• 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 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

• Chicklets have a fixed width. The closing icon (x) will be aligned to the right of the chicklet

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

...