tasiaiso/tildefriends
1
0
Fork 0
forked from cory/tildefriends
Code Issues Pull Requests Releases 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
Download Patch File Download Diff File Expand all files Collapse all files

44
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>
<tf-user id=${connection.pubkey} .users=${this.users}></tf-user>
${this.render_connection_summary(connection)}
<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}
<tf-user id=${x.pubkey} .users=${self.users}></tf-user>
<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>