JonKazama-Hellion/HellionChat
1
0
Fork 0
Code Issues 1 Pull Requests Actions Releases 28 Activity

tab pane styles/handling mobile/portrait, smaller changes

Browse Source 
* tab pane in portrait mode now covers the entire viewport
* tab pane X turned into a chevron
* added divider between tab pane header and content
* changed default tab pane state to open
* added code to scroll messages back to bottom after tab pane animation
  and message input resize
This commit is contained in:
Ennea
2025-11-15 16:54:25 +01:00
parent c54efe5420
commit 7119838f81
6 changed files with 95 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ChatTwo/Http/Frontend/src/lib/chat.svelte.ts
+14 -32
View File
@@ -1,4 +1,4 @@
import { channelOptions, isChannelLocked, selectedTab, knownTabs, chatInput } from "$lib/shared.svelte";
import { channelOptions, isChannelLocked, selectedTab, knownTabs, chatInput, messagesList, scrollMessagesToBottom } from "$lib/shared.svelte";
import { source, type Source } from "sveltekit-sse";
interface ChatElements {
@@ -62,7 +62,6 @@ interface ChatTabUnreadState {
export class ChatTwoWeb {
elements!: ChatElements;
maxTimestampWidth: number = 0;
scrolledToBottom: boolean = true;
sse!: EventSource;
connection!: Source;
@@ -84,6 +83,7 @@ export class ChatTwoWeb {
inputForm: document.querySelector('#input > form'),
};
messagesList.element = this.elements.messagesList;
// add indicator signaling more messages below
this.elements.messagesContainer?.addEventListener('scroll', (event) => {
@@ -100,8 +100,8 @@ export class ChatTwoWeb {
// adjust scroll when the window size changes; mostly for mobile (opening/closing the keyboard)
window.addEventListener('resize', () => {
if (this.scrolledToBottom) {
this.scrollMessagesToBottom();
if (messagesList.scrolledToBottom) {
scrollMessagesToBottom();
}
})
@@ -129,21 +129,17 @@ export class ChatTwoWeb {
messagesAreScrolledToBottom() {
if (this.elements.messagesContainer === null) {
return this.scrolledToBottom;
return messagesList.scrolledToBottom;
}
if (this.elements.messagesContainer.scrollTopMax) {
this.scrolledToBottom = this.elements.messagesContainer.scrollTop === this.elements.messagesContainer.scrollTopMax;
} else {
this.scrolledToBottom =
(
this.elements.messagesContainer.scrollHeight -
this.elements.messagesContainer.clientHeight -
this.elements.messagesContainer.scrollTop
) < 1;
}
messagesList.scrolledToBottom =
(
this.elements.messagesContainer.scrollHeight -
this.elements.messagesContainer.clientHeight -
this.elements.messagesContainer.scrollTop
) < 1;
return this.scrolledToBottom;
return messagesList.scrolledToBottom;
}
updateChannelHint(channel: SwitchChannel) {
@@ -183,20 +179,6 @@ export class ChatTwoWeb {
}
}
scrollMessagesToBottom() {
if (this.elements.messagesContainer === null || this.elements.messagesList === null)
return;
if (this.elements.messagesContainer.scrollTopMax) {
this.elements.messagesContainer.scrollTop = this.elements.messagesContainer.scrollTopMax;
} else {
if (this.elements.messagesList.lastElementChild === null)
return;
this.elements.messagesList.lastElementChild.scrollIntoView();
}
}
addMessage(messageData: MessageResponse) {
if (this.elements.messagesList === null)
return;
@@ -218,7 +200,7 @@ export class ChatTwoWeb {
this.elements.messagesList.appendChild(liMessage);
if (scrolledToBottom) {
this.scrollMessagesToBottom();
scrollMessagesToBottom();
}
}
@@ -406,4 +388,4 @@ export class ChatTwoWeb {
}
});
}
}
}