sakura-tel · atsu1125 · Mar 5, 2023
diff --git a/locales/en-US.yml b/locales/en-US.yml
@@ -875,6 +875,7 @@ voteConfirm: "Are you sure that you want to vote?"
 deleteAccount: "Delete Account"
 deleteAccountConfirm: "Are you sure that you want to delete this account?"
 createdAt: "Created at"
+enableAbsoluteTime: "Enable Absolute Time"
 
 _template:
   edit: "Edit Template..."

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
@@ -912,6 +912,7 @@ voteConfirm: "投票しますか？"
 deleteAccount: "アカウント削除"
 deleteAccountConfirm: "本当にこのアカウントを削除しますか？"
 createdAt: "作成日時"
+enableAbsoluteTime: "絶対時刻表記を使用する"
 
 _template:
   edit: "定型文を編集…"

diff --git a/src/client/components/note-detailed.vue b/src/client/components/note-detailed.vue
@@ -23,7 +23,8 @@
 		<div class="info">
 			<button class="_button time" @click="showRenoteMenu()" ref="renoteTime">
 				<Fa class="dropdownIcon" v-if="isMyRenote || (this.$i.isModerator || this.$i.isAdmin)" :icon="faEllipsisH"/>
-				<MkTime :time="note.createdAt"/>
+				<MkTime v-if="enableAbsoluteTime" :time="note.createdAt" mode="absolute"/>
+				<MkTime v-else-if="!enableAbsoluteTime" :time="note.createdAt" mode="relative"/>
 			</button>
 			<span class="visibility" v-if="note.visibility !== 'public'">
 				<VisibilityIcon
@@ -168,7 +169,7 @@ import copyToClipboard from '@/scripts/copy-to-clipboard';
 import { checkWordMute } from '@/scripts/check-word-mute';
 import { userPage } from '@/filters/user';
 import * as os from '@/os';
