frontend: add "connecting" indicator

This commit is contained in:
hippoz 2022-04-24 21:29:25 +03:00
parent 9122434a36
commit a5ade22483
Signed by: hippoz
GPG key ID: 7C52899193467641
5 changed files with 28 additions and 32 deletions

View file

@ -47,10 +47,17 @@
body {
color: var(--foreground-color-1);
background-color: var(--background-color-1);
font-size: 100%;
font-family: "Iosevka Aile Web", sans-serif;
font-weight: 400;
line-height: 1.75;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
.pre--loading-screen {
@ -77,6 +84,10 @@ body {
flex-shrink: 0;
}
.top-bar-heading {
margin-left: var(--space-xxs);
}
.h1 {
font-size: 2.488rem;
}

View file

@ -4,13 +4,7 @@
export let channel;
</script>
<style>
.channel-heading {
margin-left: var(--space-xxs);
}
</style>
<div class="top-bar">
<HashIcon />
<span class="h5 channel-heading">{ channel.name }</span>
<span class="h5 top-bar-heading">{ channel.name }</span>
</div>

View file

@ -1,4 +1,5 @@
<script>
import { CloudIcon } from "svelte-feather-icons";
import { gatewayStatus, selectedChannel } from "../../../stores";
import ChannelView from "./ChannelView.svelte";
import Sidebar from "./Sidebar.svelte";
@ -6,8 +7,8 @@
<style>
.flex-container {
width: 100vw;
height: 100vh;
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
overflow: hidden;
@ -24,19 +25,20 @@
}
</style>
{#if !$gatewayStatus.ready}
<div class="top-bar">
<CloudIcon />
<span class="h5 top-bar-heading">connecting...</span>
</div>
{/if}
<div class="flex-container">
{#if $gatewayStatus.ready}
<Sidebar />
{#if $selectedChannel.id === -1}
<div class="fullscreen-message">
no channel selected.
</div>
{:else}
<ChannelView channel={$selectedChannel} />
{/if}
{:else}
<Sidebar />
{#if $selectedChannel.id === -1}
<div class="fullscreen-message">
connecting...
no channel selected.
</div>
{:else}
<ChannelView channel={$selectedChannel} />
{/if}
</div>

View file

@ -3,13 +3,7 @@
import { userInfoStore } from "../../../stores";
</script>
<style>
.user-heading {
margin-left: var(--space-xxs);
}
</style>
<div class="top-bar">
<AtSignIcon />
<span class="h5 user-heading">{ $userInfoStore.username }</span>
<span class="h5 top-bar-heading">{ $userInfoStore ? $userInfoStore.username : "" }</span>
</div>

View file

@ -93,11 +93,6 @@ class UserInfoStore extends Store {
this.value = user;
this.updated();
});
gateway.subscribe(GatewayEventType.Close, () => {
this.value = null;
this.updated();
});
}
}