From dd736b8990e6330981d60e89e22781bba7c43676 Mon Sep 17 00:00:00 2001 From: kakkokari-gtyih <daisho7308+f@gmail.com> Date: Tue, 31 Oct 2023 20:46:03 +0900 Subject: [PATCH 1/6] (fix) reactionViewer mock --- packages/frontend/src/components/MkNote.vue | 2 +- .../components/MkReactionsViewer.reaction.vue | 37 ++++++++++--------- .../src/components/MkReactionsViewer.vue | 4 +- 3 files changed, 24 insertions(+), 19 deletions(-) diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue index d8a8aa39c0..0319eb61d6 100644 --- a/packages/frontend/src/components/MkNote.vue +++ b/packages/frontend/src/components/MkNote.vue @@ -84,7 +84,7 @@ SPDX-License-Identifier: AGPL-3.0-only </div> <MkA v-if="appearNote.channel && !inChannel" :class="$style.channel" :to="`/channels/${appearNote.channel.id}`"><i class="ti ti-device-tv"></i> {{ appearNote.channel.name }}</MkA> </div> - <MkReactionsViewer :note="appearNote" :maxNumber="16"> + <MkReactionsViewer :note="appearNote" :maxNumber="16" :mock="mock"> <template #more> <div :class="$style.reactionOmitted">{{ i18n.ts.more }}</div> </template> diff --git a/packages/frontend/src/components/MkReactionsViewer.reaction.vue b/packages/frontend/src/components/MkReactionsViewer.reaction.vue index d0db515219..5dc19db85f 100644 --- a/packages/frontend/src/components/MkReactionsViewer.reaction.vue +++ b/packages/frontend/src/components/MkReactionsViewer.reaction.vue @@ -34,6 +34,7 @@ const props = defineProps<{ count: number; isInitial: boolean; note: Misskey.entities.Note; + mock?: boolean; }>(); const buttonEl = shallowRef<HTMLElement>(); @@ -51,7 +52,7 @@ async function toggleReaction() { type: 'warning', text: oldReaction !== props.reaction ? i18n.ts.changeReactionConfirm : i18n.ts.cancelReactionConfirm, }); - if (confirm.canceled) return; + if (confirm.canceled || props.mock) return; os.api('notes/reactions/delete', { noteId: props.note.id, @@ -92,24 +93,26 @@ onMounted(() => { if (!props.isInitial) anime(); }); -useTooltip(buttonEl, async (showing) => { - const reactions = await os.apiGet('notes/reactions', { - noteId: props.note.id, - type: props.reaction, - limit: 11, - _cacheKey_: props.count, - }); +if (!props.mock) { + useTooltip(buttonEl, async (showing) => { + const reactions = await os.apiGet('notes/reactions', { + noteId: props.note.id, + type: props.reaction, + limit: 11, + _cacheKey_: props.count, + }); - const users = reactions.map(x => x.user); + const users = reactions.map(x => x.user); - os.popup(XDetails, { - showing, - reaction: props.reaction, - users, - count: props.count, - targetElement: buttonEl.value, - }, {}, 'closed'); -}, 100); + os.popup(XDetails, { + showing, + reaction: props.reaction, + users, + count: props.count, + targetElement: buttonEl.value, + }, {}, 'closed'); + }, 100); +} </script> <style lang="scss" module> diff --git a/packages/frontend/src/components/MkReactionsViewer.vue b/packages/frontend/src/components/MkReactionsViewer.vue index 52ead19a4b..4ec061a86a 100644 --- a/packages/frontend/src/components/MkReactionsViewer.vue +++ b/packages/frontend/src/components/MkReactionsViewer.vue @@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only :moveClass="defaultStore.state.animation ? $style.transition_x_move : ''" tag="div" :class="$style.root" > - <XReaction v-for="[reaction, count] in reactions" :key="reaction" :reaction="reaction" :count="count" :isInitial="initialReactions.has(reaction)" :note="note"/> + <XReaction v-for="[reaction, count] in reactions" :key="reaction" :reaction="reaction" :count="count" :isInitial="initialReactions.has(reaction)" :note="note" :mock="mock"/> <slot v-if="hasMoreReactions" name="more"/> </TransitionGroup> </template> @@ -26,8 +26,10 @@ import { defaultStore } from '@/store.js'; const props = withDefaults(defineProps<{ note: Misskey.entities.Note; maxNumber?: number; + mock?: boolean; }>(), { maxNumber: Infinity, + mock: false, }); const initialReactions = new Set(Object.keys(props.note.reactions)); From 512e7d9e6260477dedcb45b10cc3bed7c967def6 Mon Sep 17 00:00:00 2001 From: kakkokari-gtyih <daisho7308+f@gmail.com> Date: Tue, 31 Oct 2023 20:46:14 +0900 Subject: [PATCH 2/6] change strings --- locales/index.d.ts | 2 +- locales/ja-JP.yml | 2 +- packages/frontend/src/components/MkTutorialDialog.Note.vue | 3 +-- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/locales/index.d.ts b/locales/index.d.ts index 383c454ca9..685430980d 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -1196,10 +1196,10 @@ export interface Locale { "_note": { "title": string; "description": string; - "date": string; "reply": string; "renote": string; "reaction": string; + "menu": string; "howToNote": string; }; "_reaction": { diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index f54002f309..4e77054ee7 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -1193,10 +1193,10 @@ _initialTutorial: _note: title: "ノートって何?" description: "Misskeyでの投稿は「ノート」と呼びます。ノートはタイムラインに時系列で並んでいて、リアルタイムで更新されていきます。" - date: "日付をクリックすることで、ノートの詳細ページに移動することができます。" reply: "返信することができます。返信に対しての返信も可能で、スレッドのように会話を続けることもできます。" renote: "そのノートを自分のタイムラインに流して共有することができます。テキストを追加して引用することも可能です。" reaction: "リアクションをつけることができます。詳しくは次のページで解説します。" + menu: "ノートの詳細を表示したり、リンクをコピーしたりなどの様々な操作が行えます。" howToNote: "ノートは、下のようなボタンから簡単にできます。チュートリアルが終わったら、早速「Misskey始めました」などと投稿してみましょう!" _reaction: title: "リアクションって何?" diff --git a/packages/frontend/src/components/MkTutorialDialog.Note.vue b/packages/frontend/src/components/MkTutorialDialog.Note.vue index 46d35c42df..95d91cb400 100644 --- a/packages/frontend/src/components/MkTutorialDialog.Note.vue +++ b/packages/frontend/src/components/MkTutorialDialog.Note.vue @@ -8,10 +8,10 @@ SPDX-License-Identifier: AGPL-3.0-only <div style="text-align: center; padding: 0 16px;">{{ i18n.ts._initialTutorial._note.description }}</div> <MkNote :class="$style.exampleNoteRoot" style="pointer-events: none;" :note="exampleNote" :mock="true"/> <div class="_gaps_s"> - <div><small><MkTime :time="exampleNote.createdAt" colored></MkTime></small> … <b>{{ i18n.ts._initialTutorial._note.date }}</b></div> <div><i class="ti ti-arrow-back-up"></i> <b>{{ i18n.ts.reply }}</b> … {{ i18n.ts._initialTutorial._note.reply }}</div> <div><i class="ti ti-repeat"></i> <b>{{ i18n.ts.renote }}</b> … {{ i18n.ts._initialTutorial._note.renote }}</div> <div><i class="ti ti-plus"></i> <b>{{ i18n.ts.reaction }}</b> … {{ i18n.ts._initialTutorial._note.reaction }}</div> + <div><i class="ti ti-plus"></i> <b>{{ i18n.ts.menu }}</b> … {{ i18n.ts._initialTutorial._note.menu }}</div> </div> </div> <div v-else-if="phase === 'howToReact'" class="_gaps"> @@ -28,7 +28,6 @@ import { ref, reactive } from 'vue'; import { i18n } from '@/i18n.js'; import { globalEvents } from '@/events.js'; import { $i } from '@/account.js'; -import MkTime from '@/components/global/MkTime.vue'; import MkNote from '@/components/MkNote.vue'; const props = defineProps<{ From 2c329cfb1ec40220fbf69ca444ffce5847af37b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=93=E3=81=8B=E3=82=8A?= <67428053+kakkokari-gtyih@users.noreply.github.com> Date: Wed, 1 Nov 2023 01:12:30 +0900 Subject: [PATCH 3/6] Update MkTutorialDialog.Note.vue --- packages/frontend/src/components/MkTutorialDialog.Note.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/frontend/src/components/MkTutorialDialog.Note.vue b/packages/frontend/src/components/MkTutorialDialog.Note.vue index 95d91cb400..861b5e76f3 100644 --- a/packages/frontend/src/components/MkTutorialDialog.Note.vue +++ b/packages/frontend/src/components/MkTutorialDialog.Note.vue @@ -11,7 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only <div><i class="ti ti-arrow-back-up"></i> <b>{{ i18n.ts.reply }}</b> … {{ i18n.ts._initialTutorial._note.reply }}</div> <div><i class="ti ti-repeat"></i> <b>{{ i18n.ts.renote }}</b> … {{ i18n.ts._initialTutorial._note.renote }}</div> <div><i class="ti ti-plus"></i> <b>{{ i18n.ts.reaction }}</b> … {{ i18n.ts._initialTutorial._note.reaction }}</div> - <div><i class="ti ti-plus"></i> <b>{{ i18n.ts.menu }}</b> … {{ i18n.ts._initialTutorial._note.menu }}</div> + <div><i class="ti ti-dots"></i> <b>{{ i18n.ts.menu }}</b> … {{ i18n.ts._initialTutorial._note.menu }}</div> </div> </div> <div v-else-if="phase === 'howToReact'" class="_gaps"> From 6cb35e2f939ee53d3d6765aafa99d8fce1897ec7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=93=E3=81=8B=E3=82=8A?= <67428053+kakkokari-gtyih@users.noreply.github.com> Date: Wed, 1 Nov 2023 01:13:36 +0900 Subject: [PATCH 4/6] Update ja-JP.yml --- locales/ja-JP.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 4e77054ee7..c4c74ff1ef 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -1238,7 +1238,7 @@ _initialTutorial: description: "サーバーのガイドラインにより必要とされる際や、そのまま見れる状態にしておくべきではない添付ファイルには、「センシティブ」設定を付けます。" tryThisFile: "試しに、このノートについている画像をセンシティブにしてみましょう。" _exampleNote: - note: "納豆のフタ開けるのミスったわね… なんかグロい" + note: "納豆のフタ開けるのミスったわね…" method: "添付ファイルをセンシティブにする際は、そのファイルをクリックしてメニューを開き、「センシティブとして設定」をクリックします。" sensitiveSucceeded: "今後ファイルを添付する際は、お使いのサーバーのガイドラインに従って、センシティブを適切に設定してください!" doItToContinue: "画像をセンシティブに設定すると先に進めるようになります。" From ddf31c392a91311ed62c087cef1b1f9977906686 Mon Sep 17 00:00:00 2001 From: kakkokari-gtyih <daisho7308+f@gmail.com> Date: Wed, 1 Nov 2023 01:45:57 +0900 Subject: [PATCH 5/6] (fix) reactionViewer error --- packages/frontend/src/components/MkNote.vue | 10 +++++++++- .../components/MkReactionsViewer.reaction.vue | 16 +++++++++++++++- .../src/components/MkReactionsViewer.vue | 15 ++++++++++++++- .../src/components/MkTutorialDialog.Note.vue | 2 +- 4 files changed, 39 insertions(+), 4 deletions(-) diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue index 0319eb61d6..122d29eff3 100644 --- a/packages/frontend/src/components/MkNote.vue +++ b/packages/frontend/src/components/MkNote.vue @@ -84,7 +84,7 @@ SPDX-License-Identifier: AGPL-3.0-only </div> <MkA v-if="appearNote.channel && !inChannel" :class="$style.channel" :to="`/channels/${appearNote.channel.id}`"><i class="ti ti-device-tv"></i> {{ appearNote.channel.name }}</MkA> </div> - <MkReactionsViewer :note="appearNote" :maxNumber="16" :mock="mock"> + <MkReactionsViewer :note="appearNote" :maxNumber="16" :mock="mock" @mockUpdateMyReaction="emitUpdReaction"> <template #more> <div :class="$style.reactionOmitted">{{ i18n.ts.more }}</div> </template> @@ -545,6 +545,14 @@ function readPromo() { }); isDeleted.value = true; } + +function emitUpdReaction(emoji: string, delta: number) { + if (delta < 0) { + emit('removeReaction', emoji); + } else if (delta > 0) { + emit('reaction', emoji); + } +} </script> <style lang="scss" module> diff --git a/packages/frontend/src/components/MkReactionsViewer.reaction.vue b/packages/frontend/src/components/MkReactionsViewer.reaction.vue index 5dc19db85f..4c97899739 100644 --- a/packages/frontend/src/components/MkReactionsViewer.reaction.vue +++ b/packages/frontend/src/components/MkReactionsViewer.reaction.vue @@ -37,6 +37,10 @@ const props = defineProps<{ mock?: boolean; }>(); +const emit = defineEmits<{ + (ev: 'reactionToggled', emoji: string, newCount: number): void; +}>(); + const buttonEl = shallowRef<HTMLElement>(); const canToggle = computed(() => !props.reaction.match(/@\w/) && $i); @@ -52,7 +56,12 @@ async function toggleReaction() { type: 'warning', text: oldReaction !== props.reaction ? i18n.ts.changeReactionConfirm : i18n.ts.cancelReactionConfirm, }); - if (confirm.canceled || props.mock) return; + if (confirm.canceled) return; + + if (props.mock) { + emit('reactionToggled', props.reaction, (props.count - 1)); + return; + } os.api('notes/reactions/delete', { noteId: props.note.id, @@ -65,6 +74,11 @@ async function toggleReaction() { } }); } else { + if (props.mock) { + emit('reactionToggled', props.reaction, (props.count + 1)); + return; + } + os.api('notes/reactions/create', { noteId: props.note.id, reaction: props.reaction, diff --git a/packages/frontend/src/components/MkReactionsViewer.vue b/packages/frontend/src/components/MkReactionsViewer.vue index 4ec061a86a..2c982ff063 100644 --- a/packages/frontend/src/components/MkReactionsViewer.vue +++ b/packages/frontend/src/components/MkReactionsViewer.vue @@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only :moveClass="defaultStore.state.animation ? $style.transition_x_move : ''" tag="div" :class="$style.root" > - <XReaction v-for="[reaction, count] in reactions" :key="reaction" :reaction="reaction" :count="count" :isInitial="initialReactions.has(reaction)" :note="note" :mock="mock"/> + <XReaction v-for="[reaction, count] in reactions" :key="reaction" :reaction="reaction" :count="count" :isInitial="initialReactions.has(reaction)" :note="note" :mock="mock" @reactionToggled="onMockToggleReaction"/> <slot v-if="hasMoreReactions" name="more"/> </TransitionGroup> </template> @@ -32,6 +32,10 @@ const props = withDefaults(defineProps<{ mock: false, }); +const emit = defineEmits<{ + (ev: 'mockUpdateMyReaction', emoji: string, delta: number): void; +}>(); + const initialReactions = new Set(Object.keys(props.note.reactions)); let reactions = $ref<[string, number][]>([]); @@ -41,6 +45,15 @@ if (props.note.myReaction && !Object.keys(reactions).includes(props.note.myReact reactions[props.note.myReaction] = props.note.reactions[props.note.myReaction]; } +function onMockToggleReaction(emoji: string, count: number) { + if (!props.mock) return; + + const i = reactions.findIndex((item) => item[0] === emoji); + if (i < 0) return; + + emit('mockUpdateMyReaction', emoji, (count - reactions[i][1])); +} + watch([() => props.note.reactions, () => props.maxNumber], ([newSource, maxNumber]) => { let newReactions: [string, number][] = []; hasMoreReactions = Object.keys(newSource).length > maxNumber; diff --git a/packages/frontend/src/components/MkTutorialDialog.Note.vue b/packages/frontend/src/components/MkTutorialDialog.Note.vue index 861b5e76f3..81ce0f6630 100644 --- a/packages/frontend/src/components/MkTutorialDialog.Note.vue +++ b/packages/frontend/src/components/MkTutorialDialog.Note.vue @@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only <div v-else-if="phase === 'howToReact'" class="_gaps"> <div style="text-align: center; padding: 0 16px;">{{ i18n.ts._initialTutorial._reaction.description }}</div> <div>{{ i18n.ts._initialTutorial._reaction.letsTryReacting }}</div> - <MkNote :class="$style.exampleNoteRoot" :note="exampleNote" :mock="true" @reaction="addReaction" @removeReaction="removeReaction"/> + <MkNote :class="$style.exampleNoteRoot" :note="exampleNote" :mock="true" @reaction="addReaction" @removeReaction="removeReaction" @updateReaction="updateReaction"/> <div v-if="onceReacted"><b style="color: var(--accent);"><i class="ti ti-check"></i> {{ i18n.ts._initialTutorial.wellDone }}</b> {{ i18n.ts._initialTutorial._reaction.reactNotification }}<br>{{ i18n.ts._initialTutorial._reaction.reactDone }}</div> </div> </template> From fbb9bc37ee044c395aec5f8abf893ae6cccd6ed7 Mon Sep 17 00:00:00 2001 From: kakkokari-gtyih <daisho7308+f@gmail.com> Date: Wed, 1 Nov 2023 01:56:13 +0900 Subject: [PATCH 6/6] (fix) path --- packages/frontend/src/components/MkTutorialDialog.Note.vue | 2 +- packages/frontend/src/components/MkTutorialDialog.PostNote.vue | 2 +- packages/frontend/src/components/MkTutorialDialog.Sensitive.vue | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/frontend/src/components/MkTutorialDialog.Note.vue b/packages/frontend/src/components/MkTutorialDialog.Note.vue index 81ce0f6630..c7df1a576e 100644 --- a/packages/frontend/src/components/MkTutorialDialog.Note.vue +++ b/packages/frontend/src/components/MkTutorialDialog.Note.vue @@ -48,7 +48,7 @@ const exampleNote = reactive<Misskey.entities.Note>({ username: 'ai', host: null, avatarDecorations: [], - avatarUrl: './client-assets/tutorial/ai.webp', + avatarUrl: '/client-assets/tutorial/ai.webp', avatarBlurhash: 'eiKmhHIByXxZ~qWXs:-pR*NbR*s:xuRjoL-oR*WCt6WWf6WVf6oeWB', isBot: false, isCat: true, diff --git a/packages/frontend/src/components/MkTutorialDialog.PostNote.vue b/packages/frontend/src/components/MkTutorialDialog.PostNote.vue index 441594e42b..9b55a1dca7 100644 --- a/packages/frontend/src/components/MkTutorialDialog.PostNote.vue +++ b/packages/frontend/src/components/MkTutorialDialog.PostNote.vue @@ -53,7 +53,7 @@ const exampleCWNote = reactive<Misskey.entities.Note>({ username: 'ai', host: null, avatarDecorations: [], - avatarUrl: './client-assets/tutorial/ai.webp', + avatarUrl: '/client-assets/tutorial/ai.webp', avatarBlurhash: 'eiKmhHIByXxZ~qWXs:-pR*NbR*s:xuRjoL-oR*WCt6WWf6WVf6oeWB', isBot: false, isCat: true, diff --git a/packages/frontend/src/components/MkTutorialDialog.Sensitive.vue b/packages/frontend/src/components/MkTutorialDialog.Sensitive.vue index 659fd7c0fc..2188935ebf 100644 --- a/packages/frontend/src/components/MkTutorialDialog.Sensitive.vue +++ b/packages/frontend/src/components/MkTutorialDialog.Sensitive.vue @@ -54,7 +54,7 @@ const exampleNote = reactive<Misskey.entities.Note>({ username: 'syuilo', host: null, avatarDecorations: [], - avatarUrl: './client-assets/tutorial/syuilo.webp', + avatarUrl: '/client-assets/tutorial/syuilo.webp', avatarBlurhash: 'yFF5Kq0L00?a^*IBNG01^j-pV@D*o|xt58WB}@9at7s.Ip~AWB57%Laes:xaOEoLnis:ofIpoJr?NHtRV@oLoeNHNI%1M{kCWCjuxZ', isBot: false, isCat: true,