From 21986a2168d9c13725daef71ac8fd9722ee0fa91 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 20 Oct 2023 11:51:01 +0900
Subject: [PATCH] =?UTF-8?q?enhance(frontend):=20=E6=8A=95=E7=A8=BF?=
=?UTF-8?q?=E3=81=95=E3=82=8C=E3=81=A6=E3=81=8B=E3=82=89=E6=99=82=E9=96=93?=
=?UTF-8?q?=E3=81=8C=E7=B5=8C=E9=81=8E=E3=81=97=E3=81=A6=E3=81=84=E3=82=8B?=
=?UTF-8?q?=E3=83=8E=E3=83=BC=E3=83=88=E3=81=A7=E3=81=82=E3=82=8B=E3=81=93?=
=?UTF-8?q?=E3=81=A8=E3=82=92=E8=A6=96=E8=A6=9A=E7=9A=84=E3=81=AB=E5=88=86?=
=?UTF-8?q?=E3=81=8B=E3=82=8A=E3=82=84=E3=81=99=E3=81=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
CHANGELOG.md | 1 +
packages/frontend/src/components/MkNoteDetailed.vue | 2 +-
packages/frontend/src/components/MkNoteHeader.vue | 2 +-
packages/frontend/src/components/global/MkTime.vue | 13 ++++++++++++-
4 files changed, 15 insertions(+), 3 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index f5feec00c4..4b10c8d123 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -25,6 +25,7 @@
### Client
- Enhance: TLの返信表示オプションを記憶するように
+- Enhance: 投稿されてから時間が経過しているノートであることを視覚的に分かりやすく
### Server
- Enhance: タイムライン取得時のパフォーマンスを向上
diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index 273984cc0a..4f40feffdd 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -94,7 +94,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<footer>
<div :class="$style.noteFooterInfo">
<MkA :to="notePage(appearNote)">
- <MkTime :time="appearNote.createdAt" mode="detail"/>
+ <MkTime :time="appearNote.createdAt" mode="detail" colored/>
</MkA>
</div>
<MkReactionsViewer ref="reactionsViewer" :note="appearNote"/>
diff --git a/packages/frontend/src/components/MkNoteHeader.vue b/packages/frontend/src/components/MkNoteHeader.vue
index dda7238d27..52d5b03685 100644
--- a/packages/frontend/src/components/MkNoteHeader.vue
+++ b/packages/frontend/src/components/MkNoteHeader.vue
@@ -15,7 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<div :class="$style.info">
<MkA :to="notePage(note)">
- <MkTime :time="note.createdAt"/>
+ <MkTime :time="note.createdAt" colored/>
</MkA>
<span v-if="note.visibility !== 'public'" style="margin-left: 0.5em;" :title="i18n.ts._visibility[note.visibility]">
<i v-if="note.visibility === 'home'" class="ti ti-home"></i>
diff --git a/packages/frontend/src/components/global/MkTime.vue b/packages/frontend/src/components/global/MkTime.vue
index d06aa036e7..5ba13ca3f3 100644
--- a/packages/frontend/src/components/global/MkTime.vue
+++ b/packages/frontend/src/components/global/MkTime.vue
@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
-<time :title="absolute">
+<time :title="absolute" :class="{ [$style.old1]: colored && (ago > 60 * 60 * 24 * 90), [$style.old2]: colored && (ago > 60 * 60 * 24 * 180) }">
<template v-if="invalid">{{ i18n.ts._ago.invalid }}</template>
<template v-else-if="mode === 'relative'">{{ relative }}</template>
<template v-else-if="mode === 'absolute'">{{ absolute }}</template>
@@ -22,6 +22,7 @@ const props = withDefaults(defineProps<{
time: Date | string | number | null;
origin?: Date | null;
mode?: 'relative' | 'absolute' | 'detail';
+ colored?: boolean;
}>(), {
origin: isChromatic() ? new Date('2023-04-01T00:00:00Z') : null,
mode: 'relative',
@@ -75,3 +76,13 @@ if (!invalid && props.origin === null && (props.mode === 'relative' || props.mod
});
}
</script>
+
+<style lang="scss" module>
+.old1 {
+ color: var(--warn);
+}
+
+.old1.old2 {
+ color: var(--error);
+}
+</style>