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

40
apps/ssb/tf-message.js
View File

@ -213,9 +213,9 @@ class TfMessageElement extends LitElement {
let self = this;
if (this.message.child_messages?.length) {
if (!this.expanded[this.message.id]) {
return html`<input type="button" value=${this.total_child_messages(this.message) + ' More'} @click=${() => self.set_expanded(true)}></input>`;
return html`<p><button class="w3-button w3-dark-grey" @click=${() => self.set_expanded(true)}>+ ${this.total_child_messages(this.message) + ' More'}</button></p>`;
} else {
return html`<input type="button" value="Collapse" @click=${() => self.set_expanded(false)}></input>${(this.message.child_messages || []).map(x => html`<tf-message .message=${x} whoami=${this.whoami} .users=${this.users} .drafts=${this.drafts} .expanded=${this.expanded}></tf-message>`)}`;
return html`<p><button class="w3-button w3-dark-grey" @click=${() => self.set_expanded(false)}>Collapse</button></p>${(this.message.child_messages || []).map(x => html`<tf-message .message=${x} whoami=${this.whoami} .users=${this.users} .drafts=${this.drafts} .expanded=${this.expanded}></tf-message>`)}`;
}
}
}
@ -250,29 +250,29 @@ class TfMessageElement extends LitElement {
switch (this.format) {
case 'raw':
if (content?.type == 'post' || content?.type == 'blog') {
raw_button = html`<input type="button" value="Markdown" @click=${() => self.format = 'md'}></input>`;
raw_button = html`<button class="w3-button w3-dark-grey" @click=${() => self.format = 'md'}>Markdown</button>`;
} else {
raw_button = html`<input type="button" value="Message" @click=${() => self.format = 'message'}></input>`;
raw_button = html`<button class="w3-button w3-dark-grey" @click=${() => self.format = 'message'}>Message</button>`;
}
break;
case 'md':
raw_button = html`<input type="button" value="Message" @click=${() => self.format = 'message'}></input>`;
raw_button = html`<button class="w3-button w3-dark-grey" @click=${() => self.format = 'message'}>Message</button>`;
break;
case 'decrypted':
raw_button = html`<input type="button" value="Raw" @click=${() => self.format = 'raw'}></input>`;
raw_button = html`<button class="w3-button w3-dark-grey" @click=${() => self.format = 'raw'}>Raw</button>`;
break;
default:
if (this.message.decrypted) {
raw_button = html`<input type="button" value="Decrypted" @click=${() => self.format = 'decrypted'}></input>`;
raw_button = html`<button class="w3-button w3-dark-grey" @click=${() => self.format = 'decrypted'}>Decrypted</button>`;
} else {
raw_button = html`<input type="button" value="Raw" @click=${() => self.format = 'raw'}></input>`;
raw_button = html`<button class="w3-button w3-dark-grey" @click=${() => self.format = 'raw'}>Raw</button>`;
}
break;
}
function small_frame(inner) {
let body;
return html`
<div style="border: 1px solid black; background-color: rgba(255, 255, 255, 0.1); margin-top: 8px; padding: 16px; display: inline-block; overflow-wrap: anywhere">
<div class="w3-card-4" style="background-color: rgba(255, 255, 255, 0.1); margin-top: 8px; padding: 16px; display: inline-block; overflow-wrap: anywhere">
<tf-user id=${self.message.author} .users=${self.users}></tf-user>
<span style="padding-right: 8px"><a tfarget="_top" href=${'#' + self.message.id}>%</a> ${new Date(self.message.timestamp).toLocaleString()}</span>
${raw_button}
@ -283,14 +283,14 @@ class TfMessageElement extends LitElement {
}
if (this.message?.type === 'contact_group') {
return html`
<div style="border: 1px solid black; background-color: rgba(255, 255, 255, 0.1); margin-top: 8px; padding: 16px; overflow-wrap: anywhere">
<div class="w3-card-4" style="border: 1px solid black; background-color: rgba(255, 255, 255, 0.1); margin-top: 8px; padding: 16px; overflow-wrap: anywhere">
${this.message.messages.map(x =>
html`<tf-message .message=${x} whoami=${this.whoami} .users=${this.users} .drafts=${this.drafts} .expanded=${this.expanded}></tf-message>`
)}
</div>`;
} else if (this.message.placeholder) {
return html`
<div style="border: 1px solid black; background-color: rgba(255, 255, 255, 0.1); margin-top: 8px; padding: 16px; overflow-wrap: anywhere">
<div class="w3-card-4" style="border: 1px solid black; background-color: rgba(255, 255, 255, 0.1); margin-top: 8px; padding: 16px; overflow-wrap: anywhere">
<a target="_top" href=${'#' + this.message.id}>${this.message.id}</a> (placeholder)
<div>${this.render_votes()}</div>
${(this.message.child_messages || []).map(x => html`
@ -351,7 +351,7 @@ class TfMessageElement extends LitElement {
.drafts=${this.drafts}
@tf-discard=${this.discard_reply}></tf-compose>
` : html`
<input type="button" value="Reply" @click=${this.show_reply}></input>
<button class="w3-button w3-dark-grey" @click=${this.show_reply}>Reply</button>
`;
let self = this;
let body;
@ -367,7 +367,7 @@ class TfMessageElement extends LitElement {
break;
}
let content_warning = html`
<div class="content_warning" @click=${x => this.toggle_expanded(':cw')}>${content.contentWarning}</div>
<div class="w3-panel w3-round-xlarge w3-blue" style="cursor: pointer" @click=${x => this.toggle_expanded(':cw')}><p>${content.contentWarning}</p></div>
`;
let content_html =
html`
@ -401,7 +401,7 @@ class TfMessageElement extends LitElement {
display: block;
}
</style>
<div style="border: 1px solid black; background-color: ${style_background}; margin-top: 8px; padding: 16px">
<div class="w3-card-4" style="border: 1px solid black; background-color: ${style_background}; margin-top: 8px; padding: 16px">
<div style="display: flex; flex-direction: row">
<tf-user id=${this.message.author} .users=${this.users}></tf-user>
${is_encrypted}
@ -413,7 +413,7 @@ class TfMessageElement extends LitElement {
${this.render_votes()}
<div>
${reply}
<input type="button" value="React" @click=${this.react}></input>
<button class="w3-button w3-dark-grey" @click=${this.react}>React</button>
</div>
${this.render_children()}
</div>
@ -436,7 +436,7 @@ class TfMessageElement extends LitElement {
display: block;
}
</style>
<div style="border: 1px solid black; background-color: ${style_background}; margin-top: 8px; padding: 16px">
<div class="w3-card-4" style="border: 1px solid black; background-color: ${style_background}; margin-top: 8px; padding: 16px">
<div style="display: flex; flex-direction: row">
<tf-user id=${this.message.author} .users=${this.users}></tf-user>
${is_encrypted}
@ -447,7 +447,7 @@ class TfMessageElement extends LitElement {
${content.text}
${this.render_votes()}
<div>
<input type="button" value="React" @click=${this.react}></input>
<button class="w3-button w3-dark-grey" @click=${this.react}>React</button>
</div>
${this.render_children()}
</div>
@ -493,7 +493,7 @@ class TfMessageElement extends LitElement {
.drafts=${this.drafts}
@tf-discard=${this.discard_reply}></tf-compose>
` : html`
<input type="button" value="Reply" @click=${this.show_reply}></input>
<button class="w3-button w3-dark-grey" @click=${this.show_reply}>Reply</button>
`;
return html`
<style>
@ -510,7 +510,7 @@ class TfMessageElement extends LitElement {
display: block;
}
</style>
<div style="border: 1px solid black; background-color: rgba(255, 255, 255, 0.1); margin-top: 8px; padding: 16px">
<div class="w3-card-4" style="border: 1px solid black; background-color: rgba(255, 255, 255, 0.1); margin-top: 8px; padding: 16px">
<div style="display: flex; flex-direction: row">
<tf-user id=${this.message.author} .users=${this.users}></tf-user>
<span style="flex: 1"></span>
@ -522,7 +522,7 @@ class TfMessageElement extends LitElement {
${this.render_mentions()}
<div>
${reply}
<input type="button" value="React" @click=${this.react}></input>
<button class="w3-button w3-dark-grey" @click=${this.react}>React</button>
</div>
${this.render_votes()}
${this.render_children()}