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

I did some CSS, and it was kind of OK.

Browse Source 
git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4760 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
Cory McWilliams
2024-01-12 04:23:31 +00:00
parent 4fd155e68a
commit b2e3c04036
9 changed files with 338 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -357,12 +357,12 @@ class TfComposeElement extends LitElement {
if (this.apps) {
return html`
<div>
<select id="select">
<div class="w3-card-4 w3-margin w3-padding">
<select id="select" class="w3-select w3-dark-grey">
${Object.keys(self.apps).map(app => html`<option value=${app}>${app}</option>`)}
</select>
<input type="button" value="Attach" @click=${attach_selected_app}></input>
<input type="button" value="Cancel" @click=${() => this.apps = null}></input>
<button class="w3-button w3-dark-grey" @click=${attach_selected_app}>Attach</button>
<button class="w3-button w3-dark-grey" @click=${() => this.apps = null}>Cancel</button>
</div>
`;
}
@ -374,9 +374,9 @@ class TfComposeElement extends LitElement {
self.apps = await tfrpc.rpc.apps();
}
if (!this.apps) {
return html`<input type="button" value="Attach App" @click=${attach_app}></input>`;
return html`<button class="w3-button w3-dark-grey" @click=${attach_app}>Attach App</button>`;
} else {
return html`<input type="button" value="Discard App" @click=${() => this.apps = null}></input>`;
return html`<button class="w3-button w3-dark-grey" @click=${() => this.apps = null}>Discard App</button>`;
}
}
@ -392,15 +392,17 @@ class TfComposeElement extends LitElement {
let draft = this.get_draft();
if (draft.content_warning !== undefined) {
return html`
<div>
<input type="checkbox" id="cw" @change=${() => self.set_content_warning(undefined)} checked></input>
<label for="cw">CW</label>
<input type="text" id="content_warning" @input=${this.input} @change=${this.change} value=${draft.content_warning}></input>
<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>
<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>
</div>
`;
} else {
return html`
<input type="checkbox" id="cw" @change=${() => self.set_content_warning('')}></input>
<input type="checkbox" class="w3-check w3-dark-grey" id="cw" @change=${() => self.set_content_warning('')}></input>
<label for="cw">CW</label>
`;
}
@ -430,13 +432,13 @@ 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>
<input type="button" value="🚮" @click=${() => this.set_encrypt(undefined)}></input>
<button class="w3-button w3-dark-grey" @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" value="🚮" @click=${() => this.set_encrypt(draft.encrypt_to.filter(id => id != x))}></input>
<input type="button" class="w3-button w3-dark-grey" value="🚮" @click=${() => this.set_encrypt(draft.encrypt_to.filter(id => id != x))}></input>
</li>`)}
</ul>
`;
@ -454,28 +456,34 @@ class TfComposeElement extends LitElement {
let draft = self.get_draft();
let content_warning =
draft.content_warning !== undefined ?
html`<div id="content_warning_preview" class="content_warning">${draft.content_warning}</div>` :
html`<div class="w3-panel w3-round-xlarge w3-blue">
<p id="content_warning_preview">${draft.content_warning}</p>
</div>` :
undefined;
let encrypt = draft.encrypt_to !== undefined ?
undefined :
html`<input type="button" value="🔐" @click=${() => this.set_encrypt([])}></input>`;
html`<button class="w3-button w3-dark-grey" @click=${() => this.set_encrypt([])}>🔐</button>`;
let result = html`
${this.render_encrypt()}
<div style="display: flex; flex-direction: row; width: 100%">
<textarea id="edit" @input=${this.input} @change=${this.change} @paste=${this.paste} style="flex: 1 0 50%">${draft.text}</textarea>
<div style="flex: 1 0 50%">
${content_warning}
<div id="preview"></div>
<div class="w3-card-4 w3-blue-grey w3-padding" style="box-sizing: border-box">
${this.render_encrypt()}
<div style="display: flex; flex-direction: row; width: 100%">
<div style="flex: 1 0 50%" class="w3-padding">
<textarea class="w3-input w3-dark-grey w3-border" style="resize: vertical" placeholder="Write a post here." id="edit" @input=${this.input} @change=${this.change} @paste=${this.paste}>${draft.text}</textarea>
</div>
<div style="flex: 1 0 50%" class="w3-padding">
${content_warning}
<div id="preview"></div>
</div>
</div>
${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" id="submit" @click=${this.submit}>Submit</button>
<button class="w3-button w3-dark-grey" @click=${this.attach}>Attach</button>
${this.render_attach_app_button()}
${encrypt}
<button class="w3-button w3-dark-grey" @click=${this.discard}>Discard</button>
</div>
${Object.values(draft.mentions || {}).map(x => self.render_mention(x))}
${this.render_content_warning()}
${this.render_attach_app()}
<input type="button" id="submit" value="Submit" @click=${this.submit}></input>
<input type="button" value="Attach" @click=${this.attach}></input>
${this.render_attach_app_button()}
${encrypt}
<input type="button" value="Discard" @click=${this.discard}></input>
`;
return result;
}