frontend: separate app component from chat view
This commit is contained in:
parent
ea18f74503
commit
9ad3b04da5
4 changed files with 56 additions and 45 deletions
|
@ -1,8 +1,6 @@
|
||||||
<script>
|
<script>
|
||||||
import { apiClient } from "../api/common";
|
import { apiClient } from "../api/common";
|
||||||
import MessageEntry from "./MessageEntry.svelte";
|
import ChatView from "./ChatView.svelte";
|
||||||
import MessageList from "./MessageList.svelte";
|
|
||||||
import SelectedGuildInfoDisplay from "./SelectedGuildInfoDisplay.svelte";
|
|
||||||
|
|
||||||
let messageStore = {};
|
let messageStore = {};
|
||||||
let selectedGuild = null;
|
let selectedGuild = null;
|
||||||
|
@ -47,7 +45,6 @@
|
||||||
poll();
|
poll();
|
||||||
});
|
});
|
||||||
|
|
||||||
$: selectedChannelMessages = selectedGuild ? ((messageStore[selectedGuild.id] || [])[selectedChannel.id] || []) : [];
|
|
||||||
|
|
||||||
function onTextEntryMessage(event) {
|
function onTextEntryMessage(event) {
|
||||||
if (!selectedGuild || !selectedChannel) {
|
if (!selectedGuild || !selectedChannel) {
|
||||||
|
@ -87,34 +84,9 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<ChatView
|
||||||
.message-list-container {
|
messageStore={messageStore}
|
||||||
height: 580px;
|
selectedChannel={selectedChannel}
|
||||||
overflow-y: auto;
|
selectedGuild={selectedGuild}
|
||||||
padding: 8px;
|
on:entermessage={onTextEntryMessage}
|
||||||
padding-left: 0;
|
/>
|
||||||
margin-top: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 820px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 820px) {
|
|
||||||
main {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<div class="card full-card">
|
|
||||||
<SelectedGuildInfoDisplay guild={selectedGuild} channel={selectedChannel} />
|
|
||||||
<div class="message-list-container">
|
|
||||||
<MessageList messages={selectedChannelMessages} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<MessageEntry on:sendmessage={onTextEntryMessage} />
|
|
||||||
</main>
|
|
||||||
|
|
46
frontend/src/components/ChatView.svelte
Normal file
46
frontend/src/components/ChatView.svelte
Normal file
|
@ -0,0 +1,46 @@
|
||||||
|
<script>
|
||||||
|
import MessageEntry from "./MessageEntry.svelte";
|
||||||
|
import MessageList from "./MessageList.svelte";
|
||||||
|
|
||||||
|
export let messageStore = {};
|
||||||
|
export let selectedChannel;
|
||||||
|
export let selectedGuild;
|
||||||
|
|
||||||
|
$: selectedChannelMessages = selectedGuild ? ((messageStore[selectedGuild.id] || [])[selectedChannel.id] || []) : [];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.message-list-container {
|
||||||
|
height: 580px;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 8px;
|
||||||
|
padding-left: 0;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-panel-header {
|
||||||
|
font-size: 1.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 820px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 820px) {
|
||||||
|
main {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<div class="card full-card">
|
||||||
|
<span class="main-panel-header">{(selectedGuild ? selectedGuild.name : "[no guild]")} • {(selectedChannel ? selectedChannel.name : "[no channel]")}</span>
|
||||||
|
<div class="message-list-container">
|
||||||
|
<MessageList messages={selectedChannelMessages} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<MessageEntry on:entermessage placeholder="Go on, type something interesting!" />
|
||||||
|
</main>
|
|
@ -1,6 +1,7 @@
|
||||||
<script>
|
<script>
|
||||||
import { createEventDispatcher } from "svelte";
|
import { createEventDispatcher } from "svelte";
|
||||||
|
|
||||||
|
export let placeholder;
|
||||||
let text = "";
|
let text = "";
|
||||||
|
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
|
@ -8,11 +9,11 @@
|
||||||
function onKeydown(e) {
|
function onKeydown(e) {
|
||||||
if (e.code === "Enter") {
|
if (e.code === "Enter") {
|
||||||
if (text.trim() !== "") {
|
if (text.trim() !== "") {
|
||||||
dispatch("sendmessage", text);
|
dispatch("entermessage", text);
|
||||||
text = "";
|
text = "";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<input class="separated-card card full-card" placeholder="Go on, type something interesting!" on:keydown={onKeydown} bind:value={text} />
|
<input class="separated-card card full-card" placeholder={placeholder} on:keydown={onKeydown} bind:value={text} />
|
|
@ -1,8 +0,0 @@
|
||||||
<script>
|
|
||||||
export let guild;
|
|
||||||
export let channel;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
{#if guild && channel}
|
|
||||||
<span>{guild.name} • {channel.name}</span>
|
|
||||||
{/if}
|
|
Loading…
Reference in a new issue