Show selected and hovered items in the wiki table of contents.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4675 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
Cory McWilliams 2023-12-12 17:38:10 +00:00
parent 94dd573a81
commit 0b47207949
2 changed files with 13 additions and 5 deletions

View File

@ -1,5 +1,5 @@
{
"type": "tildefriends-app",
"emoji": "📝",
"previous": "&FapSqeXK/JbtaIuh3Ot6SNJ1hR7kGRqZwiML5t5GdGw=.sha256"
"previous": "&58whE4qyKCpHyOXRE/wF78B4oGn9DhJHiJcVMPZB2pU=.sha256"
}

View File

@ -240,6 +240,14 @@ class TfCollectionsAppElement extends LitElement {
render() {
let self = this;
return html`
<style>
.toc:hover {
background-color: #f00;
}
.toc.selected {
border: 1px solid #fff;
}
</style>
<div>
<tf-id-picker .ids=${this.ids} selected=${this.whoami} @change=${this.on_whoami_changed} ?hidden=${!this.ids?.length}></tf-id-picker>
</div>
@ -280,11 +288,11 @@ class TfCollectionsAppElement extends LitElement {
</div>
<div style="display: flex; flex-direction: row">
<div style="flex: 0 0">
${Object.values(this.wikis || {}).map(wiki => html`
<div style="white-space: nowrap" @click=${() => self.on_wiki_changed({detail: {value: wiki}})}>${wiki.name}</div>
${Object.values(this.wikis || {}).sort((x, y) => x.name.localeCompare(y.name)).map(wiki => html`
<div class="toc ${self.wiki?.id === wiki.id ? 'selected' : ''}" style="white-space: nowrap; cursor: pointer" @click=${() => self.on_wiki_changed({detail: {value: wiki}})}>${wiki.name}</div>
<ul>
${Object.values(self.wiki_docs || {}).filter(doc => doc.parent === wiki?.id).map(doc => html`
<li style="white-space: nowrap" @click=${() => self.on_wiki_doc_changed({detail: {value: doc}})}>${doc.name}</li>
${Object.values(self.wiki_docs || {}).filter(doc => doc.parent === wiki?.id).sort((x, y) => x.name.localeCompare(y.name)).map(doc => html`
<li class="toc ${self.wiki_doc?.id === doc.id ? 'selected' : ''}" style="white-space: nowrap; cursor: pointer" @click=${() => self.on_wiki_doc_changed({detail: {value: doc}})}>${doc.name}</li>
`)}
</ul>
`)}