style(wiki): use core.js
This commit is contained in:
parent
12c7515ee8
commit
53f9547cc5
125
apps/wiki/core.css
Normal file
125
apps/wiki/core.css
Normal file
@ -0,0 +1,125 @@
|
||||
/*
|
||||
* Tilde Friends core stylesheet
|
||||
* This is a prototype; things may change based on feedback.
|
||||
*
|
||||
* This Software is an external library that is part of
|
||||
* Tilde Friends and is shared under the MIT license.
|
||||
* A copy of the license is available at the end of this file.
|
||||
*
|
||||
* Inject this file in your app at core.css
|
||||
* and use this tag to import it:
|
||||
* <link rel="stylesheet" href="core.css"/>
|
||||
*
|
||||
* Revision 0 / 2024 M02 19
|
||||
*/
|
||||
|
||||
body {
|
||||
color: white;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
button, .button {
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 8px 12px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
button:hover, .button:hover {
|
||||
filter: brightness(0.75);
|
||||
}
|
||||
|
||||
button.red, .button.red {
|
||||
background-color: #bd1e24;
|
||||
color: white;
|
||||
}
|
||||
|
||||
button.green, .button.green {
|
||||
background-color: #18922d;
|
||||
color: white;
|
||||
}
|
||||
|
||||
button.blue, .button.blue {
|
||||
background-color: #0067a7;
|
||||
color: white;
|
||||
}
|
||||
|
||||
button.yellow, .button.yellow {
|
||||
background-color: #ee9600;
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:link {
|
||||
color: #268bd2;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #6c71c4;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #859900;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: #2aa198;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
td, th {
|
||||
border: 1px solid #ffffff40;
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: #ffffff20;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.inline-flex-row {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
/*
|
||||
Copyright 2024- Cory McWilliams & Tasia Iso
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
this software and associated documentation files (the "Software"), to deal in
|
||||
the Software without restriction, including without limitation the rights to
|
||||
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
|
||||
of the Software, and to permit persons to whom the Software is furnished to do
|
||||
so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
*/
|
||||
@ -2,8 +2,9 @@
|
||||
<html>
|
||||
<head>
|
||||
<base target="_top">
|
||||
<link rel="stylesheet" href="core.css"/>
|
||||
</head>
|
||||
<body style="color: #fff">
|
||||
<body>
|
||||
<tf-collections-app></tf-collections-app>
|
||||
<script>window.litDisableBundleWarning = true;</script>
|
||||
<script src="tf-collection.js" type="module"></script>
|
||||
|
||||
@ -65,28 +65,29 @@ class TfCollectionElement extends LitElement {
|
||||
render() {
|
||||
let self = this;
|
||||
return html`
|
||||
<span style="display: inline-flex; flex-direction: row">
|
||||
<select @change=${this.on_selected} id="select" value=${this.selected_id}>
|
||||
<link rel="stylesheet" href="core.css"/>
|
||||
<span class="inline-flex-row">
|
||||
<select class="button" @change=${this.on_selected} id="select" value=${this.selected_id}>
|
||||
<option value="" ?selected=${this.selected_id === ''} disabled hidden>(select)</option>
|
||||
${Object.values(this.collection ?? {}).sort((x, y) => x.name.localeCompare(y.name)).map(x => html`<option value=${x.id} ?selected=${this.selected_id === x.id}>${x.name}</option>`)}
|
||||
</select>
|
||||
<span ?hidden=${!this.is_renaming || !this.whoami}>
|
||||
<span style="display: inline-flex; flex-direction: row; margin-left: 8px; margin-right: 8px">
|
||||
<span class="inline-flex-row" style="margin-left: 8px; margin-right: 8px">
|
||||
<label for="rename_name">🏷Rename to:</label>
|
||||
<input type="text" id="rename_name"></input>
|
||||
<button @click=${this.on_rename}>Rename ${this.type}</button>
|
||||
<button @click=${() => self.is_renaming = false}>x</button>
|
||||
</span>
|
||||
</span>
|
||||
<button @click=${() => self.is_renaming = true} ?disabled=${this.is_renaming || !this.selected_id} ?hidden=${!this.whoami}>🏷</button>
|
||||
<button @click=${self.on_tombstone} ?disabled=${!this.selected_id} ?hidden=${!this.whoami}>🪦</button>
|
||||
<button class="yellow" @click=${() => self.is_renaming = true} ?disabled=${this.is_renaming || !this.selected_id} ?hidden=${!this.whoami}>🏷</button>
|
||||
<button class="red" @click=${self.on_tombstone} ?disabled=${!this.selected_id} ?hidden=${!this.whoami}>🪦</button>
|
||||
<span ?hidden=${!this.is_creating || !this.whoami}>
|
||||
<label for="create_name">New ${this.type} name:</label>
|
||||
<input type="text" id="create_name"></input>
|
||||
<button @click=${this.on_create}>Create ${this.type}</button>
|
||||
<button @click=${() => self.is_creating = false}>x</button>
|
||||
</span>
|
||||
<button @click=${() => self.is_creating = true} ?hidden=${this.is_creating || !this.whoami}>+</button>
|
||||
<button class="green" @click=${() => self.is_creating = true} ?hidden=${this.is_creating || !this.whoami}>+</button>
|
||||
</span>
|
||||
`;
|
||||
}
|
||||
|
||||
@ -26,7 +26,8 @@ class TfIdentityPickerElement extends LitElement {
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<select @change=${this.changed} style="max-width: 100%">
|
||||
<link rel="stylesheet" href="core.css"/>
|
||||
<select @change=${this.changed} class="button" style="max-width: 100%">
|
||||
${(this.ids ?? []).map(id => html`<option ?selected=${id == this.selected} value=${id}>${id}</option>`)}
|
||||
</select>
|
||||
`;
|
||||
|
||||
@ -240,7 +240,12 @@ class TfCollectionsAppElement extends LitElement {
|
||||
render() {
|
||||
let self = this;
|
||||
return html`
|
||||
<link rel="stylesheet" href="core.css"/>
|
||||
<style>
|
||||
.toc {
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
.toc:hover {
|
||||
background-color: #0cc;
|
||||
}
|
||||
@ -272,9 +277,9 @@ class TfCollectionsAppElement extends LitElement {
|
||||
<div ?hidden=${!this.wiki?.editors || !this.expand_editors}>
|
||||
<div>
|
||||
<ul>
|
||||
${this.wiki?.editors.map(id => html`<li><button ?hidden=${id == this.whoami} @click=${() => self.on_remove_editor(id)}>x</button> ${id}</li>`)}
|
||||
${this.wiki?.editors.map(id => html`<li><button class="red" ?hidden=${id == this.whoami} @click=${() => self.on_remove_editor(id)}>x</button> ${id}</li>`)}
|
||||
<li>
|
||||
<button @click=${() => self.adding_editor = true} ?hidden=${this.wiki?.editors?.indexOf(this.whoami) == -1 || this.adding_editor}>+</button>
|
||||
<button class="green" @click=${() => self.adding_editor = true} ?hidden=${this.wiki?.editors?.indexOf(this.whoami) == -1 || this.adding_editor}>+</button>
|
||||
<div ?hidden=${!this.adding_editor}>
|
||||
<label for="add_editor">Add Editor:</label>
|
||||
<input type="text" id="add_editor"></input>
|
||||
@ -286,13 +291,13 @@ class TfCollectionsAppElement extends LitElement {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: row">
|
||||
<div class="flex-row">
|
||||
<div style="flex: 0 0">
|
||||
${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>
|
||||
<div class="toc ${self.wiki?.id === wiki.id ? 'selected' : ''}" @click=${() => self.on_wiki_changed({detail: {value: wiki}})}>📕${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="white-space: nowrap; cursor: pointer; list-style: none; text-indent: -1rem" @click=${() => self.on_wiki_doc_changed({detail: {value: doc}})}>${doc?.private ? '🔒' : '📄'} ${doc.name}</li>
|
||||
<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>
|
||||
`)}
|
||||
</ul>
|
||||
`)}
|
||||
|
||||
@ -233,13 +233,14 @@ class TfWikiDocElement extends LitElement {
|
||||
let self = this;
|
||||
let thumbnail_ref = this.thumbnail(this.blob);
|
||||
return html`
|
||||
<link rel="stylesheet" href="core.css"/>
|
||||
<style>
|
||||
a:link { color: #268bd2 }
|
||||
a:visited { color: #6c71c4 }
|
||||
a:hover { color: #859900 }
|
||||
a:active { color: #2aa198 }
|
||||
</style>
|
||||
<div style="display: inline-flex; flex-direction: row">
|
||||
<div class="inline-flex-row">
|
||||
<button ?disabled=${!this.whoami || this.is_editing} @click=${() => self.is_editing = true}>Edit</button>
|
||||
<button ?disabled=${this.blob == this.blob_original} @click=${this.on_save_draft}>Save Draft</button>
|
||||
<button ?disabled=${this.blob == this.blob_original && !this.value?.draft} @click=${this.on_publish}>Publish</button>
|
||||
@ -248,7 +249,7 @@ 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 style="display: flex; flex-direction: row; ${this.value?.private ? 'border-top: 4px solid #800' : ''}">
|
||||
<div class="flex-row" ${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' : ''}"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user