refine UI and add styles
This commit is contained in:
weboko
parent
6b05527ea0
commit
0fbad7972f
|
|
@ -8,6 +8,62 @@
|
||||||
<link rel="manifest" href="./manifest.json" />
|
<link rel="manifest" href="./manifest.json" />
|
||||||
<link rel="icon" href="./favicon.ico" />
|
<link rel="icon" href="./favicon.ico" />
|
||||||
<style>
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
word-wrap: break-word;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10px;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 800px;
|
||||||
|
min-width: 300px;
|
||||||
|
max-width: 800px;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3:last-of-type {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 span,
|
||||||
|
h3 span {
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
.progress {
|
.progress {
|
||||||
color: #9ea13b;
|
color: #9ea13b;
|
||||||
}
|
}
|
||||||
|
|
@ -19,43 +75,115 @@
|
||||||
.error {
|
.error {
|
||||||
color: #c84740;
|
color: #c84740;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
button.progress {
|
||||||
|
color: white;
|
||||||
|
background-color: #9ea13b;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.success {
|
||||||
|
color: white;
|
||||||
|
background-color: #3ba183;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.error {
|
||||||
|
color: white;
|
||||||
|
background-color: #c84740;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pairingInfo {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pairingInfo input {
|
||||||
|
display: block;
|
||||||
|
min-width: 250px;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 600px;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
padding: 5px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pairingInfo button {
|
||||||
|
flex-grow: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pairingInfo button + button {
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chatArea {
|
||||||
|
}
|
||||||
|
|
||||||
|
.chatArea ul {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chatArea ul li + li {
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chatArea div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chatArea div > * {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
padding: 5px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<p><b>Waku Node Status:</b> <span id="waku-status">connecting...</span></p>
|
<div class="container">
|
||||||
<p id="handshake-span">
|
<div class="status">
|
||||||
<b>Handshake Status:</b> <span id="handshake-status">-</span>
|
<h3>
|
||||||
</p>
|
<b>Waku Node Status:</b> <span id="waku-status">connecting...</span>
|
||||||
|
</h3>
|
||||||
|
<h3 id="handshake-span">
|
||||||
|
<b>Handshake Status:</b>
|
||||||
|
<span id="handshake-status" class="progress">waiting for waku</span>
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="qr-url-container">
|
<div class="pairingInfo" id="qr-url-container" style="display: none">
|
||||||
<p>
|
<h2>Pairing information</h2>
|
||||||
<b>URL for handshake:</b>
|
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="qr-url"
|
id="qr-url"
|
||||||
style="display: inline-block; width: 250px"
|
|
||||||
readonly
|
readonly
|
||||||
|
placeholder="generating URL..."
|
||||||
/>
|
/>
|
||||||
</p>
|
<div>
|
||||||
<button id="copy-url" style="width: 100px">Copy URL</button>
|
<button id="copy-url" style="width: 100px">Copy URL</button>
|
||||||
<button id="open-tab" style="width: 100px">Open in new</button>
|
<button id="open-tab" style="width: 100px">Open in new</button>
|
||||||
</div>
|
</div>
|
||||||
|
<canvas id="qr-canvas"></canvas>
|
||||||
|
</div>
|
||||||
|
|
||||||
<canvas id="qr-canvas"></canvas>
|
<div class="chatArea" id="chat-area" style="display: none">
|
||||||
<!-- <a href="#" id="qr-url" style="display: none" target="_blank"
|
<h2>Chat</h2>
|
||||||
>Open QR code link in new window instead of scanning it.</a
|
<ul id="messages"></ul>
|
||||||
> -->
|
|
||||||
|
|
||||||
<div id="chat-area" style="display: none">
|
<div>
|
||||||
<label for="nick-input">Your nickname</label>
|
<input id="nick-input" placeholder="Choose a nickname" type="text" />
|
||||||
<input id="nick-input" placeholder="Choose a nickname" type="text" />
|
<textarea
|
||||||
<label for="text-input">Message text</label>
|
id="text-input"
|
||||||
<input id="text-input" placeholder="Type your message here" type="text" />
|
placeholder="Type your message here"
|
||||||
<button id="send-btn" type="button" disabled>Send message</button>
|
type="text"
|
||||||
<span id="sending-status"></span>
|
></textarea>
|
||||||
|
<button id="send-btn" type="button" disabled>Send message</button>
|
||||||
<h4 class="mu1">Messages</h4>
|
</div>
|
||||||
<ul id="messages"></ul>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="./index.js"></script>
|
<script src="./index.js"></script>
|
||||||
|
|
|
||||||
|
|
@ -42,10 +42,6 @@ async function main() {
|
||||||
const myStaticKey = noise.generateX25519KeyPair();
|
const myStaticKey = noise.generateX25519KeyPair();
|
||||||
const urlPairingInfo = getPairingInfoFromURL();
|
const urlPairingInfo = getPairingInfoFromURL();
|
||||||
|
|
||||||
if (urlPairingInfo) {
|
|
||||||
ui.shareInfo.hide();
|
|
||||||
}
|
|
||||||
|
|
||||||
const pairingObj = new noise.WakuPairing(
|
const pairingObj = new noise.WakuPairing(
|
||||||
sender,
|
sender,
|
||||||
responder,
|
responder,
|
||||||
|
|
@ -66,6 +62,7 @@ async function main() {
|
||||||
const pairingURL = buildPairingURLFromObj(pairingObj);
|
const pairingURL = buildPairingURLFromObj(pairingObj);
|
||||||
ui.shareInfo.setURL(pairingURL);
|
ui.shareInfo.setURL(pairingURL);
|
||||||
ui.shareInfo.renderQR(pairingURL);
|
ui.shareInfo.renderQR(pairingURL);
|
||||||
|
ui.shareInfo.show();
|
||||||
}
|
}
|
||||||
|
|
||||||
[encoder, decoder] = await pExecute;
|
[encoder, decoder] = await pExecute;
|
||||||
|
|
@ -246,8 +243,10 @@ function initUI() {
|
||||||
qrUrl.value = url;
|
qrUrl.value = url;
|
||||||
},
|
},
|
||||||
hide() {
|
hide() {
|
||||||
qrCanvas.remove();
|
qrUrlContainer.style.display = "none";
|
||||||
qrUrlContainer.remove();
|
},
|
||||||
|
show() {
|
||||||
|
qrUrlContainer.style.display = "flex";
|
||||||
},
|
},
|
||||||
renderQR(url) {
|
renderQR(url) {
|
||||||
QRCode.toCanvas(qrCanvas, url, (err) => {
|
QRCode.toCanvas(qrCanvas, url, (err) => {
|
||||||
|
|
@ -316,8 +315,7 @@ function initUI() {
|
||||||
`;
|
`;
|
||||||
},
|
},
|
||||||
_status(text, className) {
|
_status(text, className) {
|
||||||
sendingStatusSpan.innerText = text;
|
sendButton.className = className;
|
||||||
sendingStatusSpan.className = className;
|
|
||||||
},
|
},
|
||||||
onReceive({ payload }) {
|
onReceive({ payload }) {
|
||||||
const { timestamp, nick, text } = ProtoChatMessage.decode(payload);
|
const { timestamp, nick, text } = ProtoChatMessage.decode(payload);
|
||||||
|
|
@ -353,7 +351,7 @@ function initUI() {
|
||||||
},
|
},
|
||||||
hide() {
|
hide() {
|
||||||
this.shareInfo.hide();
|
this.shareInfo.hide();
|
||||||
chatArea.remove();
|
chatArea.style.display = "none";
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue