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

frontend: allow users to select channels

Browse source
This commit is contained in:
hippoz 2022-04-17 20:50:04 +03:00
parent 304cef3c11
commit fea7d24166
Signed by: hippoz
GPG key ID: 7C52899193467641
3 changed files with 24 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
frontend/src/components/pages/main/Main.svelte
View file

@ -1,5 +1,5 @@
<script> <script>
import { gatewayStatus } from "../../../stores"; import { gatewayStatus, selectedChannel } from "../../../stores";
import ChannelView from "./ChannelView.svelte"; import ChannelView from "./ChannelView.svelte";
import Sidebar from "./Sidebar.svelte"; import Sidebar from "./Sidebar.svelte";
</script> </script>
@ -12,24 +12,30 @@
flex-direction: row; flex-direction: row;
} }
.loading-screen { .fullscreen-message {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100vw; width: 100%;
height: 100vh; height: 100%;
overflow: hidden; overflow: hidden;
background-color: var(--background-color-1); background-color: var(--background-color-1);
} }
</style> </style>
{#if $gatewayStatus.ready} <div class="flex-container">
<div class="flex-container"> {#if $gatewayStatus.ready}
<Sidebar /> <Sidebar />
<ChannelView channel={{ name: "channel name" }} /> {#if $selectedChannel.id === -1}
</div> <div class="fullscreen-message">
{:else} no channel selected.
<div class="loading-screen"> </div>
connecting... {:else}
</div> <ChannelView channel={$selectedChannel} />
{/if} {/if}
{:else}
<div class="fullscreen-message">
connecting...
</div>
{/if}
</div>

5
frontend/src/components/pages/main/Sidebar.svelte
View file

@ -1,11 +1,11 @@
<script> <script>
import { HashIcon } from "svelte-feather-icons"; import { HashIcon } from "svelte-feather-icons";
import { channels } from "../../../stores"; import { channels, selectedChannel } from "../../../stores";
</script> </script>
<div class="sidebar"> <div class="sidebar">
{#each $channels as channel (channel.id)} {#each $channels as channel (channel.id)}
<button class="sidebar-button" > <button on:click="{ () => $selectedChannel = channel }" class="sidebar-button" class:selected={ channel.id === $selectedChannel.id }>
<div> <div>
<HashIcon /> <HashIcon />
</div> </div>
@ -55,6 +55,7 @@
height: 24px; height: 24px;
} }
.sidebar-button.selected,
.sidebar-button:hover { .sidebar-button:hover {
background-color: var(--background-color-2); background-color: var(--background-color-2);
} }

2
frontend/src/stores.js
View file

@ -1,3 +1,4 @@
import { writable } from "svelte/store";
import gateway, { GatewayEventType } from "./gateway"; import gateway, { GatewayEventType } from "./gateway";
class Store { class Store {
@ -110,3 +111,4 @@ class GatewayStatusStore extends Store {
export const channels = new ChannelsStore(); export const channels = new ChannelsStore();
export const gatewayStatus = new GatewayStatusStore(); export const gatewayStatus = new GatewayStatusStore();
export const selectedChannel = writable({ id: -1, name: "none", creator_id: -1 });