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

add simple status bar

Browse source
This commit is contained in:
hippoz 2023-01-08 17:48:18 +02:00
parent fa6f65ce8a
commit bc5a07df9d
Signed by: hippoz
GPG key ID: 56C4E02A85F2FBED
3 changed files with 23 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -4,6 +4,7 @@
import Messages from "./Messages.svelte"; import Messages from "./Messages.svelte";
import { quadInOut } from "svelte/easing"; import { quadInOut } from "svelte/easing";
import { maybeFly } from "../animations"; import { maybeFly } from "../animations";
import { statusBarStore } from "../stores";
export let channel; export let channel;
</script> </script>
@ -20,6 +21,11 @@
</style> </style>
<div class="main-container" in:maybeFly="{{ duration: 175, x: -10, easing: quadInOut }}"> <div class="main-container" in:maybeFly="{{ duration: 175, x: -10, easing: quadInOut }}">
{#if $statusBarStore}
<div class="info-bar">
<span class="info-text">{ $statusBarStore }</span>
</div>
{/if}
<ChannelTopBar channel={ channel } /> <ChannelTopBar channel={ channel } />
<Messages channelId="{ channel.id }" /> <Messages channelId="{ channel.id }" />
<MessageInput channel={ channel } /> <MessageInput channel={ channel } />

1
frontend/src/stores.js
View file

@ -675,6 +675,7 @@ 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 totalUnreadsStore = new Store(0, "TotalUnreadsStore");
export const statusBarStore = new Store(null, "statusBarStore");
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}) => {

21
frontend/src/styles/global.css
View file

@ -40,7 +40,7 @@
--foreground-color-2: hsl(63, 10%, 82%); --foreground-color-2: hsl(63, 10%, 82%);
--foreground-color-3: hsl(63, 2%, 60%); --foreground-color-3: hsl(63, 2%, 60%);
--foreground-color-4: hsl(63, 2%, 49%); --foreground-color-4: hsl(63, 2%, 49%);
--foreground-special-color-1: hsl(180, 18%, 70%); --foreground-special-color-1: hsl(180, 2%, 70%);
--colored-element-text-color: var(--foreground-color-1); --colored-element-text-color: var(--foreground-color-1);
--purple-1: hsl(280, 78%, 50%); --purple-1: hsl(280, 78%, 50%);
@ -131,10 +131,7 @@ body {
align-items: center; align-items: center;
justify-content: left; justify-content: left;
width: 100%; width: 100%;
padding-left: var(--space-sm); padding: var(--space-sm);
padding-right: var(--space-sm);
padding-top: var(--space-sm);
padding-bottom: var(--space-sm);
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
} }
@ -147,6 +144,20 @@ body {
font-weight: bold; font-weight: bold;
} }
.info-bar {
display: flex;
align-items: center;
background-color: var(--background-color-0);
padding: var(--space-xxs);
margin: var(--space-xs);
border-radius: var(--radius-sm);
}
.info-bar .info-text {
margin-left: var(--space-sm);
color: var(--foreground-color-2);
}
/* modal */ /* modal */
.modal-backdrop { .modal-backdrop {