enhance: 初期設定とチュートリアルを統合 (#12141)

* better onboarding experience

* enhance: iroiro

* (add) title

* (enhance) 戻る・次へボタンを全ページでstickyに

* fix merging

* (add) iroiro

* remove unnecessary file

* Update CHANGELOG.md

* tweak texts

* (fix) reactionViewer mock

* change strings

* Update MkTutorialDialog.Note.vue

* Update ja-JP.yml

* (fix) reactionViewer error

* (fix) path

* refactor

* fix

* Update MkPostForm.vue

* Update ja-JP.yml

* Update ja-JP.yml

* tweak text

* Update ja-JP.yml

* Update ja-JP.yml

* Update ja-JP.yml

* (add) achivement

* (add) もう一度見れますよメッセージを追加

* Revert "feat: レジストリAPIをサードパーティから利用可能に (#12229)"

This reverts commit 79346272f8.

* Revert "(add) もう一度見れますよメッセージを追加"

This reverts commit 6123b35215133f0d5e5db356bb43f4acbafab8fa.

* Revert "Revert "feat: レジストリAPIをサードパーティから利用可能に (#12229)""

This reverts commit bae684e484ef99308d7ac816a822047117efe1c6.

* tweak

---------

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
This commit is contained in:
かっこかり 2023-11-03 15:35:07 +09:00 committed by GitHub
parent 025ae436b5
commit 24e629ca5c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
25 changed files with 1223 additions and 248 deletions

View file

@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { computed, onMounted, shallowRef, watch } from 'vue';
import { computed, inject, onMounted, shallowRef, watch } from 'vue';
import * as Misskey from 'misskey-js';
import XDetails from '@/components/MkReactionsViewer.details.vue';
import MkReactionIcon from '@/components/MkReactionIcon.vue';
@ -36,6 +36,12 @@ const props = defineProps<{
note: Misskey.entities.Note;
}>();
const mock = inject<boolean>('mock', false);
const emit = defineEmits<{
(ev: 'reactionToggled', emoji: string, newCount: number): void;
}>();
const buttonEl = shallowRef<HTMLElement>();
const canToggle = computed(() => !props.reaction.match(/@\w/) && $i);
@ -53,6 +59,11 @@ async function toggleReaction() {
});
if (confirm.canceled) return;
if (mock) {
emit('reactionToggled', props.reaction, (props.count - 1));
return;
}
os.api('notes/reactions/delete', {
noteId: props.note.id,
}).then(() => {
@ -64,6 +75,11 @@ async function toggleReaction() {
}
});
} else {
if (mock) {
emit('reactionToggled', props.reaction, (props.count + 1));
return;
}
os.api('notes/reactions/create', {
noteId: props.note.id,
reaction: props.reaction,
@ -92,24 +108,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 (!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>