Change clear filter button from text to icon

[ozrendev]

Pull Request Type

• Bugfix
• Feature Implementation
• Documentation
• Other

Related issue

As discussed in PR #7531

Description

Changes the "Clear Filter" button with a text label to a button with an icon. It also moves the position of the button and will not show the button unless one or more filter(s) are applied.

Screenshots

Before

After

Testing

Open the Search Filter window
See that the filter button is not visible since no filters are selected
Select one or more filters
See that the Clear Filter icon is now visible
Click the Clear Filter icon to remove all current filters and confirm the icon disappears

[absidue]

Please wrap this icon in a button with no border and a transparent background colour and apply the event listeners and title etc to the button, as they are much more screen reader friendly (e.g. you forgot to add keyboard event handlers here, so it would only be usable for people with a mouse, but buttons do that automatically) and "interactive icons" won't work once we upgrade to FontAwesome 7.

I'm working on doing that for the rest of the "interactive icons" in FreeTube, so please do that here too (would be best if we don't introduce new code that has to be fixed straight away).

[ozrendev]

Sure, do you have an example of which button component to use? I looked through the code and saw <button>, <ft-button>, <ft-icon-button> so not sure which (if any) of these to use. Thanks

[absidue]

The standard HTML <button> element: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button

[ozrendev]

Thanks, I've wrapped the icon now and also removed the hover CSS since it relied on the background color

[absidue]

You can still have hover styling, the transparent background is just so it doesn't get the default button background which is grey, but overriding it to something else on hover is fine.

[ozrendev]

Okay cool, wasn't sure about that but I've re-added it

[absidue]

@ozrendev Feel free to look at my pull request here for inspiration: #8206

[ozrendev]

@ozrendev Feel free to look at my pull request here for inspiration: #8206

Perfect, thanks. I basically re-applied the styling from the first commit (but now it more or less copies your implementation of the open filter button)