interfect/tildefriends
1
0
Fork 0
forked from cory/tildefriends
Code Pull Requests Activity

feat(wiki): improvements to the wiki's UI

Browse Source
This commit is contained in:
Tasia
2024-02-22 18:11:13 +01:00
parent a4bf3542e0
commit 1d5cdf9607
4 changed files with 39 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
apps/wiki/tf-wiki-app.js
View File

@ -242,15 +242,20 @@ class TfCollectionsAppElement extends LitElement {
return html`
<link rel="stylesheet" href="tildefriends.css"/>
<style>
.toc {
.toc-item {
white-space: nowrap;
cursor: pointer;
}
.toc:hover {
.toc-item:hover {
background-color: #0cc;
}
.toc.selected {
.toc-item.selected {
background-color: #088;
font-weight: bold;
}
.table-of-contents {
flex: 0 0;
margin-right: 16px;
}
</style>
<div>
@ -260,6 +265,7 @@ class TfCollectionsAppElement extends LitElement {
${keyed(this.whoami, html`<tf-collection
.collection=${this.wikis}
whoami=${this.whoami}
category="wiki"
selected_id=${this.wiki?.id}
@create=${this.on_wiki_create}
@rename=${this.on_wiki_rename}
@ -268,6 +274,7 @@ class TfCollectionsAppElement extends LitElement {
${keyed(this.wiki_doc?.id, html`<tf-collection
.collection=${this.wiki_docs}
whoami=${this.whoami}
category="document"
selected_id=${(this.wiki_doc && this.wiki_doc?.parent == this.wiki?.id) ? this.wiki_doc?.id : ''}
@create=${this.on_wiki_doc_create}
@rename=${this.on_wiki_doc_rename}
@ -292,12 +299,12 @@ class TfCollectionsAppElement extends LitElement {
</div>
</div>
<div class="flex-row">
<div style="flex: 0 0">
<div class="box table-of-contents">
${Object.values(this.wikis || {}).sort((x, y) => x.name.localeCompare(y.name)).map(wiki => html`
<div class="toc ${self.wiki?.id === wiki.id ? 'selected' : ''}" @click=${() => self.on_wiki_changed({detail: {value: wiki}})}>📕${wiki.name}</div>
<div class="toc-item ${self.wiki?.id === wiki.id ? 'selected' : ''}" @click=${() => self.on_wiki_changed({detail: {value: wiki}})}>${self.wiki?.id === wiki.id ? '' : '>'} ${wiki.name}</div>
<ul>
${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="list-style: none; text-indent: -1rem" @click=${() => self.on_wiki_doc_changed({detail: {value: doc}})}>${doc?.private ? '🔒' : '📄'} ${doc.name}</li>
<li class="toc-item ${self.wiki_doc?.id === doc.id ? 'selected' : ''}" style="list-style: none; text-indent: -1rem" @click=${() => self.on_wiki_doc_changed({detail: {value: doc}})}>${doc?.private ? '🔒' : '📄'} ${doc.name}</li>
`)}
</ul>
`)}