renun/BewlyBewly
1
0
Fork 0
mirror of https://github.com/BewlyBewly/BewlyBewly.git synced 2025-04-14 13:15:29 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: support tab key navigation (experiment)

Browse Source
This commit is contained in:
Hakadao
2023-05-09 01:29:04 +08:00
parent 4dfe6e2b1a
commit 746aaec699
7 changed files with 62 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/contentScripts/views/Anime/components/AnimeCard.vue
View File

@@ -18,7 +18,7 @@ defineProps<{
<a
rounded="$bew-radius" w-full aspect="12/16" overflow-hidden mb-4 bg="$bew-fill-3" relative
class="group"
:href="url" target="_blank"
:href="url" target="_blank" tabindex="-1"
>
<div
v-if="rank"

4
src/contentScripts/views/Anime/components/AnimeTimeTable.vue
View File

@@ -124,13 +124,13 @@ function getAnimeTimeTable() {
<div flex gap-4>
<a
:href="`//www.bilibili.com/bangumi/play/ss${episode.season_id}`"
target="_blank"
target="_blank" tabindex="-1"
shrink-0
>
<img
:src="`${removeHttpFromUrl(
episode.square_cover,
)}@300w_300h.webp`"
)}@80w_80h.webp`"
:alt="episode.title"
w-18
aspect="square"

32
src/contentScripts/views/App.vue
View File

@@ -167,53 +167,53 @@ function setAppAppearance() {
style="backdrop-filter: var(--bew-filter-glass)"
>
<Tooltip :content="$t('dock.search')" :placement="tooltipPlacement">
<div
<button
class="dock-item"
:class="{ active: activatedPage === AppPage.Search && !isVideoPage }"
@click="changeActivatePage(AppPage.Search)"
>
<tabler:search />
</div>
</button>
</Tooltip>
<Tooltip :content="$t('dock.home')" :placement="tooltipPlacement">
<div
<button
class="dock-item"
:class="{ active: activatedPage === AppPage.Home && !isVideoPage }"
@click="changeActivatePage(AppPage.Home)"
>
<tabler:home />
</div>
</button>
</Tooltip>
<Tooltip :content="$t('dock.anime')" :placement="tooltipPlacement">
<div
<button
class="dock-item"
:class="{ active: activatedPage === AppPage.Anime && !isVideoPage }"
@click="changeActivatePage(AppPage.Anime)"
>
<tabler:device-tv />
</div>
</button>
</Tooltip>
<Tooltip :content="$t('dock.history')" :placement="tooltipPlacement">
<div
<button
class="dock-item"
:class="{ active: activatedPage === AppPage.History && !isVideoPage }"
@click="changeActivatePage(AppPage.History)"
>
<tabler:clock />
</div>
</button>
</Tooltip>
<Tooltip content="Watch later" :placement="tooltipPlacement">
<div
<button
class="dock-item"
:class="{ active: activatedPage === AppPage.WatchLater && !isVideoPage }"
@click="changeActivatePage(AppPage.WatchLater)"
>
<iconoir:playlist-play />
</div>
</button>
</Tooltip>
<!-- <div
@@ -229,25 +229,25 @@ function setAppAppearance() {
<div class="divider" />
<!-- video page -->
<div class="dock-item video active">
<button class="dock-item video active">
<tabler:player-play />
</div>
</button>
</template>
<!-- dividing line -->
<div class="divider" />
<Tooltip :content="isDark ? $t('dock.dark_mode') : $t('dock.light_mode')" :placement="tooltipPlacement">
<div class="dock-item" @click="toggleDark()">
<button class="dock-item" @click="toggleDark()">
<tabler:moon-stars v-if="isDark" />
<tabler:sun v-else />
</div>
</button>
</Tooltip>
<Tooltip :content="$t('dock.settings')" :placement="tooltipPlacement">
<div class="dock-item" @click="toggle()">
<button class="dock-item" @click="toggle()">
<tabler:settings />
</div>
</button>
</Tooltip>
</div>
</aside>

46
src/contentScripts/views/History/History.vue
View File

@@ -388,19 +388,21 @@ function jumpToLoginPage() {
<!-- Description -->
<div flex justify-between w-full>
<div flex="~ col">
<h3
class="keep-two-lines"
overflow="hidden"
text="lg overflow-ellipsis"
>
{{
historyItem.show_title
? historyItem.show_title
: historyItem.title
}}
</h3>
<div
text="$bew-text-2 sm"
<a :href="`${getHistoryUrl(historyItem)}`" target="_blank" @click.stop="">
<h3
class="keep-two-lines"
overflow="hidden"
text="lg overflow-ellipsis"
>
{{
historyItem.show_title
? historyItem.show_title
: historyItem.title
}}
</h3>
</a>
<a
un-text="$bew-text-2 sm"
m="t-4 b-2"
flex="~"
items-center
@@ -411,19 +413,19 @@ function jumpToLoginPage() {
hover:bg="$bew-theme-color-10"
duration-300
pr-2
@click.stop="
openLinkToNewTab(
historyItem.author_mid
? `https://space.bilibili.com/${historyItem.author_mid}`
: historyItem.uri,
)
:href="
historyItem.author_mid
? `https://space.bilibili.com/${historyItem.author_mid}`
: historyItem.uri
"
target="_blank"
@click.stop=""
>
<img
:src="
`${historyItem.author_face
removeHttpFromUrl(`${historyItem.author_face
? historyItem.author_face
: historyItem.cover}@80w_80h_1c`
: historyItem.cover}@80w_80h_1c`)
"
w-30px
aspect-square
@@ -447,7 +449,7 @@ function jumpToLoginPage() {
><tabler:live-photo />
Live
</span>
</div>
</a>
<p display="block xl:none" text="$bew-text-3 sm" mt-auto mb-2>
{{
useDateFormat(historyItem.view_at * 1000, 'YYYY-MM-DD HH:mm:ss')

17
src/contentScripts/views/WatchLater/WatchLater.vue
View File

@@ -172,15 +172,17 @@ function jumpToLoginPage() {
<!-- Description -->
<div flex justify-between w-full>
<div flex="~ col">
<h3
<a
class="keep-two-lines"
overflow="hidden"
text="lg overflow-ellipsis"
un-text="lg overflow-ellipsis"
:href="removeHttpFromUrl(`https://www.bilibili.com/list/watchlater?bvid=${item.bvid}`)" target="_blank"
@click.stop=""
>
{{ item.title }}
</h3>
<div
text="$bew-text-2 sm"
</a>
<a
un-text="$bew-text-2 sm"
m="t-4 b-2"
flex="~"
items-center
@@ -191,7 +193,8 @@ function jumpToLoginPage() {
hover:bg="$bew-theme-color-10"
duration-300
pr-2
@click.stop="openLinkToNewTab(`https://space.bilibili.com/${item.owner.mid}`)"
:href="`//space.bilibili.com/${item.owner.mid}`" target="_blank"
@click.stop=""
>
<img
:src="removeHttpFromUrl(`${item.owner.face}@80w_80h_1c`)"
@@ -203,7 +206,7 @@ function jumpToLoginPage() {
mr-2
>
{{ item.owner.name }}
</div>
</a>
<p display="block xl:none" text="$bew-text-3 sm" mt-auto mb-2>
{{
useDateFormat(item.pubdate * 1000, 'YYYY-MM-DD HH:mm:ss')