zio
/
elk
2
0
Fork 0
Code Packages Releases 2 Activity

feat: add tooltip for status action

zio/stable
三咲智子 2022-11-24 13:04:20 +08:00
parent b947931d3b
commit 6b3a14cf1e
No known key found for this signature in database
GPG Key ID: 69992F2250DFD93E
6 changed files with 132 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/common/CommonTooltip.vue 100644
View File

@ -0,0 +1,16 @@
<script setup lang="ts">
</script>
<template>
<VTooltip
v-bind="$attrs"
>
<slot />
<template #popper>
<div text-3>
<slot name="popper" />
</div>
</template>
</VTooltip>
</template>

37
components/status/StatusActionButton.vue 100644
View File

@ -0,0 +1,37 @@
<script setup lang="ts">
defineProps<{
text?: string | number
color: string
icon: string
activeIcon: string
tooltip: string
hover: string
groupHover: string
active?: boolean
disabled?: boolean
}>()
defineOptions({
inheritAttrs: false,
})
</script>
<template>
<CommonTooltip placement="bottom">
<button
flex gap-1 items-center rounded :hover="`op100 ${hover}`" group
:class="active ? [color, 'op100'] : 'op50'"
v-bind="$attrs"
>
<div rounded-full p2 :group-hover="groupHover">
<div :class="[active && activeIcon ? activeIcon : icon, { 'pointer-events-none': disabled }]" />
</div>
<span v-if="text">{{ text }}</span>
</button>
<template #popper>
{{ tooltip }}
</template>
</CommonTooltip>
</template>

80
components/status/StatusActions.vue
View File

@ -37,45 +37,53 @@ const toggleBookmark = () => toggleStatusAction(
<template>
<div flex justify-between gap-8>
<RouterLink flex gap-1 items-center rounded op50 hover="op100 text-blue" group :to="getStatusPath(status)">
<div rounded-full p2 group-hover="bg-blue/10">
<div i-ri:chat-3-line />
</div>
<span v-if="status.repliesCount">{{ status.repliesCount }}</span>
<RouterLink :to="getStatusPath(status)">
<StatusActionButton
:text="status.repliesCount"
color="text-blue" hover="text-blue" group-hover="bg-blue/10"
icon="i-ri:chat-3-line"
tooltip="Replay"
/>
</RouterLink>
<button
flex gap-1 items-center rounded op50 hover="op100 text-green" group
:class="(status.reblogged ? 'text-green op100' : 'op50') + (isLoading.reblogged ? ' pointer-events-none' : '')"
<StatusActionButton
:text="status.reblogsCount"
color="text-green" hover="text-green" group-hover="bg-green/10"
icon="i-ri:repeat-line"
active-icon="i-ri:repeat-fill"
:active="status.reblogged"
:disabled="isLoading.reblogged"
tooltip="Boost"
@click="toggleReblog()"
>
<div rounded-full p2 group-hover="bg-green/10">
<div :class="status.reblogged ? 'i-ri:repeat-fill' : 'i-ri:repeat-line'" />
</div>
<span v-if="status.reblogsCount">{{ status.reblogsCount }}</span>
</button>
<button
flex gap-1 items-center rounded hover="op100 text-rose" group
:class="status.favourited ? 'text-rose op100' : 'op50'"
/>
<StatusActionButton
:text="status.favouritesCount"
color="text-rose" hover="text-rose" group-hover="bg-rose/10"
icon="i-ri:heart-3-line"
active-icon="i-ri:heart-3-fill"
:active="status.favourited"
:disabled="isLoading.favourited"
tooltip="Favourite"
@click="toggleFavourite()"
>
<div rounded-full p2 group-hover="bg-rose/10">
<div :class="(status.favourited ? 'i-ri:heart-3-fill' : 'i-ri:heart-3-line') + (isLoading.favourited ? ' pointer-events-none' : '')" />
</div>
<span v-if="status.favouritesCount">{{ status.favouritesCount }}</span>
</button>
<button
flex gap-1 items-center rounded hover="op100 text-yellow" group
:class="status.bookmarked ? 'text-yellow op100' : 'op50'"
/>
<StatusActionButton
color="text-yellow" hover="text-yellow" group-hover="bg-yellow/10"
icon="i-ri:bookmark-line"
active-icon="i-ri:bookmark-fill"
:active="status.bookmarked"
:disabled="isLoading.bookmarked"
tooltip="Bookmark"
@click="toggleBookmark()"
>
<div rounded-full p2 group-hover="bg-rose/10">
<div :class="(status.bookmarked ? 'i-ri:bookmark-fill' : 'i-ri:bookmark-line') + (isLoading.bookmarked ? ' pointer-events-none' : '')" />
</div>
</button>
<!-- <button flex gap-1 items-center rounded op50 hover="op100 text-purple" group>
<div rounded-full p2 group-hover="bg-purple/10">
<div i-ri:share-circle-line />
</div>
</button> -->
/>
<!-- <VDropdown>
<button flex gap-1 items-center rounded op50 hover="op100 text-purple" group>
<div rounded-full p2 group-hover="bg-purple/10">
<div i-ri:share-circle-line />
</div>
</button>
</VDropdown> -->
</div>
</template>

1
package.json
View File

@ -28,6 +28,7 @@
"blurhash": "^2.0.4",
"eslint": "^8.27.0",
"esno": "^0.16.3",
"floating-vue": "2.0.0-beta.20",
"form-data": "^4.0.0",
"fs-extra": "^10.1.0",
"js-yaml": "^4.1.0",

7
plugins/floating-vue.ts 100644
View File

@ -0,0 +1,7 @@
import FloatingVue from 'floating-vue'
import { defineNuxtPlugin } from '#app'
import 'floating-vue/dist/style.css'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(FloatingVue)
})

