jakob/PairDrop
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

tidy up code, add tooltip to device name and change color and bg-color of device-name

Browse source
This commit is contained in:
schlagmichdoch 2023-03-04 22:59:49 +01:00
parent b2f6a75c99
commit f34f5bd4b2
7 changed files with 43 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
public/index.html
View file

@ -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>

1
public/scripts/network.js
View file

@ -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});
}
}

18
public/scripts/ui.js
View file

@ -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();

5
public/styles.css
View file

@ -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 {

22
public_included_ws_fallback/index.html
View file

@ -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>

17
public_included_ws_fallback/scripts/ui.js
View file

@ -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();

5
public_included_ws_fallback/styles.css
View file

@ -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 {