Customise style for own and system chat bubbles
Partially addresses the concerns in #2! Own messages are now on the opposite side in their own colour, and system messages (such as "* is online", detected by having no "from" attribute) are displayed without any bubble at all. Along the way, we also fixed bug #14 where own messages would show the other person's name underneath. That was because we were looking at the nickname attribute, which, as it turns out, gives the nickname for the entire conversation or something, not for the chat itself. I think it wasn't a problem in groupchats, but anyway, that's something to tackle another day...
This commit is contained in:
parent
86c5489f19
commit
41bc583b06
|
@ -41,7 +41,7 @@
|
|||
--chatbox-indicator-background-focused: #6a6a6a;
|
||||
--chatbox-indicator-color-focused: #ffffff;
|
||||
--chatbox-background: #cccccc;
|
||||
--chatbox-background-primary: #323232;
|
||||
--chatbox-background-primary: #873eff;
|
||||
--chatbox-color: #323232;
|
||||
--chatbox-color-primary: #ffffff;
|
||||
|
||||
|
|
|
@ -1,17 +1,38 @@
|
|||
<script>
|
||||
export let message
|
||||
export let ourJID
|
||||
export let tabindex = -1
|
||||
export let autofocus = false
|
||||
export let onclick = () => {}
|
||||
|
||||
let ourMessage
|
||||
|
||||
$: {
|
||||
ourMessage = (message?.attributes?.from == ourJID)
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if message}
|
||||
<div
|
||||
{#if !message.attributes?.from}
|
||||
<div
|
||||
class="chat-item-indicator focusable"
|
||||
{tabindex}
|
||||
{autofocus}
|
||||
on:click={onclick}
|
||||
>
|
||||
>
|
||||
<p class="chat-item-bare">
|
||||
{message.attributes?.message}<br />
|
||||
{new Date(message.attributes?.time).toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div
|
||||
class="chat-item-indicator focusable"
|
||||
class:own-chat={ourMessage}
|
||||
{tabindex}
|
||||
{autofocus}
|
||||
on:click={onclick}
|
||||
>
|
||||
<div class="chat-item-row">
|
||||
<div class="avatar"></div>
|
||||
<div class="chat-item{message.attributes?.is_only_emojis ? ' only-emoji' : ''}">
|
||||
|
@ -19,10 +40,15 @@
|
|||
</div>
|
||||
</div>
|
||||
<p class="chat-item-info">
|
||||
{message.attributes?.nick || message.attributes?.nickname || message.attributes?.from}
|
||||
{#if ourMessage}
|
||||
me,
|
||||
{:else}
|
||||
{message.attributes?.nick || message.attributes?.nickname || message.attributes?.from},
|
||||
{/if}
|
||||
{new Date(message.attributes?.time).toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
|
@ -38,17 +64,26 @@
|
|||
}
|
||||
|
||||
.chat-item-row {
|
||||
vertical-align: top;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.own-chat .chat-item-row {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
margin-right: 0.5rem;
|
||||
margin: 0 0.5rem auto 0;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
background: var(--chatbox-background);
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.own-chat .avatar {
|
||||
margin: 0 0 auto 0.5rem;
|
||||
background: var(--chatbox-background-primary);
|
||||
}
|
||||
|
||||
.chat-item {
|
||||
|
@ -60,6 +95,12 @@
|
|||
border-radius: 0 1rem 1rem 1rem;
|
||||
}
|
||||
|
||||
.own-chat .chat-item {
|
||||
border-radius: 1rem 0 1rem 1rem;
|
||||
background: var(--chatbox-background-primary);
|
||||
color: var(--chatbox-color-primary);
|
||||
}
|
||||
|
||||
.chat-item p {
|
||||
word-wrap: break-word;
|
||||
overflow: hidden;
|
||||
|
@ -77,14 +118,31 @@
|
|||
}
|
||||
|
||||
.chat-item-info {
|
||||
margin-left: 4.5rem;
|
||||
margin: 0 0 0 4.5rem;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 400;
|
||||
color: var(--chatbox-color);
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.own-chat .chat-item-info {
|
||||
margin: 0 4.5rem 0 0;
|
||||
}
|
||||
|
||||
.chat-item-indicator:focus .chat-item-info {
|
||||
color: var(--chatbox-indicator-color-focused);
|
||||
}
|
||||
|
||||
.chat-item-bare {
|
||||
margin-left: 4.5rem;
|
||||
margin-right: 4.5rem;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 400;
|
||||
color: var(--chatbox-color);
|
||||
margin-top: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.chat-item-indicator:focus .chat-item-bare {
|
||||
color: var(--chatbox-indicator-color-focused);
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -223,7 +223,11 @@
|
|||
{:else}
|
||||
<div class="message-list">
|
||||
{#each messages as message, index (message.id)}
|
||||
<ChatMessage {message} tabindex={index}/>
|
||||
<ChatMessage
|
||||
{message}
|
||||
tabindex={index}
|
||||
ourJID={_converse.bare_jid}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
|
Loading…
Reference in a new issue