tasiaiso/tildefriends
1
0
Fork 0
forked from cory/tildefriends
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

16
apps/wiki/tf-wiki-app.js
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>
`)}