Skip to content
Snippets Groups Projects

Rethinking filters/search

    • Closed Issue created by Mark Pundsack @markpundsack

    Description

    This is a meta issue for a collection of filter/search changes, so they can be understand and discussed in context.

    Proposal

    Big picture:

    • Allow meta filters in search field. e.g. label=CI.
    • Add autocomplete to meta filters in search field.
    • Update search field with meta filters as use filters UI.
    • Let users hide filters UI and/or put it behind an icon.

    Additional changes:

    • When searching, treat multiple words as logical AND, not an exact phrase.
    • Support NOT (e.g. using a - prefix).
    • Support boolean logic (AND and OR and ()), but only in the search field.
    • Support exact phrases using quotation marks.
    • Put filters and search on the same level. Entering a new search term shouldn't reset your filters and vice versa.
    • Replace label filter UI w/ autocompleting tag interface, like in the issue edit view.
    • Add filter for subscribed.
    • Save often-used filters/searches

    Links / references

    Final design

    Empty state

    smart-filters-empty

    Types of filters

    As soon as you select the text field, a dropdown comes up to show you the types of filters you can use. You can select one of the options by clicking or hitting Enter. You can navigate the list with the arrow keys in your keyboard or by typing in the type of filter you want. If you type in a word that's not part of the list, a normal text search will be performed. smart-filters--text-keep-typing

    Using a filter

    When you select the type of filter you want to use, the first half of the token appears and the next dropdown shows up. You can either scroll through the whole list or start typing to narrow it down. smart-filters__author-dropdown

    Narrow down results

    As you start typing, the closest match gets selected. You can click it or hit enter to select. smart-filters__autocomplete

    Filter was added

    Once you select the user, the token gets added to the field. smart-filters__author-added_copy

    Selecting a token

    When you click on a token or hit backspace when the cursor is next to it, the token gets selected, which is represented by it becoming darker. smart-filters__selected-token_copy

    Editing a filter

    If you double click a token or press enter when it's selected, you can edit the value for the filter. smart-filters__editing-token_copy

    Assignee dropdown

    smart-filters__assignee-dropdown

    Weight dropdown

    smart-filters__weight-dropdown

    Label dropdown

    smart-filters__label__dropdown

    Default / Saved filters

    The dropdown on the left houses a list of default filters to make it easier to perform common searches, as well as any filters the user has saved. smart-filters__saved-filters

    Scrolling

    The dropdown at the bottom is fixed and the list scrolls underneath it. smart-filters__saved-filters--scroll

    Using a saved filter

    The star turns orange to indicate that you're using a saved filter. If you edit this search the star turns grey again. smart-filters__saved-filter

    Several filters added

    smart-filters__author-complex-search

    Mobile - Empty state

    smart-filter__mobile--empty

    Mobile - Types of filters

    When the user taps on the search bar, it takes control of the screen and the user immediately sees the list where they can select the type of filter they want. smart-filter__mobile--types

    Mobile - Filtering

    Just like on desktop, when they select the type of filter they want, the next dropdown comes up. They can scroll through the list and avoid typing at all. smart-filter__mobile--author-autocomplete

    Mobile - Filter added

    smart-filter__mobile--added

    Designs

      Child items ...

      2. Activity

      Please register or sign in to reply