diff --git a/src/Home.js b/src/Home.js index fed45e8..e79a904 100644 --- a/src/Home.js +++ b/src/Home.js @@ -45,6 +45,7 @@ class Home extends Shadow { AppMenu() }) .height(100, pct) + .minHeight(0) .onNavigate(() => { console.log("navigate") this.rerender() diff --git a/src/_/icons/people.svg b/src/_/icons/people.svg new file mode 100644 index 0000000..d18a0d3 --- /dev/null +++ b/src/_/icons/people.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + +ionicons-v5-j + + + + + + + + + + + + \ No newline at end of file diff --git a/src/_/icons/trash.svg b/src/_/icons/trash.svg new file mode 100644 index 0000000..5d74e3b --- /dev/null +++ b/src/_/icons/trash.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/apps/Forum/Forum.js b/src/apps/Forum/Forum.js index df7672c..3941ab7 100644 --- a/src/apps/Forum/Forum.js +++ b/src/apps/Forum/Forum.js @@ -29,18 +29,24 @@ css(` `) class Forum extends Shadow { - - selectedForum = "HY" - render() { ZStack(() => { VStack(() => { + h1("Forum") + .color("var(--quillred)") + .textAlign("center") + .marginBottom(0) + h3(global.currentNetwork.name) + .color("var(--quillred)") + .textAlign("center") + .margin(0) ForumPanel() input("Message", "70%") .paddingVertical(0.75, em) - .paddingLeft(2, em) + .boxSizing("border-box") + .paddingHorizontal(2, em) .color("var(--accent)") .background("#fff1dd") .marginBottom(5.5, em) @@ -48,9 +54,17 @@ class Forum extends Shadow { .borderRadius(100, px) .fontFamily("Arial") .fontSize(1, em) - .onKeyDown(function (e) { + .onKeyDown(async function(e) { if (e.key === "Enter") { - window.Socket.send({app: "FORUM", operation: "SEND", msg: {forum: "HY", text: this.value }}) + let msg = { + forum: global.currentNetwork.abbreviation, + text: this.value + } + await global.Socket.send({ + app: "FORUM", + operation: "SEND", + msg: msg + }) this.value = "" } }) @@ -61,11 +75,14 @@ class Forum extends Shadow { .height(100, pct) .horizontalAlign("center") .verticalAlign("end") + .minHeight(0) }) .backgroundColor("var(--main)") .boxSizing("border-box") + .paddingVertical(1, em) .width(100, pct) - .height(100, pct) + .minHeight(0) + .flex("1 1 auto") } diff --git a/src/apps/Forum/ForumPanel.js b/src/apps/Forum/ForumPanel.js index ea3de03..dfe0afc 100644 --- a/src/apps/Forum/ForumPanel.js +++ b/src/apps/Forum/ForumPanel.js @@ -1,19 +1,38 @@ import "../../components/LoadingCircle.js" +css(` + forumpanel- { + scrollbar-width: none; + -ms-overflow-style: none; + } + + forumpanel-::-webkit-scrollbar { + display: none; + width: 0px; + height: 0px; + } + + forumpanel-::-webkit-scrollbar-thumb { + background: transparent; + } + + forumpanel-::-webkit-scrollbar-track { + background: transparent; + } +`) + class ForumPanel extends Shadow { - forums = [ - "HY" - ] messages = [] + isSending = false render() { VStack(() => { if(this.messages.length > 0) { - let previousDate = null for(let i=0; i { HStack(() => { - p(message.sentBy) - .fontWeight("bold") - .marginBottom(0.3, em) + h3(isMe ? "Me" : message.sentBy) + .color(isMe ? "var(--quillred)" : "var(--brown") + .margin(0) - p(util.formatTime(message.time)) - .opacity(0.2) - .marginLeft(1, em) + h3(`${date} ${time}`) + .opacity(0.5) + .color("var(--brown)") + .margin(0) + .marginLeft(0.5, em) + .fontSize(1, em) + + if (message.edited) { + p("(edited)") + .color("var(--brown)") + .letterSpacing(0.8, "px") + .opacity(0.8) + .fontWeight("bold") + .paddingLeft(0.25, em) + .fontSize(0.9, em) + } }) + .verticalAlign("center") + .marginBottom(0.1, em) + p(message.text) + .color("var(--accent)") + .borderLeft("1.5px solid var(--divider)") + .borderBottomLeftRadius("7.5px") + .paddingLeft(0.5, em) + .marginHorizontal(0.2, em) + .paddingVertical(0.2, em) + .boxSizing("border-box") + }) + .marginBottom(0.05, em) + .onClick(async (finished, e) => { + if (finished) { + console.log(message.id) + let msg = { + forum: global.currentNetwork.abbreviation, + id: message.id, + text: "EDITED TEXT TEST!" + } + await global.Socket.send({ + app: "FORUM", + operation: "PUT", + msg: msg + }) + } }) } } else { @@ -45,31 +106,68 @@ class ForumPanel extends Shadow { } }) .gap(1, em) + .fontSize(1.1, em) + .boxSizing("border-box") .position("relative") - .overflow("scroll") - .height(100, pct) - .width(96, pct) - .paddingTop(5, em) + .flex("1 1 auto") + .minHeight(0) + .overflowY("auto") + .width(100, pct) .paddingBottom(2, em) - .paddingLeft(4, pct) + .paddingHorizontal(4, pct) .backgroundColor("var(--main)") .onAppear(async () => { requestAnimationFrame(() => { - this.scrollTop = this.scrollHeight + this.scrollTo({ top: 0, behavior: "smooth" }); }); - let res = await global.Socket.send({app: "FORUM", operation: "GET", msg: {forum: "HY", number: 100}}) - if(!res) console.error("failed to get messages") - if(res.msg.length > 0 && this.messages.length === 0) { - this.messages = res.msg - this.rerender() - } - window.addEventListener("new-post", (e) => { - this.messages = e.detail - if(e.detail.length !== this.messages || e.detail.last.time !== this.messages.last.time || e.detail.first.time !== this.messages.first.time) { + if (!this.isSending) { + this.isSending = true + let res = await global.Socket.send({ + app: "FORUM", + operation: "GET", + msg: { + forum: global.currentNetwork.abbreviation, + by: "network", + authorId: -999 // default + } + }) + if(!res) console.error("failed to get messages") + if(res.msg.length > 0 && this.messages.length === 0) { + this.messages = res.msg.reverse() this.rerender() } - }) + this.isSending = false + } }) + .onEvent("new-post", this.onNewPost) + .onEvent("deleted-post", this.onDeletedPost) + .onEvent("edited-post", this.onEditedPost) + } + + onNewPost = (e) => { + let newPost = e.detail + if (this.messages && !this.messages.some(post => post.id === newPost.id)) { + this.messages.unshift(newPost) + this.rerender() + } + } + + onDeletedPost = (e) => { + let deletedId = e.detail + const i = this.messages.findIndex(post => post.id === deletedId) + if (i !== -1) this.messages.splice(i, 1); + this.rerender() + } + + onEditedPost = (e) => { + let editedPost = e.detail + const i = this.messages.findIndex(post => post.id === editedPost.id) + if (i !== -1) { + this.messages.splice(i, 1) + this.messages.unshift(editedPost) + } + + this.rerender() } parseDate(str) { @@ -83,6 +181,14 @@ class ForumPanel extends Shadow { return { date, time }; } + + formatTime(str) { + const match = str.match(/-(\d+:\d+):\d+.*(am|pm)/i); + if (!match) return null; + + const [_, hourMin, ampm] = match; + return hourMin + ampm.toLowerCase(); + } } register(ForumPanel) \ No newline at end of file diff --git a/src/components/AppMenu.js b/src/components/AppMenu.js index ec2cdaa..9270317 100644 --- a/src/components/AppMenu.js +++ b/src/components/AppMenu.js @@ -38,7 +38,7 @@ class AppMenu extends Shadow { window.navigateTo("/messages") } }) - img("/_/icons/jobs.svg", "1.5em", "1.5em") + img("/_/icons/people.svg", "1.5em", "1.5em") .attr({app: "people"}) .padding(0.5, em) .borderRadius(10, px) @@ -61,6 +61,7 @@ class AppMenu extends Shadow { .paddingVertical(1, em) .width(100, vw) .boxSizing("border-box") + .flex("0 0 auto") } }