tweak ui

2023-11-09 21:20:58 +09:00 · 2023-11-09 21:20:58 +09:00 · 5fa8735cc4
parent 3439a29c14
commit 5fa8735cc4
6 changed files with 73 additions and 20 deletions
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@ -595,7 +595,6 @@ export interface Locale {
    "poll": string;
    "schedulePost": string;
    "useCw": string;
-    "schedulePostList": string;
    "enablePlayer": string;
    "disablePlayer": string;
    "expandTweet": string;
@ -2469,6 +2468,13 @@ export interface Locale {
            };
        };
    };
+    "_schedulePost": {
+        "list": string;
+        "postDate": string;
+        "postTime": string;
+        "localTime": string;
+        "addSchedule": string;
+    };
 }
 declare const locales: {
    [lang: string]: Locale;
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@ -592,7 +592,6 @@ visibility: "公開範囲"
 poll: "アンケート"
 schedulePost: "予約投稿"
 useCw: "内容を隠す"
-schedulePostList: "予約投稿一覧"
 enablePlayer: "プレイヤーを開く"
 disablePlayer: "プレイヤーを閉じる"
 expandTweet: "ポストを展開する"
@ -2356,3 +2355,10 @@ _externalResourceInstaller:
    _themeInstallFailed:
      title: "テーマのインストールに失敗しました"
      description: "テーマのインストール中に問題が発生しました。もう一度お試しください。エラーの詳細はJavascriptコンソールをご覧ください。"
+
+_schedulePost:
+  list: "予約投稿一覧"
+  postDate: "日付"
+  postTime: "時刻"
+  localTime: "端末に設定されているタイムゾーンの時刻で投稿されます。"
+  addSchedule: "予約設定"
--- a/packages/frontend/src/components/MkMenu.vue
+++ b/packages/frontend/src/components/MkMenu.vue
@ -421,9 +421,9 @@ onBeforeUnmount(() => {
 .indicator {
 	position: absolute;
 	top: 5px;
-	left: 13px;
+	right: 18px;
 	color: var(--indicator);
-	font-size: 12px;
+	font-size: 8px;
 	animation: blink 1s infinite;
 }

--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@ -19,8 +19,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</button>
 		</div>
 		<div :class="$style.headerRight">
-			<button v-tooltip="i18n.ts.schedulePost" class="_button" :class="[$style.headerRightItem, { [$style.headerRightButtonActive]: schedule }]" @click="toggleSchedule"><i class="ti ti-calendar-time"></i></button>
-			<button v-tooltip="i18n.ts.schedulePostList" class="_button" :class="[$style.headerRightItem]" @click="listSchedulePost"><i class="ti ti-calendar-event"></i></button>
 			<template v-if="!(channel != null && fixed)">
 				<button v-if="channel == null" ref="visibilityButton" v-click-anime v-tooltip="i18n.ts.visibility" :class="['_button', $style.headerRightItem, $style.visibility]" @click="setVisibility">
 					<span v-if="visibility === 'public'"><i class="ti ti-world"></i></span>
@ -38,17 +36,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<span v-if="!localOnly"><i class="ti ti-rocket"></i></span>
 				<span v-else><i class="ti ti-rocket-off"></i></span>
 			</button>
-			<button v-click-anime v-tooltip="i18n.ts.reactionAcceptance" class="_button" :class="[$style.headerRightItem, { [$style.danger]: reactionAcceptance === 'likeOnly' }]" @click="toggleReactionAcceptance">
-				<span v-if="reactionAcceptance === 'likeOnly'"><i class="ti ti-heart"></i></span>
-				<span v-else-if="reactionAcceptance === 'likeOnlyForRemote'"><i class="ti ti-heart-plus"></i></span>
-				<span v-else><i class="ti ti-icons"></i></span>
-			</button>
+			<button v-tooltip="i18n.ts.otherSettings" class="_button" :class="[$style.headerRightItem]" @click="openOtherSettingsMenu"><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">
 				<div :class="$style.submitInner">
 					<template v-if="posted"></template>
 					<template v-else-if="posting"><MkEllipsis/></template>
 					<template v-else>{{ submitText }}</template>
-					<i style="margin-left: 6px;" :class="posted ? 'ti ti-check' : reply ? 'ti ti-arrow-back-up' : renote ? 'ti ti-quote' : 'ti ti-send'"></i>
+					<i style="margin-left: 6px;" :class="posted ? 'ti ti-check' : reply ? 'ti ti-arrow-back-up' : renote ? 'ti ti-quote' : schedule ? 'ti ti-clock-hour-4' : 'ti ti-send'"></i>
 				</div>
 			</button>
 		</div>
@ -242,7 +236,9 @@ const submitText = $computed((): string => {
 		? i18n.ts.quote
 		: props.reply
 			? i18n.ts.reply
-			: i18n.ts.note;
+			: schedule
+				? i18n.ts._schedulePost.addSchedule
+				: i18n.ts.note;
 });

 const textLength = $computed((): number => {
@ -753,7 +749,7 @@ async function post(ev?: MouseEvent) {
 		replyId: props.reply ? props.reply.id : undefined,
 		renoteId: props.renote ? props.renote.id : quoteId ? quoteId : undefined,
 		channelId: props.channel ? props.channel.id : undefined,
-		schedule: schedule,
+		schedule,
 		poll: poll,
 		cw: useCw ? cw ?? '' : null,
 		localOnly: localOnly,
@ -778,6 +774,10 @@ async function post(ev?: MouseEvent) {
 		}
 	}

+	if (postData.schedule?.expiresAt && typeof postData.schedule.expiresAt === 'string') {
+		postData.schedule.expiresAt = parseInt(postData.schedule.expiresAt);
+	}
+
 	let token = undefined;

 	if (postAccount) {
@ -902,6 +902,45 @@ function openAccountMenu(ev: MouseEvent) {
 	}, ev);
 }

+function openOtherSettingsMenu(ev: MouseEvent) {
+	let reactionAcceptanceIcon: string;
+	switch (reactionAcceptance) {
+		case 'likeOnly':
+			reactionAcceptanceIcon = 'ti ti-heart';
+			break;
+		case 'likeOnlyForRemote':
+			reactionAcceptanceIcon = 'ti ti-heart-plus';
+			break;
+		default:
+			reactionAcceptanceIcon = 'ti ti-icons';
+			break;
+	}
+
+	os.popupMenu([{
+		type: 'button',
+		text: i18n.ts.reactionAcceptance,
+		icon: reactionAcceptanceIcon,
+		action: toggleReactionAcceptance,
+	}, {
+		type: 'button',
+		text: i18n.ts.schedulePost,
+		icon: 'ti ti-calendar-time',
+		indicate: (schedule != null),
+		action: toggleSchedule,
+	}, null, {
+		type: 'button',
+		text: i18n.ts._schedulePost.list,
+		icon: 'ti ti-calendar-event',
+		action: () => {
+			// 投稿フォームが二重に出ないようにとじておく
+			emit('cancel');
+			listSchedulePost();
+		},
+	}], ev.currentTarget ?? ev.target, {
+		align: 'right',
+	});
+}
+
 onMounted(() => {
 	if (props.autofocus) {
 		focus();
--- a/packages/frontend/src/components/MkScheduleEditor.vue
+++ b/packages/frontend/src/components/MkScheduleEditor.vue
@ -5,12 +5,13 @@ SPDX-License-Identifier: AGPL-3.0-only

 <template>
 <div style="padding: 8px 16px">
-	<section>
+	<section class="_gaps_s">
 		<MkInput v-model="atDate" small type="date" class="input">
-			<template #label>{{ i18n.ts._poll.deadlineDate }}</template>
+			<template #label>{{ i18n.ts._schedulePost.postDate }}</template>
 		</MkInput>
 		<MkInput v-model="atTime" small type="time" class="input">
-			<template #label>{{ i18n.ts._poll.deadlineTime }}</template>
+			<template #label>{{ i18n.ts._schedulePost.postTime }}</template>
+			<template #caption>{{ i18n.ts._schedulePost.localTime }}</template>
 		</MkInput>
 	</section>
 </div>
@ -53,6 +54,6 @@ function get() {
 }

 watch([atDate, atTime], () => emit('update:modelValue', get()), {
-	deep: true,
+	immediate: true,
 });
 </script>
--- a/packages/frontend/src/components/MkSchedulePostListDialog.vue
+++ b/packages/frontend/src/components/MkSchedulePostListDialog.vue
@ -11,7 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	@close="cancel()"
 	@closed="$emit('closed')"
 >
-	<template #header> 予約投稿一覧</template>
+	<template #header>{{ i18n.ts._schedulePost.list }}</template>
 	<div v-for="item in notes">
 		<MkSpacer :marginMin="14" :marginMax="16">
 			<MkNoteSimple scheduled="true" :note="item.note"/>
@ -26,7 +26,8 @@ import * as Misskey from 'misskey-js';
 import MkModalWindow from '@/components/MkModalWindow.vue';
 import * as os from '@/os.js';
 import MkNoteSimple from '@/components/MkNoteSimple.vue';
-import MkSignin from '@/components/MkSignin.vue';
+import { i18n } from '@/i18n.js';
+
 const emit = defineEmits<{
 	(ev: 'ok', selected: Misskey.entities.UserDetailed): void;
 	(ev: 'cancel'): void;