From f34f5bd4b22d71e990588b516ea9b4bc3880476e Mon Sep 17 00:00:00 2001
From: schlagmichdoch <schlagmichdoch@users.noreply.github.com>
Date: Sat, 4 Mar 2023 22:59:49 +0100
Subject: [PATCH] tidy up code, add tooltip to device name and change color and
 bg-color of device-name

---
 public/index.html                         |  8 +++++---
 public/scripts/network.js                 |  1 -
 public/scripts/ui.js                      | 18 +++++++++---------
 public/styles.css                         |  5 ++++-
 public_included_ws_fallback/index.html    | 22 ++++++++++++----------
 public_included_ws_fallback/scripts/ui.js | 17 +++++++++--------
 public_included_ws_fallback/styles.css    |  5 ++++-
 7 files changed, 43 insertions(+), 33 deletions(-)

diff --git a/public/index.html b/public/index.html
index f0aec21..cbb0337 100644
--- a/public/index.html
+++ b/public/index.html
@@ -59,7 +59,7 @@
                 <use xlink:href="#homescreen" />
             </svg>
         </a>
-        <a id="pair-device" class="icon-button" title="Pair Device" >
+        <a id="pair-device" class="icon-button" title="Pair Device" hidden>
             <svg class="icon">
                 <use xlink:href="#pair-device-icon" />
             </svg>
@@ -91,8 +91,10 @@
         </svg>
         <div>
             <span>You are known as:</span>
-            <div id="display-name" placeholder="Loading..." autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable></div>
-            <svg id="edit-pen" class="icon"><use xlink:href="#edit-pen-icon" /></svg>
+            <div id="display-name" placeholder="Loading..." title="Edit your device name permanently" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable></div>
+            <svg id="edit-pen" class="icon">
+                <use xlink:href="#edit-pen-icon" />
+            </svg>
         </div>
         <div class="font-body2">
             You can be discovered by everyone <span id="on-this-network">on&nbsp;this&nbsp;network</span>
diff --git a/public/scripts/network.js b/public/scripts/network.js
index 6dcf24b..7f9bc44 100644
--- a/public/scripts/network.js
+++ b/public/scripts/network.js
@@ -487,7 +487,6 @@ class Peer {
 
     _onDisplayNameChanged(message) {
         if (!message.displayName) return;
-        console.debug(message)
         Events.fire('peer-display-name-changed', {peerId: this._peerId, displayName: message.displayName});
     }
 }
