Compare commits
No commits in common. "92ce055dd74d46a5f7db27116df4d98625da3d81" and "7f3735502fba3d82fb0ba55d75a142a9aa9d0953" have entirely different histories.
92ce055dd7
...
7f3735502f
8 changed files with 29 additions and 13 deletions
5
frontend/src/components/App.svelte
Normal file
5
frontend/src/components/App.svelte
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
<script>
|
||||||
|
import Main from "./Main.svelte";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Main />
|
|
@ -1,6 +1,6 @@
|
||||||
<script>
|
<script>
|
||||||
import { HashIcon, MenuIcon } from "svelte-feather-icons";
|
import { Edit2Icon, HashIcon, MenuIcon } from "svelte-feather-icons";
|
||||||
import { overlayStore, showSidebar } from "../stores";
|
import { overlayStore, selectedChannel, showSidebar } from "../stores";
|
||||||
|
|
||||||
export let channel;
|
export let channel;
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
<script>
|
<script>
|
||||||
|
import { showChannelView } from "../stores";
|
||||||
import ChannelTopBar from "./ChannelTopBar.svelte";
|
import ChannelTopBar from "./ChannelTopBar.svelte";
|
||||||
import MessageInput from "./MessageInput.svelte";
|
import MessageInput from "./MessageInput.svelte";
|
||||||
import Messages from "./Messages.svelte";
|
import Messages from "./Messages.svelte";
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<script>
|
<script>
|
||||||
import { SendIcon } from "svelte-feather-icons";
|
import { SendIcon } from "svelte-feather-icons";
|
||||||
import request from "../request";
|
import request from "../request";
|
||||||
import { apiRoute } from "../storage";
|
import { apiRoute } from "../storage";
|
||||||
import { messagesStoreProvider, overlayStore, smallViewport, userInfoStore } from "../stores";
|
import { messagesStoreProvider, overlayStore, smallViewport, userInfoStore } from "../stores";
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<script>
|
<script>
|
||||||
import { afterUpdate } from "svelte";
|
import { afterUpdate, beforeUpdate, onMount } from "svelte";
|
||||||
import { messagesStoreProvider, smallViewport } from "../stores.js";
|
import { messagesStoreProvider, showSidebar, smallViewport } from "../stores.js";
|
||||||
import Message from "./Message.svelte";
|
import Message from "./Message.svelte";
|
||||||
|
|
||||||
export let channelId;
|
export let channelId;
|
||||||
|
|
|
@ -11,6 +11,7 @@
|
||||||
|
|
||||||
// janky code to hide the channel view during animation
|
// janky code to hide the channel view during animation
|
||||||
// this will make a smooth sidebar animation on smaller viewports (such as a phone, where you switch between sidebar being active)
|
// this will make a smooth sidebar animation on smaller viewports (such as a phone, where you switch between sidebar being active)
|
||||||
|
|
||||||
const scheduleSelectChannel = (channel) => {
|
const scheduleSelectChannel = (channel) => {
|
||||||
if ($smallViewport) {
|
if ($smallViewport) {
|
||||||
$showChannelView = false;
|
$showChannelView = false;
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import Main from './components/Main.svelte';
|
import App from './components/App.svelte';
|
||||||
import gateway from './gateway';
|
import gateway from './gateway';
|
||||||
import { getAuthToken, initStorageDefaults } from './storage';
|
import { getAuthToken, initStorageDefaults } from './storage';
|
||||||
import logging from "./logging";
|
import logging from "./logging";
|
||||||
|
@ -20,7 +20,7 @@ if (loadingElement) {
|
||||||
loadingElement.parentElement.removeChild(loadingElement);
|
loadingElement.parentElement.removeChild(loadingElement);
|
||||||
}
|
}
|
||||||
|
|
||||||
const app = new Main({
|
const app = new App({
|
||||||
target: document.body
|
target: document.body
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -34,6 +34,11 @@ class Store {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const selectedChannel = new Store({ id: -1, name: "none", creator_id: -1 });
|
||||||
|
export const showSidebar = new Store(false);
|
||||||
|
export const showChannelView = new Store(true);
|
||||||
|
export const smallViewport = new Store(false);
|
||||||
|
|
||||||
class ChannelsStore extends Store {
|
class ChannelsStore extends Store {
|
||||||
constructor() {
|
constructor() {
|
||||||
super(gateway.channels || []);
|
super(gateway.channels || []);
|
||||||
|
@ -69,7 +74,11 @@ class ChannelsStore extends Store {
|
||||||
});
|
});
|
||||||
gateway.subscribe(GatewayEventType.MessageCreate, ({ channel_id }) => {
|
gateway.subscribe(GatewayEventType.MessageCreate, ({ channel_id }) => {
|
||||||
const index = this.value.findIndex(e => e.id === channel_id);
|
const index = this.value.findIndex(e => e.id === channel_id);
|
||||||
if (index === -1 || !this.value[index] || selectedChannel.value.id === channel_id)
|
if (index === -1)
|
||||||
|
return;
|
||||||
|
if (!this.value[index])
|
||||||
|
return;
|
||||||
|
if (selectedChannel.value.id === channel_id)
|
||||||
return;
|
return;
|
||||||
|
|
||||||
this.value[index]._hasUnreads = true;
|
this.value[index]._hasUnreads = true;
|
||||||
|
@ -77,7 +86,11 @@ class ChannelsStore extends Store {
|
||||||
});
|
});
|
||||||
selectedChannel.subscribe(({ id }) => {
|
selectedChannel.subscribe(({ id }) => {
|
||||||
const index = this.value.findIndex(e => e.id === id);
|
const index = this.value.findIndex(e => e.id === id);
|
||||||
if (index === -1 || !this.value[index] || !this.value[index]._hasUnreads)
|
if (index === -1)
|
||||||
|
return;
|
||||||
|
if (!this.value[index])
|
||||||
|
return;
|
||||||
|
if (!this.value[index]._hasUnreads)
|
||||||
return;
|
return;
|
||||||
|
|
||||||
this.value[index]._hasUnreads = false;
|
this.value[index]._hasUnreads = false;
|
||||||
|
@ -285,10 +298,6 @@ class OverlayStore extends Store {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export const selectedChannel = new Store({ id: -1, name: "none", creator_id: -1 });
|
|
||||||
export const showSidebar = new Store(false);
|
|
||||||
export const showChannelView = new Store(true);
|
|
||||||
export const smallViewport = new Store(false);
|
|
||||||
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();
|
||||||
|
|
Loading…
Reference in a new issue