mirror/MisskeyIO
1
0
Fork 0
mirror of https://github.com/MisskeyIO/misskey synced 2024-11-27 14:28:49 +09:00
Code

enhance(frontend): 投稿されてから時間が経過しているノートであることを視覚的に分かりやすく

Browse Source
This commit is contained in:
syuilo 2023-10-20 11:51:01 +09:00
parent 18af290b18
commit 21986a2168
4 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -25,6 +25,7 @@
### Client ### Client
- Enhance: TLの返信表示オプションを記憶するように - Enhance: TLの返信表示オプションを記憶するように
- Enhance: 投稿されてから時間が経過しているノートであることを視覚的に分かりやすく
### Server ### Server
- Enhance: タイムライン取得時のパフォーマンスを向上 - Enhance: タイムライン取得時のパフォーマンスを向上

2
packages/frontend/src/components/MkNoteDetailed.vue
View File

@ -94,7 +94,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<footer> <footer>
<div :class="$style.noteFooterInfo"> <div :class="$style.noteFooterInfo">
<MkA :to="notePage(appearNote)"> <MkA :to="notePage(appearNote)">
<MkTime :time="appearNote.createdAt" mode="detail"/> <MkTime :time="appearNote.createdAt" mode="detail" colored/>
</MkA> </MkA>
</div> </div>
<MkReactionsViewer ref="reactionsViewer" :note="appearNote"/> <MkReactionsViewer ref="reactionsViewer" :note="appearNote"/>

2
packages/frontend/src/components/MkNoteHeader.vue
View File

@ -15,7 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
<div :class="$style.info"> <div :class="$style.info">
<MkA :to="notePage(note)"> <MkA :to="notePage(note)">
<MkTime :time="note.createdAt"/> <MkTime :time="note.createdAt" colored/>
</MkA> </MkA>
<span v-if="note.visibility !== 'public'" style="margin-left: 0.5em;" :title="i18n.ts._visibility[note.visibility]"> <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> <i v-if="note.visibility === 'home'" class="ti ti-home"></i>

13
packages/frontend/src/components/global/MkTime.vue
View File

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <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-if="invalid">{{ i18n.ts._ago.invalid }}</template>
<template v-else-if="mode === 'relative'">{{ relative }}</template> <template v-else-if="mode === 'relative'">{{ relative }}</template>
<template v-else-if="mode === 'absolute'">{{ absolute }}</template> <template v-else-if="mode === 'absolute'">{{ absolute }}</template>
@ -22,6 +22,7 @@ const props = withDefaults(defineProps<{
time: Date | string | number | null; time: Date | string | number | null;
origin?: Date | null; origin?: Date | null;
mode?: 'relative' | 'absolute' | 'detail'; mode?: 'relative' | 'absolute' | 'detail';
colored?: boolean;
}>(), { }>(), {
origin: isChromatic() ? new Date('2023-04-01T00:00:00Z') : null, origin: isChromatic() ? new Date('2023-04-01T00:00:00Z') : null,
mode: 'relative', mode: 'relative',
@ -75,3 +76,13 @@ if (!invalid && props.origin === null && (props.mode === 'relative' || props.mod
}); });
} }
</script> </script>
<style lang="scss" module>
.old1 {
color: var(--warn);
}
.old1.old2 {
color: var(--error);
}
</style>