From 1d5cdf96075c54e87fa501cbd9d7f533cecc891e Mon Sep 17 00:00:00 2001 From: Tasia Date: Thu, 22 Feb 2024 18:11:13 +0100 Subject: [PATCH] feat(wiki): improvements to the wiki's UI --- apps/wiki/tf-collection.js | 3 ++- apps/wiki/tf-wiki-app.js | 19 +++++++++++++------ apps/wiki/tf-wiki-doc.js | 20 ++++++++++++++++---- apps/wiki/tildefriends.css | 8 ++++++++ 4 files changed, 39 insertions(+), 11 deletions(-) diff --git a/apps/wiki/tf-collection.js b/apps/wiki/tf-collection.js index 9308ba71..03fb91b0 100644 --- a/apps/wiki/tf-collection.js +++ b/apps/wiki/tf-collection.js @@ -5,6 +5,7 @@ class TfCollectionElement extends LitElement { static get properties() { return { whoami: {type: String}, + category: {type: String}, collection: {type: Object}, selected_id: {type: String}, is_creating: {type: Boolean}, @@ -68,7 +69,7 @@ class TfCollectionElement extends LitElement { diff --git a/apps/wiki/tf-wiki-app.js b/apps/wiki/tf-wiki-app.js index 9bcb308e..92b0dad9 100644 --- a/apps/wiki/tf-wiki-app.js +++ b/apps/wiki/tf-wiki-app.js @@ -242,15 +242,20 @@ class TfCollectionsAppElement extends LitElement { return html`
@@ -260,6 +265,7 @@ class TfCollectionsAppElement extends LitElement { ${keyed(this.whoami, html`
-
+
${Object.values(this.wikis || {}).sort((x, y) => x.name.localeCompare(y.name)).map(wiki => html` -
self.on_wiki_changed({detail: {value: wiki}})}>📕${wiki.name}
+
self.on_wiki_changed({detail: {value: wiki}})}>${self.wiki?.id === wiki.id ? '' : '>'} ${wiki.name}
    ${Object.values(self.wiki_docs || {}).filter(doc => doc.parent === wiki?.id).sort((x, y) => x.name.localeCompare(y.name)).map(doc => html` -
  • self.on_wiki_doc_changed({detail: {value: doc}})}>${doc?.private ? '🔒' : '📄'} ${doc.name}
  • +
  • self.on_wiki_doc_changed({detail: {value: doc}})}>${doc?.private ? '🔒' : '📄'} ${doc.name}
  • `)}
`)} diff --git a/apps/wiki/tf-wiki-doc.js b/apps/wiki/tf-wiki-doc.js index 4b3eb57b..5c7ce3ad 100644 --- a/apps/wiki/tf-wiki-doc.js +++ b/apps/wiki/tf-wiki-doc.js @@ -76,7 +76,9 @@ class TfWikiDocElement extends LitElement { async load_blob() { let blob = await tfrpc.rpc.get_blob(this.value?.blob); - if (blob.endsWith('.box')) { + if(!blob) { + console.warn("no blob found, we're going to assume the document is empty (load_blob())"); + } else if (blob.endsWith('.box')) { let d = await tfrpc.rpc.try_decrypt(this.whoami, blob); if (d) { blob = d; @@ -239,6 +241,15 @@ class TfWikiDocElement extends LitElement { a:visited { color: #6c71c4 } a:hover { color: #859900 } a:active { color: #2aa198 } + + #editor-text-area { + background-color: #00000040; + color: white; + style="flex: 1 1; + min-height: 10em; + font-size: larger; + ${this.value?.private ? 'border: 4px solid #800' : '' + }
@@ -249,15 +260,16 @@ class TfWikiDocElement extends LitElement {
🔒 document is private
-
+
-
+
+ Summary

${unsafeHTML(this.markdown(this.title(this.blob)))}

${unsafeHTML(this.markdown(this.summary(this.blob)))} diff --git a/apps/wiki/tildefriends.css b/apps/wiki/tildefriends.css index 23e50fe8..e3276c2e 100644 --- a/apps/wiki/tildefriends.css +++ b/apps/wiki/tildefriends.css @@ -100,3 +100,11 @@ tr:nth-child(even) { display: inline-flex; flex-direction: row; } + +.box { + background-color: #00000020; + border: 1px solid grey; + border-radius: 8px; + padding: 16px; + margin: 4px; +}