apps/BareRTC
1
0
Fork 0
Code Issues 14 Pull Requests Packages Projects Releases Wiki Activity

Tweak compact display option

Browse Source
This commit is contained in:
Noah 2023-09-30 15:18:55 -07:00
parent b5d0885c23
commit 1d29c6da18
2 changed files with 27 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@ -3633,7 +3633,7 @@ export default {
</div> </div>
<div class="card-content" id="chatHistory" <div class="card-content" id="chatHistory"
:class="{ 'has-background-dm': isDM, :class="{ 'has-background-dm': isDM,
'p-1': messageStyle.indexOf('compact') === 0 }"> 'p-1 pb-5': messageStyle.indexOf('compact') === 0 }">
<div class="autoscroll-field tag"> <div class="autoscroll-field tag">
<label class="checkbox is-size-6" title="Automatically scroll when new chat messages come in."> <label class="checkbox is-size-6" title="Automatically scroll when new chat messages come in.">

15
src/components/MessageBox.vue
View File

@ -361,31 +361,38 @@ export default {
<!-- Name/username/message --> <!-- Name/username/message -->
<div class="column px-1"> <div class="column px-1">
<strong
:class="{
'has-text-success is-dark': message.isChatServer,
'has-text-warning is-dark': message.isAdmin,
'has-text-danger': message.isChatClient
}">
[<a :href="profileURL" [<a :href="profileURL"
@click.prevent="openProfile()" @click.prevent="openProfile()"
class="has-text-dark"
:class="{ 'cursor-default': !profileURL }"> :class="{ 'cursor-default': !profileURL }">
<!-- Display name? --> <!-- Display name? -->
<strong v-if="(message.isChatServer || message.isChatClient || message.isAdmin) <span v-if="(message.isChatServer || message.isChatClient || message.isAdmin)
|| (appearance === 'compact' && nickname !== message.username)" || (appearance === 'compact' && nickname !== message.username)"
class="has-text-dark"
:class="{ :class="{
'has-text-success is-dark': message.isChatServer, 'has-text-success is-dark': message.isChatServer,
'has-text-warning is-dark': message.isAdmin, 'has-text-warning is-dark': message.isAdmin,
'has-text-danger': message.isChatClient 'has-text-danger': message.isChatClient
}"> }">
{{ nickname }} {{ nickname }}
</strong> </span>
<small class="has-text-grey" <small class="has-text-grey"
:class="{'ml-1': appearance === 'compact' && nickname !== message.username}" :class="{'ml-1': appearance === 'compact' && nickname !== message.username}"
v-if="!(message.isChatServer || message.isChatClient || message.isAdmin)" v-if="!(message.isChatServer || message.isChatClient || message.isAdmin)"
>@{{ message.username }}</small> >@{{ message.username }}</small>
</a>] </a>]
</strong>
<span v-html="compactMessage"></span> <span v-html="compactMessage"></span>
<!-- Reactions so far? --> <!-- Reactions so far? -->
<div v-if="hasReactions" class="mt-1"> <div v-if="hasReactions" class="my-1">
<span v-for="(users, emoji) in reactions" <span v-for="(users, emoji) in reactions"
v-bind:key="emoji" v-bind:key="emoji"
class="tag is-secondary mr-1 cursor-pointer" class="tag is-secondary mr-1 cursor-pointer"