Ability to select multiple filters/entities should be more intuitive

[bugzilla-to-github]

This issue was created automatically by a script.

Bug 1377887

Bug Reporter: @flodolo CC: @adngdb, @mathjazz, [email protected]

Currently, when hovering one of the filters (e.g. "Has Suggestions"), the text changes color but there's no indication that the icon can work as a checkbox.

When hovering the icon, it transforms into a check mark.

I think it would be more intuitive to:

• Transform the icon into an unselected checkbox when hovering the text. Click on the text will select the filter directly, which might be a bit confusing, but it's a hint that the icon can do more.
• Transform the icon into a selected checkbox when hovering the icon itself.

Strings already have an icon that resembles a checkbox, maybe it should turn into a more empty checkbox on hover (i.e. only colored border, not full rectangle).

[bugzilla-to-github]

Comment Author: @mathjazz

Let's indeed turn filter icons into regular squares when hovering the text of the filter item.

[bugzilla-to-github]

Comment Author: justine <[email protected]>

(In reply to Matjaz Horvat [:mathjazz] from comment #1)

Let's indeed turn filter icons into regular squares when hovering the text of the filter item.

i was trying to find the filter button in pontoon i seem that i cant locate it can you help with that

[bugzilla-to-github]

Comment Author: @mathjazz

The filter icon is the "funnel" located in front of the "Search in All" placeholder in the translate view, e.g.: http://localhost:8000/projects/tutorial/playground/

You can read more about how filters work in the docs: https://mozilla-l10n.github.io/localizer-documentation/tools/pontoon/search_filters.html#filters

The idea of the bug is to change the icon into a square one you hover over filter item, making it more obvious that the icons act as checkboxes for selecting multiple filters.

[bugzilla-to-github]

Comment Author: justine <[email protected]>

Thank you now i understand, in which component is the icon located? as in which file in the source code?

[bugzilla-to-github]

Comment Author: @mathjazz

FiltersPanel: https://github.com/mozilla/pontoon/blob/master/frontend/src/modules/search/components/FiltersPanel.js

You might be able to fix the bug with CSS only: https://github.com/mozilla/pontoon/blob/master/frontend/src/modules/search/components/FiltersPanel.css

[bugzilla-to-github]

Comment Author: Monika Maheshwari [:MonikaMaheshwari] <[email protected]>

I would like to work on this issue :)

[bugzilla-to-github]

Comment Author: @adngdb

Hi Justine, because this has been stalled for a while now, I'm assigning it to Monika. If you want to continue working on Pontoon, please let us know and we'll find you another bug.

[bugzilla-to-github]

Comment Author: GitHub Bugzilla PR Linker <[email protected]>

Created attachment 9104852 Link to GitHub pull-request: https://github.com/mozilla/pontoon/pull/1462

Attached file: file_333531271.txt (text/x-github-pull-request, 44 bytes) Description: Link to GitHub pull-request: https://github.com/mozilla/pontoon/pull/1462

[bugzilla-to-github]

Comment Author: @mathjazz

As commented in the closed PR, we need to address some open questions before continuing.