dvdrw
7d581afcaf
Users can insert a mention by clicking, and initiate a whisper by double-clicking on the avatar on a user's chat message
57 lines
1.2 KiB
Svelte
57 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import { tick } from "svelte"
|
|
import { send, whisper } from "./chat";
|
|
|
|
export let input = "";
|
|
async function keydown(e: KeyboardEvent) {
|
|
if(e.key === "Enter") {
|
|
console.log(e);
|
|
const tokens = input.trim().split(" ");
|
|
|
|
if(tokens[0] === '/w') {
|
|
const who = tokens[1];
|
|
const m = tokens.slice(2).join(' ');
|
|
whisper(who, m);
|
|
} else {
|
|
send(input);
|
|
}
|
|
e.preventDefault();
|
|
await tick();
|
|
input = "";
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="container p-relative d-flex pa-16 pt-0">
|
|
<textarea bind:value="{input}" on:keydown={keydown} class="input grow-1 radius-16 border-0 pa-8 bg-700 color-300" />
|
|
</div>
|
|
|
|
<style>
|
|
.container {
|
|
height: calc(2 * var(--message-line-height));
|
|
margin-top: -12px;
|
|
z-index: 100;
|
|
}
|
|
|
|
.container::before, .container::after {
|
|
content: "";
|
|
z-index: 99;
|
|
background: linear-gradient(180deg, rgba(var(--base-800-rgb),0) 0%, rgb(var(--base-800-rgb)) 75%);
|
|
width: 24px;
|
|
position: absolute;
|
|
height: 16px;
|
|
}
|
|
|
|
.container::before { left: 0; }
|
|
.container::after { right: 0; }
|
|
|
|
.input {
|
|
resize: none;
|
|
z-index: 100;
|
|
}
|
|
|
|
.input:focus {
|
|
outline: none;
|
|
}
|
|
</style>
|