From a797bc45dac447b054d0d6a39d40d04820ac390a Mon Sep 17 00:00:00 2001 From: Noah Petherbridge Date: Sat, 24 Jun 2023 11:12:02 -0700 Subject: [PATCH] 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 channel --- web/static/css/bulma-prefers-dark.css | 6 +- web/static/css/chat.css | 18 +- web/static/js/BareRTC.js | 13 +- web/templates/chat.html | 257 +++++++++++++------------- 4 files changed, 159 insertions(+), 135 deletions(-) diff --git a/web/static/css/bulma-prefers-dark.css b/web/static/css/bulma-prefers-dark.css index 39f9e93..d618f8a 100644 --- a/web/static/css/bulma-prefers-dark.css +++ b/web/static/css/bulma-prefers-dark.css @@ -38,6 +38,10 @@ color: #56cf98 !important; } + .has-background-dm { + background-color: #100010 !important; + } + /* end nonshy custom overrides */ html { @@ -8818,4 +8822,4 @@ } } -/*# sourceMappingURL=bulma-prefers-dark.css.map */ \ No newline at end of file +/*# sourceMappingURL=bulma-prefers-dark.css.map */ diff --git a/web/static/css/chat.css b/web/static/css/chat.css index 45990da..ac0d6d0 100644 --- a/web/static/css/chat.css +++ b/web/static/css/chat.css @@ -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; } @@ -265,4 +273,4 @@ div.feed.popped-out { /* Cursors */ .cursor-notallowed { cursor: not-allowed; -} \ No newline at end of file +} diff --git a/web/static/js/BareRTC.js b/web/static/js/BareRTC.js index e043cf1..3daa317 100644 --- a/web/static/js/BareRTC.js +++ b/web/static/js/BareRTC.js @@ -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', @@ -1621,4 +1624,4 @@ const app = Vue.createApp({ } }); -app.mount("#BareRTC-App"); \ No newline at end of file +app.mount("#BareRTC-App"); diff --git a/web/templates/chat.html b/web/templates/chat.html index 2d61587..4b01942 100644 --- a/web/templates/chat.html +++ b/web/templates/chat.html @@ -563,7 +563,8 @@
-