Merge branch 'better-tutorial' of https://github.com/kakkokari-gtyih/misskey into pr/12141
This commit is contained in:
syuilo
commit
b5ea64391b
|
|
@ -1188,6 +1188,11 @@ export interface Locale {
|
|||
"launchTutorial": string;
|
||||
"title": string;
|
||||
"wellDone": string;
|
||||
"skipAreYouSure": string;
|
||||
"_landing": {
|
||||
"title": string;
|
||||
"description": string;
|
||||
};
|
||||
"_note": {
|
||||
"title": string;
|
||||
"description": string;
|
||||
|
|
@ -1202,6 +1207,7 @@ export interface Locale {
|
|||
"description": string;
|
||||
"letsTryReacting": string;
|
||||
"reactToContinue": string;
|
||||
"reactNotification": string;
|
||||
"reactDone": string;
|
||||
};
|
||||
"_timeline": {
|
||||
|
|
@ -1212,6 +1218,41 @@ export interface Locale {
|
|||
"social": string;
|
||||
"global": string;
|
||||
"description2": string;
|
||||
"description3": string;
|
||||
};
|
||||
"_postNote": {
|
||||
"title": string;
|
||||
"description1": string;
|
||||
"_visibility": {
|
||||
"description": string;
|
||||
"public": string;
|
||||
"home": string;
|
||||
"followers": string;
|
||||
"direct": string;
|
||||
"doNotSendConfidencialOnDirect1": string;
|
||||
"doNotSendConfidencialOnDirect2": string;
|
||||
"localOnly": string;
|
||||
};
|
||||
"_cw": {
|
||||
"title": string;
|
||||
"description": string;
|
||||
"_exampleNote": {
|
||||
"cw": string;
|
||||
"note": string;
|
||||
};
|
||||
"useCases": string;
|
||||
};
|
||||
};
|
||||
"_howToMakeAttachmentsSensitive": {
|
||||
"title": string;
|
||||
"description": string;
|
||||
"tryThisFile": string;
|
||||
"_exampleNote": {
|
||||
"note": string;
|
||||
};
|
||||
"method": string;
|
||||
"sensitiveSucceeded": string;
|
||||
"doItToContinue": string;
|
||||
};
|
||||
"_done": {
|
||||
"title": string;
|
||||
|
|
|
|||
|
|
@ -1186,6 +1186,10 @@ _initialTutorial:
|
|||
launchTutorial: "チュートリアルを見る"
|
||||
title: "チュートリアル"
|
||||
wellDone: "お見事！"
|
||||
skipAreYouSure: "チュートリアルを終了しますか？"
|
||||
_landing:
|
||||
title: "チュートリアルへようこそ！"
|
||||
description: "ここでは、Misskeyの基本的な使い方や機能を確認できます。「次へ」を押して早速始はじめましょう！"
|
||||
_note:
|
||||
title: "ノートって何？"
|
||||
description: "Misskeyでの投稿は「ノート」と呼びます。ノートはタイムラインに時系列で並んでいて、リアルタイムで更新されていきます。"
|
||||
|
|
@ -1199,6 +1203,7 @@ _initialTutorial:
|
|||
description: "ノートには「リアクション」をつけることができます。「いいね」では伝わらないニュアンスも、リアクションで簡単・気軽に表現できます。"
|
||||
letsTryReacting: "リアクションは、ノートの「＋」ボタンをクリックするとつけられます。試しにこのノートに好きなリアクションをつけてみましょう！"
|
||||
reactToContinue: "リアクションをつけると先に進めるようになります。"
|
||||
reactNotification: "あなたのノートが誰かにリアクションされると、通知が入ります。もちろん、これもリアルタイムです！"
|
||||
reactDone: "リアクションを外すときは、「ー」ボタンを押します。実際に試してみてくださいね。"
|
||||
_timeline:
|
||||
title: "タイムラインのしくみ"
|
||||
|
|
@ -1207,7 +1212,36 @@ _initialTutorial:
|
|||
local: "このサーバーにいるユーザー全員の投稿を見られます。"
|
||||
social: "ホームタイムラインとローカルタイムラインの投稿が両方表示されます。"
|
||||
global: "接続している他のすべてのサーバーからの投稿を見られます。"
|
||||
description2: "その他にも、リストタイムラインやチャンネルタイムラインなどがあります。詳しくは{link}をご覧ください。"
|
||||
description2: "それぞれのタイムラインは、画面上部でいつでも切り替えられます。"
|
||||
description3: "その他にも、リストタイムラインやチャンネルタイムラインなどがあります。詳しくは{link}をご覧ください。"
|
||||
_postNote:
|
||||
title: "ノートの投稿設定"
|
||||
description1: "Misskeyにノートを投稿する際には、細かい設定ができるようになっています。ノートの設定は、以下のような投稿フォームから行えます。"
|
||||
_visibility:
|
||||
description: "ノートを表示できる相手を制限できます。"
|
||||
public: "すべてのユーザーに公開。"
|
||||
home: "ホームタイムラインのみに公開。フォロワー・プロフィールを見に来た人・リノートから、他のユーザーも見ることができます。"
|
||||
followers: "フォロワーにのみ公開。本人以外がリノートすることはできず、またフォロワー以外は閲覧できません。"
|
||||
direct: "指定したユーザーにのみ公開され、また相手に通知が入ります。ダイレクトメッセージのかわりにお使いいただけます。"
|
||||
doNotSendConfidencialOnDirect1: "ダイレクトであっても、機密情報は送信しないようにしてください。"
|
||||
doNotSendConfidencialOnDirect2: "指定したユーザー以外には公開されないとはいえ、悪意のある他のソフトウェアに連合された際に、連合先で公開設定が無視されるおそれがあります。"
|
||||
localOnly: "他のサーバーに投稿を連合しません。上記の公開範囲に関わらず、他のサーバーのユーザーは、この設定がついたノートを直接閲覧することができなくなります。"
|
||||
_cw:
|
||||
title: "内容を隠す（CW）"
|
||||
description: "本文のかわりに「注釈」に書いた内容が表示されます。「もっと見る」を押すと本文が表示されます。"
|
||||
_exampleNote:
|
||||
cw: "飯テロ注意"
|
||||
note: "チョコのかかったドーナツを食べました🍩😋"
|
||||
useCases: "サーバーのガイドラインにより必要とされるノートに指定したり、ネタバレ投稿やセンシティブな文章を自主規制したりするときに使います。"
|
||||
_howToMakeAttachmentsSensitive:
|
||||
title: "添付ファイルをセンシティブにするには？"
|
||||
description: "サーバーのガイドラインにより必要とされる際や、そのまま見れる状態にしておくべきではない添付ファイルには、「センシティブ」設定を付けます。"
|
||||
tryThisFile: "試しに、このノートについている画像をセンシティブにしてみましょう。"
|
||||
_exampleNote:
|
||||
note: "納豆のフタ開けるのミスったわね… なんかグロい"
|
||||
method: "添付ファイルをセンシティブにする際は、そのファイルをクリックしてメニューを開き、「センシティブとして設定」をクリックします。"
|
||||
sensitiveSucceeded: "今後ファイルを添付する際は、お使いのサーバーのガイドラインに従って、センシティブを適切に設定してください！"
|
||||
doItToContinue: "画像をセンシティブに設定すると先に進めるようになります。"
|
||||
_done:
|
||||
title: "チュートリアルは終了です🎉"
|
||||
description: "ここで紹介した機能は、ほんの一部です！Misskeyの使い方をより詳しく知るには、{link}をご覧ください。"
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
|
|
@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<div :class="[$style.root, { [$style.warn]: warn }]">
|
||||
<i v-if="warn" class="ti ti-alert-triangle" :class="$style.i"></i>
|
||||
<i v-else class="ti ti-info-circle" :class="$style.i"></i>
|
||||
<slot></slot>
|
||||
<div><slot></slot></div>
|
||||
<button v-if="closable" :class="$style.button" class="_button" @click="close()"><i class="ti ti-x"></i></button>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<div v-if="maxTextLength - textLength < 100" :class="['_acrylic', $style.textCount, { [$style.textOver]: textLength > maxTextLength }]">{{ maxTextLength - textLength }}</div>
|
||||
</div>
|
||||
<input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" :class="$style.hashtags" :placeholder="i18n.ts.hashtags" list="hashtags">
|
||||
<XPostFormAttaches v-model="files" @detach="detachFile" @changeSensitive="updateFileSensitive" @changeName="updateFileName" @replaceFile="replaceFile"/>
|
||||
<XPostFormAttaches v-model="files" :mock="mock" @detach="detachFile" @changeSensitive="updateFileSensitive" @changeName="updateFileName" @replaceFile="replaceFile"/>
|
||||
<MkPollEditor v-if="poll" v-model="poll" @destroyed="poll = null"/>
|
||||
<MkNotePreview v-if="showPreview" :class="$style.preview" :text="text" :user="postAccount ?? $i"/>
|
||||
<div v-if="showingOptions" style="padding: 8px 16px;">
|
||||
|
|
@ -143,15 +143,20 @@ const props = withDefaults(defineProps<{
|
|||
fixed?: boolean;
|
||||
autofocus?: boolean;
|
||||
freezeAfterPosted?: boolean;
|
||||
mock?: boolean;
|
||||
}>(), {
|
||||
initialVisibleUsers: () => [],
|
||||
autofocus: true,
|
||||
mock: false,
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'posted'): void;
|
||||
(ev: 'cancel'): void;
|
||||
(ev: 'esc'): void;
|
||||
|
||||
// Mock用
|
||||
(ev: 'fileChangeSensitive', fileId: string, to: boolean): void;
|
||||
}>();
|
||||
|
||||
const textareaEl = $shallowRef<HTMLTextAreaElement | null>(null);
|
||||
|
|
@ -239,7 +244,7 @@ const maxTextLength = $computed((): number => {
|
|||
});
|
||||
|
||||
const canPost = $computed((): boolean => {
|
||||
return !posting && !posted &&
|
||||
return !props.mock && !posting && !posted &&
|
||||
(1 <= textLength || 1 <= files.length || !!poll || !!props.renote) &&
|
||||
(textLength <= maxTextLength) &&
|
||||
(!poll || poll.choices.length >= 2);
|
||||
|
|
@ -396,6 +401,8 @@ function focus() {
|
|||
}
|
||||
|
||||
function chooseFileFrom(ev) {
|
||||
if (props.mock) return;
|
||||
|
||||
selectFiles(ev.currentTarget ?? ev.target, i18n.ts.attachFile).then(files_ => {
|
||||
for (const file of files_) {
|
||||
files.push(file);
|
||||
|
|
@ -408,6 +415,9 @@ function detachFile(id) {
|
|||
}
|
||||
|
||||
function updateFileSensitive(file, sensitive) {
|
||||
if (props.mock) {
|
||||
emit('fileChangeSensitive', file.id, sensitive);
|
||||
}
|
||||
files[files.findIndex(x => x.id === file.id)].isSensitive = sensitive;
|
||||
}
|
||||
|
||||
|
|
@ -420,6 +430,8 @@ function replaceFile(file: Misskey.entities.DriveFile, newFile: Misskey.entities
|
|||
}
|
||||
|
||||
function upload(file: File, name?: string): void {
|
||||
if (props.mock) return;
|
||||
|
||||
uploadFile(file, defaultStore.state.uploadFolder, name).then(res => {
|
||||
files.push(res);
|
||||
});
|
||||
|
|
@ -545,6 +557,8 @@ function onCompositionEnd(ev: CompositionEvent) {
|
|||
}
|
||||
|
||||
async function onPaste(ev: ClipboardEvent) {
|
||||
if (props.mock) return;
|
||||
|
||||
for (const { item, i } of Array.from(ev.clipboardData.items, (item, i) => ({ item, i }))) {
|
||||
if (item.kind === 'file') {
|
||||
const file = item.getAsFile();
|
||||
|
|
@ -629,7 +643,7 @@ function onDrop(ev): void {
|
|||
}
|
||||
|
||||
function saveDraft() {
|
||||
if (props.instant) return;
|
||||
if (props.instant || props.mock) return;
|
||||
|
||||
const draftData = JSON.parse(miLocalStorage.getItem('drafts') ?? '{}');
|
||||
|
||||
|
|
@ -666,6 +680,8 @@ async function post(ev?: MouseEvent) {
|
|||
os.popup(MkRippleEffect, { x, y }, {}, 'end');
|
||||
}
|
||||
|
||||
if (props.mock) return;
|
||||
|
||||
const annoying =
|
||||
text.includes('$[x2') ||
|
||||
text.includes('$[x3') ||
|
||||
|
|
@ -831,6 +847,8 @@ function showActions(ev) {
|
|||
let postAccount = $ref<Misskey.entities.UserDetailed | null>(null);
|
||||
|
||||
function openAccountMenu(ev: MouseEvent) {
|
||||
if (props.mock) return;
|
||||
|
||||
openAccountMenu_({
|
||||
withExtraOperation: false,
|
||||
includeCurrentAccount: true,
|
||||
|
|
@ -861,7 +879,7 @@ onMounted(() => {
|
|||
|
||||
nextTick(() => {
|
||||
// 書きかけの投稿を復元
|
||||
if (!props.instant && !props.mention && !props.specified) {
|
||||
if (!props.instant && !props.mention && !props.specified && !props.mock) {
|
||||
const draft = JSON.parse(miLocalStorage.getItem('drafts') ?? '{}')[draftKey];
|
||||
if (draft) {
|
||||
text = draft.data.text;
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@ const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.d
|
|||
const props = defineProps<{
|
||||
modelValue: any[];
|
||||
detachMediaFn?: (id: string) => void;
|
||||
mock?: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
|
|
@ -44,6 +45,8 @@ const emit = defineEmits<{
|
|||
let menuShowing = false;
|
||||
|
||||
function detachMedia(id: string) {
|
||||
if (props.mock) return;
|
||||
|
||||
if (props.detachMediaFn) {
|
||||
props.detachMediaFn(id);
|
||||
} else {
|
||||
|
|
@ -52,6 +55,11 @@ function detachMedia(id: string) {
|
|||
}
|
||||
|
||||
function toggleSensitive(file) {
|
||||
if (props.mock) {
|
||||
emit('changeSensitive', file, !file.isSensitive);
|
||||
return;
|
||||
}
|
||||
|
||||
os.api('drive/files/update', {
|
||||
fileId: file.id,
|
||||
isSensitive: !file.isSensitive,
|
||||
|
|
@ -61,6 +69,8 @@ function toggleSensitive(file) {
|
|||
}
|
||||
|
||||
async function rename(file) {
|
||||
if (props.mock) return;
|
||||
|
||||
const { canceled, result } = await os.inputText({
|
||||
title: i18n.ts.enterFileName,
|
||||
default: file.name,
|
||||
|
|
@ -77,6 +87,8 @@ async function rename(file) {
|
|||
}
|
||||
|
||||
async function describe(file) {
|
||||
if (props.mock) return;
|
||||
|
||||
os.popup(defineAsyncComponent(() => import('@/components/MkFileCaptionEditWindow.vue')), {
|
||||
default: file.comment !== null ? file.comment : '',
|
||||
file: file,
|
||||
|
|
@ -94,6 +106,8 @@ async function describe(file) {
|
|||
}
|
||||
|
||||
async function crop(file: Misskey.entities.DriveFile): Promise<void> {
|
||||
if (props.mock) return;
|
||||
|
||||
const newFile = await os.cropImage(file, { aspectRatio: NaN });
|
||||
emit('replaceFile', file, newFile);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,25 +8,17 @@ 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> … {{ i18n.ts._initialTutorial._note.date }}</div>
|
||||
<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>
|
||||
<div :class="$style.divider"></div>
|
||||
<div style="text-align: center; padding: 0 16px;">{{ i18n.ts._initialTutorial._note.howToNote }}</div>
|
||||
<div style="width: 250px; margin: 0 auto;">
|
||||
<div :class="[$style.post]">
|
||||
<i class="ti ti-pencil ti-fw" :class="$style.postIcon"></i><span :class="$style.postText">{{ i18n.ts.note }}</span>
|
||||
</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"/>
|
||||
<div v-if="onceReacted"><b style="color: var(--accent);"><i class="ti ti-check"></i> {{ i18n.ts._initialTutorial.wellDone }}</b> {{ i18n.ts._initialTutorial._reaction.reactDone }}</div>
|
||||
<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>
|
||||
|
||||
|
|
@ -34,6 +26,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
import * as Misskey from 'misskey-js';
|
||||
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';
|
||||
|
||||
|
|
@ -51,12 +45,12 @@ const exampleNote = reactive<Misskey.entities.Note>({
|
|||
userId: '0000000001',
|
||||
user: {
|
||||
id: '0000000001',
|
||||
name: 'しゅいろ',
|
||||
username: 'syuilo',
|
||||
name: '藍',
|
||||
username: 'ai',
|
||||
host: null,
|
||||
avatarDecorations: [],
|
||||
avatarUrl: 'https://proxy.misskeyusercontent.com/avatar.webp?url=https%3A%2F%2Fs3.arkjp.net%2Fmisskey%2Fwebpublic-b2dc591e-58b6-4df7-b7c9-1cba199f6619.png&avatar=1',
|
||||
avatarBlurhash: 'yFF5Kq0L00?a^*IBNG01^j-pV@D*o|xt58WB}@9at7s.Ip~AWB57%Laes:xaOEoLnis:ofIpoJr?NHtRV@oLoeNHNI%1M{kCWCjuxZ',
|
||||
avatarUrl: './client-assets/tutorial/ai.webp',
|
||||
avatarBlurhash: 'eiKmhHIByXxZ~qWXs:-pR*NbR*s:xuRjoL-oR*WCt6WWf6WVf6oeWB',
|
||||
isBot: false,
|
||||
isCat: true,
|
||||
emojis: {},
|
||||
|
|
@ -84,6 +78,24 @@ function addReaction(emoji) {
|
|||
emit('reacted');
|
||||
exampleNote.reactions[emoji] = 1;
|
||||
exampleNote.myReaction = emoji;
|
||||
doNotification(emoji);
|
||||
}
|
||||
|
||||
function doNotification(emoji: string): void {
|
||||
if (!$i || !emoji) return;
|
||||
|
||||
const notification: Misskey.entities.Notification = {
|
||||
id: Math.random().toString(),
|
||||
createdAt: new Date().toUTCString(),
|
||||
isRead: false,
|
||||
type: 'reaction',
|
||||
reaction: emoji,
|
||||
user: $i,
|
||||
userId: $i.id,
|
||||
note: exampleNote,
|
||||
};
|
||||
|
||||
globalEvents.emit('clientNotification', notification);
|
||||
}
|
||||
|
||||
function removeReaction(emoji) {
|
||||
|
|
@ -103,42 +115,4 @@ function removeReaction(emoji) {
|
|||
height: 1px;
|
||||
background: var(--divider);
|
||||
}
|
||||
|
||||
.post {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
color: var(--fgOnAccent);
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: calc(100% - 38px);
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.postIcon {
|
||||
position: relative;
|
||||
margin-left: 30px;
|
||||
margin-right: 8px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.postText {
|
||||
position: relative;
|
||||
line-height: 40px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
<!--
|
||||
SPDX-FileCopyrightText: syuilo and other misskey contributors
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="_gaps">
|
||||
<div style="text-align: center; padding: 0 16px;">{{ i18n.ts._initialTutorial._postNote.description1 }}</div>
|
||||
<MkPostForm :class="$style.exampleRoot" :mock="true"/>
|
||||
<MkFormSection>
|
||||
<template #label>{{ i18n.ts.visibility }}</template>
|
||||
<div class="_gaps">
|
||||
<div>{{ i18n.ts._initialTutorial._postNote._visibility.description }}</div>
|
||||
<div><i class="ti ti-world"></i> <b>{{ i18n.ts._visibility.public }}</b> … {{ i18n.ts._initialTutorial._postNote._visibility.public }}</div>
|
||||
<div><i class="ti ti-home"></i> <b>{{ i18n.ts._visibility.home }}</b> … {{ i18n.ts._initialTutorial._postNote._visibility.home }}</div>
|
||||
<div><i class="ti ti-lock"></i> <b>{{ i18n.ts._visibility.followers }}</b> … {{ i18n.ts._initialTutorial._postNote._visibility.followers }}</div>
|
||||
<div class="_gaps_s">
|
||||
<div><i class="ti ti-mail"></i> <b>{{ i18n.ts._visibility.specified }}</b> … {{ i18n.ts._initialTutorial._postNote._visibility.direct }}</div>
|
||||
<MkInfo :warn="true">
|
||||
<b>{{ i18n.ts._initialTutorial._postNote._visibility.doNotSendConfidencialOnDirect1 }}</b> {{ i18n.ts._initialTutorial._postNote._visibility.doNotSendConfidencialOnDirect2 }}
|
||||
</MkInfo>
|
||||
</div>
|
||||
<div><i class="ti ti-rocket-off"></i> <b>{{ i18n.ts._visibility.disableFederation }}</b> … {{ i18n.ts._initialTutorial._postNote._visibility.localOnly }}</div>
|
||||
</div>
|
||||
</MkFormSection>
|
||||
<MkFormSection>
|
||||
<template #label>{{ i18n.ts._initialTutorial._postNote._cw.title }}</template>
|
||||
<div class="_gaps">
|
||||
<div>{{ i18n.ts._initialTutorial._postNote._cw.description }}</div>
|
||||
<MkNote :class="$style.exampleRoot" :note="exampleCWNote" :mock="true"/>
|
||||
<div>{{ i18n.ts._initialTutorial._postNote._cw.useCases }}</div>
|
||||
</div>
|
||||
</MkFormSection>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import * as Misskey from 'misskey-js';
|
||||
import { reactive } from 'vue';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import MkNote from '@/components/MkNote.vue';
|
||||
import MkPostForm from '@/components/MkPostForm.vue';
|
||||
import MkFormSection from '@/components/form/section.vue';
|
||||
import MkInfo from '@/components/MkInfo.vue';
|
||||
|
||||
const exampleCWNote = reactive<Misskey.entities.Note>({
|
||||
id: '0000000000',
|
||||
createdAt: '2019-04-14T17:30:49.181Z',
|
||||
userId: '0000000001',
|
||||
user: {
|
||||
id: '0000000001',
|
||||
name: '藍',
|
||||
username: 'ai',
|
||||
host: null,
|
||||
avatarDecorations: [],
|
||||
avatarUrl: './client-assets/tutorial/ai.webp',
|
||||
avatarBlurhash: 'eiKmhHIByXxZ~qWXs:-pR*NbR*s:xuRjoL-oR*WCt6WWf6WVf6oeWB',
|
||||
isBot: false,
|
||||
isCat: true,
|
||||
emojis: {},
|
||||
onlineStatus: null,
|
||||
badgeRoles: [],
|
||||
},
|
||||
text: i18n.ts._initialTutorial._postNote._cw._exampleNote.note,
|
||||
cw: i18n.ts._initialTutorial._postNote._cw._exampleNote.cw,
|
||||
visibility: 'public',
|
||||
localOnly: false,
|
||||
reactionAcceptance: null,
|
||||
renoteCount: 0,
|
||||
repliesCount: 1,
|
||||
reactions: {},
|
||||
reactionEmojis: {},
|
||||
fileIds: [],
|
||||
files: [],
|
||||
replyId: null,
|
||||
renoteId: null,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.exampleRoot {
|
||||
max-width: none!important;
|
||||
border-radius: var(--radius);
|
||||
border: var(--panelBorder);
|
||||
background: var(--panel);
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: var(--divider);
|
||||
}
|
||||
|
||||
.image {
|
||||
max-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.post {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
color: var(--fgOnAccent);
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: calc(100% - 38px);
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.postIcon {
|
||||
position: relative;
|
||||
margin-left: 30px;
|
||||
margin-right: 8px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.postText {
|
||||
position: relative;
|
||||
line-height: 40px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,156 @@
|
|||
<!--
|
||||
SPDX-FileCopyrightText: syuilo and other misskey contributors
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="_gaps">
|
||||
<div style="text-align: center; padding: 0 16px;">{{ i18n.ts._initialTutorial._howToMakeAttachmentsSensitive.description }}</div>
|
||||
<div>{{ i18n.ts._initialTutorial._howToMakeAttachmentsSensitive.tryThisFile }}</div>
|
||||
<MkInfo>{{ i18n.ts._initialTutorial._howToMakeAttachmentsSensitive.method }}</MkInfo>
|
||||
<MkPostForm
|
||||
:class="$style.exampleRoot"
|
||||
:mock="true"
|
||||
:initialNote="exampleNote"
|
||||
@fileChangeSensitive="doSucceeded"
|
||||
></MkPostForm>
|
||||
<div v-if="onceSucceeded"><b style="color: var(--accent);"><i class="ti ti-check"></i> {{ i18n.ts._initialTutorial.wellDone }}</b> {{ i18n.ts._initialTutorial._howToMakeAttachmentsSensitive.sensitiveSucceeded }}</div>
|
||||
<MkFolder>
|
||||
<template #label>{{ i18n.ts.previewNoteText }}</template>
|
||||
<MkNote :mock="true" :note="exampleNote" :class="$style.exampleRoot"></MkNote>
|
||||
</MkFolder>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import * as Misskey from 'misskey-js';
|
||||
import { ref, reactive } from 'vue';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import MkPostForm from '@/components/MkPostForm.vue';
|
||||
import MkFolder from '@/components/MkFolder.vue';
|
||||
import MkInfo from '@/components/MkInfo.vue';
|
||||
import MkNote from '@/components/MkNote.vue';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'succeeded'): void;
|
||||
}>();
|
||||
|
||||
const onceSucceeded = ref<boolean>(false);
|
||||
|
||||
function doSucceeded(fileId: string, to: boolean) {
|
||||
if (fileId === exampleNote.fileIds[0] && to) {
|
||||
onceSucceeded.value = true;
|
||||
emit('succeeded');
|
||||
}
|
||||
}
|
||||
|
||||
const exampleNote = reactive<Misskey.entities.Note>({
|
||||
id: '0000000000',
|
||||
createdAt: '2019-04-14T17:30:49.181Z',
|
||||
userId: '0000000001',
|
||||
user: {
|
||||
id: '0000000001',
|
||||
name: 'しゅいろ',
|
||||
username: 'syuilo',
|
||||
host: null,
|
||||
avatarDecorations: [],
|
||||
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,
|
||||
emojis: {},
|
||||
onlineStatus: null,
|
||||
badgeRoles: [],
|
||||
},
|
||||
text: i18n.ts._initialTutorial._howToMakeAttachmentsSensitive._exampleNote.note,
|
||||
cw: null,
|
||||
visibility: 'public',
|
||||
localOnly: false,
|
||||
reactionAcceptance: null,
|
||||
renoteCount: 0,
|
||||
repliesCount: 1,
|
||||
reactions: {},
|
||||
reactionEmojis: {},
|
||||
fileIds: ['0000000002'],
|
||||
files: [{
|
||||
id: '0000000002',
|
||||
createdAt: '2019-04-14T17:30:49.181Z',
|
||||
name: 'natto_failed.webp',
|
||||
type: 'image/webp',
|
||||
md5: 'c44286cf152d0740be0ce5ad45ea85c3',
|
||||
size: 827532,
|
||||
isSensitive: false,
|
||||
blurhash: 'LXNA3TD*XAIA%1%M%gt7.TofRioz',
|
||||
properties: {
|
||||
width: 256,
|
||||
height: 256,
|
||||
},
|
||||
url: '/client-assets/tutorial/natto_failed.webp',
|
||||
thumbnailUrl: '/client-assets/tutorial/natto_failed.webp',
|
||||
comment: null,
|
||||
folderId: null,
|
||||
folder: null,
|
||||
userId: null,
|
||||
user: null,
|
||||
}],
|
||||
replyId: null,
|
||||
renoteId: null,
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.exampleRoot {
|
||||
border-radius: var(--radius);
|
||||
border: var(--panelBorder);
|
||||
background: var(--panel);
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: var(--divider);
|
||||
}
|
||||
|
||||
.image {
|
||||
max-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.post {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
color: var(--fgOnAccent);
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: calc(100% - 38px);
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.postIcon {
|
||||
position: relative;
|
||||
margin-left: 30px;
|
||||
margin-right: 8px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.postText {
|
||||
position: relative;
|
||||
line-height: 40px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -12,7 +12,12 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<div><i class="ti ti-universe"></i> <b>{{ i18n.ts._timelines.social }}</b> … {{ i18n.ts._initialTutorial._timeline.social }}</div>
|
||||
<div><i class="ti ti-whirl"></i> <b>{{ i18n.ts._timelines.global }}</b> … {{ i18n.ts._initialTutorial._timeline.global }}</div>
|
||||
</div>
|
||||
<I18n :src="i18n.ts._initialTutorial._timeline.description2" tag="div" style="padding: 0 16px;">
|
||||
<div class="_gaps_s">
|
||||
<div>{{ i18n.ts._initialTutorial._timeline.description2 }}</div>
|
||||
<img :class="$style.image" src="/client-assets/tutorial/timeline_tab.png"/>
|
||||
</div>
|
||||
<div :class="$style.divider"></div>
|
||||
<I18n :src="i18n.ts._initialTutorial._timeline.description3" tag="div" style="padding: 0 16px;">
|
||||
<template #link>
|
||||
<a href="https://misskey-hub.net/docs/features/timeline.html" target="_blank" class="_link">{{ i18n.ts.help }}</a>
|
||||
</template>
|
||||
|
|
@ -37,6 +42,11 @@ import { i18n } from '@/i18n.js';
|
|||
background: var(--divider);
|
||||
}
|
||||
|
||||
.image {
|
||||
max-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.post {
|
||||
position: relative;
|
||||
display: block;
|
||||
|
|
@ -0,0 +1,252 @@
|
|||
<!--
|
||||
SPDX-FileCopyrightText: syuilo and other misskey contributors
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<MkModalWindow
|
||||
ref="dialog"
|
||||
:width="600"
|
||||
:height="650"
|
||||
@close="close(true)"
|
||||
@closed="emit('closed')"
|
||||
>
|
||||
<template v-if="page === 1" #header><i class="ti ti-pencil"></i> {{ i18n.ts._initialTutorial._note.title }}</template>
|
||||
<template v-else-if="page === 2" #header><i class="ti ti-mood-smile"></i> {{ i18n.ts._initialTutorial._reaction.title }}</template>
|
||||
<template v-else-if="page === 3" #header><i class="ti ti-home"></i> {{ i18n.ts._initialTutorial._timeline.title }}</template>
|
||||
<template v-else-if="page === 4" #header><i class="ti ti-pencil-plus"></i> {{ i18n.ts._initialTutorial._postNote.title }}</template>
|
||||
<template v-else-if="page === 5" #header><i class="ti ti-eye-exclamation"></i> {{ i18n.ts._initialTutorial._howToMakeAttachmentsSensitive.title }}</template>
|
||||
<template v-else #header>{{ i18n.ts._initialTutorial.title }}</template>
|
||||
|
||||
<div style="overflow-x: clip;">
|
||||
<Transition
|
||||
mode="out-in"
|
||||
:enterActiveClass="$style.transition_x_enterActive"
|
||||
:leaveActiveClass="$style.transition_x_leaveActive"
|
||||
:enterFromClass="$style.transition_x_enterFrom"
|
||||
:leaveToClass="$style.transition_x_leaveTo"
|
||||
>
|
||||
<template v-if="page === 0">
|
||||
<div :class="$style.centerPage">
|
||||
<MkAnimBg style="position: absolute; top: 0;" :scale="1.5"/>
|
||||
<MkSpacer :marginMin="20" :marginMax="28">
|
||||
<div class="_gaps" style="text-align: center;">
|
||||
<i class="ti ti-confetti" style="display: block; margin: auto; font-size: 3em; color: var(--accent);"></i>
|
||||
<div style="font-size: 120%;">{{ i18n.ts._initialTutorial._landing.title }}</div>
|
||||
<div>{{ i18n.ts._initialTutorial._landing.description }}</div>
|
||||
<MkButton primary rounded gradate style="margin: 16px auto 0 auto;" @click="page++">{{ i18n.ts._initialTutorial.launchTutorial }} <i class="ti ti-arrow-right"></i></MkButton>
|
||||
<MkButton style="margin: 0 auto;" transparent rounded @click="close(true)">{{ i18n.ts.close }}</MkButton>
|
||||
</div>
|
||||
</MkSpacer>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="page === 1">
|
||||
<div style="height: 100cqh; overflow: auto;">
|
||||
<div :class="$style.pageRoot">
|
||||
<MkSpacer :marginMin="20" :marginMax="28" :class="$style.pageMain">
|
||||
<XNote phase="aboutNote"/>
|
||||
</MkSpacer>
|
||||
<div :class="$style.pageFooter">
|
||||
<div class="_buttonsCenter">
|
||||
<MkButton v-if="initialPage !== 1" rounded @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
|
||||
<MkButton primary rounded gradate @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="page === 2">
|
||||
<div style="height: 100cqh; overflow: auto;">
|
||||
<div :class="$style.pageRoot">
|
||||
<MkSpacer :marginMin="20" :marginMax="28" :class="$style.pageMain">
|
||||
<div class="_gaps">
|
||||
<XNote phase="howToReact" @reacted="isReactionTutorialPushed = true"/>
|
||||
<div v-if="!isReactionTutorialPushed">{{ i18n.ts._initialTutorial._reaction.reactToContinue }}</div>
|
||||
</div>
|
||||
</MkSpacer>
|
||||
<div :class="$style.pageFooter">
|
||||
<div class="_buttonsCenter">
|
||||
<MkButton v-if="initialPage !== 2" rounded @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
|
||||
<MkButton primary rounded gradate :disabled="!isReactionTutorialPushed" @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="page === 3">
|
||||
<div style="height: 100cqh; overflow: auto;">
|
||||
<div :class="$style.pageRoot">
|
||||
<MkSpacer :marginMin="20" :marginMax="28" :class="$style.pageMain">
|
||||
<XTimeline/>
|
||||
</MkSpacer>
|
||||
<div :class="$style.pageFooter">
|
||||
<div class="_buttonsCenter">
|
||||
<MkButton v-if="initialPage !== 3" rounded @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
|
||||
<MkButton primary rounded gradate @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="page === 4">
|
||||
<div style="height: 100cqh; overflow: auto;">
|
||||
<div :class="$style.pageRoot">
|
||||
<MkSpacer :marginMin="20" :marginMax="28" :class="$style.pageMain">
|
||||
<XPostNote/>
|
||||
</MkSpacer>
|
||||
<div :class="$style.pageFooter">
|
||||
<div class="_buttonsCenter">
|
||||
<MkButton v-if="initialPage !== 3" rounded @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
|
||||
<MkButton primary rounded gradate @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="page === 5">
|
||||
<div style="height: 100cqh; overflow: auto;">
|
||||
<div :class="$style.pageRoot">
|
||||
<MkSpacer :marginMin="20" :marginMax="28" :class="$style.pageMain">
|
||||
<div class="_gaps">
|
||||
<XSensitive @succeeded="isSensitiveTutorialSucceeded = true"/>
|
||||
<div v-if="!isSensitiveTutorialSucceeded">{{ i18n.ts._initialTutorial._howToMakeAttachmentsSensitive.doItToContinue }}</div>
|
||||
</div>
|
||||
</MkSpacer>
|
||||
<div :class="$style.pageFooter">
|
||||
<div class="_buttonsCenter">
|
||||
<MkButton v-if="initialPage !== 2" rounded @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
|
||||
<MkButton primary rounded gradate :disabled="!isSensitiveTutorialSucceeded" @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="page === 6">
|
||||
<div :class="$style.centerPage">
|
||||
<MkAnimBg style="position: absolute; top: 0;" :scale="1.5"/>
|
||||
<MkSpacer :marginMin="20" :marginMax="28">
|
||||
<div class="_gaps" style="text-align: center;">
|
||||
<i class="ti ti-check" style="display: block; margin: auto; font-size: 3em; color: var(--accent);"></i>
|
||||
<div style="font-size: 120%;">{{ i18n.ts._initialTutorial._done.title }}</div>
|
||||
<I18n :src="i18n.ts._initialTutorial._done.description" tag="div" style="padding: 0 16px;">
|
||||
<template #link>
|
||||
<a href="https://misskey-hub.net/help.html" target="_blank" class="_link">{{ i18n.ts.help }}</a>
|
||||
</template>
|
||||
</I18n>
|
||||
<div>{{ i18n.t('_initialAccountSetting.haveFun', { name: instance.name ?? host }) }}</div>
|
||||
<div class="_buttonsCenter" style="margin-top: 16px;">
|
||||
<MkButton v-if="initialPage !== 4" rounded @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
|
||||
<MkButton rounded primary gradate @click="close(false)">{{ i18n.ts.close }}</MkButton>
|
||||
</div>
|
||||
</div>
|
||||
</MkSpacer>
|
||||
</div>
|
||||
</template>
|
||||
</Transition>
|
||||
</div>
|
||||
</MkModalWindow>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, shallowRef } from 'vue';
|
||||
import MkModalWindow from '@/components/MkModalWindow.vue';
|
||||
import MkButton from '@/components/MkButton.vue';
|
||||
import XNote from '@/components/MkTutorialDialog.Note.vue';
|
||||
import XTimeline from '@/components/MkTutorialDialog.Timeline.vue';
|
||||
import XPostNote from '@/components/MkTutorialDialog.PostNote.vue';
|
||||
import XSensitive from '@/components/MkTutorialDialog.Sensitive.vue';
|
||||
import MkAnimBg from '@/components/MkAnimBg.vue';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import { instance } from '@/instance.js';
|
||||
import { host } from '@/config.js';
|
||||
import * as os from '@/os.js';
|
||||
|
||||
const props = defineProps<{
|
||||
initialPage?: number;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'closed'): void;
|
||||
}>();
|
||||
|
||||
const dialog = shallowRef<InstanceType<typeof MkModalWindow>>();
|
||||
|
||||
// eslint-disable-next-line vue/no-setup-props-destructure
|
||||
const page = ref(props.initialPage ?? 0);
|
||||
|
||||
const isReactionTutorialPushed = ref<boolean>(false);
|
||||
const isSensitiveTutorialSucceeded = ref<boolean>(false);
|
||||
|
||||
async function close(skip: boolean) {
|
||||
if (skip) {
|
||||
const { canceled } = await os.confirm({
|
||||
type: 'warning',
|
||||
text: i18n.ts._initialTutorial.skipAreYouSure,
|
||||
});
|
||||
if (canceled) return;
|
||||
}
|
||||
|
||||
dialog.value?.close();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.transition_x_enterActive,
|
||||
.transition_x_leaveActive {
|
||||
transition: opacity 0.3s cubic-bezier(0,0,.35,1), transform 0.3s cubic-bezier(0,0,.35,1);
|
||||
}
|
||||
.transition_x_enterFrom {
|
||||
opacity: 0;
|
||||
transform: translateX(50px);
|
||||
}
|
||||
.transition_x_leaveTo {
|
||||
opacity: 0;
|
||||
transform: translateX(-50px);
|
||||
}
|
||||
|
||||
.progressBar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.progressBarValue {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
|
||||
transition: all 0.5s cubic-bezier(0,.5,.5,1);
|
||||
}
|
||||
|
||||
.centerPage {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100cqh;
|
||||
padding-bottom: 30px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.pageRoot {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.pageMain {
|
||||
flex-grow: 1;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.pageFooter {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
flex-shrink: 0;
|
||||
padding: 12px;
|
||||
border-top: solid 0.5px var(--divider);
|
||||
-webkit-backdrop-filter: blur(15px);
|
||||
backdrop-filter: blur(15px);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -16,14 +16,11 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<template v-else-if="page === 2" #header><i class="ti ti-lock"></i> {{ i18n.ts._initialAccountSetting.privacySetting }}</template>
|
||||
<template v-else-if="page === 3" #header><i class="ti ti-user-plus"></i> {{ i18n.ts.follow }}</template>
|
||||
<template v-else-if="page === 4" #header><i class="ti ti-bell-plus"></i> {{ i18n.ts.pushNotification }}</template>
|
||||
<template v-else-if="page === 5 || page === 9" #header>{{ i18n.ts.done }}</template>
|
||||
<template v-else-if="page === 6" #header><i class="ti ti-pencil"></i> {{ i18n.ts._initialTutorial._note.title }}</template>
|
||||
<template v-else-if="page === 7" #header><i class="ti ti-mood-smile"></i> {{ i18n.ts._initialTutorial._reaction.title }}</template>
|
||||
<template v-else-if="page === 8" #header><i class="ti ti-home"></i> {{ i18n.ts._initialTutorial._timeline.title }}</template>
|
||||
<template v-else-if="page === 5" #header>{{ i18n.ts.done }}</template>
|
||||
<template v-else #header>{{ i18n.ts.initialAccountSetting }}</template>
|
||||
|
||||
<div style="overflow-x: clip;">
|
||||
<div v-if="page <= 5" :class="$style.progressBar">
|
||||
<div :class="$style.progressBar">
|
||||
<div :class="$style.progressBarValue" :style="{ width: `${(page / 5) * 100}%` }"></div>
|
||||
</div>
|
||||
<Transition
|
||||
|
|
@ -115,80 +112,11 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<div style="font-size: 120%;">{{ i18n.ts._initialAccountSetting.initialAccountSettingCompleted }}</div>
|
||||
<div>{{ i18n.t('_initialAccountSetting.youCanContinueTutorial', { name: instance.name ?? host }) }}</div>
|
||||
<div class="_buttonsCenter" style="margin-top: 16px;">
|
||||
<MkButton rounded primary gradate data-cy-user-setup-continue @click="() => { setupComplete(); page++; }">{{ i18n.ts._initialAccountSetting.startTutorial }} <i class="ti ti-arrow-right"></i></MkButton>
|
||||
<MkButton rounded primary gradate data-cy-user-setup-continue @click="launchTutorial()">{{ i18n.ts._initialAccountSetting.startTutorial }} <i class="ti ti-arrow-right"></i></MkButton>
|
||||
</div>
|
||||
<div class="_buttonsCenter">
|
||||
<MkButton rounded data-cy-user-setup-back @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
|
||||
<MkButton rounded primary data-cy-user-setup-continue @click="close(false)">{{ i18n.ts.close }}</MkButton>
|
||||
</div>
|
||||
</div>
|
||||
</MkSpacer>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="page === 6">
|
||||
<div style="height: 100cqh; overflow: auto;">
|
||||
<div :class="$style.pageRoot">
|
||||
<MkSpacer :marginMin="20" :marginMax="28" :class="$style.pageMain">
|
||||
<XTutorialNote phase="aboutNote"/>
|
||||
</MkSpacer>
|
||||
<div :class="$style.pageFooter">
|
||||
<div class="_buttonsCenter">
|
||||
<MkButton v-if="!onlyTutorial" rounded data-cy-user-setup-back @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
|
||||
<MkButton primary rounded gradate data-cy-user-setup-continue @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="page === 7">
|
||||
<div style="height: 100cqh; overflow: auto;">
|
||||
<div :class="$style.pageRoot">
|
||||
<MkSpacer :marginMin="20" :marginMax="28" :class="$style.pageMain">
|
||||
<div class="_gaps">
|
||||
<XTutorialNote phase="howToReact" @reacted="isReactionTutorialPushed = true"/>
|
||||
<div v-if="!isReactionTutorialPushed">{{ i18n.ts._initialTutorial._reaction.reactToContinue }}</div>
|
||||
</div>
|
||||
</MkSpacer>
|
||||
<div :class="$style.pageFooter">
|
||||
<div class="_buttonsCenter">
|
||||
<MkButton rounded data-cy-user-setup-back @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
|
||||
<MkButton primary rounded gradate :disabled="!isReactionTutorialPushed" data-cy-user-setup-continue @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="page === 8">
|
||||
<div style="height: 100cqh; overflow: auto;">
|
||||
<div :class="$style.pageRoot">
|
||||
<MkSpacer :marginMin="20" :marginMax="28" :class="$style.pageMain">
|
||||
<XTutorialTimeline phase="howToReact"/>
|
||||
</MkSpacer>
|
||||
<div :class="$style.pageFooter">
|
||||
<div class="_buttonsCenter">
|
||||
<MkButton rounded data-cy-user-setup-back @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
|
||||
<MkButton primary rounded gradate data-cy-user-setup-continue @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="page === 9">
|
||||
<div :class="$style.centerPage">
|
||||
<MkAnimBg style="position: absolute; top: 0;" :scale="1.5"/>
|
||||
<MkSpacer :marginMin="20" :marginMax="28">
|
||||
<div class="_gaps" style="text-align: center;">
|
||||
<i class="ti ti-check" style="display: block; margin: auto; font-size: 3em; color: var(--accent);"></i>
|
||||
<div style="font-size: 120%;">{{ i18n.ts._initialTutorial._done.title }}</div>
|
||||
<I18n :src="i18n.ts._initialTutorial._done.description" tag="div" style="padding: 0 16px;">
|
||||
<template #link>
|
||||
<a href="https://misskey-hub.net/help.html" target="_blank" class="_link">{{ i18n.ts.help }}</a>
|
||||
</template>
|
||||
</I18n>
|
||||
<div>{{ i18n.t('_initialAccountSetting.haveFun', { name: instance.name ?? host }) }}</div>
|
||||
<div class="_buttonsCenter" style="margin-top: 16px;">
|
||||
<MkButton rounded data-cy-user-setup-back @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
|
||||
<MkButton rounded primary gradate data-cy-user-setup-continue @click="close(false)">{{ i18n.ts.close }}</MkButton>
|
||||
<MkButton rounded primary data-cy-user-setup-continue @click="setupComplete()">{{ i18n.ts.close }}</MkButton>
|
||||
</div>
|
||||
</div>
|
||||
</MkSpacer>
|
||||
|
|
@ -200,14 +128,12 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, shallowRef, watch } from 'vue';
|
||||
import { ref, shallowRef, watch, nextTick, defineAsyncComponent } from 'vue';
|
||||
import MkModalWindow from '@/components/MkModalWindow.vue';
|
||||
import MkButton from '@/components/MkButton.vue';
|
||||
import XProfile from '@/components/MkUserSetupDialog.Profile.vue';
|
||||
import XFollow from '@/components/MkUserSetupDialog.Follow.vue';
|
||||
import XPrivacy from '@/components/MkUserSetupDialog.Privacy.vue';
|
||||
import XTutorialNote from '@/components/MkUserSetupDialog.NoteTutorial.vue';
|
||||
import XTutorialTimeline from '@/components/MkUserSetupDialog.TimelineTutorial.vue';
|
||||
import MkAnimBg from '@/components/MkAnimBg.vue';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import { instance } from '@/instance.js';
|
||||
|
|
@ -216,10 +142,6 @@ import MkPushNotificationAllowButton from '@/components/MkPushNotificationAllowB
|
|||
import { defaultStore } from '@/store.js';
|
||||
import * as os from '@/os.js';
|
||||
|
||||
const props = defineProps<{
|
||||
onlyTutorial?: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'closed'): void;
|
||||
}>();
|
||||
|
|
@ -227,18 +149,14 @@ const emit = defineEmits<{
|
|||
const dialog = shallowRef<InstanceType<typeof MkModalWindow>>();
|
||||
|
||||
// eslint-disable-next-line vue/no-setup-props-destructure
|
||||
const page = ref(props.onlyTutorial ? 6 : defaultStore.state.accountSetupWizard);
|
||||
|
||||
const isReactionTutorialPushed = ref<boolean>(false);
|
||||
const page = ref(defaultStore.state.accountSetupWizard);
|
||||
|
||||
watch(page, () => {
|
||||
if (page.value <= 5 && !props.onlyTutorial) {
|
||||
defaultStore.set('accountSetupWizard', page.value);
|
||||
}
|
||||
});
|
||||
|
||||
async function close(skip: boolean) {
|
||||
if (skip && !props.onlyTutorial) {
|
||||
if (skip) {
|
||||
const { canceled } = await os.confirm({
|
||||
type: 'warning',
|
||||
text: i18n.ts._initialAccountSetting.skipAreYouSure,
|
||||
|
|
@ -247,13 +165,21 @@ async function close(skip: boolean) {
|
|||
}
|
||||
|
||||
dialog.value?.close();
|
||||
if (!props.onlyTutorial) {
|
||||
defaultStore.set('accountSetupWizard', -1);
|
||||
}
|
||||
}
|
||||
|
||||
function setupComplete() {
|
||||
defaultStore.set('accountSetupWizard', -1);
|
||||
dialog.value?.close();
|
||||
}
|
||||
|
||||
function launchTutorial() {
|
||||
setupComplete();
|
||||
nextTick(() => {
|
||||
os.popup(defineAsyncComponent(() => import('@/components/MkTutorialDialog.vue')), {
|
||||
initialPage: 1,
|
||||
}, {}, 'closed');
|
||||
});
|
||||
}
|
||||
|
||||
async function later(later: boolean) {
|
||||
|
|
@ -265,7 +191,7 @@ async function later(later: boolean) {
|
|||
if (canceled) return;
|
||||
}
|
||||
|
||||
dialog.value.close();
|
||||
dialog.value?.close();
|
||||
defaultStore.set('accountSetupWizard', 0);
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { defineAsyncComponent, computed, watch, provide } from 'vue';
|
||||
import { computed, watch, provide } from 'vue';
|
||||
import type { Tab } from '@/components/global/MkPageHeader.tabs.vue';
|
||||
import MkTimeline from '@/components/MkTimeline.vue';
|
||||
import MkInfo from '@/components/MkInfo.vue';
|
||||
|
|
|
|||
|
|
@ -102,9 +102,7 @@ export function openInstanceMenu(ev: MouseEvent) {
|
|||
text: i18n.ts._initialTutorial.launchTutorial,
|
||||
icon: 'ti ti-presentation',
|
||||
action: () => {
|
||||
os.popup(defineAsyncComponent(() => import('@/components/MkUserSetupDialog.vue')), {
|
||||
onlyTutorial: true,
|
||||
}, {}, 'closed');
|
||||
os.popup(defineAsyncComponent(() => import('@/components/MkTutorialDialog.vue')), {}, {}, 'closed');
|
||||
},
|
||||
} : undefined, {
|
||||
type: 'link',
|
||||
|
|
|
|||
Loading…
Reference in New Issue