cory/tildefriends
4
5
Fork 1
Code Issues 31 Pull Requests 1 Actions Releases 24 Wiki Activity

Trying to make the ssb connections tab not overflow all the layouts. Dunno.

Browse Source
This commit is contained in:
Cory McWilliams 2024-04-13 19:29:31 -04:00
parent 64bbd383de
commit 28d08e013f
2 changed files with 26 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/ssb.json
View File

@ -1,5 +1,5 @@
{ {
"type": "tildefriends-app", "type": "tildefriends-app",
"emoji": "🐌", "emoji": "🐌",
"previous": "&hKBq89Q1oOiSK8ZtiA67MciAaMNCRK5CuYtOeoX94qU=.sha256" "previous": "&kHFHpwFhnRVEbFQxuKlOUXPs/eJ2cOvWgS8poXm8WNM=.sha256"
} }

44
apps/ssb/tf-tab-connections.js
View File

@ -33,9 +33,9 @@ class TfTabConnectionsElement extends LitElement {
render_connection_summary(connection) { render_connection_summary(connection) {
if (connection.address && connection.port) { if (connection.address && connection.port) {
return html`(<small>${connection.address}:${connection.port}</small>)`; return html`<div><small>${connection.address}:${connection.port}</small></div>`;
} else if (connection.tunnel) { } else if (connection.tunnel) {
return html`(room peer)`; return html`<div>room peer</div>`;
} else { } else {
return JSON.stringify(connection); return JSON.stringify(connection);
} }
@ -73,15 +73,17 @@ class TfTabConnectionsElement extends LitElement {
render_broadcast(connection) { render_broadcast(connection) {
return html` return html`
<li> <li class="w3-bar" style="overflow: hidden; overflow-wrap: nowrap">
<button <button
class="w3-button w3-theme-d1" class="w3-bar-item w3-button w3-theme-d1"
@click=${() => tfrpc.rpc.connect(connection)} @click=${() => tfrpc.rpc.connect(connection)}
> >
Connect Connect
</button> </button>
<tf-user id=${connection.pubkey} .users=${this.users}></tf-user> <div class="w3-bar-item">
${this.render_connection_summary(connection)} <tf-user id=${connection.pubkey} .users=${this.users}></tf-user>
${this.render_connection_summary(connection)}
</div>
</li> </li>
`; `;
} }
@ -115,7 +117,7 @@ class TfTabConnectionsElement extends LitElement {
render() { render() {
let self = this; let self = this;
return html` return html`
<div class="w3-container"> <div class="w3-container" style="box-sizing: border-box">
<h2>New Connection</h2> <h2>New Connection</h2>
<textarea class="w3-input w3-theme-d1" id="code"></textarea> <textarea class="w3-input w3-theme-d1" id="code"></textarea>
<button <button
@ -126,45 +128,49 @@ class TfTabConnectionsElement extends LitElement {
Connect Connect
</button> </button>
<h2>Broadcasts</h2> <h2>Broadcasts</h2>
<ul> <ul class="w3-ul w3-border">
${this.broadcasts ${this.broadcasts
.filter((x) => x.address) .filter((x) => x.address)
.map((x) => self.render_broadcast(x))} .map((x) => self.render_broadcast(x))}
</ul> </ul>
<h2>Connections</h2> <h2>Connections</h2>
<ul> <ul class="w3-ul w3-border">
${this.connections ${this.connections
.filter((x) => x.tunnel === undefined) .filter((x) => x.tunnel === undefined)
.map((x) => html` <li>${this.render_connection(x)}</li> `)} .map((x) => html` <li class="w3-bar">${this.render_connection(x)}</li> `)}
</ul> </ul>
<h2>Stored Connections (WIP)</h2> <h2>Stored Connections</h2>
<ul> <ul class="w3-ul w3-border">
${this.stored_connections.map( ${this.stored_connections.map(
(x) => html` (x) => html`
<li> <li class="w3-bar">
<button <button
class="w3-button w3-theme-d1" class="w3-bar-item w3-button w3-theme-d1"
@click=${() => self.forget_stored_connection(x)} @click=${() => self.forget_stored_connection(x)}
> >
Forget Forget
</button> </button>
<button <button
class="w3-button w3-theme-d1" class="w3-bar-item w3-button w3-theme-d1"
@click=${() => tfrpc.rpc.connect(x)} @click=${() => tfrpc.rpc.connect(x)}
> >
Connect Connect
</button> </button>
${x.address}:${x.port} <div class="w3-bar-item">
<tf-user id=${x.pubkey} .users=${self.users}></tf-user> <tf-user id=${x.pubkey} .users=${self.users}></tf-user>
<div><small>${x.address}:${x.port}</small></div>
</div>
</li> </li>
` `
)} )}
</ul> </ul>
<h2>Local Accounts</h2> <h2>Local Accounts</h2>
<ul> <ul class="w3-ul w3-border">
${this.identities.map( ${this.identities.map(
(x) => (x) =>
html`<li><tf-user id=${x} .users=${this.users}></tf-user></li>` html`<li class="w3-bar">
<tf-user id=${x} .users=${this.users}></tf-user>
</li>`
)} )}
</ul> </ul>
</div> </div>