7260525eec
This command finalizes support for dynamic message loading. The behavior is as follows: When a user selects a channel for the first time, an "initial load" of messages will happen. When the user is scrolled all the way to the bottom of the message view, the store will continuously remove old messages to save memory. Scrolling all the way to the top loads more messages.
56 lines
1.3 KiB
Svelte
56 lines
1.3 KiB
Svelte
<script>
|
|
import { HashIcon } from "svelte-feather-icons";
|
|
import Messages from "./Messages.svelte";
|
|
|
|
export let channel;
|
|
</script>
|
|
|
|
<style>
|
|
.main-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.top-bar {
|
|
height: 3.4em;
|
|
width: 100%;
|
|
padding: var(--space-xs);
|
|
background-color: var(--background-color-1);
|
|
display: flex;
|
|
align-items: center;
|
|
border-bottom: 1px solid var(--background-color-2);
|
|
}
|
|
|
|
.channel-heading {
|
|
margin-left: var(--space-xxs);
|
|
}
|
|
|
|
.message-input-container {
|
|
width: 100%;
|
|
padding: var(--space-md);
|
|
background-color: var(--background-color-1);
|
|
}
|
|
|
|
.message-input {
|
|
height: 3em;
|
|
width: 100%;
|
|
background-color : var(--background-color-2);
|
|
border: none;
|
|
color: currentColor;
|
|
border-radius: var(--radius-md);
|
|
padding: var(--space-sm);
|
|
}
|
|
</style>
|
|
|
|
<div class="main-container">
|
|
<div class="top-bar">
|
|
<HashIcon />
|
|
<span class="h5 channel-heading">{ channel.name }</span>
|
|
</div>
|
|
<Messages channelId="{ channel.id }" />
|
|
<div class="message-input-container">
|
|
<input type="text" class="message-input">
|
|
</div>
|
|
</div>
|