show unread indicator next to sidebar button on small viewports

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

View file

@ -322,6 +322,21 @@ body {
color: var(--foreground-color-1); 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 */
.spinner { .spinner {

View file

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

View file

@ -52,19 +52,6 @@
</div> </div>
<style> <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 { .sidebar-channel-buttons {
flex-shrink: 0; flex-shrink: 0;
margin-left: auto; margin-left: auto;

View file

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