Change clear filter button from text to icon#8205
Change clear filter button from text to icon#8205FreeTubeBot merged 8 commits intoFreeTubeApp:developmentfrom
Conversation
github-actions
bot
added
the
PR: waiting for review
| <FontAwesomeIcon | ||
| v-if="searchFilterValueChanged" | ||
| class="navIcon clearFilterIcon" | ||
| :title="$t('Search Filters.Clear Filters')" | ||
| :icon="['fas', 'filter-circle-xmark']" | ||
| role="button" | ||
| tabindex="0" | ||
| @click="clearFilters" | ||
| /> |
There was a problem hiding this comment.
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).
There was a problem hiding this comment.
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
There was a problem hiding this comment.
The standard HTML <button> element: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button
There was a problem hiding this comment.
Thanks, I've wrapped the icon now and also removed the hover CSS since it relied on the background color
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
Okay cool, wasn't sure about that but I've re-added it
efb4f5ff-1298-471a-8973-3d47447115dc
added
PR: changes requested
and removed
PR: waiting for review
Head branch was pushed to by a user without write access
Head branch was pushed to by a user without write access
Head branch was pushed to by a user without write access
efb4f5ff-1298-471a-8973-3d47447115dc
added
PR: waiting for review
efb4f5ff-1298-471a-8973-3d47447115dc
requested review from
PikachuEXE and
absidue
efb4f5ff-1298-471a-8973-3d47447115dc
added
PR: changes requested
and removed
PR: waiting for review
Co-authored-by: PikachuEXE <[email protected]>
Head branch was pushed to by a user without write access
efb4f5ff-1298-471a-8973-3d47447115dc
added
PR: waiting for review
efb4f5ff-1298-471a-8973-3d47447115dc
added
PR: changes requested
and removed
PR: waiting for review
Co-authored-by: absidue <[email protected]>
Head branch was pushed to by a user without write access
ozrendev
dismissed stale reviews from PikachuEXE and efb4f5ff-1298-471a-8973-3d47447115dc
via
6fcc43e
|
Linter is a little mad |
efb4f5ff-1298-471a-8973-3d47447115dc
added
PR: waiting for review
github-actions
bot
removed
the
PR: waiting for review
* development: Change clear filter button from text to icon (FreeTubeApp#8205) Feat clickable playlist progress bar (FreeTubeApp#7782) Add Hide channels based on text (FreeTubeApp#7948) Clean up defunct shaka-player types patching (FreeTubeApp#8224)
* development: Change clear filter button from text to icon (FreeTubeApp#8205) Feat clickable playlist progress bar (FreeTubeApp#7782) Add Hide channels based on text (FreeTubeApp#7948) Clean up defunct shaka-player types patching (FreeTubeApp#8224)
|
I thought i was being silly for starting a discussion about it but im glad that it all worked out |
5 participants
Pull Request Type
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