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="icon" href="./favicon.ico" />
|
||||
<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 {
|
||||
color: #9ea13b;
|
||||
}
|
||||
|
|
@ -19,43 +75,115 @@
|
|||
.error {
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<p><b>Waku Node Status:</b> <span id="waku-status">connecting...</span></p>
|
||||
<p id="handshake-span">
|
||||
<b>Handshake Status:</b> <span id="handshake-status">-</span>
|
||||
</p>
|
||||
<div class="container">
|
||||
<div class="status">
|
||||
<h3>
|
||||
<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">
|
||||
<p>
|
||||
<b>URL for handshake:</b>
|
||||
<div class="pairingInfo" id="qr-url-container" style="display: none">
|
||||
<h2>Pairing information</h2>
|
||||
<input
|
||||
type="text"
|
||||
id="qr-url"
|
||||
style="display: inline-block; width: 250px"
|
||||
readonly
|
||||
placeholder="generating URL..."
|
||||
/>
|
||||
</p>
|
||||
<button id="copy-url" style="width: 100px">Copy URL</button>
|
||||
<button id="open-tab" style="width: 100px">Open in new</button>
|
||||
</div>
|
||||
<div>
|
||||
<button id="copy-url" style="width: 100px">Copy URL</button>
|
||||
<button id="open-tab" style="width: 100px">Open in new</button>
|
||||
</div>
|
||||
<canvas id="qr-canvas"></canvas>
|
||||
</div>
|
||||
|
||||
<canvas id="qr-canvas"></canvas>
|
||||
<!-- <a href="#" id="qr-url" style="display: none" target="_blank"
|
||||
>Open QR code link in new window instead of scanning it.</a
|
||||
> -->
|
||||
<div class="chatArea" id="chat-area" style="display: none">
|
||||
<h2>Chat</h2>
|
||||
<ul id="messages"></ul>
|
||||
|
||||
<div id="chat-area" style="display: none">
|
||||
<label for="nick-input">Your nickname</label>
|
||||
<input id="nick-input" placeholder="Choose a nickname" type="text" />
|
||||
<label for="text-input">Message text</label>
|
||||
<input id="text-input" placeholder="Type your message here" type="text" />
|
||||
<button id="send-btn" type="button" disabled>Send message</button>
|
||||
<span id="sending-status"></span>
|
||||
|
||||
<h4 class="mu1">Messages</h4>
|
||||
<ul id="messages"></ul>
|
||||
<div>
|
||||
<input id="nick-input" placeholder="Choose a nickname" type="text" />
|
||||
<textarea
|
||||
id="text-input"
|
||||
placeholder="Type your message here"
|
||||
type="text"
|
||||
></textarea>
|
||||
<button id="send-btn" type="button" disabled>Send message</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./index.js"></script>
|
||||
|
|
|
|||
|
|
@ -42,10 +42,6 @@ async function main() {
|
|||
const myStaticKey = noise.generateX25519KeyPair();
|
||||
const urlPairingInfo = getPairingInfoFromURL();
|
||||
|
||||
if (urlPairingInfo) {
|
||||
ui.shareInfo.hide();
|
||||
}
|
||||
|
||||
const pairingObj = new noise.WakuPairing(
|
||||
sender,
|
||||
responder,
|
||||
|
|
@ -66,6 +62,7 @@ async function main() {
|
|||
const pairingURL = buildPairingURLFromObj(pairingObj);
|
||||
ui.shareInfo.setURL(pairingURL);
|
||||
ui.shareInfo.renderQR(pairingURL);
|
||||
ui.shareInfo.show();
|
||||
}
|
||||
|
||||
[encoder, decoder] = await pExecute;
|
||||
|
|
@ -246,8 +243,10 @@ function initUI() {
|
|||
qrUrl.value = url;
|
||||
},
|
||||
hide() {
|
||||
qrCanvas.remove();
|
||||
qrUrlContainer.remove();
|
||||
qrUrlContainer.style.display = "none";
|
||||
},
|
||||
show() {
|
||||
qrUrlContainer.style.display = "flex";
|
||||
},
|
||||
renderQR(url) {
|
||||
QRCode.toCanvas(qrCanvas, url, (err) => {
|
||||
|
|
@ -316,8 +315,7 @@ function initUI() {
|
|||
`;
|
||||
},
|
||||
_status(text, className) {
|
||||
sendingStatusSpan.innerText = text;
|
||||
sendingStatusSpan.className = className;
|
||||
sendButton.className = className;
|
||||
},
|
||||
onReceive({ payload }) {
|
||||
const { timestamp, nick, text } = ProtoChatMessage.decode(payload);
|
||||
|
|
@ -353,7 +351,7 @@ function initUI() {
|
|||
},
|
||||
hide() {
|
||||
this.shareInfo.hide();
|
||||
chatArea.remove();
|
||||
chatArea.style.display = "none";
|
||||
},
|
||||
};
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue