From aee7ed992b40c31c0e0c4f2eff3f2403ecaecdd0 Mon Sep 17 00:00:00 2001 From: syuilo Date: Sat, 4 Mar 2023 10:17:45 +0900 Subject: [PATCH] enhance(client): add share button to clip and channel page Resolve #10183 --- CHANGELOG.md | 8 ++++++++ packages/frontend/src/pages/channel.vue | 11 +++++++++++ packages/frontend/src/pages/clip.vue | 13 ++++++++++++- 3 files changed, 31 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 37a5ab3e1..67d1d5070 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,14 @@ You should also include the user name that made the change. --> +## 13.x.x (unreleased) + +### Improvements +- クリップ、チャンネルページに共有ボタンを追加 + +### Bugfixes +- + ## 13.9.1 (2023/03/03) ### Bugfixes diff --git a/packages/frontend/src/pages/channel.vue b/packages/frontend/src/pages/channel.vue index 6b4fcb32f..7e9cebbd4 100644 --- a/packages/frontend/src/pages/channel.vue +++ b/packages/frontend/src/pages/channel.vue @@ -47,6 +47,7 @@ import { i18n } from '@/i18n'; import { definePageMetadata } from '@/scripts/page-metadata'; import { deviceKind } from '@/scripts/device-kind'; import MkNotes from '@/components/MkNotes.vue'; +import { url } from '@/config'; const router = useRouter(); @@ -77,6 +78,16 @@ function edit() { } const headerActions = $computed(() => channel && channel.userId ? [{ + icon: 'ti ti-share', + text: i18n.ts.share, + handler: async (): Promise => { + navigator.share({ + title: channel.name, + text: channel.description, + url: `${url}/channels/${channel.id}`, + }); + }, +}, { icon: 'ti ti-settings', text: i18n.ts.edit, handler: edit, diff --git a/packages/frontend/src/pages/clip.vue b/packages/frontend/src/pages/clip.vue index d4e8f2700..d66088d33 100644 --- a/packages/frontend/src/pages/clip.vue +++ b/packages/frontend/src/pages/clip.vue @@ -26,6 +26,7 @@ import { $i } from '@/account'; import { i18n } from '@/i18n'; import * as os from '@/os'; import { definePageMetadata } from '@/scripts/page-metadata'; +import { url } from '@/config'; const props = defineProps<{ clipId: string, @@ -82,7 +83,17 @@ const headerActions = $computed(() => clip && isOwned ? [{ ...result, }); }, -}, { +}, ...(clip.isPublic ? [{ + icon: 'ti ti-share', + text: i18n.ts.share, + handler: async (): Promise => { + navigator.share({ + title: clip.name, + text: clip.description, + url: `${url}/clips/${clip.id}`, + }); + }, +}] : []), { icon: 'ti ti-trash', text: i18n.ts.delete, danger: true,