forked from cory/tildefriends
w3.css-ified ssb more.
git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4762 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
parent
18e9252998
commit
dc0e58afc1
@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"type": "tildefriends-app",
|
"type": "tildefriends-app",
|
||||||
"emoji": "🐌",
|
"emoji": "🐌",
|
||||||
"previous": "&CU5ADSjXhLREtBlOLVFPZNcWXg7XJFWAp/VI9OJzZ18=.sha256"
|
"previous": "&aqKwpmeLdHyypzeyvuH0xCn5U8trsZ+NPY8safqAyYo=.sha256"
|
||||||
}
|
}
|
@ -314,7 +314,7 @@ class TfComposeElement extends LitElement {
|
|||||||
return html`
|
return html`
|
||||||
<div style="display: flex; flex-direction: row">
|
<div style="display: flex; flex-direction: row">
|
||||||
<div style="align-self: center; margin: 0.5em">
|
<div style="align-self: center; margin: 0.5em">
|
||||||
<input type="button" value="🚮" title="Remove ${mention.name} mention" @click=${() => self.remove_mention(mention.link)}></input>
|
<button class="w3-button w3-dark-grey" title="Remove ${mention.name} mention" @click=${() => self.remove_mention(mention.link)}>🚮</button>
|
||||||
</div>
|
</div>
|
||||||
<div style="display: flex; flex-direction: column">
|
<div style="display: flex; flex-direction: column">
|
||||||
<h3>${mention.name}</h3>
|
<h3>${mention.name}</h3>
|
||||||
|
@ -184,47 +184,49 @@ class TfProfileElement extends LitElement {
|
|||||||
if (this.editing) {
|
if (this.editing) {
|
||||||
let server_follow;
|
let server_follow;
|
||||||
if (this.server_follows_me === true) {
|
if (this.server_follows_me === true) {
|
||||||
server_follow = html`<input type="button" value="Server, Stop Following Me" @click=${() => this.server_follow_me(false)}></input>`;
|
server_follow = html`<button class="w3-button w3-dark-grey" @click=${() => this.server_follow_me(false)}>Server, Stop Following Me</button>`;
|
||||||
} else if (this.server_follows_me === false) {
|
} else if (this.server_follows_me === false) {
|
||||||
server_follow = html`<input type="button" value="Server, Follow Me" @click=${() => this.server_follow_me(true)}></input>`;
|
server_follow = html`<button class="w3-button w3-dark-grey" @click=${() => this.server_follow_me(true)}>Server, Follow Me</button>`;
|
||||||
}
|
}
|
||||||
edit = html`
|
edit = html`
|
||||||
<input type="button" value="Save Profile" @click=${this.save_edits}></input>
|
<button class="w3-button w3-dark-grey" @click=${this.save_edits}>Save Profile</button>
|
||||||
<input type="button" value="Discard" @click=${this.discard_edits}></input>
|
<button class="w3-button w3-dark-grey" @click=${this.discard_edits}>Discard</button>
|
||||||
${server_follow}
|
${server_follow}
|
||||||
`;
|
`;
|
||||||
} else {
|
} else {
|
||||||
edit = html`<input type="button" value="Edit Profile" @click=${this.edit}></input>`;
|
edit = html`<button class="w3-button w3-dark-grey" @click=${this.edit}>Edit Profile</button>`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (this.id !== this.whoami &&
|
if (this.id !== this.whoami &&
|
||||||
this.following !== undefined) {
|
this.following !== undefined) {
|
||||||
follow =
|
follow =
|
||||||
this.following ?
|
this.following ?
|
||||||
html`<input type="button" value="Unfollow" @click=${this.unfollow}></input>` :
|
html`<button class="w3-button w3-dark-grey" @click=${this.unfollow}>Unfollow</button>` :
|
||||||
html`<input type="button" value="Follow" @click=${this.follow}></input>`;
|
html`<button class="w3-button w3-dark-grey" @click=${this.follow}>Follow</button>`;
|
||||||
}
|
}
|
||||||
if (this.id !== this.whoami &&
|
if (this.id !== this.whoami &&
|
||||||
this.blocking !== undefined) {
|
this.blocking !== undefined) {
|
||||||
block =
|
block =
|
||||||
this.blocking ?
|
this.blocking ?
|
||||||
html`<input type="button" value="Unblock" @click=${this.unblock}></input>` :
|
html`<button class="w3-button w3-dark-grey" @click=${this.unblock}>Unblock</button>` :
|
||||||
html`<input type="button" value="Block" @click=${this.block}></input>`;
|
html`<button class="w3-button w3-dark-grey" @click=${this.block}>Block</button>`;
|
||||||
}
|
}
|
||||||
let edit_profile = this.editing ? html`
|
let edit_profile = this.editing ? html`
|
||||||
<div style="flex: 1 0 50%; display: flex; flex-direction: column">
|
<div style="flex: 1 0 50%; display: flex; flex-direction: column; gap: 8px">
|
||||||
|
<div class="w3-container">
|
||||||
<div>
|
<div>
|
||||||
<label for="name">Name:</label>
|
<label for="name">Name:</label>
|
||||||
<input type="text" id="name" value=${this.editing.name} @input=${event => this.editing = Object.assign({}, this.editing, {name: event.srcElement.value})}></input>
|
<input class="w3-input w3-dark-grey" type="text" id="name" value=${this.editing.name} @input=${event => this.editing = Object.assign({}, this.editing, {name: event.srcElement.value})}></input>
|
||||||
</div>
|
</div>
|
||||||
<div><label for="description">Description:</label></div>
|
<div><label for="description">Description:</label></div>
|
||||||
<textarea style="flex: 1 0" id="description" @input=${event => this.editing = Object.assign({}, this.editing, {description: event.srcElement.value})}>${this.editing.description}</textarea>
|
<textarea class="w3-input w3-dark-grey" style="resize: vertical" rows="8" id="description" @input=${event => this.editing = Object.assign({}, this.editing, {description: event.srcElement.value})}>${this.editing.description}</textarea>
|
||||||
<div>
|
<div>
|
||||||
<label for="public_web_hosting">Public Web Hosting:</label>
|
<label for="public_web_hosting">Public Web Hosting:</label>
|
||||||
<input type="checkbox" id="public_web_hosting" ?checked=${this.editing.publicWebHosting} @input=${event => self.editing = Object.assign({}, self.editing, {publicWebHosting: event.srcElement.checked})}></input>
|
<input class="w3-check w3-dark-grey" type="checkbox" id="public_web_hosting" ?checked=${this.editing.publicWebHosting} @input=${event => self.editing = Object.assign({}, self.editing, {publicWebHosting: event.srcElement.checked})}></input>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<input type="button" value="Attach Image" @click=${this.attach_image}></input>
|
<button class="w3-button w3-dark-grey" @click=${this.attach_image}>Attach Image</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>` : null;
|
</div>` : null;
|
||||||
let image = typeof(profile.image) == 'string' ? profile.image : profile.image?.link;
|
let image = typeof(profile.image) == 'string' ? profile.image : profile.image?.link;
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
import {LitElement, html} from './lit-all.min.js';
|
import {LitElement, html} from './lit-all.min.js';
|
||||||
import * as tfrpc from '/static/tfrpc.js';
|
import * as tfrpc from '/static/tfrpc.js';
|
||||||
|
import {styles} from './tf-styles.js';
|
||||||
|
|
||||||
class TfTabConnectionsElement extends LitElement {
|
class TfTabConnectionsElement extends LitElement {
|
||||||
static get properties() {
|
static get properties() {
|
||||||
@ -12,6 +13,8 @@ class TfTabConnectionsElement extends LitElement {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
static styles = styles;
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
let self = this;
|
let self = this;
|
||||||
@ -55,7 +58,7 @@ class TfTabConnectionsElement extends LitElement {
|
|||||||
let self = this;
|
let self = this;
|
||||||
return html`
|
return html`
|
||||||
<li>
|
<li>
|
||||||
<input type="button" @click=${() => self._tunnel(connection.tunnel.id, connection.pubkey)} value="Connect"></input>
|
<button class="w3-button w3-dark-grey" @click=${() => self._tunnel(connection.tunnel.id, connection.pubkey)}>Connect</button>
|
||||||
<tf-user id=${connection.pubkey} .users=${this.users}></tf-user> 📡
|
<tf-user id=${connection.pubkey} .users=${this.users}></tf-user> 📡
|
||||||
</li>
|
</li>
|
||||||
`;
|
`;
|
||||||
@ -64,7 +67,7 @@ class TfTabConnectionsElement extends LitElement {
|
|||||||
render_broadcast(connection) {
|
render_broadcast(connection) {
|
||||||
return html`
|
return html`
|
||||||
<li>
|
<li>
|
||||||
<input type="button" @click=${() => tfrpc.rpc.connect(connection)} value="Connect"></input>
|
<button class="w3-button w3-dark-grey" @click=${() => tfrpc.rpc.connect(connection)}>Connect</button>
|
||||||
<tf-user id=${connection.pubkey} .users=${this.users}></tf-user>
|
<tf-user id=${connection.pubkey} .users=${this.users}></tf-user>
|
||||||
${this.render_connection_summary(connection)}
|
${this.render_connection_summary(connection)}
|
||||||
</li>
|
</li>
|
||||||
@ -78,7 +81,7 @@ class TfTabConnectionsElement extends LitElement {
|
|||||||
|
|
||||||
render_connection(connection) {
|
render_connection(connection) {
|
||||||
return html`
|
return html`
|
||||||
<input type="button" @click=${() => tfrpc.rpc.closeConnection(connection.id)} value="Close"></input>
|
<button class="w3-button w3-dark-grey" @click=${() => tfrpc.rpc.closeConnection(connection.id)}>Close</button>
|
||||||
<tf-user id=${connection.id} .users=${this.users}></tf-user>
|
<tf-user id=${connection.id} .users=${this.users}></tf-user>
|
||||||
${connection.tunnel !== undefined ? '🚇' : html`(${connection.host}:${connection.port})`}
|
${connection.tunnel !== undefined ? '🚇' : html`(${connection.host}:${connection.port})`}
|
||||||
<ul>
|
<ul>
|
||||||
@ -91,11 +94,10 @@ class TfTabConnectionsElement extends LitElement {
|
|||||||
render() {
|
render() {
|
||||||
let self = this;
|
let self = this;
|
||||||
return html`
|
return html`
|
||||||
|
<div class="w3-container">
|
||||||
<h2>New Connection</h2>
|
<h2>New Connection</h2>
|
||||||
<div style="display: flex; flex-direction: column">
|
<textarea class="w3-input w3-dark-grey" id="code"></textarea>
|
||||||
<textarea id="code"></textarea>
|
<button class="w3-button w3-dark-grey" @click=${() => tfrpc.rpc.connect(self.renderRoot.getElementById('code').value)}>Connect</button>
|
||||||
</div>
|
|
||||||
<input type="button" @click=${() => tfrpc.rpc.connect(self.renderRoot.getElementById('code').value)} value="Connect"></input>
|
|
||||||
<h2>Broadcasts</h2>
|
<h2>Broadcasts</h2>
|
||||||
<ul>
|
<ul>
|
||||||
${this.broadcasts.filter(x => x.address).map(x => self.render_broadcast(x))}
|
${this.broadcasts.filter(x => x.address).map(x => self.render_broadcast(x))}
|
||||||
@ -110,8 +112,8 @@ class TfTabConnectionsElement extends LitElement {
|
|||||||
<ul>
|
<ul>
|
||||||
${this.stored_connections.map(x => html`
|
${this.stored_connections.map(x => html`
|
||||||
<li>
|
<li>
|
||||||
<input type="button" @click=${() => self.forget_stored_connection(x)} value="Forget"></input>
|
<button class="w3-button w3-dark-grey" @click=${() => self.forget_stored_connection(x)}>Forget</button>
|
||||||
<input type="button" @click=${() => tfrpc.rpc.connect(x)} value="Connect"></input>
|
<button class="w3-button w3-dark-grey" @click=${() => tfrpc.rpc.connect(x)}>Connect</button>
|
||||||
${x.address}:${x.port} <tf-user id=${x.pubkey} .users=${self.users}></tf-user>
|
${x.address}:${x.port} <tf-user id=${x.pubkey} .users=${self.users}></tf-user>
|
||||||
</li>
|
</li>
|
||||||
`)}
|
`)}
|
||||||
@ -120,6 +122,7 @@ class TfTabConnectionsElement extends LitElement {
|
|||||||
<ul>
|
<ul>
|
||||||
${this.identities.map(x => html`<li><tf-user id=${x} .users=${this.users}></tf-user></li>`)}
|
${this.identities.map(x => html`<li><tf-user id=${x} .users=${this.users}></tf-user></li>`)}
|
||||||
</ul>
|
</ul>
|
||||||
|
</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -99,9 +99,9 @@ class TfTabQueryElement extends LitElement {
|
|||||||
}
|
}
|
||||||
let self = this;
|
let self = this;
|
||||||
return html`
|
return html`
|
||||||
<div style="display: flex; flex-direction: row">
|
<div style="display: flex; flex-direction: row; gap: 4px">
|
||||||
<textarea id="search" rows=8 style="flex: 1" @keydown=${this.search_keydown}>${this.query}</textarea>
|
<textarea id="search" rows=8 class="w3-input w3-dark-grey" style="flex: 1; resize: vertical" @keydown=${this.search_keydown}>${this.query}</textarea>
|
||||||
<input type="button" value="Execute" @click=${(event) => self.search(self.renderRoot.getElementById('search').value)}></input>
|
<button class="w3-button w3-dark-grey" @click=${(event) => self.search(self.renderRoot.getElementById('search').value)}>Execute</button>
|
||||||
</div>
|
</div>
|
||||||
<div ?hidden=${this.duration === undefined}>Took ${this.duration / 1000.0} seconds.</div>
|
<div ?hidden=${this.duration === undefined}>Took ${this.duration / 1000.0} seconds.</div>
|
||||||
<div ?hidden=${this.duration !== undefined}>Executing...</div>
|
<div ?hidden=${this.duration !== undefined}>Executing...</div>
|
||||||
|
@ -75,9 +75,9 @@ class TfTabSearchElement extends LitElement {
|
|||||||
}
|
}
|
||||||
let self = this;
|
let self = this;
|
||||||
return html`
|
return html`
|
||||||
<div style="display: flex; flex-direction: row">
|
<div style="display: flex; flex-direction: row; gap: 4px">
|
||||||
<input type="text" id="search" value=${this.query} style="flex: 1" @keydown=${this.search_keydown}></input>
|
<input type="text" class="w3-input w3-dark-grey" id="search" value=${this.query} style="flex: 1" @keydown=${this.search_keydown}></input>
|
||||||
<input type="button" value="Search" @click=${(event) => self.search(self.renderRoot.getElementById('search').value)}></input>
|
<button class="w3-button w3-dark-grey" @click=${(event) => self.search(self.renderRoot.getElementById('search').value)}>Search</button>
|
||||||
</div>
|
</div>
|
||||||
<tf-news id="news" whoami=${this.whoami} .messages=${this.messages} .users=${this.users} .expanded=${this.expanded} @tf-expand=${this.on_expand}></tf-news>
|
<tf-news id="news" whoami=${this.whoami} .messages=${this.messages} .users=${this.users} .expanded=${this.expanded} @tf-expand=${this.on_expand}></tf-news>
|
||||||
`;
|
`;
|
||||||
|
Loading…
Reference in New Issue
Block a user