61 lines
1.6 KiB
JavaScript
61 lines
1.6 KiB
JavaScript
import "./PeopleCard.js"
|
|
import "/_/code/components/LoadingCircle.js"
|
|
|
|
css(`
|
|
people- {
|
|
font-family: 'Arial';
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
people- input::placeholder {
|
|
color: var(--headertext);
|
|
opacity: 0.35;
|
|
}
|
|
peoplelist- {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
min-height: 0;
|
|
}
|
|
`)
|
|
|
|
class PeopleList extends Shadow {
|
|
constructor(members, isLoading) {
|
|
super()
|
|
this._members = members
|
|
this._isLoading = isLoading
|
|
}
|
|
|
|
render() {
|
|
VStack(() => {
|
|
if (this._isLoading) {
|
|
LoadingCircle()
|
|
} else if (this._members.length === 0) {
|
|
VStack(() => {
|
|
p("No members match your search")
|
|
.margin(0)
|
|
.fontSize(0.9, em)
|
|
.color("var(--headertext)")
|
|
.opacity(0.35)
|
|
.textAlign("center")
|
|
})
|
|
.flex(1)
|
|
.justifyContent("center")
|
|
.alignItems("center")
|
|
} else {
|
|
this._members.forEach((person, i) => {
|
|
PeopleCard(person)
|
|
if (i < this._members.length - 1) {
|
|
VStack(() => {}).height(1, px).background("var(--divider)").marginLeft(4.6, em)
|
|
}
|
|
})
|
|
}
|
|
})
|
|
.flex(1)
|
|
.overflowY("auto")
|
|
.paddingBottom(1, em)
|
|
}
|
|
}
|
|
|
|
register(PeopleList) |