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

Experimenting with w3.css themes.

Browse Source
This commit is contained in:
Cory McWilliams
2024-04-04 20:35:09 -04:00
parent 6ae61d5b81
commit 81d1228b92
14 changed files with 112 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
apps/ssb/tf-compose.js
View File

@ -356,7 +356,7 @@ class TfComposeElement extends LitElement {
return html` <div style="display: flex; flex-direction: row">
<div style="align-self: center; margin: 0.5em">
<button
class="w3-button w3-dark-grey"
class="w3-button w3-theme-d1"
title="Remove ${mention.name} mention"
@click=${() => self.remove_mention(mention.link)}
>
@ -410,16 +410,16 @@ class TfComposeElement extends LitElement {
if (this.apps) {
return html`
<div class="w3-card-4 w3-margin w3-padding">
<select id="select" class="w3-select w3-dark-grey">
<select id="select" class="w3-select w3-theme-d1">
${Object.keys(self.apps).map(
(app) => html`<option value=${app}>${app}</option>`
)}
</select>
<button class="w3-button w3-dark-grey" @click=${attach_selected_app}>
<button class="w3-button w3-theme-d1" @click=${attach_selected_app}>
Attach
</button>
<button
class="w3-button w3-dark-grey"
class="w3-button w3-theme-d1"
@click=${() => (this.apps = null)}
>
Cancel
@ -435,12 +435,12 @@ class TfComposeElement extends LitElement {
self.apps = await tfrpc.rpc.apps();
}
if (!this.apps) {
return html`<button class="w3-button w3-dark-grey" @click=${attach_app}>
return html`<button class="w3-button w3-theme-d1" @click=${attach_app}>
Attach App
</button>`;
} else {
return html`<button
class="w3-button w3-dark-grey"
class="w3-button w3-theme-d1"
@click=${() => (this.apps = null)}
>
Discard App
@ -462,15 +462,15 @@ class TfComposeElement extends LitElement {
return html`
<div class="w3-container w3-padding">
<p>
<input type="checkbox" class="w3-check w3-dark-grey" id="cw" @change=${() => self.set_content_warning(undefined)} checked="checked"></input>
<input type="checkbox" class="w3-check w3-theme-d1" id="cw" @change=${() => self.set_content_warning(undefined)} checked="checked"></input>
<label for="cw">CW</label>
</p>
<input type="text" class="w3-input w3-border w3-dark-grey" id="content_warning" placeholder="Enter a content warning here." @input=${this.input} @change=${this.change} value=${draft.content_warning}></input>
<input type="text" class="w3-input w3-border w3-theme-d1" id="content_warning" placeholder="Enter a content warning here." @input=${this.input} @change=${this.change} value=${draft.content_warning}></input>
</div>
`;
} else {
return html`
<input type="checkbox" class="w3-check w3-dark-grey" id="cw" @change=${() => self.set_content_warning('')}></input>
<input type="checkbox" class="w3-check w3-theme-d1" id="cw" @change=${() => self.set_content_warning('')}></input>
<label for="cw">CW</label>
`;
}
@ -500,14 +500,14 @@ class TfComposeElement extends LitElement {
<div style="display: flex; flex-direction: row; width: 100%">
<label for="encrypt_to">🔐 To:</label>
<input type="text" id="encrypt_to" style="display: flex; flex: 1 1" @input=${this.update_encrypt}></input>
<button class="w3-button w3-dark-grey" @click=${() => this.set_encrypt(undefined)}>🚮</button>
<button class="w3-button w3-theme-d1" @click=${() => this.set_encrypt(undefined)}>🚮</button>
</div>
<ul>
${draft.encrypt_to.map(
(x) => html`
<li>
<tf-user id=${x} .users=${this.users}></tf-user>
<input type="button" class="w3-button w3-dark-grey" value="🚮" @click=${() => this.set_encrypt(draft.encrypt_to.filter((id) => id != x))}></input>
<input type="button" class="w3-button w3-theme-d1" value="🚮" @click=${() => this.set_encrypt(draft.encrypt_to.filter((id) => id != x))}></input>
</li>`
)}
</ul>
@ -526,7 +526,7 @@ class TfComposeElement extends LitElement {
let draft = self.get_draft();
let content_warning =
draft.content_warning !== undefined
? html`<div class="w3-panel w3-round-xlarge w3-blue">
? html`<div class="w3-panel w3-round-xlarge w3-theme-d2">
<p id="content_warning_preview">${draft.content_warning}</p>
</div>`
: undefined;
@ -534,14 +534,14 @@ class TfComposeElement extends LitElement {
draft.encrypt_to !== undefined
? undefined
: html`<button
class="w3-button w3-dark-grey"
class="w3-button w3-theme-d1"
@click=${() => this.set_encrypt([])}
>
🔐
</button>`;
let result = html`
<div
class="w3-card-4 w3-blue-grey w3-padding"
class="w3-card-4 w3-theme-d4 w3-padding"
style="box-sizing: border-box"
>
${this.render_encrypt()}
@ -549,7 +549,7 @@ class TfComposeElement extends LitElement {
<div style="flex: 1 0 50%">
<p>
<textarea
class="w3-input w3-dark-grey w3-border"
class="w3-input w3-theme-d1 w3-border"
style="resize: vertical"
placeholder="Write a post here."
id="edit"
@ -568,17 +568,17 @@ class TfComposeElement extends LitElement {
${Object.values(draft.mentions || {}).map((x) => self.render_mention(x))}
${this.render_attach_app()} ${this.render_content_warning()}
<button
class="w3-button w3-dark-grey"
class="w3-button w3-theme-d1"
id="submit"
@click=${this.submit}
>
Submit
</button>
<button class="w3-button w3-dark-grey" @click=${this.attach}>
<button class="w3-button w3-theme-d1" @click=${this.attach}>
Attach
</button>
${this.render_attach_app_button()} ${encrypt}
<button class="w3-button w3-dark-grey" @click=${this.discard}>
<button class="w3-button w3-theme-d1" @click=${this.discard}>
Discard
</button>
</div>