Compare commits
No commits in common. "131a2705623d649286151ec097175bd9801d661b" and "a5ade224838d56b5446db4c43786c79afafdb64c" have entirely different histories.
131a270562
...
a5ade22483
9 changed files with 18 additions and 187 deletions
|
@ -19,24 +19,10 @@
|
||||||
:root {
|
:root {
|
||||||
--background-color-1: hsl(180, 11%, 7%);
|
--background-color-1: hsl(180, 11%, 7%);
|
||||||
--background-color-2: hsl(180, 11%, 12%);
|
--background-color-2: hsl(180, 11%, 12%);
|
||||||
--background-color-3: hsl(180, 11%, 17%);
|
|
||||||
--foreground-color-1: rgb(253, 254, 255);
|
--foreground-color-1: rgb(253, 254, 255);
|
||||||
--foreground-color-2: rgb(218, 219, 220);
|
--foreground-color-2: rgb(218, 219, 220);
|
||||||
--foreground-color-3: rgb(153, 154, 155);
|
--foreground-color-3: rgb(153, 154, 155);
|
||||||
|
|
||||||
--purple-1: hsl(280, 88%, 50%);
|
|
||||||
--blue-1: hsl(200, 88%, 50%);
|
|
||||||
--green-1: hsl(140, 88%, 50%);
|
|
||||||
--yellow-1: hsl(50, 88%, 65%);
|
|
||||||
--red-1: hsl(2, 88%, 65%);
|
|
||||||
|
|
||||||
--purple-2: hsl(280, 88%, 40%);
|
|
||||||
--blue-2: hsl(200, 88%, 40%);
|
|
||||||
--green-2: hsl(140, 88%, 40%);
|
|
||||||
--yellow-2: hsl(50, 88%, 60%);
|
|
||||||
--red-2: hsl(2, 88%, 60%);
|
|
||||||
|
|
||||||
|
|
||||||
--space-unit: 1em;
|
--space-unit: 1em;
|
||||||
--space-xxs: calc(0.25 * var(--space-unit));
|
--space-xxs: calc(0.25 * var(--space-unit));
|
||||||
--space-xs: calc(0.5 * var(--space-unit));
|
--space-xs: calc(0.5 * var(--space-unit));
|
||||||
|
@ -74,12 +60,12 @@ body {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fullscreen-message {
|
.pre--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);
|
||||||
}
|
}
|
||||||
|
@ -102,89 +88,6 @@ body {
|
||||||
margin-left: var(--space-xxs);
|
margin-left: var(--space-xxs);
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-backdrop {
|
|
||||||
position: absolute;
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
z-index: 0;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
background-color: rgba(0, 0, 0, 0.4);
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
position: fixed;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
background-color: var(--background-color-2);
|
|
||||||
border-radius: var(--radius-lg);
|
|
||||||
padding: var(--space-md);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header {
|
|
||||||
margin-bottom: var(--space-md);
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-footer {
|
|
||||||
margin-top: auto;
|
|
||||||
padding-top: var(--space-norm);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-primary-action {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-secondary-action {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-label {
|
|
||||||
text-transform: uppercase;
|
|
||||||
color: var(--foreground-color-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.input {
|
|
||||||
background-color : var(--background-color-3);
|
|
||||||
border: none;
|
|
||||||
color: currentColor;
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
padding: var(--space-sm);
|
|
||||||
font-size: inherit;
|
|
||||||
line-height: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button {
|
|
||||||
background-color: var(--background-color-2);
|
|
||||||
text-align: center;
|
|
||||||
border: none;
|
|
||||||
padding: var(--space-sm);
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
color: currentColor;
|
|
||||||
font: inherit;
|
|
||||||
max-height: 3em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button:hover {
|
|
||||||
background-color: var(--background-color-3)
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-accent {
|
|
||||||
background-color: var(--purple-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-accent:hover {
|
|
||||||
background-color: var(--purple-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-accent:disabled {
|
|
||||||
background-color: var(--purple-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.h1 {
|
.h1 {
|
||||||
font-size: 2.488rem;
|
font-size: 2.488rem;
|
||||||
}
|
}
|
||||||
|
|
|
@ -13,6 +13,6 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="fullscreen-message" id="pre--loading-screen">heating up the crt...</div>
|
<div class="pre--loading-screen" id="pre--loading-screen">heating up the crt...</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -1,43 +0,0 @@
|
||||||
<script>
|
|
||||||
import { fade, fly } from "svelte/transition";
|
|
||||||
import { quintInOut } from "svelte/easing";
|
|
||||||
import { overlayStore } from "../../stores";
|
|
||||||
import request from "../../request";
|
|
||||||
import { apiRoute } from "../../storage";
|
|
||||||
|
|
||||||
let channelName = "";
|
|
||||||
let createButtonEnabled = true;
|
|
||||||
|
|
||||||
const close = () => overlayStore.close('createChannel');
|
|
||||||
const create = async () => {
|
|
||||||
createButtonEnabled = false;
|
|
||||||
await request("POST", apiRoute("channels"), true, {
|
|
||||||
name: channelName
|
|
||||||
});
|
|
||||||
close();
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.full-width {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div class="modal-backdrop" transition:fade="{{ duration: 300, easing: quintInOut }}" on:click="{ close }">
|
|
||||||
<div class="modal" transition:fly="{{ duration: 300, easing: quintInOut, y: 10 }}" on:click|stopPropagation>
|
|
||||||
<div class="modal-header">
|
|
||||||
<span class="h3">Create Channel</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<label class="input-label">
|
|
||||||
Channel Name
|
|
||||||
<input class="input full-width" bind:value={ channelName } />
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<div class="modal-footer">
|
|
||||||
<button class="button modal-secondary-action" on:click="{ close }">Cancel</button>
|
|
||||||
<button class="button button-accent modal-primary-action" on:click="{ create }" disabled="{ !createButtonEnabled }">Create</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
|
@ -1,9 +1,7 @@
|
||||||
<script>
|
<script>
|
||||||
import { CloudIcon } from "svelte-feather-icons";
|
import { CloudIcon } from "svelte-feather-icons";
|
||||||
import { gatewayStatus, selectedChannel } from "../../../stores";
|
import { gatewayStatus, selectedChannel } from "../../../stores";
|
||||||
import CreateChannel from "../../modals/CreateChannel.svelte";
|
|
||||||
import ChannelView from "./ChannelView.svelte";
|
import ChannelView from "./ChannelView.svelte";
|
||||||
import OverlayProvider from "./OverlayProvider.svelte";
|
|
||||||
import Sidebar from "./Sidebar.svelte";
|
import Sidebar from "./Sidebar.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -15,6 +13,16 @@ import OverlayProvider from "./OverlayProvider.svelte";
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.fullscreen-message {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: var(--background-color-1);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
{#if !$gatewayStatus.ready}
|
{#if !$gatewayStatus.ready}
|
||||||
|
@ -25,7 +33,6 @@ import OverlayProvider from "./OverlayProvider.svelte";
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<div class="flex-container">
|
<div class="flex-container">
|
||||||
<OverlayProvider />
|
|
||||||
<Sidebar />
|
<Sidebar />
|
||||||
{#if $selectedChannel.id === -1}
|
{#if $selectedChannel.id === -1}
|
||||||
<div class="fullscreen-message">
|
<div class="fullscreen-message">
|
||||||
|
|
|
@ -1,8 +0,0 @@
|
||||||
<script>
|
|
||||||
import { overlayStore } from "../../../stores";
|
|
||||||
import CreateChannel from "../../modals/CreateChannel.svelte";
|
|
||||||
</script>
|
|
||||||
|
|
||||||
{#if $overlayStore.createChannel}
|
|
||||||
<CreateChannel />
|
|
||||||
{/if}
|
|
|
@ -1,6 +1,6 @@
|
||||||
<script>
|
<script>
|
||||||
import { HashIcon, PlusIcon } from "svelte-feather-icons";
|
import { HashIcon } from "svelte-feather-icons";
|
||||||
import { channels, overlayStore, selectedChannel } from "../../../stores";
|
import { channels, selectedChannel } from "../../../stores";
|
||||||
import UserTopBar from "./UserTopBar.svelte";
|
import UserTopBar from "./UserTopBar.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -15,12 +15,6 @@
|
||||||
<span>{ channel.name }</span>
|
<span>{ channel.name }</span>
|
||||||
</button>
|
</button>
|
||||||
{/each}
|
{/each}
|
||||||
<button on:click="{ () => overlayStore.open('createChannel') }" class="sidebar-button">
|
|
||||||
<div>
|
|
||||||
<PlusIcon />
|
|
||||||
</div>
|
|
||||||
<span>Create Channel</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -23,7 +23,7 @@ export const GatewayEventType = {
|
||||||
Close: -4
|
Close: -4
|
||||||
}
|
}
|
||||||
|
|
||||||
const log = logging.logger("Gateway", true);
|
const log = logging.logger("Gateway");
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
ws: null,
|
ws: null,
|
||||||
|
@ -38,10 +38,8 @@ export default {
|
||||||
init() {
|
init() {
|
||||||
const token = getAuthToken();
|
const token = getAuthToken();
|
||||||
if (!token) {
|
if (!token) {
|
||||||
log("no auth token, skipping connection");
|
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
log(`connecting to gateway - gatewayBase: ${getItem("gatewayBase")}`);
|
|
||||||
this.ws = new WebSocket(getItem("gatewayBase"));
|
this.ws = new WebSocket(getItem("gatewayBase"));
|
||||||
this.ws.onopen = () => {
|
this.ws.onopen = () => {
|
||||||
if (this.reconnectTimeout) {
|
if (this.reconnectTimeout) {
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
const defaults = {
|
const defaults = {
|
||||||
apiBase: `${window.location.origin}/api/v1`,
|
apiBase: `${window.location.origin}/api/v1`,
|
||||||
gatewayBase: `${location.protocol === "https:" ? "wss" : "ws"}://${location.host}/gateway`,
|
gatewayBase: `${location.protocol === "https:" ? "wss" : "ws"}://${location.host}/gateway`
|
||||||
token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwidHlwZSI6MSwiaWF0IjoxNjUwODQzMjY1LCJleHAiOjE2NTEwMTYwNjV9.ssu-MlMkwKQOcP5nmJ98KbqudcGW5XBYPc_d6et4oxo"
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const dummyProvider = {
|
const dummyProvider = {
|
||||||
|
|
|
@ -219,27 +219,8 @@ class MessagesStoreProvider {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
class OverlayStore extends Store {
|
|
||||||
constructor() {
|
|
||||||
super({
|
|
||||||
createChannel: false
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
open(name) {
|
|
||||||
this.value[name] = true;
|
|
||||||
this.updated();
|
|
||||||
}
|
|
||||||
|
|
||||||
close(name) {
|
|
||||||
this.value[name] = false;
|
|
||||||
this.updated();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export const channels = new ChannelsStore();
|
export const channels = new ChannelsStore();
|
||||||
export const gatewayStatus = new GatewayStatusStore();
|
export const gatewayStatus = new GatewayStatusStore();
|
||||||
export const messagesStoreProvider = new MessagesStoreProvider();
|
export const messagesStoreProvider = new MessagesStoreProvider();
|
||||||
export const userInfoStore = new UserInfoStore();
|
export const userInfoStore = new UserInfoStore();
|
||||||
export const overlayStore = new OverlayStore();
|
|
||||||
export const selectedChannel = writable({ id: -1, name: "none", creator_id: -1 });
|
export const selectedChannel = writable({ id: -1, name: "none", creator_id: -1 });
|
||||||
|
|
Loading…
Reference in a new issue