-import { noteActions, noteViewInterruptors } from '@/store';
+import { defaultStore, noteActions, noteViewInterruptors } from '@/store';
 import { extractUrlFromMfm } from '../../misc/extract-url-from-mfm';
 
 function markRawAll(...xs) {
@@ -230,6 +231,9 @@ export default defineComponent({
 	},
 
 	computed: {
+		enableAbsoluteTime() {
+			return this.$store.reactiveState.enableAbsoluteTime.value;
+		},
 		disableReactions() {
 			return this.$store.reactiveState.disableReactions.value;
 		},

diff --git a/src/client/components/note-header.vue b/src/client/components/note-header.vue
@@ -17,7 +17,8 @@
 	<div class="info">
 		<span class="mobile" v-if="note.viaMobile"><Fa :icon="faMobileAlt"/></span>
 		<MkA class="created-at" :to="notePage(note)">
-			<MkTime :time="note.createdAt"/>
+			<MkTime v-if="enableAbsoluteTime" :time="note.createdAt" mode="absolute"/>
+			<MkTime v-else-if="!enableAbsoluteTime" :time="note.createdAt" mode="relative"/>
 		</MkA>
 		<VisibilityIcon class="visibility" v-if="note.visibility !== 'public' || note.localOnly || note.remoteFollowersOnly"
 			:visibility="note.visibility"
@@ -36,6 +37,7 @@ import notePage from '../filters/note';
 import { userPage } from '../filters/user';
 import GpVerified from './verified.vue';
 import VisibilityIcon from './visibility-icon.vue';
+import { defaultStore } from '@/store';
 
 export default defineComponent({
 	components: {
@@ -62,6 +64,12 @@ export default defineComponent({
 	methods: {
 		notePage,
 		userPage
+	},
+
+	computed: {
+		enableAbsoluteTime() {
+			return this.$store.reactiveState.enableAbsoluteTime.value;
+		},
 	}
 });
 </script>

diff --git a/src/client/components/note.vue b/src/client/components/note.vue
@@ -25,7 +25,8 @@
 		<div class="info">
 			<button class="_button time" @click="showRenoteMenu()" ref="renoteTime">
 				<Fa class="dropdownIcon" v-if="isMyRenote || (this.$i.isModerator || this.$i.isAdmin)" :icon="faEllipsisV"/>
-				<MkTime :time="note.createdAt"/>
+				<MkTime v-if="enableAbsoluteTime" :time="note.createdAt" mode="absolute"/>
+				<MkTime v-else-if="!enableAbsoluteTime" :time="note.createdAt" mode="relative"/>
 			</button>
 			<VisibilityIcon class="visibility" v-if="note.visibility !== 'public' || note.localOnly || note.remoteFollowersOnly"
 				:visibility="note.visibility"
@@ -145,7 +146,7 @@ import copyToClipboard from '@/scripts/copy-to-clipboard';
 import { checkWordMute } from '@/scripts/check-word-mute';
 import { userPage } from '@/filters/user';
 import * as os from '@/os';
-import { noteActions, noteViewInterruptors } from '@/store';
+import { defaultStore, noteActions, noteViewInterruptors } from '@/store';
 import { extractUrlFromMfm } from '@/../misc/extract-url-from-mfm';
 import VisibilityIcon from './visibility-icon.vue';
 
@@ -220,6 +221,9 @@ export default defineComponent({
 	},
 
 	computed: {
+		enableAbsoluteTime() {
+			return this.$store.reactiveState.enableAbsoluteTime.value;
+		},
 		disableReactions() {
 			return this.$store.reactiveState.disableReactions.value;
 		},

diff --git a/src/client/components/notification.vue b/src/client/components/notification.vue
@@ -23,7 +23,8 @@
 		<header>
 			<MkA v-if="notification.user" class="name" :to="userPage(notification.user)" v-user-preview="notification.user.id"><MkUserName :user="notification.user"/></MkA>
 			<span v-else style="font-weight: bold">{{ notification.header }}</span>
-			<MkTime :time="notification.createdAt" v-if="withTime" class="time"/>
+			<MkTime :time="notification.createdAt" mode="absolute" v-if="withTime && enableAbsoluteTime" class="time"/>
+			<MkTime :time="notification.createdAt" mode="relative" v-else-if="withTime && !enableAbsoluteTime" class="time"/>
 		</header>
 		<MkA v-if="notification.type === 'reaction'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
 			<Fa :icon="faQuoteLeft"/>
@@ -89,6 +90,7 @@ import notePage from '../filters/note';
 import { userPage } from '../filters/user';
 import { i18n } from '@/i18n';
 import * as os from '@/os';
+import { defaultStore } from '@/store';
 
 const locale = i18n.locale;
 
@@ -128,6 +130,9 @@ export default defineComponent({
 		isCompactMode(): boolean {
 			return this.$store.state.postStyle === 'compact';
 		},
+		enableAbsoluteTime() {
+			return this.$store.reactiveState.enableAbsoluteTime.value;
+		},
 	},
 
 	mounted() {

diff --git a/src/client/pages/settings/general.vue b/src/client/pages/settings/general.vue
@@ -51,6 +51,7 @@
 		<FormSwitch v-model:value="useSticker">{{ $ts.useSticker }}
 			<template #desc>{{$ts.useStickerDesc}}</template>
 		</FormSwitch>
+		<FormSwitch v-model:value="enableAbsoluteTime">{{ $ts.enableAbsoluteTime }}</FormSwitch>
 	</FormGroup>
 
 	<FormSwitch v-model:value="showFullAcct">{{ $ts.showFullAcct }}
@@ -228,6 +229,7 @@ export default defineComponent({
 		showVoteConfirm: defaultStore.makeGetterSetter('showVoteConfirm'),
 		aiChanMode: defaultStore.makeGetterSetter('aiChanMode'),
 		renoteButtonMode: defaultStore.makeGetterSetter('renoteButtonMode'),
+		enableAbsoluteTime: defaultStore.makeGetterSetter('enableAbsoluteTime'),
 	},
 
 	watch: {

diff --git a/src/client/store.ts b/src/client/store.ts
@@ -393,6 +393,11 @@ export const defaultStore = markRaw(new Storage('base', {
 		default: false
 	},
 
+	enableAbsoluteTime: {
+		where: 'device',
+		default: false
+	},
+
 	//#endregion
 }));