forked from cory/tildefriends
Trying to make the ssb connections tab not overflow all the layouts. Dunno.
This commit is contained in:
parent
64bbd383de
commit
28d08e013f
@ -1,5 +1,5 @@
|
||||
{
|
||||
"type": "tildefriends-app",
|
||||
"emoji": "🐌",
|
||||
"previous": "&hKBq89Q1oOiSK8ZtiA67MciAaMNCRK5CuYtOeoX94qU=.sha256"
|
||||
"previous": "&kHFHpwFhnRVEbFQxuKlOUXPs/eJ2cOvWgS8poXm8WNM=.sha256"
|
||||
}
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user