diff options
| author | syuilo <Syuilotan@yahoo.co.jp> | 2023-10-20 11:51:01 +0900 |
|---|---|---|
| committer | syuilo <Syuilotan@yahoo.co.jp> | 2023-10-20 11:51:01 +0900 |
| commit | 21986a2168d9c13725daef71ac8fd9722ee0fa91 (patch) | |
| tree | 0acd43b9d66355bceeed7dcbe1895977792f673f /packages/frontend/src | |
| parent | chore: tweak MkNotifications (diff) | |
| download | sharkey-21986a2168d9c13725daef71ac8fd9722ee0fa91.tar.gz sharkey-21986a2168d9c13725daef71ac8fd9722ee0fa91.tar.bz2 sharkey-21986a2168d9c13725daef71ac8fd9722ee0fa91.zip | |
enhance(frontend): 投稿されてから時間が経過しているノートであることを視覚的に分かりやすく
Diffstat (limited to 'packages/frontend/src')
| -rw-r--r-- | packages/frontend/src/components/MkNoteDetailed.vue | 2 | ||||
| -rw-r--r-- | packages/frontend/src/components/MkNoteHeader.vue | 2 | ||||
| -rw-r--r-- | packages/frontend/src/components/global/MkTime.vue | 13 |
3 files changed, 14 insertions, 3 deletions
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> |