56 lines
1.8 KiB
JavaScript
56 lines
1.8 KiB
JavaScript
import "../../components/LoadingCircle.js"
|
|
|
|
class MessagesPanel extends Shadow {
|
|
messages
|
|
|
|
constructor(messages) {
|
|
super()
|
|
this.messages = messages
|
|
}
|
|
|
|
render() {
|
|
VStack(() => {
|
|
if(this.messages) {
|
|
for(let i=0; i<this.messages.length; i++) {
|
|
let message = this.messages[i]
|
|
let fromMe = window.profile.email === message.from.email
|
|
VStack(() => {
|
|
HStack(() => {
|
|
p(message.from.firstName + " " + message.from.lastName)
|
|
.fontWeight("bold")
|
|
.marginBottom(0.3, em)
|
|
|
|
p(util.formatTime(message.time))
|
|
.opacity(0.2)
|
|
.marginLeft(1, em)
|
|
})
|
|
p(message.text)
|
|
})
|
|
.paddingVertical(0.5, em)
|
|
.marginLeft(fromMe ? 70 : 0, pct)
|
|
.paddingRight(fromMe ? 10 : 0, pct)
|
|
.marginRight(fromMe ? 0 : 70, pct)
|
|
.paddingLeft(fromMe ? 5 : 10, pct)
|
|
.background(fromMe ? "var(--brown)" : "var(--green)")
|
|
}
|
|
} else {
|
|
LoadingCircle()
|
|
}
|
|
})
|
|
.onAppear(async () => {
|
|
requestAnimationFrame(() => {
|
|
this.scrollTop = this.scrollHeight
|
|
});
|
|
})
|
|
.gap(1, em)
|
|
.position("relative")
|
|
.overflow("scroll")
|
|
.height(95, pct)
|
|
.width(100, pct)
|
|
.paddingTop(2, em)
|
|
.paddingBottom(2, em)
|
|
.backgroundColor("var(--darkbrown)")
|
|
}
|
|
}
|
|
|
|
register(MessagesPanel) |