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;
state.subscribe((newValue) => {
element.innerHTML = "";
element.append(newValue);
element.append(...[newValue].flat());
});
break;
}
@@ -900,13 +900,15 @@
/* @__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()))));
};
return /* @__PURE__ */ createElement(
const listElement = /* @__PURE__ */ createElement(
"div",
{
class: "flex-column gap",
"children:append": [chat.messages, messageConverter]
}
);
chat.messages.handleAddition(() => listElement.scrollTop = listElement.scrollHeight);
return listElement;
}
// src/Tabs/messageTab.tsx
@@ -919,17 +921,19 @@
function showOptions() {
isShowingOptions.value = true;
}
function hideOptions() {
isShowingOptions.value = false;
}
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
},
/* @__PURE__ */ createElement("span", { class: "icon" }, "tune")
))), ThreadView(chat), /* @__PURE__ */ createElement("footer", null, MessageComposer(chat)), ChatOptionModal(chat, isShowingOptions));
return [
/* @__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
},
/* @__PURE__ */ createElement("span", { class: "icon" }, "tune")
))),
ThreadView(chat),
/* @__PURE__ */ createElement("footer", null, MessageComposer(chat)),
ChatOptionModal(chat, isShowingOptions)
];
});
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-left: env(safe-area-inset-left);
--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": {
"bloatless-react": "^1.3.0",
"bloatless-react": "^1.3.1-beta1",
"esbuild": "latest",
"udn-frontend": "^1.0.7-beta1"
},
src/Tabs/messageTab.tsx
+21 -26
View File
@@ -22,37 +22,32 @@ export function MessageTab() {
function showOptions() {
isShowingOptions.value = true;
}
function hideOptions() {
isShowingOptions.value = false;
}
return (
<div>
<header class="padding-0">
<span class="flex-row align-center">
<button aria-label={translation.back} on:click={closeChatView}>
<span class="icon">arrow_back</span>
</button>
return [
<header class="padding-0">
<span class="flex-row align-center">
<button aria-label={translation.back} on:click={closeChatView}>
<span class="icon">arrow_back</span>
</button>
<span subscribe:innerText={chat.primaryChannel}></span>
</span>
<span>
<button
aria-label={translation.showChatOptions}
on:click={showOptions}
>
<span class="icon">tune</span>
</button>
</span>
</header>
<span subscribe:innerText={chat.primaryChannel}></span>
</span>
<span>
<button
aria-label={translation.showChatOptions}
on:click={showOptions}
>
<span class="icon">tune</span>
</button>
</span>
</header>,
{ThreadView(chat)}
ThreadView(chat),
<footer>{MessageComposer(chat)}</footer>
<footer>{MessageComposer(chat)}</footer>,
{ChatOptionModal(chat, isShowingOptions)}
</div>
);
ChatOptionModal(chat, isShowingOptions),
];
});
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
class="flex-column gap"
children:append={[chat.messages, messageConverter]}
></div>
);
chat.messages.handleAddition(() => listElement.scrollTop = listElement.scrollHeight);
return listElement;
}