feat: better keyboard navigation (#1104)

Related issue: #375
This commit is contained in:
Anton Nesterov 2021-04-27 20:29:28 +00:00 committed by GitHub
parent e4e3090153
commit 4d080babcd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 39 additions and 1 deletions

View File

@ -12,7 +12,6 @@
text-decoration: none;
transition: 0.3s;
border-radius: 4px;
outline: none;
white-space: nowrap;
font-weight: 500;
vertical-align: middle;

View File

@ -13,6 +13,7 @@
>
<router-link
class="thumbnailLink"
tabindex="-1"
:to="{
path: `/watch/${id}`,
query: playlistId ? {playlistId} : {}

View File

@ -7,6 +7,8 @@
<div class="inner">
<div
class="navOption topNavOption mobileShow"
role="button"
tabindex="0"
@click="navigate('subscriptions')"
>
<font-awesome-icon
@ -21,7 +23,10 @@
<div
v-if="!hideTrendingVideos"
class="navOption mobileHidden"
role="button"
tabindex="0"
@click="navigate('trending')"
@keypress="navigate('trending')"
>
<font-awesome-icon
icon="fire"
@ -35,7 +40,10 @@
<div
v-if="!hidePopularVideos"
class="navOption mobileHidden"
role="button"
tabindex="0"
@click="navigate('popular')"
@keypress="navigate('popular')"
>
<font-awesome-icon
icon="users"
@ -49,7 +57,10 @@
<div
v-if="!hidePlaylists"
class="navOption mobileShow"
role="button"
tabindex="0"
@click="navigate('userplaylists')"
@keypress="navigate('userplaylists')"
>
<font-awesome-icon
icon="bookmark"
@ -65,7 +76,10 @@
/>
<div
class="navOption mobileShow"
role="button"
tabindex="0"
@click="navigate('history')"
@keypress="navigate('history')"
>
<font-awesome-icon
icon="history"
@ -79,7 +93,10 @@
<hr>
<div
class="navOption mobileShow"
role="button"
tabindex="0"
@click="navigate('settings')"
@keypress="navigate('settings')"
>
<font-awesome-icon
icon="sliders-h"
@ -92,7 +109,10 @@
</div>
<div
class="navOption mobileHidden"
role="button"
tabindex="0"
@click="navigate('about')"
@keypress="navigate('about')"
>
<font-awesome-icon
icon="info-circle"
@ -112,7 +132,10 @@
:key="index"
class="navChannel mobileHidden"
:title="channel.name"
role="button"
tabindex="0"
@click="goToChannel(channel.id)"
@keypress="goToChannel(channel.id)"
>
<div
class="thumbnailContainer"

View File

@ -7,22 +7,34 @@
<font-awesome-icon
class="menuIcon navIcon"
icon="bars"
role="button"
tabindex="0"
@click="toggleSideNav"
@keypress="toggleSideNav"
/>
<font-awesome-icon
class="navBackIcon navIcon"
icon="arrow-left"
role="button"
tabindex="0"
@click="historyBack"
@keypress="historyBack"
/>
<font-awesome-icon
class="navForwardIcon navIcon"
icon="arrow-right"
role="button"
tabindex="0"
@click="historyForward"
@keypress="historyForward"
/>
<font-awesome-icon
class="navSearchIcon navIcon"
icon="search"
role="button"
tabindex="0"
@click="toggleSearchContainer"
@keypress="toggleSearchContainer"
/>
<font-awesome-icon
class="navNewWindowIcon navIcon"
@ -52,7 +64,10 @@
<font-awesome-icon
class="navFilterIcon navIcon"
icon="filter"
role="button"
tabindex="0"
@click="showFilters = !showFilters"
@keypress="showFilters = !showFilters"
/>
</div>
<ft-search-filters