27
pnpm-lock.yaml
View File

@ -17,6 +17,7 @@ specifiers:
blurhash: ^2.0.4
eslint: ^8.27.0
esno: ^0.16.3
floating-vue: 2.0.0-beta.20
form-data: ^4.0.0
fs-extra: ^10.1.0
js-yaml: ^4.1.0
@ -50,6 +51,7 @@ devDependencies:
blurhash: 2.0.4
eslint: 8.27.0
esno: 0.16.3
floating-vue: 2.0.0-beta.20
form-data: 4.0.0
fs-extra: 10.1.0
js-yaml: 4.1.0
@ -660,6 +662,16 @@ packages:
- supports-color
dev: true
/@floating-ui/core/0.3.1:
resolution: {integrity: sha512-ensKY7Ub59u16qsVIFEo2hwTCqZ/r9oZZFh51ivcLGHfUwTn8l1Xzng8RJUe91H/UP8PeqeBronAGx0qmzwk2g==}
dev: true
/@floating-ui/dom/0.1.10:
resolution: {integrity: sha512-4kAVoogvQm2N0XE0G6APQJuCNuErjOfPW8Ux7DFxh8+AfugWflwVJ5LDlHOwrwut7z/30NUvdtHzQ3zSip4EzQ==}
dependencies:
'@floating-ui/core': 0.3.1
dev: true
/@humanwhocodes/config-array/0.11.7:
resolution: {integrity: sha512-kBbPWzN8oVMLb0hOUYXhmxggL/1cJE6ydvjDIGi9EnAGUyA7cLVKQg+d/Dsm+KZwx2czGHrCmMVLiyg8s5JPKw==}
engines: {node: '>=10.10.0'}
@ -3952,6 +3964,15 @@ packages:
resolution: {integrity: sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==}
dev: true
/floating-vue/2.0.0-beta.20:
resolution: {integrity: sha512-N68otcpp6WwcYC7zP8GeJqNZVdfvS7tEY88lwmuAHeqRgnfWx1Un8enzLxROyVnBDZ3TwUoUdj5IFg+bUT7JeA==}
peerDependencies:
vue: ^3.2.0
dependencies:
'@floating-ui/dom': 0.1.10
vue-resize: 2.0.0-alpha.1
dev: true
/follow-redirects/1.15.2:
resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
engines: {node: '>=4.0'}
@ -7587,6 +7608,12 @@ packages:
- supports-color
dev: true
/vue-resize/2.0.0-alpha.1:
resolution: {integrity: sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==}
peerDependencies:
vue: ^3.0.0
dev: true
/vue-router/4.1.6_vue@3.2.45:
resolution: {integrity: sha512-DYWYwsG6xNPmLq/FmZn8Ip+qrhFEzA14EI12MsMgVxvHFDYvlr4NXpVF5hrRH1wVcDP8fGi5F4rxuJSl8/r+EQ==}
peerDependencies: