From c550dafb815374cd050904d8959e62c8150889d9 Mon Sep 17 00:00:00 2001 From: syuilo Date: Sun, 8 Jan 2023 10:20:28 +0900 Subject: [PATCH] tweak note component --- packages/frontend/src/components/MkMenu.vue | 7 +- packages/frontend/src/components/MkNote.vue | 65 +++++++++++- .../src/components/MkNoteDetailed.vue | 65 +++++++++++- .../src/components/MkRenoteButton.vue | 99 ------------------- 4 files changed, 124 insertions(+), 112 deletions(-) delete mode 100644 packages/frontend/src/components/MkRenoteButton.vue diff --git a/packages/frontend/src/components/MkMenu.vue b/packages/frontend/src/components/MkMenu.vue index 31a3f7f1c..abae272e8 100644 --- a/packages/frontend/src/components/MkMenu.vue +++ b/packages/frontend/src/components/MkMenu.vue @@ -251,17 +251,18 @@ onBeforeUnmount(() => { color: #fff; &:before { - background: #d42e2e; + background: #d42e2e !important; } } } + &:active, &.active { - color: var(--fgOnAccent); + color: var(--fgOnAccent) !important; opacity: 1; &:before { - background: var(--accent); + background: var(--accent) !important; } } diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue index 5a97204bc..16d8a6c26 100644 --- a/packages/frontend/src/components/MkNote.vue +++ b/packages/frontend/src/components/MkNote.vue @@ -75,14 +75,26 @@

{{ appearNote.repliesCount }}

- - + + - @@ -111,7 +123,7 @@ import MkReactionsViewer from '@/components/MkReactionsViewer.vue'; import MkMediaList from '@/components/MkMediaList.vue'; import MkCwButton from '@/components/MkCwButton.vue'; import MkPoll from '@/components/MkPoll.vue'; -import MkRenoteButton from '@/components/MkRenoteButton.vue'; +import MkUsersTooltip from '@/components/MkUsersTooltip.vue'; import MkUrlPreview from '@/components/MkUrlPreview.vue'; import MkInstanceTicker from '@/components/MkInstanceTicker.vue'; import MkVisibility from '@/components/MkVisibility.vue'; @@ -128,6 +140,7 @@ import { i18n } from '@/i18n'; import { getNoteMenu } from '@/scripts/get-note-menu'; import { useNoteCapture } from '@/scripts/use-note-capture'; import { deepClone } from '@/scripts/clone'; +import { useTooltip } from '@/scripts/use-tooltip'; const props = defineProps<{ note: misskey.entities.Note; @@ -158,7 +171,7 @@ const isRenote = ( const el = shallowRef(); const menuButton = shallowRef(); -const renoteButton = shallowRef>(); +const renoteButton = shallowRef(); const renoteTime = shallowRef(); const reactButton = shallowRef(); let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note : note); @@ -175,6 +188,7 @@ const translation = ref(null); const translating = ref(false); const urls = appearNote.text ? extractUrlFromMfm(mfm.parse(appearNote.text)) : null; const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.user.instance); +const canRenote = computed(() => ['public', 'home'].includes(appearNote.visibility) || appearNote.userId === $i.id); const keymap = { 'r': () => reply(true), @@ -193,6 +207,47 @@ useNoteCapture({ isDeletedRef: isDeleted, }); +useTooltip(renoteButton, async (showing) => { + const renotes = await os.api('notes/renotes', { + noteId: appearNote.id, + limit: 11, + }); + + const users = renotes.map(x => x.user); + + if (users.length < 1) return; + + os.popup(MkUsersTooltip, { + showing, + users, + count: appearNote.renoteCount, + targetElement: renoteButton.value, + }, {}, 'closed'); +}); + +function renote(viaKeyboard = false) { + pleaseLogin(); + os.popupMenu([{ + text: i18n.ts.renote, + icon: 'ti ti-repeat', + action: () => { + os.api('notes/create', { + renoteId: appearNote.id, + }); + }, + }, { + text: i18n.ts.quote, + icon: 'ti ti-quote', + action: () => { + os.post({ + renote: appearNote, + }); + }, + }], renoteButton.value, { + viaKeyboard, + }); +} + function reply(viaKeyboard = false): void { pleaseLogin(); os.post({ diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue index c0e1ca721..2d2830f08 100644 --- a/packages/frontend/src/components/MkNoteDetailed.vue +++ b/packages/frontend/src/components/MkNoteDetailed.vue @@ -85,14 +85,26 @@

{{ appearNote.repliesCount }}

- - + + - @@ -121,7 +133,7 @@ import MkReactionsViewer from '@/components/MkReactionsViewer.vue'; import MkMediaList from '@/components/MkMediaList.vue'; import MkCwButton from '@/components/MkCwButton.vue'; import MkPoll from '@/components/MkPoll.vue'; -import MkRenoteButton from '@/components/MkRenoteButton.vue'; +import MkUsersTooltip from '@/components/MkUsersTooltip.vue'; import MkUrlPreview from '@/components/MkUrlPreview.vue'; import MkInstanceTicker from '@/components/MkInstanceTicker.vue'; import MkVisibility from '@/components/MkVisibility.vue'; @@ -138,6 +150,7 @@ import { i18n } from '@/i18n'; import { getNoteMenu } from '@/scripts/get-note-menu'; import { useNoteCapture } from '@/scripts/use-note-capture'; import { deepClone } from '@/scripts/clone'; +import { useTooltip } from '@/scripts/use-tooltip'; const props = defineProps<{ note: misskey.entities.Note; @@ -168,7 +181,7 @@ const isRenote = ( const el = shallowRef(); const menuButton = shallowRef(); -const renoteButton = shallowRef>(); +const renoteButton = shallowRef(); const renoteTime = shallowRef(); const reactButton = shallowRef(); let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note : note); @@ -182,6 +195,7 @@ const urls = appearNote.text ? extractUrlFromMfm(mfm.parse(appearNote.text)) : n const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.user.instance); const conversation = ref([]); const replies = ref([]); +const canRenote = computed(() => ['public', 'home'].includes(appearNote.visibility) || appearNote.userId === $i.id); const keymap = { 'r': () => reply(true), @@ -198,6 +212,47 @@ useNoteCapture({ isDeletedRef: isDeleted, }); +useTooltip(renoteButton, async (showing) => { + const renotes = await os.api('notes/renotes', { + noteId: appearNote.id, + limit: 11, + }); + + const users = renotes.map(x => x.user); + + if (users.length < 1) return; + + os.popup(MkUsersTooltip, { + showing, + users, + count: appearNote.renoteCount, + targetElement: renoteButton.value, + }, {}, 'closed'); +}); + +function renote(viaKeyboard = false) { + pleaseLogin(); + os.popupMenu([{ + text: i18n.ts.renote, + icon: 'ti ti-repeat', + action: () => { + os.api('notes/create', { + renoteId: appearNote.id, + }); + }, + }, { + text: i18n.ts.quote, + icon: 'ti ti-quote', + action: () => { + os.post({ + renote: appearNote, + }); + }, + }], renoteButton.value, { + viaKeyboard, + }); +} + function reply(viaKeyboard = false): void { pleaseLogin(); os.post({ diff --git a/packages/frontend/src/components/MkRenoteButton.vue b/packages/frontend/src/components/MkRenoteButton.vue deleted file mode 100644 index e84d4a3fa..000000000 --- a/packages/frontend/src/components/MkRenoteButton.vue +++ /dev/null @@ -1,99 +0,0 @@ - - - - -