Compare commits

...

2 commits

Author SHA1 Message Date
hippoz
59145c3dc2
frontend/design: move border from channelview to sidebar 2022-04-17 21:32:11 +03:00
hippoz
fea7d24166
frontend: allow users to select channels 2022-04-17 20:50:04 +03:00
4 changed files with 25 additions and 16 deletions

View file

@ -10,7 +10,6 @@
flex-direction: column;
width: 100%;
height: 100%;
border-left: 1px solid var(--background-color-2);
}
.top-bar {

View file

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

View file

@ -1,11 +1,11 @@
<script>
import { HashIcon } from "svelte-feather-icons";
import { channels } from "../../../stores";
import { channels, selectedChannel } from "../../../stores";
</script>
<div class="sidebar">
{#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>
<HashIcon />
</div>
@ -21,6 +21,7 @@
max-width: 255px;
padding: var(--space-sm);
background-color: var(--background-color-1);
border-right: 1px solid var(--background-color-2);
}
.sidebar-button {
@ -55,6 +56,7 @@
height: 24px;
}
.sidebar-button.selected,
.sidebar-button:hover {
background-color: var(--background-color-2);
}

View file

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