178 lines
5.2 KiB
JavaScript
178 lines
5.2 KiB
JavaScript
css(`
|
|
messages- {
|
|
font-family: 'Bona';
|
|
}
|
|
|
|
messages- input::placeholder {
|
|
font-family: 'Bona Nova';
|
|
font-size: 0.9em;
|
|
color: var(--accent);
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
appearance: none; /* remove default style */
|
|
-webkit-appearance: none;
|
|
width: 1em;
|
|
height: 1em;
|
|
border: 1px solid var(--accent);
|
|
}
|
|
|
|
input[type="checkbox"]:checked {
|
|
background-color: var(--red);
|
|
}
|
|
`)
|
|
|
|
class Messages extends Shadow {
|
|
friends = []
|
|
conversations = []
|
|
|
|
render() {
|
|
ZStack(() => {
|
|
HStack(() => {
|
|
VStack(() => {
|
|
h3("Friends")
|
|
.marginTop(0)
|
|
.marginBottom(1, em)
|
|
.marginLeft(0.4, em)
|
|
|
|
if (this.friends.length > 1) {
|
|
for(let i = 0; i < this.friends.length; i++) {
|
|
p(this.friends[i].name)
|
|
}
|
|
} else {
|
|
p("No Friends!")
|
|
}
|
|
})
|
|
.height(100, vh)
|
|
.paddingLeft(2, em)
|
|
.paddingRight(2, em)
|
|
.paddingTop(2, em)
|
|
.gap(0, em)
|
|
.borderRight("1px solid var(--accent2)")
|
|
|
|
VStack(() => {
|
|
h3("Conversations")
|
|
.marginTop(0)
|
|
.marginBottom(1, em)
|
|
.marginLeft(0.4, em)
|
|
|
|
if (this.conversations.length > 1) {
|
|
for(let i = 0; i < this.conversations.length; i++) {
|
|
p(this.conversations[i].name)
|
|
}
|
|
} else {
|
|
p("No Conversations!")
|
|
}
|
|
})
|
|
.height(100, vh)
|
|
.paddingLeft(2, em)
|
|
.paddingRight(2, em)
|
|
.paddingTop(2, em)
|
|
.gap(0, em)
|
|
.borderRight("1px solid var(--accent2)")
|
|
})
|
|
.width(100, "%")
|
|
.x(0).y(13, vh)
|
|
.borderTop("1px solid var(--accent2)")
|
|
|
|
p("0 Items")
|
|
.position("absolute")
|
|
.x(50, vw).y(50, vh)
|
|
.transform("translate(-50%, -50%)")
|
|
|
|
HStack(() => {
|
|
input("Search messages...", "45vw")
|
|
.attr({
|
|
"type": "text"
|
|
})
|
|
.fontSize(1.1, em)
|
|
.paddingLeft(1.3, em)
|
|
.background("transparent")
|
|
.border("1px solid var(--accent2)")
|
|
.outline("none")
|
|
.color("var(--accent)")
|
|
.borderRadius(10, px)
|
|
|
|
button("Search")
|
|
.marginLeft(2, em)
|
|
.borderRadius(10, px)
|
|
.background("transparent")
|
|
.border("1px solid var(--accent2)")
|
|
.color("var(--accent)")
|
|
.fontFamily("Bona Nova")
|
|
.onHover(function (hovering) {
|
|
if(hovering) {
|
|
this.style.background = "var(--green)"
|
|
|
|
} else {
|
|
this.style.background = "transparent"
|
|
|
|
}
|
|
})
|
|
|
|
button("+ New Message")
|
|
.width(13, em)
|
|
.marginLeft(1, em)
|
|
.borderRadius(10, px)
|
|
.background("transparent")
|
|
.border("1px solid var(--accent2)")
|
|
.color("var(--accent)")
|
|
.fontFamily("Bona Nova")
|
|
.onHover(function (hovering) {
|
|
if(hovering) {
|
|
this.style.background = "var(--green)"
|
|
|
|
} else {
|
|
this.style.background = "transparent"
|
|
|
|
}
|
|
})
|
|
.onClick((clicking) => {
|
|
console.log(this, "clicked")
|
|
})
|
|
|
|
})
|
|
.x(55, vw).y(4, vh)
|
|
.position("absolute")
|
|
.transform("translateX(-50%)")
|
|
})
|
|
.width(100, "%")
|
|
.height(100, "%")
|
|
}
|
|
|
|
SidebarName(name) {
|
|
let firstLetter = name[0]
|
|
|
|
HStack(() => {
|
|
div(firstLetter)
|
|
.display("flex")
|
|
.justifyContent("center")
|
|
.alignItems("center")
|
|
.width(1.5, em)
|
|
.height(1.5, em)
|
|
.border("1px solid var(--accent2)")
|
|
.borderRadius(100, "%")
|
|
p(name)
|
|
.marginLeft(1, em)
|
|
})
|
|
.alignItems("center")
|
|
.padding(5, px)
|
|
.borderRadius(0.5, em)
|
|
.cursor("default")
|
|
.onHover(function (hovering) {
|
|
if(hovering) {
|
|
this.style.background = "var(--green)"
|
|
|
|
} else {
|
|
this.style.background = "transparent"
|
|
|
|
}
|
|
})
|
|
}
|
|
|
|
connectedCallback() {
|
|
// Optional additional logic
|
|
}
|
|
}
|
|
|
|
register(Messages) |