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/components/DynamicTextArea.svelte
+7 -4
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import {onMount} from "svelte";
import {subscribe} from "$lib/utils.svelte";
import {chatInput} from "$lib/shared.svelte";
import { onMount } from "svelte";
import { subscribe } from "$lib/utils.svelte";
import { chatInput, messagesList, scrollMessagesToBottom } from "$lib/shared.svelte";
let textarea: HTMLTextAreaElement;
@@ -53,8 +53,11 @@
if (!textarea)
return;
const scrolledToBottom = messagesList.scrolledToBottom;
textarea.style.height = '1px';
textarea.style.height = `${textarea.scrollHeight + 10}px`; // with +10px extra padding
if (scrolledToBottom)
scrollMessagesToBottom();
}
$effect(() => {
@@ -97,4 +100,4 @@
min-height: 2.5em;
line-height: 1.25;
}
</style>
</style>
ChatTwo/Http/Frontend/src/components/TabPane.svelte
+28 -5
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import { selectedTab, knownTabs, tabPaneState, closeTabPane } from "$lib/shared.svelte";
import { selectedTab, knownTabs, tabPaneState, tabPaneAnimationState, closeTabPane, messagesList, scrollMessagesToBottom } from "$lib/shared.svelte";
async function selectTab(index: number) {
const rawResponse = await fetch('/tab', {
@@ -13,18 +13,41 @@
// const content = await rawResponse.json();
// TODO: use the response
}
function handleClose() {
tabPaneAnimationState.noAnimation = false;
closeTabPane();
}
let scrolledToBottom = true;
function ontransitionstart() {
scrolledToBottom = messagesList.scrolledToBottom;
}
function ontransitionend() {
if (scrolledToBottom)
scrollMessagesToBottom();
}
</script>
<aside id="tabs" class:visible={tabPaneState.visible}>
<aside
id="tabs"
class:no-animation={tabPaneAnimationState.noAnimation}
class:hidden={!tabPaneState.visible}
{ontransitionstart}
{ontransitionend}
>
<div class="inner">
<header>
<span>Tabs</span>
<button type="button" onclick={() => closeTabPane()}>
<!-- "x" icon from https://github.com/feathericons/feather, under MIT license -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
<button type="button" onclick={() => handleClose()}>
<!-- "chevron-left" icon from https://github.com/feathericons/feather, under MIT license -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
</button>
</header>
<hr>
<ol id="tabs-list">
{#each knownTabs as tab}
<li class:active={selectedTab.index == tab.index}>
ChatTwo/Http/Frontend/src/components/TabPaneOpener.svelte
+2 -1
View File
@@ -1,7 +1,8 @@
<script lang="ts">
import { tabPaneState, openTabPane } from "$lib/shared.svelte";
import { tabPaneState, tabPaneAnimationState, openTabPane } from "$lib/shared.svelte";
function onclick() {
tabPaneAnimationState.noAnimation = false;
openTabPane();
}
</script>
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 {
}
});
}
}
}
ChatTwo/Http/Frontend/src/lib/shared.svelte.ts
+14 -2
View File
@@ -11,7 +11,8 @@ export interface ChannelOption {
export const selectedTab: { index: number } = $state({ index: 0 });
export const knownTabs: ChatTab[] = $state([]);
export const tabPaneState: { visible: boolean } = $state({ visible: false });
export const tabPaneState: { visible: boolean } = $state({ visible: true });
export const tabPaneAnimationState: { noAnimation: boolean } = $state({ noAnimation: true });
export const persistentTabPabeStateKey = 'chat2_tab_pane_visible';
export function openTabPane() {
@@ -24,4 +25,15 @@ export function closeTabPane() {
window.localStorage.setItem(persistentTabPabeStateKey, 'false');
}
export const chatInput: { content: string } = $state({ content: ''} );
export const chatInput: { content: string } = $state({ content: ''} );
export const messagesList: {
element: HTMLElement | null,
scrolledToBottom: boolean
} = $state({ element: null, scrolledToBottom: true });
export function scrollMessagesToBottom() {
if (messagesList.element === null)
return;
messagesList.element.lastElementChild?.scrollIntoView();
}