diff --git a/public/scripts/ui.js b/public/scripts/ui.js
index e0c90b0..b7e75f3 100644
--- a/public/scripts/ui.js
+++ b/public/scripts/ui.js
@@ -11,7 +11,6 @@ Events.on('display-name', e => {
     const me = e.detail.message;
     const $displayName = $('display-name');
     $displayName.setAttribute('placeholder', me.displayName);
-    $displayName.title = me.deviceName;
 });
 
 class PeersUI {
@@ -83,11 +82,11 @@ class PeersUI {
 
         if (newDisplayName) {
             PersistentStorage.set('editedDisplayName', newDisplayName).then(_ => {
-                Events.fire('notify-user', 'Display name is changed permanently.');
+                Events.fire('notify-user', 'Device name is changed permanently.');
             }).catch(_ => {
                 console.log("This browser does not support IndexedDB. Use localStorage instead.");
                 localStorage.setItem('editedDisplayName', newDisplayName);
-                Events.fire('notify-user', 'Display name is changed only for this session.');
+                Events.fire('notify-user', 'Device name is changed only for this session.');
             }).finally(_ => {
                 Events.fire('self-display-name-changed', newDisplayName);
                 Events.fire('broadcast-send', {type: 'self-display-name-changed', detail: newDisplayName});
@@ -98,7 +97,7 @@ class PeersUI {
                 localStorage.removeItem('editedDisplayName');
                 Events.fire('notify-user', 'Random Display name is used again.');
             }).finally(_ => {
-                Events.fire('notify-user', 'Display name is randomly generated again.');
+                Events.fire('notify-user', 'Device name is randomly generated again.');
                 Events.fire('self-display-name-changed', '');
                 Events.fire('broadcast-send', {type: 'self-display-name-changed', detail: ''});
             });
@@ -116,8 +115,6 @@ class PeersUI {
     _changePeerDisplayName(peerId, displayName) {
         this.peers[peerId].name.displayName = displayName;
         const peerIdNode = $(peerId);
-        console.debug(peerIdNode)
-        console.debug(displayName)
         if (peerIdNode && displayName) peerIdNode.querySelector('.name').textContent = displayName;
     }
 
@@ -843,15 +840,17 @@ class ReceiveRequestDialog extends ReceiveDialog {
 class PairDeviceDialog extends Dialog {
     constructor() {
         super('pair-device-dialog');
-        $('pair-device').addEventListener('click', _ => this._pairDeviceInitiate());
         this.$inputRoomKeyChars = this.$el.querySelectorAll('#key-input-container>input');
         this.$submitBtn = this.$el.querySelector('button[type="submit"]');
         this.$roomKey = this.$el.querySelector('#room-key');
         this.$qrCode = this.$el.querySelector('#room-key-qr-code');
+        this.$pairDeviceBtn = $('pair-device');
         this.$clearSecretsBtn = $('clear-pair-devices');
         this.$footerInstructionsPairedDevices = $('and-by-paired-devices');
-        let createJoinForm = this.$el.querySelector('form');
-        createJoinForm.addEventListener('submit', e => this._onSubmit(e));
+        this.$createJoinForm = this.$el.querySelector('form');
+
+        this.$createJoinForm.addEventListener('submit', e => this._onSubmit(e));
+        this.$pairDeviceBtn.addEventListener('click', _ => this._pairDeviceInitiate());
 
         this.$el.querySelector('[close]').addEventListener('click', _ => this._pairDeviceCancel())
         this.$inputRoomKeyChars.forEach(el => el.addEventListener('input', e => this._onCharsInput(e)));
@@ -944,6 +943,7 @@ class PairDeviceDialog extends Dialog {
     }
 
     _onWsConnected() {
+        this.$pairDeviceBtn.removeAttribute('hidden');
         PersistentStorage.getAllRoomSecrets().then(roomSecrets => {
             Events.fire('room-secrets', roomSecrets);
             this._evaluateNumberRoomSecrets();
diff --git a/public/styles.css b/public/styles.css
index 8f68114..d120feb 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -576,7 +576,10 @@ footer .font-body2 {
     border-right: solid 1rem transparent;
     border-left: solid 1rem transparent;
     background-clip: padding-box;
-    background-color: rgba(var(--text-color), 28%);
+    background-color: rgba(var(--text-color), 32%);
+    color: white;
+    transition: background-color 0.5s ease;
+    overflow: hidden;
 }
 
 #edit-pen {
diff --git a/public_included_ws_fallback/index.html b/public_included_ws_fallback/index.html
index a75fe69..a2a4b4d 100644
--- a/public_included_ws_fallback/index.html
+++ b/public_included_ws_fallback/index.html
@@ -59,7 +59,7 @@
                 <use xlink:href="#homescreen" />
             </svg>
         </a>
-        <a id="pair-device" class="icon-button" title="Pair Device" >
+        <a id="pair-device" class="icon-button" title="Pair Device" hidden>
             <svg class="icon">
                 <use xlink:href="#pair-device-icon" />
             </svg>
@@ -91,8 +91,10 @@
         </svg>
         <div>
             <span>You are known as:</span>
-            <div id="display-name" placeholder="Loading..." autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable></div>
-            <svg id="edit-pen" class="icon"><use xlink:href="#edit-pen-icon" /></svg>
+            <div id="display-name" placeholder="Loading..." title="Edit your device name permanently" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable></div>
+            <svg id="edit-pen" class="icon">
+                <use xlink:href="#edit-pen-icon" />
+            </svg>
         </div>
         <div class="font-body2">
             You can be discovered by everyone <span id="on-this-network">on&nbsp;this&nbsp;network</span>
@@ -249,14 +251,14 @@
     </div>
     <!-- About Page -->
     <x-about id="about" class="full center column">
+        <header class="row-reverse fade-in">
+            <a href="#" class="close icon-button">
+                <svg class="icon">
+                    <use xlink:href="#close-icon" />
+                </svg>
+            </a>
+        </header>
         <section class="center column fade-in">
-            <header class="row-reverse">
-                <a href="#" class="close icon-button">
-                    <svg class="icon">
-                        <use xlink:href="#close-icon" />
-                    </svg>
-                </a>
-            </header>
             <svg class="icon logo">
                 <use xlink:href="#wifi-tethering" />
             </svg>
diff --git a/public_included_ws_fallback/scripts/ui.js b/public_included_ws_fallback/scripts/ui.js
index 0699043..896608e 100644
--- a/public_included_ws_fallback/scripts/ui.js
+++ b/public_included_ws_fallback/scripts/ui.js
@@ -11,7 +11,6 @@ Events.on('display-name', e => {
     const me = e.detail.message;
     const $displayName = $('display-name');
     $displayName.setAttribute('placeholder', me.displayName);
-    $displayName.title = me.deviceName;
 });
 
 class PeersUI {
@@ -78,17 +77,16 @@ class PeersUI {
 
     async _saveDisplayName(newDisplayName) {
         newDisplayName = newDisplayName.replace(/(\n|\r|\r\n)/, '')
-        console.debug(newDisplayName)
         const savedDisplayName = await this._getSavedDisplayName();
         if (newDisplayName === savedDisplayName) return;
 
         if (newDisplayName) {
             PersistentStorage.set('editedDisplayName', newDisplayName).then(_ => {
-                Events.fire('notify-user', 'Display name is changed permanently.');
+                Events.fire('notify-user', 'Device name is changed permanently.');
             }).catch(_ => {
                 console.log("This browser does not support IndexedDB. Use localStorage instead.");
                 localStorage.setItem('editedDisplayName', newDisplayName);
-                Events.fire('notify-user', 'Display name is changed only for this session.');
+                Events.fire('notify-user', 'Device name is changed only for this session.');
             }).finally(_ => {
                 Events.fire('self-display-name-changed', newDisplayName);
                 Events.fire('broadcast-send', {type: 'self-display-name-changed', detail: newDisplayName});
@@ -99,7 +97,7 @@ class PeersUI {
                 localStorage.removeItem('editedDisplayName');
                 Events.fire('notify-user', 'Random Display name is used again.');
             }).finally(_ => {
-                Events.fire('notify-user', 'Display name is randomly generated again.');
+                Events.fire('notify-user', 'Device name is randomly generated again.');
                 Events.fire('self-display-name-changed', '');
                 Events.fire('broadcast-send', {type: 'self-display-name-changed', detail: ''});
             });
@@ -843,15 +841,17 @@ class ReceiveRequestDialog extends ReceiveDialog {
 class PairDeviceDialog extends Dialog {
     constructor() {
         super('pair-device-dialog');
-        $('pair-device').addEventListener('click', _ => this._pairDeviceInitiate());
         this.$inputRoomKeyChars = this.$el.querySelectorAll('#key-input-container>input');
         this.$submitBtn = this.$el.querySelector('button[type="submit"]');
         this.$roomKey = this.$el.querySelector('#room-key');
         this.$qrCode = this.$el.querySelector('#room-key-qr-code');
+        this.$pairDeviceBtn = $('pair-device');
         this.$clearSecretsBtn = $('clear-pair-devices');
         this.$footerInstructionsPairedDevices = $('and-by-paired-devices');
-        let createJoinForm = this.$el.querySelector('form');
-        createJoinForm.addEventListener('submit', e => this._onSubmit(e));
+        this.$createJoinForm = this.$el.querySelector('form');
+
+        this.$createJoinForm.addEventListener('submit', e => this._onSubmit(e));
+        this.$pairDeviceBtn.addEventListener('click', _ => this._pairDeviceInitiate());
 
         this.$el.querySelector('[close]').addEventListener('click', _ => this._pairDeviceCancel())
         this.$inputRoomKeyChars.forEach(el => el.addEventListener('input', e => this._onCharsInput(e)));
@@ -944,6 +944,7 @@ class PairDeviceDialog extends Dialog {
     }
 
     _onWsConnected() {
+        this.$pairDeviceBtn.removeAttribute('hidden');
         PersistentStorage.getAllRoomSecrets().then(roomSecrets => {
             Events.fire('room-secrets', roomSecrets);
             this._evaluateNumberRoomSecrets();
diff --git a/public_included_ws_fallback/styles.css b/public_included_ws_fallback/styles.css
index 16300e8..eb17081 100644
--- a/public_included_ws_fallback/styles.css
+++ b/public_included_ws_fallback/styles.css
@@ -602,7 +602,10 @@ footer .font-body2 {
     border-right: solid 1rem transparent;
     border-left: solid 1rem transparent;
     background-clip: padding-box;
-    background-color: rgba(var(--text-color), 28%);
+    background-color: rgba(var(--text-color), 32%);
+    color: white;
+    transition: background-color 0.5s ease;
+    overflow: hidden;
 }
 
 #edit-pen {