1377887 - Ability to select multiple filters/entities should be more intuitive

Status: RESOLVED MOVED

(Webtools Graveyard :: Pontoon, enhancement, P3)

Description

[Francesco Lodolo [:flod]]

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).

Comment 1

[Matjaz Horvat [:mathjazz]]

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

Comment 2

[justine]

(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

Comment 3

[Matjaz Horvat [: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.

Comment 4

[justine]

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

Comment 5

[Matjaz Horvat [: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

Comment 6

[Monika Maheshwari [:MonikaMaheshwari]]

I would like to work on this issue :)

Comment 7

[[DEACTIVATED] Adrian Gaudebert]

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.

Comment 8

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/pontoon/pull/1462

Comment 9

[Matjaz Horvat [:mathjazz]]

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

Comment 10

[BMO Automation]

*This bug has been moved to GitHub.*

*Please check it out on https://github.com/mozilla/pontoon/issues.*