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

highlight messages in which the user is mentioned

Browse source
This commit is contained in:
hippoz 2022-09-01 20:10:27 +03:00
parent 74cd9cd06e
commit 45537347f3
Signed by: hippoz
GPG key ID: 7C52899193467641
2 changed files with 7 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/public/global.css
View file

@ -34,10 +34,11 @@
--purple-1: hsl(280, 78%, 50%); --purple-1: hsl(280, 78%, 50%);
--blue-1: hsl(200, 78%, 50%); --blue-1: hsl(200, 78%, 50%);
--green-1: hsl(140, 78%, 50%); --green-1: hsl(140, 78%, 50%);
--yellow-1: hsl(50, 78%, 65%); --yellow-1: hsl(50, 78%, 50%);
--red-1: hsl(2, 78%, 65%); --red-1: hsl(2, 78%, 65%);
--purple-2: hsl(280, 78%, 45%); --purple-2: hsl(280, 78%, 45%);
--purple-alpha-2: hsla(280, 78%, 50%, 20%);
--blue-2: hsl(200, 78%, 45%); --blue-2: hsl(200, 78%, 45%);
--green-2: hsl(140, 78%, 40%); --green-2: hsl(140, 78%, 40%);
--yellow-2: hsl(50, 78%, 60%); --yellow-2: hsl(50, 78%, 60%);

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

@ -27,6 +27,10 @@
padding: var(--space-xxs) var(--space-normplus) var(--space-xxs) var(--space-normplus); padding: var(--space-xxs) var(--space-normplus) var(--space-xxs) var(--space-normplus);
} }
.message.pinged {
background-color: var(--purple-alpha-2);
}
.message .edit-message { .message .edit-message {
visibility: hidden; visibility: hidden;
} }
@ -60,7 +64,7 @@
} }
</style> </style>
<div class="message"> <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"> <button class="icon-button icon-button-auto edit-message" on:click="{ reply }" aria-label="Reply to Message">