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

Compare commits

base: hippoz:59145c3dc2ad15d4b65d24a9daa5303a8bae97d9
Branches Tags
hippoz:master
..
compare: hippoz:304cef3c113c605be36db8cd6892ea7576a0a72a
Branches Tags
hippoz:master

No commits in common. "59145c3dc2ad15d4b65d24a9daa5303a8bae97d9" and "304cef3c113c605be36db8cd6892ea7576a0a72a" have entirely different histories.
59145c3dc2 ... 304cef3c11

4 changed files with 16 additions and 25 deletions
Show stats Expand all files Collapse all files

1
frontend/src/components/pages/main/ChannelView.svelte
View file

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

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

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

6
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, selectedChannel } from "../../../stores"; import { channels } from "../../../stores";
</script> </script>
<div class="sidebar"> <div class="sidebar">
{#each $channels as channel (channel.id)} {#each $channels as channel (channel.id)}
<button on:click="{ () => $selectedChannel = channel }" class="sidebar-button" class:selected={ channel.id === $selectedChannel.id }> <button class="sidebar-button" >
<div> <div>
<HashIcon /> <HashIcon />
</div> </div>
@ -21,7 +21,6 @@
max-width: 255px; max-width: 255px;
padding: var(--space-sm); padding: var(--space-sm);
background-color: var(--background-color-1); background-color: var(--background-color-1);
border-right: 1px solid var(--background-color-2);
} }
.sidebar-button { .sidebar-button {
@ -56,7 +55,6 @@
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,4 +1,3 @@
import { writable } from "svelte/store";
import gateway, { GatewayEventType } from "./gateway"; import gateway, { GatewayEventType } from "./gateway";
class Store { class Store {
@ -111,4 +110,3 @@ 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 });