diff options
Diffstat (limited to 'ui/lib/components')
| -rw-r--r-- | ui/lib/components/Channel.svelte | 8 | ||||
| -rw-r--r-- | ui/lib/components/MessageRun.svelte | 45 |
2 files changed, 35 insertions, 18 deletions
diff --git a/ui/lib/components/Channel.svelte b/ui/lib/components/Channel.svelte index e62f0f3..bbe9ff7 100644 --- a/ui/lib/components/Channel.svelte +++ b/ui/lib/components/Channel.svelte @@ -1,14 +1,20 @@ <script> + import { showMenu } from '$lib/store'; + export let id; export let name; export let active = false; + + function hideMenu() { + showMenu.update(() => false); + } </script> <li class="rounded-full" class:bg-slate-400={active} > -<a href="/ch/{id}"> +<a href="/ch/{id}" on:click={hideMenu}> <span class="badge bg-primary-500">#</span> <span class="flex-auto">{name}</span> </a> diff --git a/ui/lib/components/MessageRun.svelte b/ui/lib/components/MessageRun.svelte index 687eec3..cbf4f04 100644 --- a/ui/lib/components/MessageRun.svelte +++ b/ui/lib/components/MessageRun.svelte @@ -1,23 +1,34 @@ <script> - import { logins } from '$lib/store'; - import Message from '$lib/components/Message.svelte'; + import { logins, currentUser } from '$lib/store'; + import Message from '$lib/components/Message.svelte'; - export let sender; - export let messages; + export let sender; + export let messages; - let name; - $: name = $logins.get(sender); - - let scroll = (message) => { - message.scrollIntoView(); - } + let name; + $: name = $logins.get(sender); + $: ownMessage = $currentUser.id == sender; </script> -<div class="card card-hover m-4 px-4 py-1 relative"> - <span class="chip variant-soft sticky top-o left-0"> - @{name}: - </span> - {#each messages as { at, body }} - <Message {at} {body} /> - {/each} +<div + class="card card-hover m-4 px-4 py-1 relative" + class:own-message={ownMessage} + class:other-message={!ownMessage}> + <span class="chip variant-soft sticky top-o left-0"> + @{name}: + </span> + {#each messages as { at, body }} + <Message {at} {body} /> + {/each} </div> + +<style> + .own-message { + width: 80%; + margin-right: auto; + } + .other-message { + width: 80%; + margin-left: auto; + } +</style> |