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 was 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 was changed.

    • A Clear button (if in case the design has no chicklets):

      • The button is disabled until the filter was applied.

...

• Clicking the pin icon switches the icon between pinned and unpinned states.

  • When pinned:

    • the content of the page stretches to its full width,

    • the panel closes, unless changes were made to the content before applying the filter. If changes were made the panel will stay open until the changes are applied or cancelled.

  • When unpinned:

    • the content of the page narrows to be shown next to the panel (so nothing is hidden).

• Clicking the help icon opens a relevant help page in a new browser window.

• Changing the content of the panel enables the Apply, Cancel and Clear buttons, if exists.

• Clicking the Apply button:

  • applies the filter to the presented data,

  • disables the Apply button,

  • enables the Clear button, if exists,

  • shows a blue indicator next to the relevant tab on the filter bar,

  • if unpinned - closes the filter panel,

  • adds a chicklet to the chicklet area (see below), unless otherwise specified.

• Clicking the Cancelbutton:

  • cancels any changes made to the content before hitting the Apply button,

  • disables the Apply and Cancel buttons,

  • if unpinned - closes the panel.

• Clicking the Clear button:

  • Resets all fields in the filter panel to their initial states, either blanks or default values.

  • At this point, the user can either:

    • click Apply - this will remove the blue dot next to the relevant tab on the filter bar, as well as the corresponding chicklet, if exists,

    • click Cancel - this will revert the filter panel to its previous state, before clicking the Clear button.

• Clicking outside the filter panel (including clicking on another filter tab):

  • If no changes were made to the content and the panel is unpinned - closes the panel.

  • If changes were made to the content but the filter was not applied, a dialog appears, allowing the user to either close the panel without applying the filter or continue editing.

...

Structure

• Each chicklet contains:

  • an icon, similar to the corresponding 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.

...