cory/tildefriends
5
6
Fork 2
Code Issues 38 Pull Requests Actions Releases 33 Wiki 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

20
apps/wiki/tf-wiki-doc.js
View File

@ -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' : ''
}
</style>
<div class="inline-flex-row">
<button ?disabled=${!this.whoami || this.is_editing} @click=${() => self.is_editing = true}>Edit</button>
@ -249,15 +260,16 @@ class TfWikiDocElement extends LitElement {
<button ?disabled=${!this.is_editing} @click=${this.on_blog_publish}>Publish Blog</button>
</div>
<div ?hidden=${!this.value?.private} style="color: #800">🔒 document is private</div>
<div class="flex-row" ${this.value?.private ? 'border-top: 4px solid #800' : ''}">
<div class="flex-column" ${this.value?.private ? 'border-top: 4px solid #800' : ''}">
<textarea
?hidden=${!this.is_editing}
style="flex: 1 1; min-height: 10em; ${this.value?.private ? 'border: 4px solid #800' : ''}"
id="editor-text-area"
@input=${this.on_edit}
@paste=${this.paste}
.value=${this.blob ?? ''}></textarea>
<div style="flex: 1 1">
<div ?hidden=${!this.is_editing} style="border: 1px solid #fff; border-radius: 1em; padding: 0.5em">
<div ?hidden=${!this.is_editing} class="box">
Summary
<img ?hidden=${!thumbnail_ref} style="max-width: 128px; max-height: 128px; float: right" src="/${thumbnail_ref}/view">
<h1 ?hidden=${!this.title(this.blob)}>${unsafeHTML(this.markdown(this.title(this.blob)))}</h1>
${unsafeHTML(this.markdown(this.summary(this.blob)))}