Spit and polish
* Add a distinctly colored title and background for DM threads apart from the public channels * On the Who List, the profile picture is clickable to open profile links * Fix auto-scrolling issues: it won't autoscroll if the new message was in a different channel, and when toggling between channels always scroll back to the bottom of that channelipad-testing
parent
da29117741
commit
a797bc45da
|
|
@ -38,6 +38,10 @@
|
|||
color: #56cf98 !important;
|
||||
}
|
||||
|
||||
.has-background-dm {
|
||||
background-color: #100010 !important;
|
||||
}
|
||||
|
||||
/* end nonshy custom overrides */
|
||||
|
||||
html {
|
||||
|
|
|
|||
|
|
@ -19,6 +19,14 @@ body {
|
|||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
/* DM title and bg color */
|
||||
.has-background-private {
|
||||
background-color: #b748c7;
|
||||
}
|
||||
.has-background-dm {
|
||||
background-color: #ffefff;
|
||||
}
|
||||
|
||||
/************************
|
||||
* Main CSS Grid Layout *
|
||||
************************/
|
||||
|
|
@ -149,16 +157,16 @@ body {
|
|||
}
|
||||
|
||||
/* User configurable font size increases */
|
||||
#chatHistory.x1 {
|
||||
#chatHistory .x1 {
|
||||
font-size: large;
|
||||
}
|
||||
#chatHistory.x2 {
|
||||
#chatHistory .x2 {
|
||||
font-size: x-large;
|
||||
}
|
||||
#chatHistory.x3 {
|
||||
#chatHistory .x3 {
|
||||
font-size: xx-large;
|
||||
}
|
||||
#chatHistory.x4 {
|
||||
#chatHistory .x4 {
|
||||
font-size: 64pt;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -852,7 +852,7 @@ const app = Vue.createApp({
|
|||
// Set active chat room.
|
||||
setChannel(channel) {
|
||||
this.channel = typeof(channel) === "string" ? channel : channel.ID;
|
||||
this.scrollHistory();
|
||||
this.scrollHistory(this.channel, true);
|
||||
this.channels[this.channel].unread = 0;
|
||||
|
||||
// Responsive CSS: switch back to chat panel upon selecting a channel.
|
||||
|
|
@ -1376,7 +1376,7 @@ const app = Vue.createApp({
|
|||
isChatServer,
|
||||
isChatClient,
|
||||
});
|
||||
this.scrollHistory();
|
||||
this.scrollHistory(channel);
|
||||
|
||||
// Mark unread notifiers if this is not our channel.
|
||||
if (this.channel !== channel) {
|
||||
|
|
@ -1390,10 +1390,13 @@ const app = Vue.createApp({
|
|||
this.makeLinksExternal();
|
||||
},
|
||||
|
||||
scrollHistory() {
|
||||
if (!this.autoscroll) return;
|
||||
scrollHistory(channel, force) {
|
||||
if (!this.autoscroll && !force) return;
|
||||
|
||||
window.requestAnimationFrame(() => {
|
||||
// Only scroll if it's the current channel.
|
||||
if (channel !== this.channel) return;
|
||||
|
||||
this.historyScrollbox.scroll({
|
||||
top: this.historyScrollbox.scrollHeight,
|
||||
behavior: 'smooth',
|
||||
|
|
|
|||
|
|
@ -563,7 +563,8 @@
|
|||
<div class="chat-column">
|
||||
|
||||
<div class="card grid-card">
|
||||
<header class="card-header has-background-link">
|
||||
<header class="card-header"
|
||||
:class="{'has-background-private': isDM, 'has-background-link': !isDM}">
|
||||
<div class="columns is-mobile card-header-title has-text-light">
|
||||
<div class="column is-narrow mobile-only pr-0">
|
||||
<!-- Responsive mobile button to pan to Left Column -->
|
||||
|
|
@ -712,7 +713,7 @@
|
|||
-->
|
||||
|
||||
</div>
|
||||
<div class="card-content" id="chatHistory" :class="fontSizeClass">
|
||||
<div class="card-content" id="chatHistory" :class="{'has-background-dm': isDM}">
|
||||
|
||||
<div class="autoscroll-field tag">
|
||||
<label class="checkbox is-size-6" title="Automatically scroll when new chat messages come in.">
|
||||
|
|
@ -723,6 +724,8 @@
|
|||
</label>
|
||||
</div>
|
||||
|
||||
<div :class="fontSizeClass">
|
||||
|
||||
<!-- No history? -->
|
||||
<div v-if="chatHistory.length === 0">
|
||||
<em v-if="isDM">
|
||||
|
|
@ -775,14 +778,14 @@
|
|||
<div class="media-content">
|
||||
<div class="columns is-mobile pb-0">
|
||||
<div class="column is-narrow pb-0">
|
||||
<label class="label"
|
||||
<strong
|
||||
:class="{'has-text-success is-dark': msg.isChatServer,
|
||||
'has-text-warning is-dark': msg.isAdmin,
|
||||
'has-text-danger': msg.isChatClient}">
|
||||
|
||||
<!-- User nickname/display name -->
|
||||
[[nicknameForUsername(msg.username)]]
|
||||
</label>
|
||||
</strong>
|
||||
</div>
|
||||
<div class="column has-text-right pb-0">
|
||||
<small class="has-text-grey is-size-7" :title="msg.at">[[prettyDate(msg.at)]]</small>
|
||||
|
|
@ -853,6 +856,8 @@
|
|||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- If this is a DM with a muted user, offer to unmute. -->
|
||||
<div v-if="isDM && isMutedUser(channel)" class="has-text-danger">
|
||||
<i class="fa fa-comment-slash"></i>
|
||||
|
|
@ -948,6 +953,9 @@
|
|||
<div class="columns is-mobile">
|
||||
<!-- Avatar URL if available -->
|
||||
<div class="column is-narrow pr-0" style="position: relative">
|
||||
<a :href="profileURLForUsername(u.username)" @click.prevent="openProfile({username: u.username})"
|
||||
:class="{'cursor-default': !profileURLForUsername(u.username)}"
|
||||
class="p-0">
|
||||
<img v-if="u.avatar" :src="avatarURL(u)"
|
||||
width="24" height="24"
|
||||
:alt="'Avatar image for ' + u.username">
|
||||
|
|
@ -958,6 +966,7 @@
|
|||
<div v-if="u.status !== 'online'" class="status-away-icon" :title="'Status: '+u.status">
|
||||
<i class="fa fa-clock has-text-light"></i>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column pr-0"
|
||||
:class="{'pl-1': u.avatar}">
|
||||
|
|
|
|||
Loading…
Reference in New Issue