xP: make non-connected states more apparent

This commit is contained in:
Přemysl Eric Janouch 2022-09-16 03:18:53 +02:00
parent d5153fe354
commit 430968e5d5
Signed by: p
GPG Key ID: A0420B94F92B9493
2 changed files with 19 additions and 5 deletions

View File

@ -13,6 +13,16 @@ body {
height: 100dvh; height: 100dvh;
} }
.overlay {
padding: .6em .9em;
background: #eee;
border: 1px outset #eee;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.title, .status { .title, .status {
padding: .05em .3em; padding: .05em .3em;
background: #eee; background: #eee;

View File

@ -41,7 +41,7 @@ class RelayRpc extends EventTarget {
} }
this.ws.onclose = event => { this.ws.onclose = event => {
let message = "Connection closed: " + let message = "Connection closed: " +
event.code + " (" + event.reason + ")" event.reason + " (" + event.code + ")"
for (const seq in this.promised) for (const seq in this.promised)
this.promised[seq].reject(message) this.promised[seq].reject(message)
@ -811,14 +811,18 @@ let Input = {
let Main = { let Main = {
view: vnode => { view: vnode => {
let state = "Connected" let overlay = undefined
if (connecting) if (connecting)
state = "Connecting..." overlay = m('.overlay', {}, "Connecting...")
else if (rpc.ws === undefined) else if (rpc.ws === undefined)
state = "Disconnected" overlay = m('.overlay', {}, [
m('', {}, "Disconnected"),
m('', {}, m('small', {}, "Reload page to reconnect.")),
])
return m('.xP', {}, [ return m('.xP', {}, [
m('.title', {}, [`xP (${state})`, m(Toolbar)]), overlay,
m('.title', {}, [`xP`, m(Toolbar)]),
m('.middle', {}, [m(BufferList), m(BufferContainer)]), m('.middle', {}, [m(BufferList), m(BufferContainer)]),
m(Status), m(Status),
m(Input), m(Input),