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

show unread indicator next to sidebar button on small viewports

Browse source
This commit is contained in:
hippoz 2022-12-01 19:19:51 +02:00
parent a5f0596ee5
commit 0f5093b6bb
Signed by: hippoz
GPG key ID: 7C52899193467641
4 changed files with 36 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
frontend/public/global.css
View file

@ -322,6 +322,21 @@ body {
color: var(--foreground-color-1);
}
/* unread indicator */
.unread-indicator {
display: inline-flex;
justify-content: center;
align-items: center;
background-color: var(--red-2);
padding-top: 1px;
padding-bottom: 1px;
padding-left: 0.375rem;
padding-right: 0.375rem;
border-radius: 9999px;
font-size: x-small;
}
/* spinner */
.spinner {

17
frontend/src/components/ChannelTopBar.svelte
View file

@ -1,13 +1,17 @@
<script>
import { getItem } from "../storage";
import { overlayStore, OverlayType, showPresenceSidebar, showSidebar } from "../stores";
import { overlayStore, OverlayType, showPresenceSidebar, showSidebar, totalUnreadsStore } from "../stores";
export let channel;
</script>
<style>
.menu-button {
margin-right: var(--space-md);
.tag-icon-has-sidebar-button {
margin-left: var(--space-md);
}
.tag-icon-has-sidebar-button.has-unreads {
margin-left: var(--space-sm);
}
.right-buttons {
@ -18,11 +22,14 @@
<div class="top-bar">
{#if !$showSidebar || getItem("ui:showSidebarToggle")}
<button class="icon-button menu-button" on:click="{ () => showSidebar.set(!showSidebar.value) }" aria-label="Toggle sidebar">
<button class="icon-button" on:click="{ () => showSidebar.set(!showSidebar.value) }" aria-label="Toggle sidebar">
<span class="material-icons-outlined">menu</span>
</button>
{/if}
<span class="material-icons-outlined">tag</span>
{#if !$showSidebar && $totalUnreadsStore > 0}
<span class="unread-indicator">{$totalUnreadsStore}</span>
{/if}
<span class="material-icons-outlined" class:tag-icon-has-sidebar-button="{ !$showSidebar }" class:has-unreads="{ $totalUnreadsStore > 0 }">tag</span>
<span class="h5 top-bar-heading" on:click="{ () => overlayStore.push(OverlayType.EditChannel, {channel}) }">{ channel.name }</span>
<div class="right-buttons">
<button class="icon-button" on:click="{ () => showPresenceSidebar.set(!showPresenceSidebar.value) }" aria-label="Toggle user list">

13
frontend/src/components/Sidebar.svelte
View file

@ -52,19 +52,6 @@
</div>
<style>
.unread-indicator {
display: inline-flex;
justify-content: center;
align-items: center;
background-color: var(--red-2);
padding-top: 1px;
padding-bottom: 1px;
padding-left: 0.375rem;
padding-right: 0.375rem;
border-radius: 9999px;
font-size: x-small;
}
.sidebar-channel-buttons {
flex-shrink: 0;
margin-left: auto;

14
frontend/src/stores.js
View file

@ -674,6 +674,7 @@ export const typingStore = new TypingStore();
export const presenceStore = new PresenceStore();
export const unreadStore = new UnreadStore();
export const pluginStore = new PluginStore();
export const totalUnreadsStore = new Store(0, "TotalUnreadsStore");
export const setMessageInputEvent = new Store(null, "event:setMessageInput");
export const sendMessageAction = createAction("sendMessageAction", async ({channelId, content}) => {
@ -736,20 +737,23 @@ selectedChannel.on((newSelectedChannel) => {
}
});
const updateTitle = () => {
unreadStore.subscribe(() => {
let totalUnreads = 0;
unreadStore.value.forEach(count => totalUnreads += count);
totalUnreadsStore.set(totalUnreads);
});
const updateTitle = () => {
let channelSuffix = "";
if (selectedChannel.value && selectedChannel.value.id !== -1 && selectedChannel.value.name) {
channelSuffix = ` | #${selectedChannel.value.name}`;
}
if (totalUnreads > 0) {
window.document.title = `(${totalUnreads}) waffle${channelSuffix}`;
if (totalUnreadsStore.value > 0) {
window.document.title = `(${totalUnreadsStore.value}) waffle${channelSuffix}`;
} else {
window.document.title = `waffle${channelSuffix}`;
}
};
unreadStore.subscribe(updateTitle);
totalUnreadsStore.subscribe(updateTitle);
selectedChannel.subscribe(updateTitle);