JonKazama-Hellion/HellionChat
1
0
Fork 0
Code Issues 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
+6 -3
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(() => {
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
+13 -31
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();
}
}
ChatTwo/Http/Frontend/src/lib/shared.svelte.ts
+13 -1
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() {
@@ -25,3 +26,14 @@ export function closeTabPane() {
}
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();
}
ChatTwo/Http/Frontend/static/static/start.css
+30 -5
View File
@@ -1,4 +1,4 @@
/* fonts */
/* fonts */
@font-face {
font-family: Lodestone;
src: url('/files/FFXIV_Lodestone_SSF.ttf') format('truetype');
@@ -125,8 +125,12 @@ aside#tabs {
background-color: var(--bg-sidebar);
transition: width 250ms ease;
width: 0px;
&.visible { width: 200px; }
width: 200px;
&.hidden { width: 0px; }
&.no-animation {
transition: none;
}
div.inner {
width: 200px;
@@ -137,7 +141,6 @@ aside#tabs {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 20px;
font-size: 1.1rem;
font-weight: 550;
@@ -148,6 +151,11 @@ aside#tabs {
}
}
hr {
margin: 0.6rem 0 0.75rem;
border-color: var(--fg-faint);
}
ol#tabs-list {
margin: 0 -5px;
padding: 0;
@@ -157,6 +165,7 @@ aside#tabs {
li {
padding: 3px 5px;
color: var(--fg-faint);
border-radius: 3px;
button {
width: 100%;
@@ -171,9 +180,13 @@ aside#tabs {
margin-top: 3px;
}
li:has(button:hover) {
color: var(--fg);
background-color: rgb(from var(--bg-input) r g b / 0.5);
}
li.active {
color: var(--fg);
border-radius: 3px;
background-color: var(--bg-input);
}
@@ -187,6 +200,7 @@ aside#tabs {
section#messages {
position: relative;
flex: 1;
min-width: 0;
min-height: 0;
padding: 20px;
line-height: 1.5;
@@ -444,4 +458,15 @@ section#input {
height: 1.5rem;
}
}
aside#tabs {
position: fixed;
width: 100vw;
height: 100vh;
z-index: 1000;
div.inner {
width: 100vw;
}
}
}