-
+
+
sent the following message:
-
+
-
+
-
-
+
+
-
+
-
+
diff --git a/public/scripts/ui.js b/public/scripts/ui.js
index cd1aedd..25733b8 100644
--- a/public/scripts/ui.js
+++ b/public/scripts/ui.js
@@ -10,7 +10,7 @@ window.pasteMode.activated = false;
// set display name
Events.on('display-name', e => {
const me = e.detail.message;
- const $displayName = $('displayName')
+ const $displayName = $('display-name')
$displayName.textContent = 'You are known as ' + me.displayName;
$displayName.title = me.deviceName;
});
@@ -497,10 +497,10 @@ class ReceiveDialog extends Dialog {
class ReceiveFileDialog extends ReceiveDialog {
constructor() {
- super('receiveFileDialog');
+ super('receive-file-dialog');
- this.$shareOrDownloadBtn = this.$el.querySelector('#shareOrDownload');
- this.$receiveTitleNode = this.$el.querySelector('#receiveTitle')
+ this.$shareOrDownloadBtn = this.$el.querySelector('#share-or-download');
+ this.$receiveTitleNode = this.$el.querySelector('#receive-title')
Events.on('files-received', e => this._onFilesReceived(e.detail.sender, e.detail.files, e.detail.request));
this._filesQueue = [];
@@ -659,15 +659,15 @@ class ReceiveFileDialog extends ReceiveDialog {
class ReceiveRequestDialog extends ReceiveDialog {
constructor() {
- super('receiveRequestDialog');
+ super('receive-request-dialog');
- this.$requestingPeerDisplayNameNode = this.$el.querySelector('#requestingPeerDisplayName');
- this.$fileStemNode = this.$el.querySelector('#fileStem');
- this.$fileExtensionNode = this.$el.querySelector('#fileExtension');
- this.$fileOtherNode = this.$el.querySelector('#fileOther');
+ this.$requestingPeerDisplayNameNode = this.$el.querySelector('#requesting-peer-display-name');
+ this.$fileStemNode = this.$el.querySelector('#file-stem');
+ this.$fileExtensionNode = this.$el.querySelector('#file-extension');
+ this.$fileOtherNode = this.$el.querySelector('#file-other');
- this.$acceptRequestBtn = this.$el.querySelector('#acceptRequest');
- this.$declineRequestBtn = this.$el.querySelector('#declineRequest');
+ this.$acceptRequestBtn = this.$el.querySelector('#accept-request');
+ this.$declineRequestBtn = this.$el.querySelector('#decline-request');
this.$acceptRequestBtn.addEventListener('click', _ => this._respondToFileTransferRequest(true));
this.$declineRequestBtn.addEventListener('click', _ => this._respondToFileTransferRequest(false));
@@ -748,12 +748,12 @@ class ReceiveRequestDialog extends ReceiveDialog {
class PairDeviceDialog extends Dialog {
constructor() {
- super('pairDeviceDialog');
+ super('pair-device-dialog');
$('pair-device').addEventListener('click', _ => this._pairDeviceInitiate());
- this.$inputRoomKeyChars = this.$el.querySelectorAll('#keyInputContainer>input');
+ this.$inputRoomKeyChars = this.$el.querySelectorAll('#key-input-container>input');
this.$submitBtn = this.$el.querySelector('button[type="submit"]');
- this.$roomKey = this.$el.querySelector('#roomKey');
- this.$qrCode = this.$el.querySelector('#roomKeyQrCode');
+ this.$roomKey = this.$el.querySelector('#room-key');
+ this.$qrCode = this.$el.querySelector('#room-key-qr-code');
this.$clearSecretsBtn = $('clear-pair-devices');
this.$footerInstructionsPairedDevices = $('and-by-paired-devices');
let createJoinForm = this.$el.querySelector('form');
@@ -827,7 +827,7 @@ class PairDeviceDialog extends Dialog {
}
evaluateRoomKeyChars() {
- if (this.$el.querySelectorAll('#keyInputContainer>input:placeholder-shown').length > 0) {
+ if (this.$el.querySelectorAll('#key-input-container>input:placeholder-shown').length > 0) {
this.$submitBtn.setAttribute("disabled", "");
} else {
this.inputRoomKey = "";
@@ -970,7 +970,7 @@ class PairDeviceDialog extends Dialog {
class ClearDevicesDialog extends Dialog {
constructor() {
- super('clearDevicesDialog');
+ super('clear-devices-dialog');
$('clear-pair-devices').addEventListener('click', _ => this._onClearPairDevices());
let clearDevicesForm = this.$el.querySelector('form');
clearDevicesForm.addEventListener('submit', _ => this._onSubmit());
@@ -988,10 +988,10 @@ class ClearDevicesDialog extends Dialog {
class SendTextDialog extends Dialog {
constructor() {
- super('sendTextDialog');
+ super('send-text-dialog');
Events.on('text-recipient', e => this._onRecipient(e.detail.peerId, e.detail.deviceName));
- this.$text = this.$el.querySelector('#textInput');
- this.$peerDisplayName = this.$el.querySelector('#textSendPeerDisplayName');
+ this.$text = this.$el.querySelector('#text-input');
+ this.$peerDisplayName = this.$el.querySelector('#text-send-peer-display-name');
this.$form = this.$el.querySelector('form');
this.$submit = this.$el.querySelector('button[type="submit"]');
this.$form.addEventListener('submit', _ => this._send());
@@ -1048,7 +1048,7 @@ class SendTextDialog extends Dialog {
class ReceiveTextDialog extends Dialog {
constructor() {
- super('receiveTextDialog');
+ super('receive-text-dialog');
Events.on('text-received', e => this._onText(e.detail.text, e.detail.peerId));
this.$text = this.$el.querySelector('#text');
this.$copy = this.$el.querySelector('#copy');
@@ -1059,7 +1059,7 @@ class ReceiveTextDialog extends Dialog {
Events.on("keydown", e => this._onKeyDown(e));
- this.$receiveTextPeerDisplayNameNode = this.$el.querySelector('#receiveTextPeerDisplayName');
+ this.$receiveTextPeerDisplayNameNode = this.$el.querySelector('#receive-text-peer-display-name');
this._receiveTextQueue = [];
}
@@ -1120,13 +1120,13 @@ class ReceiveTextDialog extends Dialog {
class Base64ZipDialog extends Dialog {
constructor() {
- super('base64PasteDialog');
+ super('base64-paste-dialog');
const urlParams = new URL(window.location).searchParams;
const base64Text = urlParams.get('base64text');
const base64Zip = urlParams.get('base64zip');
const base64Hash = window.location.hash.substring(1);
- this.$pasteBtn = this.$el.querySelector('#base64PasteBtn');
+ this.$pasteBtn = this.$el.querySelector('#base64-paste-btn');
if (base64Text) {
this.show();
@@ -1353,7 +1353,7 @@ class Notifications {
}
_download(notification) {
- $('shareOrDownload').click();
+ $('share-or-download').click();
notification.close();
}
diff --git a/public/styles.css b/public/styles.css
index 25be4a1..d3c05ac 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -580,7 +580,7 @@ x-dialog x-paper {
will-change: transform;
}
-#pairDeviceDialog x-paper {
+#pair-device-dialog x-paper {
position: absolute;
top: max(50%, 350px);
height: 650px;
@@ -619,13 +619,13 @@ x-dialog .font-subheading {
/* PairDevicesDialog */
-#keyInputContainer {
+#key-input-container {
width: 100%;
display: flex;
justify-content: center;
}
-#keyInputContainer>input {
+#key-input-container>input {
width: 45px;
height: 45px;
font-size: 30px;
@@ -641,15 +641,15 @@ x-dialog .font-subheading {
justify-content: center;
}
-#keyInputContainer>input + * {
+#key-input-container>input + * {
margin-left: 6px;
}
-#keyInputContainer>input:nth-of-type(4) {
+#key-input-container>input:nth-of-type(4) {
margin-left: 18px;
}
-#roomKey {
+#room-key {
font-size: 50px;
letter-spacing: min(calc((100vw - 80px - 99px) / 100 * 7), 23px);
display: inline-block;
@@ -657,20 +657,20 @@ x-dialog .font-subheading {
margin: 15px -15px;
}
-#roomKeyQrCode {
+#room-key-qr-code {
padding: inherit;
margin: auto;
width: 150px;
height: 150px;
}
-#pairDeviceDialog hr {
+#pair-device-dialog hr {
margin-top: 40px;
margin-bottom: 40px;
width: 100%;
}
-#pairDeviceDialog x-background {
+#pair-device-dialog x-background {
padding: 16px!important;
}
@@ -685,8 +685,8 @@ x-dialog h2 {
margin-top: 1rem;
}
-#receiveRequestDialog h2,
-#receiveFileDialog h2 {
+#receive-request-dialog h2,
+#receive-file-dialog h2 {
margin-bottom: 0.5rem;
}
@@ -715,11 +715,11 @@ x-dialog .row-reverse {
word-break: normal;
}
-#fileName {
+#file-name {
font-style: italic;
}
-#fileStem {
+#file-stem {
max-width: 80%;
overflow: hidden;
text-overflow: ellipsis;
@@ -733,13 +733,13 @@ x-dialog .row-reverse {
/* Send Text Dialog */
-#textInput {
+#text-input {
min-height: 120px;
}
/* Receive Text Dialog */
-#receiveTextDialog #text {
+#receive-text-dialog #text {
width: 100%;
word-break: break-all;
max-height: 300px;
@@ -752,15 +752,15 @@ x-dialog .row-reverse {
margin-top:36px;
}
-#receiveTextDialog #text a {
+#receive-text-dialog #text a {
cursor: pointer;
}
-#receiveTextDialog #text a:hover {
+#receive-text-dialog #text a:hover {
text-decoration: underline;
}
-#receiveTextDialog h3 {
+#receive-text-dialog h3 {
/* Select the received text when double-clicking the dialog */
user-select: none;
pointer-events: none;
@@ -771,26 +771,26 @@ x-dialog .row-reverse {
margin: auto -25px;
}
-#receiveTextDescriptionContainer {
+#receive-text-description-container {
margin-bottom: 25px;
}
-#base64PasteBtn {
+#base64-paste-btn {
width: 100%;
height: 40vh;
border: solid 12px #438cff;
}
-#base64PasteDialog button {
+#base64-paste-dialog button {
margin: auto;
border-radius: 8px;
}
-#base64PasteDialog button[close] {
+#base64-paste-dialog button[close] {
margin-top: 20px;
}
-#base64PasteDialog button[close]:before {
+#base64-paste-dialog button[close]:before {
border-radius: 8px;
}
diff --git a/public_included_ws_fallback/index.html b/public_included_ws_fallback/index.html
index b5042a8..8227434 100644
--- a/public_included_ws_fallback/index.html
+++ b/public_included_ws_fallback/index.html
@@ -81,7 +81,7 @@
Pair devices to be discoverable on other networks
-
+