Merge branch 'better-tutorial' of https://github.com/kakkokari-gtyih/misskey into pr/12141
This commit is contained in:
syuilo
commit
a0b1d54f95
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -1193,10 +1193,10 @@ _initialTutorial:
|
|||
_note:
|
||||
title: "ノートって何？"
|
||||
description: "Misskeyでの投稿は「ノート」と呼びます。ノートはタイムラインに時系列で並んでいて、リアルタイムで更新されていきます。"
|
||||
date: "日付をクリックすることで、ノートの詳細ページに移動することができます。"
|
||||
reply: "返信することができます。返信に対しての返信も可能で、スレッドのように会話を続けることもできます。"
|
||||
renote: "そのノートを自分のタイムラインに流して共有することができます。テキストを追加して引用することも可能です。"
|
||||
reaction: "リアクションをつけることができます。詳しくは次のページで解説します。"
|
||||
menu: "ノートの詳細を表示したり、リンクをコピーしたりなどの様々な操作が行えます。"
|
||||
howToNote: "ノートは、下のようなボタンから簡単にできます。チュートリアルが終わったら、早速「Misskey始めました」などと投稿してみましょう！"
|
||||
_reaction:
|
||||
title: "リアクションって何？"
|
||||
|
|
@ -1238,7 +1238,7 @@ _initialTutorial:
|
|||
description: "サーバーのガイドラインにより必要とされる際や、そのまま見れる状態にしておくべきではない添付ファイルには、「センシティブ」設定を付けます。"
|
||||
tryThisFile: "試しに、このノートについている画像をセンシティブにしてみましょう。"
|
||||
_exampleNote:
|
||||
note: "納豆のフタ開けるのミスったわね… なんかグロい"
|
||||
note: "納豆のフタ開けるのミスったわね…"
|
||||
method: "添付ファイルをセンシティブにする際は、そのファイルをクリックしてメニューを開き、「センシティブとして設定」をクリックします。"
|
||||
sensitiveSucceeded: "今後ファイルを添付する際は、お使いのサーバーのガイドラインに従って、センシティブを適切に設定してください！"
|
||||
doItToContinue: "画像をセンシティブに設定すると先に進めるようになります。"
|
||||
|
|
|
|||
|
|
@ -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" @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>
|
||||
|
|
|
|||
|
|
@ -34,6 +34,11 @@ const props = defineProps<{
|
|||
count: number;
|
||||
isInitial: boolean;
|
||||
note: Misskey.entities.Note;
|
||||
mock?: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'reactionToggled', emoji: string, newCount: number): void;
|
||||
}>();
|
||||
|
||||
const buttonEl = shallowRef<HTMLElement>();
|
||||
|
|
@ -53,6 +58,11 @@ async function toggleReaction() {
|
|||
});
|
||||
if (confirm.canceled) return;
|
||||
|
||||
if (props.mock) {
|
||||
emit('reactionToggled', props.reaction, (props.count - 1));
|
||||
return;
|
||||
}
|
||||
|
||||
os.api('notes/reactions/delete', {
|
||||
noteId: props.note.id,
|
||||
}).then(() => {
|
||||
|
|
@ -64,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,
|
||||
|
|
@ -92,7 +107,8 @@ onMounted(() => {
|
|||
if (!props.isInitial) anime();
|
||||
});
|
||||
|
||||
useTooltip(buttonEl, async (showing) => {
|
||||
if (!props.mock) {
|
||||
useTooltip(buttonEl, async (showing) => {
|
||||
const reactions = await os.apiGet('notes/reactions', {
|
||||
noteId: props.note.id,
|
||||
type: props.reaction,
|
||||
|
|
@ -109,7 +125,8 @@ useTooltip(buttonEl, async (showing) => {
|
|||
count: props.count,
|
||||
targetElement: buttonEl.value,
|
||||
}, {}, 'closed');
|
||||
}, 100);
|
||||
}, 100);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
|
|
|
|||
|
|
@ -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" @reactionToggled="onMockToggleReaction"/>
|
||||
<slot v-if="hasMoreReactions" name="more"/>
|
||||
</TransitionGroup>
|
||||
</template>
|
||||
|
|
@ -26,10 +26,16 @@ import { defaultStore } from '@/store.js';
|
|||
const props = withDefaults(defineProps<{
|
||||
note: Misskey.entities.Note;
|
||||
maxNumber?: number;
|
||||
mock?: boolean;
|
||||
}>(), {
|
||||
maxNumber: Infinity,
|
||||
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][]>([]);
|
||||
|
|
@ -39,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;
|
||||
|
|
|
|||
|
|
@ -8,16 +8,16 @@ 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-dots"></i> <b>{{ i18n.ts.menu }}</b> … {{ i18n.ts._initialTutorial._note.menu }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
|
|
@ -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<{
|
||||
|
|
@ -49,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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in New Issue