display dates

This commit is contained in:
hippoz 2022-09-03 20:46:27 +03:00
parent 5ea8cc62cd
commit 82452e77b6
Signed by: hippoz
GPG key ID: 7C52899193467641
3 changed files with 43 additions and 2 deletions

View file

@ -1,5 +1,6 @@
<script> <script>
import { CornerUpLeftIcon, MoreVerticalIcon } from "svelte-feather-icons"; import { CornerUpLeftIcon, MoreVerticalIcon } from "svelte-feather-icons";
import { getItem } from "../storage";
import { overlayStore, OverlayType, setMessageInputEvent, userInfoStore } from "../stores"; import { overlayStore, OverlayType, setMessageInputEvent, userInfoStore } from "../stores";
export let message; export let message;
@ -22,6 +23,7 @@
.message { .message {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
align-items: center;
overflow-x: hidden; overflow-x: hidden;
word-break: break-all; word-break: break-all;
padding: var(--space-xxs) var(--space-xxs) var(--space-xxs) var(--space-normplus); padding: var(--space-xxs) var(--space-xxs) var(--space-xxs) var(--space-normplus);
@ -62,12 +64,33 @@
flex-shrink: 0; flex-shrink: 0;
float: right; float: right;
} }
.date {
display: inline-flex;
justify-content: center;
align-items: center;
background-color: var(--background-color-2);
padding-top: 1px;
padding-bottom: 1px;
padding-left: 0.375rem;
padding-right: 0.375rem;
border-radius: 9999px;
font-size: small;
visibility: hidden;
margin-left: auto;
}
.message:hover .date {
visibility: visible;
}
</style> </style>
<div class="message" class:pinged={ userInfoStore.value && message.content.includes(`@${userInfoStore.value.username}`) }> <div class="message" class:pinged={ userInfoStore.value && message.content.includes(`@${userInfoStore.value.username}`) }>
<span class="author">{ message.author_username }</span> <span class="author">{ message.author_username }</span>
<span class="message-content" class:pending={ message._isPending }>{ message.content }</span> <span class="message-content" class:pending={ message._isPending }>{ message.content }</span>
<button class="icon-button icon-button-auto edit-message" on:click="{ reply }" aria-label="Reply to Message">
<span class="date">{ new Intl.DateTimeFormat(getItem("ui:locale"), { hour: "numeric", minute: "numeric" }).format(new Date(parseInt(message.created_at))) }</span>
<button class="icon-button edit-message" on:click="{ reply }" aria-label="Reply to Message">
<CornerUpLeftIcon /> <CornerUpLeftIcon />
</button> </button>
{#if userInfoStore.value && (message.author_id === userInfoStore.value.id || userInfoStore.value.is_superuser)} {#if userInfoStore.value && (message.author_id === userInfoStore.value.id || userInfoStore.value.is_superuser)}

View file

@ -1,5 +1,7 @@
<script> <script>
import { afterUpdate } from "svelte"; import { afterUpdate } from "svelte";
import { get_spread_update } from "svelte/internal";
import { getItem } from "../storage.js";
import { messagesStoreProvider, smallViewport } from "../stores.js"; import { messagesStoreProvider, smallViewport } from "../stores.js";
import Message from "./Message.svelte"; import Message from "./Message.svelte";
@ -69,10 +71,25 @@
background-color: var(--background-color-1); background-color: var(--background-color-1);
padding-top: var(--space-sm); padding-top: var(--space-sm);
} }
.time-separator {
display: flex;
justify-content: center;
align-items: center;
border-radius: var(--radius-norm);
padding: var(--space-sm);
margin: var(--space-lg);
background-color: var(--background-color-2);
}
</style> </style>
<div class="messages-container" on:scroll={ onScroll } bind:this={ scrollTarget }> <div class="messages-container" on:scroll={ onScroll } bind:this={ scrollTarget }>
{#each $messages as message (message.id)} {#each $messages as message, i (message.id)}
{#if $messages[i - 1] && new Date(parseInt($messages[i - 1].created_at)).toLocaleDateString() !== new Date(parseInt(message.created_at)).toLocaleDateString()}
<div class="time-separator">
<span>{ new Intl.DateTimeFormat(getItem("ui:locale"), { month: "long", day: "numeric", year: "numeric" }).format(new Date(parseInt(message.created_at))) }</span>
</div>
{/if}
<Message message={message} /> <Message message={message} />
{/each} {/each}
<div bind:this={ scrollAnchor } /> <div bind:this={ scrollAnchor } />

View file

@ -14,6 +14,7 @@ const defaults = {
"ui:online:processRemotePresenceEvents": true, "ui:online:processRemotePresenceEvents": true,
"ui:online:loadMessageHistory": true, "ui:online:loadMessageHistory": true,
"ui:online:sendTypingUpdates": true, "ui:online:sendTypingUpdates": true,
"ui:locale": "en-US",
"ui:useragent:formFactor": () => { "ui:useragent:formFactor": () => {
return (window.navigator && window.navigator.maxTouchPoints > 0) ? "touch" : "desktop"; return (window.navigator && window.navigator.maxTouchPoints > 0) ? "touch" : "desktop";