mirrors/misskey
1
0
Fork 1
mirror of https://github.com/misskey-dev/misskey.git synced 2026-05-21 12:15:31 +02:00
Code Releases Activity

enhance(frontend): 投稿フォームのヒントを追加 (#16712)

Browse Source 
* wip

* wip

* Update MkSpot.vue

* Update MkPostForm.vue

* wip

* wip

* Update CHANGELOG.md
This commit is contained in:
syuilo
2025-11-07 11:03:33 +09:00
committed by GitHub
parent e8c78e12d5
commit e312283ea0
7 changed files with 333 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
packages/frontend/src/components/MkPostForm.vue
View File

@@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<header :class="$style.header">
<div :class="$style.headerLeft">
<button v-if="!fixed" :class="$style.cancel" class="_button" @click="cancel"><i class="ti ti-x"></i></button>
<button v-click-anime v-tooltip="i18n.ts.account" :class="$style.account" class="_button" @click="openAccountMenu">
<button ref="accountMenuEl" v-click-anime v-tooltip="i18n.ts.account" :class="$style.account" class="_button" @click="openAccountMenu">
<img :class="$style.avatar" :src="(postAccount ?? $i).avatarUrl" style="border-radius: 100%;"/>
</button>
</div>
@@ -37,7 +37,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<span v-else><i class="ti ti-rocket-off"></i></span>
</button>
<button ref="otherSettingsButton" v-tooltip="i18n.ts.other" class="_button" :class="$style.headerRightItem" @click="showOtherSettings"><i class="ti ti-dots"></i></button>
<button v-click-anime class="_button" :class="$style.submit" :disabled="!canPost" data-cy-open-post-form-submit @click="post">
<button ref="submitButtonEl" v-click-anime class="_button" :class="$style.submit" :disabled="!canPost" data-cy-open-post-form-submit @click="post">
<div :class="$style.submitInner">
<template v-if="posted"></template>
<template v-else-if="posting"><MkEllipsis/></template>
@@ -60,6 +60,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<button class="_buttonPrimary" style="padding: 4px; border-radius: 8px;" @click="addVisibleUser"><i class="ti ti-plus ti-fw"></i></button>
</div>
</div>
<MkInfo v-if="!store.r.tips.value.postForm" :class="$style.showHowToUse"><button class="_textButton" @click="showTour">{{ i18n.ts._postForm.showHowToUse }}</button></MkInfo>
<MkInfo v-if="scheduledAt != null" :class="$style.scheduledAt">
<I18n :src="i18n.ts.scheduleToPostOnX" tag="span">
<template #x>
@@ -89,7 +90,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkNotePreview v-if="showPreview" :class="$style.preview" :text="text" :files="files" :poll="poll ?? undefined" :useCw="useCw" :cw="cw" :user="postAccount ?? $i"/>
<div v-if="showingOptions" style="padding: 8px 16px;">
</div>
<footer :class="$style.footer">
<footer ref="footerEl" :class="$style.footer">
<div :class="$style.footerLeft">
<button v-tooltip="i18n.ts.attachFile + ' (' + i18n.ts.upload + ')'" class="_button" :class="$style.footerButton" @click="chooseFileFromPc"><i class="ti ti-photo-plus"></i></button>
<button v-tooltip="i18n.ts.attachFile + ' (' + i18n.ts.fromDrive + ')'" class="_button" :class="$style.footerButton" @click="chooseFileFromDrive"><i class="ti ti-cloud-download"></i></button>
@@ -153,6 +154,8 @@ import { DI } from '@/di.js';
import { globalEvents } from '@/events.js';
import { checkDragDataType, getDragData } from '@/drag-and-drop.js';
import { useUploader } from '@/composables/use-uploader.js';
import { startTour } from '@/utility/tour.js';
import { closeTip } from '@/tips.js';
const $i = ensureSignin();
@@ -186,6 +189,9 @@ const cwInputEl = useTemplateRef('cwInputEl');
const hashtagsInputEl = useTemplateRef('hashtagsInputEl');
const visibilityButton = useTemplateRef('visibilityButton');
const otherSettingsButton = useTemplateRef('otherSettingsButton');
const accountMenuEl = useTemplateRef('accountMenuEl');
const footerEl = useTemplateRef('footerEl');
const submitButtonEl = useTemplateRef('submitButtonEl');
const posting = ref(false);
const posted = ref(false);
@@ -1285,6 +1291,45 @@ function cancelSchedule() {
scheduledAt.value = null;
}
function showTour() {
if (textareaEl.value == null ||
footerEl.value == null ||
accountMenuEl.value == null ||
visibilityButton.value == null ||
otherSettingsButton.value == null ||
submitButtonEl.value == null) {
return;
}
startTour([{
element: textareaEl.value,
title: i18n.ts._postForm._howToUse.content_title,
description: i18n.ts._postForm._howToUse.content_description,
}, {
element: footerEl.value,
title: i18n.ts._postForm._howToUse.toolbar_title,
description: i18n.ts._postForm._howToUse.toolbar_description,
}, {
element: accountMenuEl.value,
title: i18n.ts._postForm._howToUse.account_title,
description: i18n.ts._postForm._howToUse.account_description,
}, {
element: visibilityButton.value,
title: i18n.ts._postForm._howToUse.visibility_title,
description: i18n.ts._postForm._howToUse.visibility_description,
}, {
element: otherSettingsButton.value,
title: i18n.ts._postForm._howToUse.menu_title,
description: i18n.ts._postForm._howToUse.menu_description,
}, {
element: submitButtonEl.value,
title: i18n.ts._postForm._howToUse.submit_title,
description: i18n.ts._postForm._howToUse.submit_description,
}]).then(() => {
closeTip('postForm');
});
}
onMounted(() => {
if (props.autofocus) {
focus();
@@ -1414,6 +1459,7 @@ defineExpose({
}
.avatar {
display: block;
width: 28px;
height: 28px;
margin: auto;
@@ -1575,6 +1621,10 @@ html[data-color-scheme=light] .preview {
margin: 0 20px 16px 20px;
}
.showHowToUse {
margin: 0 20px 16px 20px;
}
.cw,
.hashtags,
.text {