frontend: allow users to select channels
This commit is contained in:
parent
304cef3c11
commit
fea7d24166
3 changed files with 24 additions and 15 deletions
|
@ -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 class="fullscreen-message">
|
||||||
|
no channel selected.
|
||||||
</div>
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
<div class="loading-screen">
|
<ChannelView channel={$selectedChannel} />
|
||||||
|
{/if}
|
||||||
|
{:else}
|
||||||
|
<div class="fullscreen-message">
|
||||||
connecting...
|
connecting...
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 });
|
||||||
|
|
Loading…
Reference in a new issue