cory/tildefriends
4
5
Fork 1
Code Issues 29 Pull Requests 1 Actions Releases 26 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",
"emoji": "🐌",
"previous": "&hKBq89Q1oOiSK8ZtiA67MciAaMNCRK5CuYtOeoX94qU=.sha256"
"previous": "&kHFHpwFhnRVEbFQxuKlOUXPs/eJ2cOvWgS8poXm8WNM=.sha256"
}

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

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