hippoz/waffle
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

"clump" messages send from the same author within 100 seconds

Browse source
This commit is contained in:
hippoz 2022-09-03 21:39:12 +03:00
parent 82452e77b6
commit 10c851c679
No known key found for this signature in database
GPG key ID: 7C52899193467641
2 changed files with 30 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
frontend/src/components/Message.svelte
View file

@ -1,9 +1,10 @@
<script> <script>
import { CornerUpLeftIcon, MoreVerticalIcon } from "svelte-feather-icons"; import { CornerUpLeftIcon, MoreVerticalIcon } from "svelte-feather-icons";
import { getItem } from "../storage"; import { getItem } from "../storage";
import { overlayStore, OverlayType, setMessageInputEvent, userInfoStore } from "../stores"; import { overlayStore, OverlayType, setMessageInputEvent, userInfoStore } from "../stores";
export let message; export let message;
export let clumped = false;
const reply = () => { const reply = () => {
let replyString = ""; let replyString = "";
@ -26,7 +27,7 @@ import { getItem } from "../storage";
align-items: center; 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-xs) var(--space-xs) var(--space-xs) var(--space-normplus);
} }
.message.pinged { .message.pinged {
@ -60,6 +61,10 @@ import { getItem } from "../storage";
margin-right: var(--space-xs); margin-right: var(--space-xs);
} }
.author-hidden {
visibility: hidden;
}
.edit-message { .edit-message {
flex-shrink: 0; flex-shrink: 0;
float: right; float: right;
@ -80,13 +85,24 @@ import { getItem } from "../storage";
margin-left: auto; margin-left: auto;
} }
.message:hover .date { .message:hover .date,
.message:hover .author-hidden {
visibility: visible; visibility: visible;
} }
@media (max-width: 768px) {
.message {
padding: var(--space-xxs) var(--space-xxs) var(--space-xxs) var(--space-normplus);
}
}
.message.clumped {
padding: 2px 2px 2px var(--space-normplus);
}
</style> </style>
<div class="message" class:pinged={ userInfoStore.value && message.content.includes(`@${userInfoStore.value.username}`) }> <div class="message" class:clumped class:pinged={ userInfoStore.value && message.content.includes(`@${userInfoStore.value.username}`) }>
<span class="author">{ message.author_username }</span> <span class="author" class:author-hidden={ clumped }>{ 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>
<span class="date">{ new Intl.DateTimeFormat(getItem("ui:locale"), { hour: "numeric", minute: "numeric" }).format(new Date(parseInt(message.created_at))) }</span> <span class="date">{ new Intl.DateTimeFormat(getItem("ui:locale"), { hour: "numeric", minute: "numeric" }).format(new Date(parseInt(message.created_at))) }</span>

15
frontend/src/components/Messages.svelte
View file

@ -1,7 +1,6 @@
<script> <script>
import { afterUpdate } from "svelte"; import { afterUpdate } from "svelte";
import { get_spread_update } from "svelte/internal"; import { getItem } from "../storage.js";
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";
@ -78,19 +77,23 @@ import { getItem } from "../storage.js";
align-items: center; align-items: center;
border-radius: var(--radius-norm); border-radius: var(--radius-norm);
padding: var(--space-sm); padding: var(--space-sm);
margin: var(--space-lg); margin: var(--space-md);
background-color: var(--background-color-2); 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, i (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()} {@const previousMessage = $messages[i - 1]}
{@const previousDate = previousMessage ? new Date(parseInt(previousMessage.created_at)) : null}
{@const currentDate = new Date(parseInt(message.created_at))}
{#if previousDate && previousDate.toLocaleDateString() !== currentDate.toLocaleDateString()}
<div class="time-separator"> <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> <span>{ new Intl.DateTimeFormat(getItem("ui:locale"), { month: "long", day: "numeric", year: "numeric" }).format(currentDate) }</span>
</div> </div>
{/if} {/if}
<Message message={message} /> <Message message={message} clumped={ previousDate && (currentDate.getTime() - previousDate.getTime()) <= 100 * 1000 } />
{/each} {/each}
<div bind:this={ scrollAnchor } /> <div bind:this={ scrollAnchor } />
</div> </div>