VDMDI/CT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve ui, scroll new messages

Browse Source
This commit is contained in:
marlon-erler
2024-07-09 18:21:28 +02:00
parent 5667a55b74
commit 8a74d7c389
6 changed files with 44 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bun.lockb
BIN
View File
Binary file not shown.
dist/index.js
Vendored
+17 -13
View File
@@ -220,7 +220,7 @@
const state = value; const state = value;
state.subscribe((newValue) => { state.subscribe((newValue) => {
element.innerHTML = ""; element.innerHTML = "";
element.append(newValue); element.append(...[newValue].flat());
}); });
break; break;
} }
@@ -900,13 +900,15 @@
/* @__PURE__ */ createElement("span", { class: "icon" }, "key") /* @__PURE__ */ createElement("span", { class: "icon" }, "key")
), /* @__PURE__ */ createElement("button", { "aria-label": translation.deleteMessage, "on:click": remove }, /* @__PURE__ */ createElement("span", { class: "icon" }, "delete")))), /* @__PURE__ */ createElement("div", { class: "flex-column padding-h padding-bottom" }, /* @__PURE__ */ createElement("b", { class: "break-word", "subscribe:innerText": messageBody }), /* @__PURE__ */ createElement("span", { class: "secondary" }, new Date(message.isoDate).toLocaleString())))); ), /* @__PURE__ */ createElement("button", { "aria-label": translation.deleteMessage, "on:click": remove }, /* @__PURE__ */ createElement("span", { class: "icon" }, "delete")))), /* @__PURE__ */ createElement("div", { class: "flex-column padding-h padding-bottom" }, /* @__PURE__ */ createElement("b", { class: "break-word", "subscribe:innerText": messageBody }), /* @__PURE__ */ createElement("span", { class: "secondary" }, new Date(message.isoDate).toLocaleString()))));
}; };
return /* @__PURE__ */ createElement( const listElement = /* @__PURE__ */ createElement(
"div", "div",
{ {
class: "flex-column gap", class: "flex-column gap",
"children:append": [chat.messages, messageConverter] "children:append": [chat.messages, messageConverter]
} }
); );
chat.messages.handleAddition(() => listElement.scrollTop = listElement.scrollHeight);
return listElement;
} }
// src/Tabs/messageTab.tsx // src/Tabs/messageTab.tsx
@@ -919,17 +921,19 @@
function showOptions() { function showOptions() {
isShowingOptions.value = true; isShowingOptions.value = true;
} }
function hideOptions() { return [
isShowingOptions.value = false; /* @__PURE__ */ createElement("header", { class: "padding-0" }, /* @__PURE__ */ createElement("span", { class: "flex-row align-center" }, /* @__PURE__ */ createElement("button", { "aria-label": translation.back, "on:click": closeChatView }, /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_back")), /* @__PURE__ */ createElement("span", { "subscribe:innerText": chat.primaryChannel })), /* @__PURE__ */ createElement("span", null, /* @__PURE__ */ createElement(
} "button",
return /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("header", { class: "padding-0" }, /* @__PURE__ */ createElement("span", { class: "flex-row align-center" }, /* @__PURE__ */ createElement("button", { "aria-label": translation.back, "on:click": closeChatView }, /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_back")), /* @__PURE__ */ createElement("span", { "subscribe:innerText": chat.primaryChannel })), /* @__PURE__ */ createElement("span", null, /* @__PURE__ */ createElement( {
"button", "aria-label": translation.showChatOptions,
{ "on:click": showOptions
"aria-label": translation.showChatOptions, },
"on:click": showOptions /* @__PURE__ */ createElement("span", { class: "icon" }, "tune")
}, ))),
/* @__PURE__ */ createElement("span", { class: "icon" }, "tune") ThreadView(chat),
))), ThreadView(chat), /* @__PURE__ */ createElement("footer", null, MessageComposer(chat)), ChatOptionModal(chat, isShowingOptions)); /* @__PURE__ */ createElement("footer", null, MessageComposer(chat)),
ChatOptionModal(chat, isShowingOptions)
];
}); });
return /* @__PURE__ */ createElement("article", { id: "message-tab", "children:set": messageTabContent }); return /* @__PURE__ */ createElement("article", { id: "message-tab", "children:set": messageTabContent });
} }
dist/styles.css
Vendored
+1 -1
View File
@@ -246,7 +246,7 @@ SIZES
--safe-area-top: env(safe-area-inset-top); --safe-area-top: env(safe-area-inset-top);
--safe-area-left: env(safe-area-inset-left); --safe-area-left: env(safe-area-inset-left);
--safe-area-right: env(safe-area-inset-right); --safe-area-right: env(safe-area-inset-right);
--safe-area-bottom: max(env(safe-area-inset-bottom), var(--control-padding)); --safe-area-bottom: env(safe-area-inset-bottom);
} }
/* /*
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"dependencies": { "dependencies": {
"bloatless-react": "^1.3.0", "bloatless-react": "^1.3.1-beta1",
"esbuild": "latest", "esbuild": "latest",
"udn-frontend": "^1.0.7-beta1" "udn-frontend": "^1.0.7-beta1"
}, },
src/Tabs/messageTab.tsx
+22 -27
View File
@@ -22,37 +22,32 @@ export function MessageTab() {
function showOptions() { function showOptions() {
isShowingOptions.value = true; isShowingOptions.value = true;
} }
function hideOptions() {
isShowingOptions.value = false;
}
return ( return [
<div> <header class="padding-0">
<header class="padding-0"> <span class="flex-row align-center">
<span class="flex-row align-center"> <button aria-label={translation.back} on:click={closeChatView}>
<button aria-label={translation.back} on:click={closeChatView}> <span class="icon">arrow_back</span>
<span class="icon">arrow_back</span> </button>
</button>
<span subscribe:innerText={chat.primaryChannel}></span> <span subscribe:innerText={chat.primaryChannel}></span>
</span> </span>
<span> <span>
<button <button
aria-label={translation.showChatOptions} aria-label={translation.showChatOptions}
on:click={showOptions} on:click={showOptions}
> >
<span class="icon">tune</span> <span class="icon">tune</span>
</button> </button>
</span> </span>
</header> </header>,
{ThreadView(chat)} ThreadView(chat),
<footer>{MessageComposer(chat)}</footer>
{ChatOptionModal(chat, isShowingOptions)} <footer>{MessageComposer(chat)}</footer>,
</div>
); ChatOptionModal(chat, isShowingOptions),
];
}); });
return <article id="message-tab" children:set={messageTabContent}></article>; return <article id="message-tab" children:set={messageTabContent}></article>;
src/Views/threadView.tsx
+3 -1
View File
@@ -59,10 +59,12 @@ export function ThreadView(chat: Chat) {
); );
}; };
return ( const listElement = (
<div <div
class="flex-column gap" class="flex-column gap"
children:append={[chat.messages, messageConverter]} children:append={[chat.messages, messageConverter]}
></div> ></div>
); );
chat.messages.handleAddition(() => listElement.scrollTop = listElement.scrollHeight);
return listElement;
} }