mirrors/PairDrop
1
0
Fork 0
mirror of https://github.com/schlagmichdoch/PairDrop.git synced 2025-04-21 15:26:17 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

- restructure UI to use flexbox everywhere

Browse source 
- structure peers on desktop responsively
- make peer box scrollable when peers are overflowing + shadow
- add highlight badge to differentiate local peers into paired and not paired
- change websocket fallback warning and move to the bottom
This commit is contained in:
schlagmichdoch 2023-03-01 10:04:37 +01:00
parent 7b08973cef
commit 4566528179
6 changed files with 724 additions and 302 deletions
Download patch file Download diff file Expand all files Collapse all files

32
public/index.html
View file

@ -69,17 +69,21 @@
<use xlink:href="#clear-pair-devices-icon" /> <use xlink:href="#clear-pair-devices-icon" />
</svg> </svg>
</a> </a>
<a id="cancel-paste-mode-btn" class="button" close hidden>Done</a>
</header> </header>
<a id="cancelPasteModeBtn" class="button" close hidden>Done</a> <!-- Center -->
<!-- Peers --> <div id="center">
<x-peers class="center"></x-peers> <!-- Peers -->
<x-no-peers> <div class="x-peers-filler"></div>
<h2>Open PairDrop on other devices to send files</h2> <x-peers class="center"></x-peers>
<div>Pair devices to be discoverable on other networks</div> <x-no-peers>
</x-no-peers> <h2>Open PairDrop on other devices to send files</h2>
<x-instructions desktop="Click to send files or right click to send a message" mobile="Tap to send files or long tap to send a message"> <div>Pair devices to be discoverable on other networks</div>
<p id="pasteFilename"></p> </x-no-peers>
</x-instructions> <x-instructions desktop="Click to send files or right click to send a message" mobile="Tap to send files or long tap to send a message">
<p id="pasteFilename"></p>
</x-instructions>
</div>
<!-- Footer --> <!-- Footer -->
<footer class="column"> <footer class="column">
<svg class="icon logo"> <svg class="icon logo">
@ -183,8 +187,12 @@
<form action="#"> <form action="#">
<x-background class="full center"> <x-background class="full center">
<x-paper shadow="2"> <x-paper shadow="2">
<h2>PairDrop - Send a Message</h2> <h2 class="text-center">PairDrop</h2>
<div id="textInput" class="textarea" role="textbox" placeholder="Send a message" autocapitalize="none" spellcheck="false" autofocus contenteditable></div> <div class="text-center">
<span>Send a Message to</span>
<span id="textSendPeerDisplayName"></span>
</div>
<div id="textInput" class="textarea" role="textbox" autocapitalize="none" spellcheck="false" autofocus contenteditable></div>
<div class="row-reverse"> <div class="row-reverse">
<button class="button" type="submit" title="STR + ENTER" disabled close>Send</button> <button class="button" type="submit" title="STR + ENTER" disabled close>Send</button>
<div class="separator"></div> <div class="separator"></div>

112
public/scripts/ui.js
View file

@ -28,7 +28,7 @@ class PeersUI {
Events.on('activate-paste-mode', e => this._activatePasteMode(e.detail.files, e.detail.text)); Events.on('activate-paste-mode', e => this._activatePasteMode(e.detail.files, e.detail.text));
this.peers = {}; this.peers = {};
this.$cancelPasteModeBtn = $('cancelPasteModeBtn'); this.$cancelPasteModeBtn = $('cancel-paste-mode-btn');
this.$cancelPasteModeBtn.addEventListener('click', _ => this._cancelPasteMode()); this.$cancelPasteModeBtn.addEventListener('click', _ => this._cancelPasteMode());
Events.on('dragover', e => this._onDragOver(e)); Events.on('dragover', e => this._onDragOver(e));
@ -38,8 +38,12 @@ class PeersUI {
Events.on('drop', e => this._onDrop(e)); Events.on('drop', e => this._onDrop(e));
Events.on('keydown', e => this._onKeyDown(e)); Events.on('keydown', e => this._onKeyDown(e));
this.$xPeers = $$('x-peers');
this.$xNoPeers = $$('x-no-peers'); this.$xNoPeers = $$('x-no-peers');
this.$xInstructions = $$('x-instructions'); this.$xInstructions = $$('x-instructions');
Events.on('peer-added', _ => this.evaluateOverflowing());
Events.on('bg-resize', _ => this.evaluateOverflowing());
} }
_onKeyDown(e) { _onKeyDown(e) {
@ -53,11 +57,11 @@ class PeersUI {
} }
_joinPeer(peer, roomType, roomSecret) { _joinPeer(peer, roomType, roomSecret) {
peer.roomType = roomType; peer.roomTypes = [roomType];
peer.roomSecret = roomSecret; peer.roomSecret = roomSecret;
if (this.peers[peer.id]) { if (this.peers[peer.id]) {
this.peers[peer.id].roomType = peer.roomType; if (!this.peers[peer.id].roomTypes.includes(roomType)) this.peers[peer.id].roomTypes.push(roomType);
this._redrawPeer(peer); this._redrawPeer(this.peers[peer.id]);
return; // peer already exists return; // peer already exists
} }
this.peers[peer.id] = peer; this.peers[peer.id] = peer;
@ -72,7 +76,15 @@ class PeersUI {
const peerNode = $(peer.id); const peerNode = $(peer.id);
if (!peerNode) return; if (!peerNode) return;
peerNode.classList.remove('type-ip', 'type-secret'); peerNode.classList.remove('type-ip', 'type-secret');
peerNode.classList.add(`type-${peer.roomType}`) peer.roomTypes.forEach(roomType => peerNode.classList.add(`type-${roomType}`));
}
evaluateOverflowing() {
if (this.$xPeers.clientHeight < this.$xPeers.scrollHeight) {
this.$xPeers.classList.add('overflowing');
} else {
this.$xPeers.classList.remove('overflowing');
}
} }
_onPeers(msg) { _onPeers(msg) {
@ -83,6 +95,7 @@ class PeersUI {
const $peer = $(peerId); const $peer = $(peerId);
if (!$peer) return; if (!$peer) return;
$peer.remove(); $peer.remove();
this.evaluateOverflowing();
if ($$('x-peers:empty')) setTimeout(_ => window.animateBackground(true), 1750); // Start animation again if ($$('x-peers:empty')) setTimeout(_ => window.animateBackground(true), 1750); // Start animation again
} }
@ -213,6 +226,18 @@ class PeersUI {
class PeerUI { class PeerUI {
constructor(peer, connectionHash) {
this._peer = peer;
this._connectionHash = connectionHash;
this._initDom();
this._bindListeners();
$$('x-peers').appendChild(this.$el)
Events.fire('peer-added');
this.$xInstructions = $$('x-instructions');
setTimeout(_ => window.animateBackground(false), 1750); // Stop animation
}
html() { html() {
let title; let title;
let input = ''; let input = '';
@ -225,17 +250,24 @@ class PeerUI {
this.$el.innerHTML = ` this.$el.innerHTML = `
<label class="column center" title="${title}"> <label class="column center" title="${title}">
${input} ${input}
<x-icon shadow="1"> <x-icon>
<svg class="icon"><use xlink:href="#"/></svg> <div class="icon-wrapper" shadow="1">
<svg class="icon"><use xlink:href="#"/></svg>
</div>
<div class="highlight-wrapper center">
<div class="highlight" shadow="1"></div>
</div>
</x-icon> </x-icon>
<div class="progress"> <div class="progress">
<div class="circle"></div> <div class="circle"></div>
<div class="circle right"></div> <div class="circle right"></div>
</div> </div>
<div class="name font-subheading"></div> <div class="device-descriptor">
<div class="device-name font-body2"></div> <div class="name font-subheading"></div>
<div class="status font-body2"></div> <div class="device-name font-body2"></div>
<span class="connection-hash font-body2" title="To verify the security of the end-to-end encryption, compare this security number on both devices"></span> <div class="status font-body2"></div>
<span class="connection-hash font-body2" title="To verify the security of the end-to-end encryption, compare this security number on both devices"></span>
</div>
</label>`; </label>`;
this.$el.querySelector('svg use').setAttribute('xlink:href', this._icon()); this.$el.querySelector('svg use').setAttribute('xlink:href', this._icon());
@ -245,23 +277,12 @@ class PeerUI {
this._connectionHash.substring(0, 4) + " " + this._connectionHash.substring(4, 8) + " " + this._connectionHash.substring(8, 12) + " " + this._connectionHash.substring(12, 16); this._connectionHash.substring(0, 4) + " " + this._connectionHash.substring(4, 8) + " " + this._connectionHash.substring(8, 12) + " " + this._connectionHash.substring(12, 16);
} }
constructor(peer, connectionHash) {
this._peer = peer;
this._roomType = peer.roomType;
this._roomSecret = peer.roomSecret;
this._connectionHash = connectionHash;
this._initDom();
this._bindListeners();
$$('x-peers').appendChild(this.$el);
this.$xInstructions = $$('x-instructions');
setTimeout(_ => window.animateBackground(false), 1750); // Stop animation
}
_initDom() { _initDom() {
this.$el = document.createElement('x-peer'); this.$el = document.createElement('x-peer');
this.$el.id = this._peer.id; this.$el.id = this._peer.id;
this.$el.ui = this; this.$el.ui = this;
this.$el.classList.add(`type-${this._roomType}`); this._peer.roomTypes.forEach(roomType => this.$el.classList.add(`type-${roomType}`));
this.$el.classList.add('center');
this.html(); this.html();
this._callbackInput = e => this._onFilesSelected(e) this._callbackInput = e => this._onFilesSelected(e)
@ -272,7 +293,7 @@ class PeerUI {
this._callbackDragLeave = e => this._onDragEnd(e) this._callbackDragLeave = e => this._onDragEnd(e)
this._callbackDragOver = e => this._onDragOver(e) this._callbackDragOver = e => this._onDragOver(e)
this._callbackContextMenu = e => this._onRightClick(e) this._callbackContextMenu = e => this._onRightClick(e)
this._callbackTouchStart = _ => this._onTouchStart() this._callbackTouchStart = e => this._onTouchStart(e)
this._callbackTouchEnd = e => this._onTouchEnd(e) this._callbackTouchEnd = e => this._onTouchEnd(e)
this._callbackPointerDown = e => this._onPointerDown(e) this._callbackPointerDown = e => this._onPointerDown(e)
// PasteMode // PasteMode
@ -393,21 +414,28 @@ class PeerUI {
_onRightClick(e) { _onRightClick(e) {
e.preventDefault(); e.preventDefault();
Events.fire('text-recipient', this._peer.id); Events.fire('text-recipient', {
peerId: this._peer.id,
deviceName: e.target.closest('x-peer').querySelector('.name').innerText
});
} }
_onTouchStart() { _onTouchStart(e) {
this._touchStart = Date.now(); this._touchStart = Date.now();
this._touchTimer = setTimeout(_ => this._onTouchEnd(), 610); this._touchTimer = setTimeout(_ => this._onTouchEnd(e), 610);
} }
_onTouchEnd(e) { _onTouchEnd(e) {
if (Date.now() - this._touchStart < 500) { if (Date.now() - this._touchStart < 500) {
clearTimeout(this._touchTimer); clearTimeout(this._touchTimer);
} else { // this was a long tap } else if (this._touchTimer) { // this was a long tap
if (e) e.preventDefault(); e.preventDefault();
Events.fire('text-recipient', this._peer.id); Events.fire('text-recipient', {
peerId: this._peer.id,
deviceName: e.target.closest('x-peer').querySelector('.name').innerText
});
} }
this._touchTimer = null;
} }
} }
@ -843,7 +871,7 @@ class PairDeviceDialog extends Dialog {
height: 150, height: 150,
padding: 0, padding: 0,
background: "transparent", background: "transparent",
color: getComputedStyle(document.body).getPropertyValue('--text-color'), color: `rgb(var(--text-color))`,
ecl: "L", ecl: "L",
join: true join: true
}); });
@ -935,6 +963,7 @@ class PairDeviceDialog extends Dialog {
this.$clearSecretsBtn.setAttribute('hidden', ''); this.$clearSecretsBtn.setAttribute('hidden', '');
this.$footerInstructionsPairedDevices.setAttribute('hidden', ''); this.$footerInstructionsPairedDevices.setAttribute('hidden', '');
} }
Events.fire('bg-resize');
}).catch(_ => PersistentStorage.logBrowserNotCapable()); }).catch(_ => PersistentStorage.logBrowserNotCapable());
} }
} }
@ -960,8 +989,9 @@ class ClearDevicesDialog extends Dialog {
class SendTextDialog extends Dialog { class SendTextDialog extends Dialog {
constructor() { constructor() {
super('sendTextDialog'); super('sendTextDialog');
Events.on('text-recipient', e => this._onRecipient(e.detail)); Events.on('text-recipient', e => this._onRecipient(e.detail.peerId, e.detail.deviceName));
this.$text = this.$el.querySelector('#textInput'); this.$text = this.$el.querySelector('#textInput');
this.$peerDisplayName = this.$el.querySelector('#textSendPeerDisplayName');
this.$form = this.$el.querySelector('form'); this.$form = this.$el.querySelector('form');
this.$submit = this.$el.querySelector('button[type="submit"]'); this.$submit = this.$el.querySelector('button[type="submit"]');
this.$form.addEventListener('submit', _ => this._send()); this.$form.addEventListener('submit', _ => this._send());
@ -992,8 +1022,9 @@ class SendTextDialog extends Dialog {
} }
} }
_onRecipient(peerId) { _onRecipient(peerId, deviceName) {
this.correspondingPeerId = peerId; this.correspondingPeerId = peerId;
this.$peerDisplayName.innerText = deviceName;
this.show(); this.show();
const range = document.createRange(); const range = document.createRange();
@ -1246,6 +1277,7 @@ class Notifications {
this.$button.removeAttribute('hidden'); this.$button.removeAttribute('hidden');
this.$button.addEventListener('click', _ => this._requestPermission()); this.$button.addEventListener('click', _ => this._requestPermission());
} }
// Todo: fix Notifications
Events.on('text-received', e => this._messageNotification(e.detail.text, e.detail.peerId)); Events.on('text-received', e => this._messageNotification(e.detail.text, e.detail.peerId));
Events.on('files-received', e => this._downloadNotification(e.detail.files)); Events.on('files-received', e => this._downloadNotification(e.detail.files));
} }
@ -1714,19 +1746,15 @@ Events.on('load', () => {
h = window.innerHeight; h = window.innerHeight;
c.width = w; c.width = w;
c.height = h; c.height = h;
offset = h > 800 offset = $$('footer').offsetHeight - 32;
? 116 if (h > 800) offset += 16;
: h > 380
? 100
: 65;
if (w < 420) offset += 20;
x0 = w / 2; x0 = w / 2;
y0 = h - offset; y0 = h - offset;
dw = Math.max(w, h, 1000) / 13; dw = Math.max(w, h, 1000) / 13;
drawCircles(); drawCircles();
} }
window.onresize = init; Events.on('bg-resize', _ => init());
window.onresize = _ => Events.fire('bg-resize');
function drawCircle(radius) { function drawCircle(radius) {
ctx.beginPath(); ctx.beginPath();

351
public/styles.css
View file

@ -10,28 +10,25 @@
/* Layout */ /* Layout */
html {
min-height: 100%;
height: -webkit-fill-available;
}
html, html,
body { body {
margin: 0; margin: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100vw;
overflow-x: hidden; overflow-x: hidden;
overscroll-behavior-y: none; overscroll-behavior: none;
overflow-y: hidden;
} }
body { body {
min-height: 100%; min-height: 100vh;
/* mobile viewport bug fix */
min-height: -webkit-fill-available; min-height: -webkit-fill-available;
flex-grow: 1; }
align-items: center;
justify-content: center; html {
overflow-y: hidden; height: -webkit-fill-available;
} }
.row-reverse { .row-reverse {
@ -73,10 +70,7 @@ body {
} }
header { header {
position: absolute; position: relative;
top: 0;
left: 0;
right: 0;
height: 56px; height: 56px;
align-items: center; align-items: center;
padding: 16px; padding: 16px;
@ -119,9 +113,9 @@ h3 {
} }
.font-subheading { .font-subheading {
font-size: 16px; font-size: 14px;
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 18px;
word-break: normal; word-break: normal;
} }
@ -199,20 +193,151 @@ body>header a {
margin-left: 8px; margin-left: 8px;
} }
#center {
position: relative;
display: flex;
flex-direction: column-reverse;
flex-grow: 1;
--footer-height: 132px;
max-height: calc(100vh - 56px - var(--footer-height));
justify-content: space-around;
align-items: center;
overflow-x: hidden;
overflow-y: scroll;
overscroll-behavior-x: none;
}
@media screen and (max-width: 425px) {
header:has(#clear-pair-devices:not([hidden]))~#center {
--footer-height: 150px;
}
}
/* Peers List */ /* Peers List */
#x-peers-filler {
display: flex;
flex-grow: 1;
}
x-peers { x-peers {
width: 100%; position: relative;
overflow: hidden; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
flex-grow: 1;
align-items: start !important;
justify-content: center;
z-index: 2; z-index: 2;
transition: color 300ms; transition: --bg-color 0.5s ease;
overflow-y: scroll;
overflow-x: hidden;
overscroll-behavior-x: none;
scrollbar-width: none;
--peers-per-row: 6; /* default if browser does not support :has selector */
--x-peers-width: min(100vw, calc(var(--peers-per-row) * (var(--peer-width) + 25px) - 16px));
width: var(--x-peers-width);
margin-right: 20px;
margin-left: 20px;
}
x-peers.overflowing {
background: /* Shadow covers */ linear-gradient(rgb(var(--bg-color)) 30%, rgba(var(--bg-color), 0)),
linear-gradient(rgba(var(--bg-color), 0), rgb(var(--bg-color)) 70%) 0 100%,
/* Shadows */ radial-gradient(farthest-side at 50% 0, rgba(var(--text-color), .2), rgba(var(--text-color), 0)),
radial-gradient(farthest-side at 50% 100%, rgba(var(--text-color), .2), rgba(var(--text-color), 0)) 0 100%;
background-repeat: no-repeat;
background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
/* Opera doesn't support this in the shorthand */
background-attachment: local, local, scroll, scroll;
}
x-peers:has(> x-peer) {
--peers-per-row: 10;
}
@media screen and (min-height: 505px) and (max-height: 649px) and (max-width: 426px),
screen and (min-height: 486px) and (max-height: 631px) and (min-width: 426px) {
x-peers:has(> x-peer) {
--peers-per-row: 3;
}
x-peers:has(> x-peer:nth-of-type(7)) {
--peers-per-row: 4;
}
x-peers:has(> x-peer:nth-of-type(10)) {
--peers-per-row: 5;
}
x-peers:has(> x-peer:nth-of-type(13)) {
--peers-per-row: 6;
}
x-peers:has(> x-peer:nth-of-type(16)) {
--peers-per-row: 7;
}
x-peers:has(> x-peer:nth-of-type(19)) {
--peers-per-row: 8;
}
x-peers:has(> x-peer:nth-of-type(22)) {
--peers-per-row: 9;
}
x-peers:has(> x-peer:nth-of-type(25)) {
--peers-per-row: 10;
}
}
@media screen and (min-height: 649px) and (max-width: 425px),
screen and (min-height: 631px) and (min-width: 426px) {
x-peers:has(> x-peer) {
--peers-per-row: 3;
}
x-peers:has(> x-peer:nth-of-type(10)) {
--peers-per-row: 4;
}
x-peers:has(> x-peer:nth-of-type(13)) {
--peers-per-row: 5;
}
x-peers:has(> x-peer:nth-of-type(16)) {
--peers-per-row: 6;
}
x-peers:has(> x-peer:nth-of-type(19)) {
--peers-per-row: 7;
}
x-peers:has(> x-peer:nth-of-type(22)) {
--peers-per-row: 8;
}
x-peers:has(> x-peer:nth-of-type(25)) {
--peers-per-row: 9;
}
x-peers:has(> x-peer:nth-of-type(28)) {
--peers-per-row: 10;
}
}
::-webkit-scrollbar {
display: none;
} }
/* Empty Peers List */ /* Empty Peers List */
x-no-peers { x-no-peers {
height: 114px; display: flex;
flex-direction: column;
padding: 8px; padding: 8px;
text-align: center; text-align: center;
/* prevent flickering on load */ /* prevent flickering on load */
@ -254,25 +379,19 @@ x-no-peers[drop-bg] * {
x-peer { x-peer {
-webkit-user-select: none; -webkit-user-select: none;
user-select: none; user-select: none;
padding: 8px;
align-content: start;
flex-wrap: wrap;
} }
x-peer label { x-peer label {
width: var(--peer-width); width: var(--peer-width);
padding: 8px;
cursor: pointer; cursor: pointer;
touch-action: manipulation; touch-action: manipulation;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
position: relative; position: relative;
} }
x-peer .name {
width: var(--peer-width);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
input[type="file"] { input[type="file"] {
visibility: hidden; visibility: hidden;
position: absolute; position: absolute;
@ -280,21 +399,45 @@ input[type="file"] {
x-peer x-icon { x-peer x-icon {
--icon-size: 40px; --icon-size: 40px;
margin-bottom: 4px;
transition: transform 150ms;
will-change: transform;
display: flex;
flex-direction: column;
}
x-peer .icon-wrapper {
width: var(--icon-size); width: var(--icon-size);
padding: 12px; padding: 12px;
border-radius: 50%; border-radius: 50%;
background: var(--primary-color); background: var(--primary-color);
color: white; color: white;
display: flex; display: flex;
margin-bottom: 8px;
transition: transform 150ms;
will-change: transform;
} }
x-peer:not(.type-ip) x-icon { x-peer:not(.type-ip).type-secret .icon-wrapper {
background: var(--paired-device-color); background: var(--paired-device-color);
} }
x-peer x-icon > .highlight-wrapper {
align-self: center;
align-items: center;
margin: 7px auto 0;
height: 6px;
}
x-peer x-icon > .highlight-wrapper > .highlight {
width: 6px;
height: 6px;
border-radius: 50%;
display: none;
}
x-peer.type-secret x-icon > .highlight-wrapper > .highlight {
background-color: var(--paired-device-color);
display: inline;
}
x-peer:not([status]):hover x-icon, x-peer:not([status]):hover x-icon,
x-peer:not([status]):focus x-icon { x-peer:not([status]):focus x-icon {
transform: scale(1.05); transform: scale(1.05);
@ -306,6 +449,18 @@ x-peer[status] x-icon {
transform: scale(1); transform: scale(1);
} }
.device-descriptor {
text-align: center;
}
.name {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
.status, .status,
.device-name, .device-name,
.connection-hash { .connection-hash {
@ -371,10 +526,9 @@ x-peer[drop] x-icon {
/* Footer */ /* Footer */
footer { footer {
position: absolute; position: relative;
bottom: 0; margin-top: auto;
left: 0; z-index: 2;
right: 0;
align-items: center; align-items: center;
padding: 0 0 16px 0; padding: 0 0 16px 0;
text-align: center; text-align: center;
@ -385,6 +539,7 @@ footer .logo {
--icon-size: 80px; --icon-size: 80px;
margin-bottom: 8px; margin-bottom: 8px;
color: var(--primary-color); color: var(--primary-color);
margin-top: -10px;
} }
footer .font-body2 { footer .font-body2 {
@ -430,6 +585,9 @@ x-dialog x-paper {
top: max(50%, 350px); top: max(50%, 350px);
height: 650px; height: 650px;
margin-top: -325px; margin-top: -325px;
display: flex;
flex-direction: column;
justify-content: space-between;
} }
x-dialog:not([show]) { x-dialog:not([show]) {
@ -509,6 +667,7 @@ x-dialog .font-subheading {
#pairDeviceDialog hr { #pairDeviceDialog hr {
margin-top: 40px; margin-top: 40px;
margin-bottom: 40px; margin-bottom: 40px;
width: 100%;
} }
#pairDeviceDialog x-background { #pairDeviceDialog x-background {
@ -532,7 +691,7 @@ x-dialog h2 {
} }
x-dialog .row-reverse { x-dialog .row-reverse {
margin: 40px -24px auto; margin: 40px -24px 0;
border-top: solid 2.5px var(--border-color); border-top: solid 2.5px var(--border-color);
} }
@ -689,16 +848,18 @@ x-dialog .row-reverse {
opacity: 0.1; opacity: 0.1;
} }
#cancelPasteModeBtn { #cancel-paste-mode-btn {
z-index: 2; z-index: 2;
margin-top: 0; margin: 0;
padding: 0;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
left: 0; left: 0;
width: 100%; width: 100vw;
height: 56px; height: 56px;
border-bottom: solid 2.5px var(--border-color); background-color: var(--primary-color);
color: rgb(238, 238, 238);
} }
.button:focus:before, .button:focus:before,
@ -809,7 +970,7 @@ button::-moz-focus-inner {
width: 80px; width: 80px;
height: 80px; height: 80px;
position: absolute; position: absolute;
top: 0; top: -8px;
clip: rect(0px, 80px, 80px, 40px); clip: rect(0px, 80px, 80px, 40px);
--progress: rotate(0deg); --progress: rotate(0deg);
transition: transform 200ms; transition: transform 200ms;
@ -876,13 +1037,16 @@ x-toast:not([show]):not(:hover) {
/* Instructions */ /* Instructions */
x-instructions { x-instructions {
position: absolute; position: relative;
top: 120px;
opacity: 0.5; opacity: 0.5;
transition: opacity 300ms; transition: opacity 300ms;
z-index: -1;
text-align: center; text-align: center;
width: 80%; margin-left: 10px;
margin-right: 10px;
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: center;
} }
x-instructions:not([drop-peer]):not([drop-bg]):before { x-instructions:not([drop-peer]):not([drop-bg]):before {
@ -899,88 +1063,84 @@ x-instructions[drop-bg]:not([drop-peer]):before {
x-instructions p { x-instructions p {
display: none; display: none;
margin: 0 auto auto;
max-width: 80%;
} }
x-peers:empty~x-instructions { x-peers:empty~x-instructions {
opacity: 0; opacity: 0;
} }
@media (hover: none) and (pointer: coarse) {
x-peer {
transform: scale(0.95);
padding: 4px 0;
}
}
#websocket-fallback {
margin-left: 5px;
margin-right: 5px;
padding: 5px;
text-align: center;
opacity: 0.5;
transition: opacity 300ms;
}
#websocket-fallback>span {
margin: 2px;
}
#websocket-fallback > span > span {
border-bottom: solid 4px var(--ws-peer-color);
}
/* Responsive Styles */ /* Responsive Styles */
@media (min-height: 800px) { @media screen and (min-height: 800px) {
footer { footer {
margin-bottom: 16px; margin-bottom: 16px;
} }
} }
@media screen and (min-height: 800px), @media (hover: hover) and (pointer: fine) {
screen and (min-width: 1100px) {
x-instructions:not([drop-peer]):not([drop-bg]):before { x-instructions:not([drop-peer]):not([drop-bg]):before {
content: attr(desktop); content: attr(desktop);
} }
} }
@media (max-height: 420px) {
x-instructions {
top: 24px;
}
footer .logo {
--icon-size: 40px;
}
}
/*
iOS specific styles
*/
@supports (-webkit-overflow-scrolling: touch) {
html {
position: fixed;
}
x-instructions:not([drop-peer]):not([drop-bg]):before {
content: attr(mobile);
}
}
/* /*
Color Themes Color Themes
*/ */
/* Default colors */ /* Default colors */
body { body {
--text-color: #333; --text-color: 51,51,51;
--bg-color: #fff; --bg-color: 250,250,250; /*rgb code*/
--bg-color-test: 18,18,18;
--bg-color-secondary: #f1f3f4; --bg-color-secondary: #f1f3f4;
--border-color: #e7e8e8; --border-color: #e7e8e8;
} }
/* Dark theme colors */ /* Dark theme colors */
body.dark-theme { body.dark-theme {
--text-color: #eee; --text-color: 238,238,238;
--bg-color: #121212; --bg-color: 18,18,18; /*rgb code*/
--bg-color-secondary: #333; --bg-color-secondary: #333;
--border-color: #252525; --border-color: #252525;
} }
/* Colored Elements */ /* Colored Elements */
body { body {
color: var(--text-color); color: rgb(var(--text-color));
background-color: var(--bg-color); background-color: rgb(var(--bg-color));
transition: background-color 0.5s ease; transition: background-color 0.5s ease;
} }
x-dialog x-paper { x-dialog x-paper {
background-color: var(--bg-color); background-color: rgb(var(--bg-color));
} }
.textarea { .textarea {
color: var(--text-color) !important; color: rgb(var(--text-color)) !important;
background-color: var(--bg-color-secondary) !important; background-color: var(--bg-color-secondary) !important;
} }
@ -1018,16 +1178,16 @@ x-dialog x-paper {
/* defaults to dark theme */ /* defaults to dark theme */
body { body {
--text-color: #eee; --text-color: 238,238,238;
--bg-color: #121212; --bg-color: 18,18,18; /*rgb code*/
--bg-color-secondary: #333; --bg-color-secondary: #333;
--border-color: #252525; --border-color: #252525;
} }
/* Override dark mode with light mode styles if the user decides to swap */ /* Override dark mode with light mode styles if the user decides to swap */
body.light-theme { body.light-theme {
--text-color: #333; --text-color: 51,51,51;
--bg-color: #fafafa; --bg-color: 250,250,250; /*rgb code*/
--bg-color-secondary: #f1f3f4; --bg-color-secondary: #f1f3f4;
--border-color: #e7e8e8; --border-color: #e7e8e8;
} }
@ -1045,6 +1205,15 @@ x-dialog x-paper {
} }
} }
/*
iOS specific styles
*/
@supports (-webkit-overflow-scrolling: touch) {
html {
min-height: -webkit-fill-available;
}
}
/* webkit scrollbar style*/ /* webkit scrollbar style*/
::-webkit-scrollbar{ ::-webkit-scrollbar{

38
public_included_ws_fallback/index.html
View file

@ -69,20 +69,21 @@
<use xlink:href="#clear-pair-devices-icon" /> <use xlink:href="#clear-pair-devices-icon" />
</svg> </svg>
</a> </a>
<a id="cancel-paste-mode-btn" class="button" close hidden>Done</a>
</header> </header>
<a id="cancelPasteModeBtn" class="button" close hidden>Done</a> <!-- Center -->
<!-- Peers --> <div id="center">
<x-peers class="center"></x-peers> <!-- Peers -->
<x-no-peers> <div class="x-peers-filler"></div>
<h2>Open PairDrop on other devices to send files</h2> <x-peers class="center"></x-peers>
<div>Pair devices to be discoverable on other networks</div> <x-no-peers>
<br> <h2>Open PairDrop on other devices to send files</h2>
<div>A <span class="websocket-fallback">websocket fallback</span> is implemented on this instance. Use only if you trust the server!</div> <div>Pair devices to be discoverable on other networks</div>
</x-no-peers> </x-no-peers>
<x-instructions desktop="Click to send files or right click to send a message" mobile="Tap to send files or long tap to send a message"> <x-instructions desktop="Click to send files or right click to send a message" mobile="Tap to send files or long tap to send a message">
<div>A <span class="websocket-fallback">websocket fallback</span> is implemented on this instance. Use only if you trust the server!</div> <p id="pasteFilename"></p>
<p id="pasteFilename"></p> </x-instructions>
</x-instructions> </div>
<!-- Footer --> <!-- Footer -->
<footer class="column"> <footer class="column">
<svg class="icon logo"> <svg class="icon logo">
@ -93,6 +94,9 @@
You can be discovered by everyone <span id="on-this-network">on&nbsp;this&nbsp;network</span> You can be discovered by everyone <span id="on-this-network">on&nbsp;this&nbsp;network</span>
<span id="and-by-paired-devices" hidden> and&nbsp;by&nbsp;<span id="paired-devices">paired&nbsp;devices</span></span> <span id="and-by-paired-devices" hidden> and&nbsp;by&nbsp;<span id="paired-devices">paired&nbsp;devices</span></span>
</div> </div>
<div id="websocket-fallback">
<span>Traffic is <span>routed through the server</span> if WebRTC is not available.</span>
</div>
</footer> </footer>
<!-- Pair Device Dialog --> <!-- Pair Device Dialog -->
<x-dialog id="pairDeviceDialog"> <x-dialog id="pairDeviceDialog">
@ -186,8 +190,12 @@
<form action="#"> <form action="#">
<x-background class="full center"> <x-background class="full center">
<x-paper shadow="2"> <x-paper shadow="2">
<h2>PairDrop - Send a Message</h2> <h2 class="text-center">PairDrop</h2>
<div id="textInput" class="textarea" role="textbox" placeholder="Send a message" autocapitalize="none" spellcheck="false" autofocus contenteditable></div> <div class="text-center">
<span>Send a Message to</span>
<span id="textSendPeerDisplayName"></span>
</div>
<div id="textInput" class="textarea" role="textbox" autocapitalize="none" spellcheck="false" autofocus contenteditable></div>
<div class="row-reverse"> <div class="row-reverse">
<button class="button" type="submit" title="STR + ENTER" disabled close>Send</button> <button class="button" type="submit" title="STR + ENTER" disabled close>Send</button>
<div class="separator"></div> <div class="separator"></div>

111
public_included_ws_fallback/scripts/ui.js
View file

@ -28,7 +28,7 @@ class PeersUI {
Events.on('activate-paste-mode', e => this._activatePasteMode(e.detail.files, e.detail.text)); Events.on('activate-paste-mode', e => this._activatePasteMode(e.detail.files, e.detail.text));
this.peers = {}; this.peers = {};
this.$cancelPasteModeBtn = $('cancelPasteModeBtn'); this.$cancelPasteModeBtn = $('cancel-paste-mode-btn');
this.$cancelPasteModeBtn.addEventListener('click', _ => this._cancelPasteMode()); this.$cancelPasteModeBtn.addEventListener('click', _ => this._cancelPasteMode());
Events.on('dragover', e => this._onDragOver(e)); Events.on('dragover', e => this._onDragOver(e));
@ -38,8 +38,12 @@ class PeersUI {
Events.on('drop', e => this._onDrop(e)); Events.on('drop', e => this._onDrop(e));
Events.on('keydown', e => this._onKeyDown(e)); Events.on('keydown', e => this._onKeyDown(e));
this.$xPeers = $$('x-peers');
this.$xNoPeers = $$('x-no-peers'); this.$xNoPeers = $$('x-no-peers');
this.$xInstructions = $$('x-instructions'); this.$xInstructions = $$('x-instructions');
Events.on('peer-added', _ => this.evaluateOverflowing());
Events.on('bg-resize', _ => this.evaluateOverflowing());
} }
_onKeyDown(e) { _onKeyDown(e) {
@ -53,11 +57,11 @@ class PeersUI {
} }
_joinPeer(peer, roomType, roomSecret) { _joinPeer(peer, roomType, roomSecret) {
peer.roomType = roomType; peer.roomTypes = [roomType];
peer.roomSecret = roomSecret; peer.roomSecret = roomSecret;
if (this.peers[peer.id]) { if (this.peers[peer.id]) {
this.peers[peer.id].roomType = peer.roomType; if (!this.peers[peer.id].roomTypes.includes(roomType)) this.peers[peer.id].roomTypes.push(roomType);
this._redrawPeer(peer); this._redrawPeer(this.peers[peer.id]);
return; // peer already exists return; // peer already exists
} }
this.peers[peer.id] = peer; this.peers[peer.id] = peer;
@ -72,7 +76,15 @@ class PeersUI {
const peerNode = $(peer.id); const peerNode = $(peer.id);
if (!peerNode) return; if (!peerNode) return;
peerNode.classList.remove('type-ip', 'type-secret'); peerNode.classList.remove('type-ip', 'type-secret');
peerNode.classList.add(`type-${peer.roomType}`) peer.roomTypes.forEach(roomType => peerNode.classList.add(`type-${roomType}`));
}
evaluateOverflowing() {
if (this.$xPeers.clientHeight < this.$xPeers.scrollHeight) {
this.$xPeers.classList.add('overflowing');
} else {
this.$xPeers.classList.remove('overflowing');
}
} }
_onPeers(msg) { _onPeers(msg) {
@ -83,6 +95,7 @@ class PeersUI {
const $peer = $(peerId); const $peer = $(peerId);
if (!$peer) return; if (!$peer) return;
$peer.remove(); $peer.remove();
this.evaluateOverflowing();
if ($$('x-peers:empty')) setTimeout(_ => window.animateBackground(true), 1750); // Start animation again if ($$('x-peers:empty')) setTimeout(_ => window.animateBackground(true), 1750); // Start animation again
} }
@ -213,6 +226,18 @@ class PeersUI {
class PeerUI { class PeerUI {
constructor(peer, connectionHash) {
this._peer = peer;
this._connectionHash = connectionHash;
this._initDom();
this._bindListeners();
$$('x-peers').appendChild(this.$el)
Events.fire('peer-added');
this.$xInstructions = $$('x-instructions');
setTimeout(_ => window.animateBackground(false), 1750); // Stop animation
}
html() { html() {
let title; let title;
let input = ''; let input = '';
@ -225,17 +250,24 @@ class PeerUI {
this.$el.innerHTML = ` this.$el.innerHTML = `
<label class="column center" title="${title}"> <label class="column center" title="${title}">
${input} ${input}
<x-icon shadow="1"> <x-icon>
<svg class="icon"><use xlink:href="#"/></svg> <div class="icon-wrapper" shadow="1">
<svg class="icon"><use xlink:href="#"/></svg>
</div>
<div class="highlight-wrapper center">
<div class="highlight" shadow="1"></div>
</div>
</x-icon> </x-icon>
<div class="progress"> <div class="progress">
<div class="circle"></div> <div class="circle"></div>
<div class="circle right"></div> <div class="circle right"></div>
</div> </div>
<div class="name font-subheading"></div> <div class="device-descriptor">
<div class="device-name font-body2"></div> <div class="name font-subheading"></div>
<div class="status font-body2"></div> <div class="device-name font-body2"></div>
<span class="connection-hash font-body2" title="To verify the security of the end-to-end encryption, compare this security number on both devices"></span> <div class="status font-body2"></div>
<span class="connection-hash font-body2" title="To verify the security of the end-to-end encryption, compare this security number on both devices"></span>
</div>
</label>`; </label>`;
this.$el.querySelector('svg use').setAttribute('xlink:href', this._icon()); this.$el.querySelector('svg use').setAttribute('xlink:href', this._icon());
@ -245,23 +277,12 @@ class PeerUI {
this._connectionHash.substring(0, 4) + " " + this._connectionHash.substring(4, 8) + " " + this._connectionHash.substring(8, 12) + " " + this._connectionHash.substring(12, 16); this._connectionHash.substring(0, 4) + " " + this._connectionHash.substring(4, 8) + " " + this._connectionHash.substring(8, 12) + " " + this._connectionHash.substring(12, 16);
} }
constructor(peer, connectionHash) {
this._peer = peer;
this._roomType = peer.roomType;
this._roomSecret = peer.roomSecret;
this._connectionHash = connectionHash;
this._initDom();
this._bindListeners();
$$('x-peers').appendChild(this.$el);
this.$xInstructions = $$('x-instructions');
setTimeout(_ => window.animateBackground(false), 1750); // Stop animation
}
_initDom() { _initDom() {
this.$el = document.createElement('x-peer'); this.$el = document.createElement('x-peer');
this.$el.id = this._peer.id; this.$el.id = this._peer.id;
this.$el.ui = this; this.$el.ui = this;
this.$el.classList.add(`type-${this._roomType}`); this._peer.roomTypes.forEach(roomType => this.$el.classList.add(`type-${roomType}`));
this.$el.classList.add('center');
if (!this._peer.rtcSupported || !window.isRtcSupported) this.$el.classList.add('ws-peer') if (!this._peer.rtcSupported || !window.isRtcSupported) this.$el.classList.add('ws-peer')
this.html(); this.html();
@ -273,7 +294,7 @@ class PeerUI {
this._callbackDragLeave = e => this._onDragEnd(e) this._callbackDragLeave = e => this._onDragEnd(e)
this._callbackDragOver = e => this._onDragOver(e) this._callbackDragOver = e => this._onDragOver(e)
this._callbackContextMenu = e => this._onRightClick(e) this._callbackContextMenu = e => this._onRightClick(e)
this._callbackTouchStart = _ => this._onTouchStart() this._callbackTouchStart = e => this._onTouchStart(e)
this._callbackTouchEnd = e => this._onTouchEnd(e) this._callbackTouchEnd = e => this._onTouchEnd(e)
this._callbackPointerDown = e => this._onPointerDown(e) this._callbackPointerDown = e => this._onPointerDown(e)
// PasteMode // PasteMode
@ -394,21 +415,28 @@ class PeerUI {
_onRightClick(e) { _onRightClick(e) {
e.preventDefault(); e.preventDefault();
Events.fire('text-recipient', this._peer.id); Events.fire('text-recipient', {
peerId: this._peer.id,
deviceName: e.target.closest('x-peer').querySelector('.name').innerText
});
} }
_onTouchStart() { _onTouchStart(e) {
this._touchStart = Date.now(); this._touchStart = Date.now();
this._touchTimer = setTimeout(_ => this._onTouchEnd(), 610); this._touchTimer = setTimeout(_ => this._onTouchEnd(e), 610);
} }
_onTouchEnd(e) { _onTouchEnd(e) {
if (Date.now() - this._touchStart < 500) { if (Date.now() - this._touchStart < 500) {
clearTimeout(this._touchTimer); clearTimeout(this._touchTimer);
} else { // this was a long tap } else if (this._touchTimer) { // this was a long tap
if (e) e.preventDefault(); e.preventDefault();
Events.fire('text-recipient', this._peer.id); Events.fire('text-recipient', {
peerId: this._peer.id,
deviceName: e.target.closest('x-peer').querySelector('.name').innerText
});
} }
this._touchTimer = null;
} }
} }
@ -844,7 +872,7 @@ class PairDeviceDialog extends Dialog {
height: 150, height: 150,
padding: 0, padding: 0,
background: "transparent", background: "transparent",
color: getComputedStyle(document.body).getPropertyValue('--text-color'), color: `rgb(var(--text-color))`,
ecl: "L", ecl: "L",
join: true join: true
}); });
@ -936,6 +964,7 @@ class PairDeviceDialog extends Dialog {
this.$clearSecretsBtn.setAttribute('hidden', ''); this.$clearSecretsBtn.setAttribute('hidden', '');
this.$footerInstructionsPairedDevices.setAttribute('hidden', ''); this.$footerInstructionsPairedDevices.setAttribute('hidden', '');
} }
Events.fire('bg-resize');
}).catch(_ => PersistentStorage.logBrowserNotCapable()); }).catch(_ => PersistentStorage.logBrowserNotCapable());
} }
} }
@ -961,8 +990,9 @@ class ClearDevicesDialog extends Dialog {
class SendTextDialog extends Dialog { class SendTextDialog extends Dialog {
constructor() { constructor() {
super('sendTextDialog'); super('sendTextDialog');
Events.on('text-recipient', e => this._onRecipient(e.detail)); Events.on('text-recipient', e => this._onRecipient(e.detail.peerId, e.detail.deviceName));
this.$text = this.$el.querySelector('#textInput'); this.$text = this.$el.querySelector('#textInput');
this.$peerDisplayName = this.$el.querySelector('#textSendPeerDisplayName');
this.$form = this.$el.querySelector('form'); this.$form = this.$el.querySelector('form');
this.$submit = this.$el.querySelector('button[type="submit"]'); this.$submit = this.$el.querySelector('button[type="submit"]');
this.$form.addEventListener('submit', _ => this._send()); this.$form.addEventListener('submit', _ => this._send());
@ -993,8 +1023,9 @@ class SendTextDialog extends Dialog {
} }
} }
_onRecipient(peerId) { _onRecipient(peerId, deviceName) {
this.correspondingPeerId = peerId; this.correspondingPeerId = peerId;
this.$peerDisplayName.innerText = deviceName;
this.show(); this.show();
const range = document.createRange(); const range = document.createRange();
@ -1247,6 +1278,7 @@ class Notifications {
this.$button.removeAttribute('hidden'); this.$button.removeAttribute('hidden');
this.$button.addEventListener('click', _ => this._requestPermission()); this.$button.addEventListener('click', _ => this._requestPermission());
} }
// Todo: fix Notifications
Events.on('text-received', e => this._messageNotification(e.detail.text, e.detail.peerId)); Events.on('text-received', e => this._messageNotification(e.detail.text, e.detail.peerId));
Events.on('files-received', e => this._downloadNotification(e.detail.files)); Events.on('files-received', e => this._downloadNotification(e.detail.files));
} }
@ -1715,19 +1747,14 @@ Events.on('load', () => {
h = window.innerHeight; h = window.innerHeight;
c.width = w; c.width = w;
c.height = h; c.height = h;
offset = h > 800 offset = $$('footer').offsetHeight - 32;
? 116
: h > 380
? 100
: 65;
if (w < 420) offset += 20;
x0 = w / 2; x0 = w / 2;
y0 = h - offset; y0 = h - offset;
dw = Math.max(w, h, 1000) / 13; dw = Math.max(w, h, 1000) / 13;
drawCircles(); drawCircles();
} }
window.onresize = init; Events.on('bg-resize', _ => init());
window.onresize = _ => Events.fire('bg-resize');
function drawCircle(radius) { function drawCircle(radius) {
ctx.beginPath(); ctx.beginPath();

382
public_included_ws_fallback/styles.css
View file

@ -11,28 +11,25 @@
/* Layout */ /* Layout */
html {
min-height: 100%;
height: -webkit-fill-available;
}
html, html,
body { body {
margin: 0; margin: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100vw;
overflow-x: hidden; overflow-x: hidden;
overscroll-behavior-y: none; overscroll-behavior: none;
overflow-y: hidden;
} }
body { body {
min-height: 100%; min-height: 100vh;
/* mobile viewport bug fix */
min-height: -webkit-fill-available; min-height: -webkit-fill-available;
flex-grow: 1; }
align-items: center;
justify-content: center; html {
overflow-y: hidden; height: -webkit-fill-available;
} }
.row-reverse { .row-reverse {
@ -74,10 +71,7 @@ body {
} }
header { header {
position: absolute; position: relative;
top: 0;
left: 0;
right: 0;
height: 56px; height: 56px;
align-items: center; align-items: center;
padding: 16px; padding: 16px;
@ -120,9 +114,9 @@ h3 {
} }
.font-subheading { .font-subheading {
font-size: 16px; font-size: 14px;
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 18px;
word-break: normal; word-break: normal;
} }
@ -200,20 +194,160 @@ body>header a {
margin-left: 8px; margin-left: 8px;
} }
#center {
position: relative;
display: flex;
flex-direction: column-reverse;
flex-grow: 1;
--footer-height: 146px;
max-height: calc(100vh - 56px - var(--footer-height));
justify-content: space-around;
align-items: center;
overflow-x: hidden;
overflow-y: scroll;
overscroll-behavior-x: none;
}
@media screen and (min-width: 402px) and (max-width: 425px) {
header:has(#clear-pair-devices:not([hidden]))~#center {
--footer-height: 164px;
}
}
@media screen and (max-width: 402px) {
#center {
--footer-height: 184px;
}
}
/* Peers List */ /* Peers List */
#x-peers-filler {
display: flex;
flex-grow: 1;
}
x-peers { x-peers {
width: 100%; position: relative;
overflow: hidden; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
flex-grow: 1;
align-items: start !important;
justify-content: center;
z-index: 2; z-index: 2;
transition: color 300ms; transition: --bg-color 0.5s ease;
overflow-y: scroll;
overflow-x: hidden;
overscroll-behavior-x: none;
scrollbar-width: none;
--peers-per-row: 6; /* default if browser does not support :has selector */
--x-peers-width: min(100vw, calc(var(--peers-per-row) * (var(--peer-width) + 25px) - 16px));
width: var(--x-peers-width);
margin-right: 20px;
margin-left: 20px;
}
x-peers.overflowing {
background: /* Shadow covers */ linear-gradient(rgb(var(--bg-color)) 30%, rgba(var(--bg-color), 0)),
linear-gradient(rgba(var(--bg-color), 0), rgb(var(--bg-color)) 70%) 0 100%,
/* Shadows */ radial-gradient(farthest-side at 50% 0, rgba(var(--text-color), .2), rgba(var(--text-color), 0)),
radial-gradient(farthest-side at 50% 100%, rgba(var(--text-color), .2), rgba(var(--text-color), 0)) 0 100%;
background-repeat: no-repeat;
background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
/* Opera doesn't support this in the shorthand */
background-attachment: local, local, scroll, scroll;
}
x-peers:has(> x-peer) {
--peers-per-row: 10;
}
/* peers-per-row if height is too small for 2 rows */
@media screen and (min-height: 538px) and (max-height: 683px) and (max-width: 402px),
screen and (min-height: 517px) and (max-height: 664px) and (max-width: 426px),
screen and (min-height: 501px) and (max-height: 647px) and (min-width: 426px) {
x-peers:has(> x-peer) {
--peers-per-row: 3;
}
x-peers:has(> x-peer:nth-of-type(7)) {
--peers-per-row: 4;
}
x-peers:has(> x-peer:nth-of-type(10)) {
--peers-per-row: 5;
}
x-peers:has(> x-peer:nth-of-type(13)) {
--peers-per-row: 6;
}
x-peers:has(> x-peer:nth-of-type(16)) {
--peers-per-row: 7;
}
x-peers:has(> x-peer:nth-of-type(19)) {
--peers-per-row: 8;
}
x-peers:has(> x-peer:nth-of-type(22)) {
--peers-per-row: 9;
}
x-peers:has(> x-peer:nth-of-type(25)) {
--peers-per-row: 10;
}
}
/* peers-per-row if height is too small for 3 rows */
@media screen and (min-height: 683px) and (max-width: 402px),
screen and (min-height: 664px) and (max-width: 426px),
screen and (min-height: 647px) and (min-width: 426px) {
x-peers:has(> x-peer) {
--peers-per-row: 3;
}
x-peers:has(> x-peer:nth-of-type(10)) {
--peers-per-row: 4;
}
x-peers:has(> x-peer:nth-of-type(13)) {
--peers-per-row: 5;
}
x-peers:has(> x-peer:nth-of-type(16)) {
--peers-per-row: 6;
}
x-peers:has(> x-peer:nth-of-type(19)) {
--peers-per-row: 7;
}
x-peers:has(> x-peer:nth-of-type(22)) {
--peers-per-row: 8;
}
x-peers:has(> x-peer:nth-of-type(25)) {
--peers-per-row: 9;
}
x-peers:has(> x-peer:nth-of-type(28)) {
--peers-per-row: 10;
}
}
::-webkit-scrollbar {
display: none;
} }
/* Empty Peers List */ /* Empty Peers List */
x-no-peers { x-no-peers {
height: 114px; display: flex;
flex-direction: column;
padding: 8px; padding: 8px;
text-align: center; text-align: center;
/* prevent flickering on load */ /* prevent flickering on load */
@ -255,25 +389,19 @@ x-no-peers[drop-bg] * {
x-peer { x-peer {
-webkit-user-select: none; -webkit-user-select: none;
user-select: none; user-select: none;
padding: 8px;
align-content: start;
flex-wrap: wrap;
} }
x-peer label { x-peer label {
width: var(--peer-width); width: var(--peer-width);
padding: 8px;
cursor: pointer; cursor: pointer;
touch-action: manipulation; touch-action: manipulation;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
position: relative; position: relative;
} }
x-peer .name {
width: var(--peer-width);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
input[type="file"] { input[type="file"] {
visibility: hidden; visibility: hidden;
position: absolute; position: absolute;
@ -281,27 +409,43 @@ input[type="file"] {
x-peer x-icon { x-peer x-icon {
--icon-size: 40px; --icon-size: 40px;
margin-bottom: 4px;
transition: transform 150ms;
will-change: transform;
display: flex;
flex-direction: column;
}
x-peer .icon-wrapper {
width: var(--icon-size); width: var(--icon-size);
padding: 12px; padding: 12px;
border-radius: 50%; border-radius: 50%;
background: var(--primary-color); background: var(--primary-color);
color: white; color: white;
display: flex; display: flex;
margin-bottom: 8px;
transition: transform 150ms;
will-change: transform;
} }
x-peer:not(.type-ip) x-icon { x-peer:not(.type-ip).type-secret .icon-wrapper {
background: var(--paired-device-color); background: var(--paired-device-color);
} }
x-peer.ws-peer x-icon { x-peer x-icon > .highlight-wrapper {
border: solid 4px var(--ws-peer-color); align-self: center;
align-items: center;
margin: 7px auto 0;
height: 6px;
} }
x-peer.ws-peer .progress { x-peer x-icon > .highlight-wrapper > .highlight {
margin-top: 4px; width: 6px;
height: 6px;
border-radius: 50%;
display: none;
}
x-peer.type-secret x-icon > .highlight-wrapper > .highlight {
background-color: var(--paired-device-color);
display: inline;
} }
x-peer:not([status]):hover x-icon, x-peer:not([status]):hover x-icon,
@ -315,6 +459,35 @@ x-peer[status] x-icon {
transform: scale(1); transform: scale(1);
} }
x-peer.ws-peer {
margin-top: -1.5px;
}
x-peer.ws-peer .progress {
margin-top: 3px;
}
x-peer.ws-peer .icon-wrapper{
border: solid 3px var(--ws-peer-color);
}
x-peer.ws-peer .highlight-wrapper {
margin-top: 3px;
}
.device-descriptor {
text-align: center;
}
.name {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
.status, .status,
.device-name, .device-name,
.connection-hash { .connection-hash {
@ -380,12 +553,10 @@ x-peer[drop] x-icon {
/* Footer */ /* Footer */
footer { footer {
position: absolute; position: relative;
bottom: 0; margin-top: auto;
left: 0; z-index: 2;
right: 0;
align-items: center; align-items: center;
padding: 0 0 16px 0;
text-align: center; text-align: center;
transition: color 300ms; transition: color 300ms;
} }
@ -394,6 +565,7 @@ footer .logo {
--icon-size: 80px; --icon-size: 80px;
margin-bottom: 8px; margin-bottom: 8px;
color: var(--primary-color); color: var(--primary-color);
margin-top: -10px;
} }
footer .font-body2 { footer .font-body2 {
@ -439,6 +611,9 @@ x-dialog x-paper {
top: max(50%, 350px); top: max(50%, 350px);
height: 650px; height: 650px;
margin-top: -325px; margin-top: -325px;
display: flex;
flex-direction: column;
justify-content: space-between;
} }
x-dialog:not([show]) { x-dialog:not([show]) {
@ -518,6 +693,7 @@ x-dialog .font-subheading {
#pairDeviceDialog hr { #pairDeviceDialog hr {
margin-top: 40px; margin-top: 40px;
margin-bottom: 40px; margin-bottom: 40px;
width: 100%;
} }
#pairDeviceDialog x-background { #pairDeviceDialog x-background {
@ -541,7 +717,7 @@ x-dialog h2 {
} }
x-dialog .row-reverse { x-dialog .row-reverse {
margin: 40px -24px auto; margin: 40px -24px 0;
border-top: solid 2.5px var(--border-color); border-top: solid 2.5px var(--border-color);
} }
@ -698,16 +874,18 @@ x-dialog .row-reverse {
opacity: 0.1; opacity: 0.1;
} }
#cancelPasteModeBtn { #cancel-paste-mode-btn {
z-index: 2; z-index: 2;
margin-top: 0; margin: 0;
padding: 0;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
left: 0; left: 0;
width: 100%; width: 100vw;
height: 56px; height: 56px;
border-bottom: solid 2.5px var(--border-color); background-color: var(--primary-color);
color: rgb(238, 238, 238);
} }
.button:focus:before, .button:focus:before,
@ -818,7 +996,7 @@ button::-moz-focus-inner {
width: 80px; width: 80px;
height: 80px; height: 80px;
position: absolute; position: absolute;
top: 0; top: -8px;
clip: rect(0px, 80px, 80px, 40px); clip: rect(0px, 80px, 80px, 40px);
--progress: rotate(0deg); --progress: rotate(0deg);
transition: transform 200ms; transition: transform 200ms;
@ -885,13 +1063,16 @@ x-toast:not([show]):not(:hover) {
/* Instructions */ /* Instructions */
x-instructions { x-instructions {
position: absolute; position: relative;
top: 120px;
opacity: 0.5; opacity: 0.5;
transition: opacity 300ms; transition: opacity 300ms;
z-index: -1;
text-align: center; text-align: center;
width: 80%; margin-left: 10px;
margin-right: 10px;
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: center;
} }
x-instructions:not([drop-peer]):not([drop-bg]):before { x-instructions:not([drop-peer]):not([drop-bg]):before {
@ -908,92 +1089,84 @@ x-instructions[drop-bg]:not([drop-peer]):before {
x-instructions p { x-instructions p {
display: none; display: none;
margin: 0 auto auto;
max-width: 80%;
} }
x-peers:empty~x-instructions { x-peers:empty~x-instructions {
opacity: 0; opacity: 0;
} }
.websocket-fallback { @media (hover: none) and (pointer: coarse) {
x-peer {
transform: scale(0.95);
padding: 4px 0;
}
}
#websocket-fallback {
margin-left: 5px;
margin-right: 5px;
padding: 5px;
text-align: center;
opacity: 0.5;
transition: opacity 300ms;
}
#websocket-fallback>span {
margin: 2px;
}
#websocket-fallback > span > span {
border-bottom: solid 4px var(--ws-peer-color); border-bottom: solid 4px var(--ws-peer-color);
padding-bottom: 1px;
} }
/* Responsive Styles */ /* Responsive Styles */
@media (min-height: 800px) { @media screen and (min-height: 800px) {
footer { #websocket-fallback {
margin-bottom: 16px; padding-bottom: 15px;
} }
} }
@media screen and (min-height: 800px), @media (hover: hover) and (pointer: fine) {
screen and (min-width: 1100px) {
x-instructions:not([drop-peer]):not([drop-bg]):before { x-instructions:not([drop-peer]):not([drop-bg]):before {
content: attr(desktop); content: attr(desktop);
} }
} }
@media (max-height: 420px) {
x-instructions {
top: 24px;
}
footer .logo {
--icon-size: 40px;
}
}
/*
iOS specific styles
*/
@supports (-webkit-overflow-scrolling: touch) {
html {
position: fixed;
}
x-instructions:not([drop-peer]):not([drop-bg]):before {
content: attr(mobile);
}
}
/* /*
Color Themes Color Themes
*/ */
/* Default colors */ /* Default colors */
body { body {
--text-color: #333; --text-color: 51,51,51;
--bg-color: #fff; --bg-color: 250,250,250; /*rgb code*/
--bg-color-test: 18,18,18;
--bg-color-secondary: #f1f3f4; --bg-color-secondary: #f1f3f4;
--border-color: #e7e8e8; --border-color: #e7e8e8;
} }
/* Dark theme colors */ /* Dark theme colors */
body.dark-theme { body.dark-theme {
--text-color: #eee; --text-color: 238,238,238;
--bg-color: #121212; --bg-color: 18,18,18; /*rgb code*/
--bg-color-secondary: #333; --bg-color-secondary: #333;
--border-color: #252525; --border-color: #252525;
} }
/* Colored Elements */ /* Colored Elements */
body { body {
color: var(--text-color); color: rgb(var(--text-color));
background-color: var(--bg-color); background-color: rgb(var(--bg-color));
transition: background-color 0.5s ease; transition: background-color 0.5s ease;
} }
x-dialog x-paper { x-dialog x-paper {
background-color: var(--bg-color); background-color: rgb(var(--bg-color));
} }
.textarea { .textarea {
color: var(--text-color) !important; color: rgb(var(--text-color)) !important;
background-color: var(--bg-color-secondary) !important; background-color: var(--bg-color-secondary) !important;
} }
@ -1031,16 +1204,16 @@ x-dialog x-paper {
/* defaults to dark theme */ /* defaults to dark theme */
body { body {
--text-color: #eee; --text-color: 238,238,238;
--bg-color: #121212; --bg-color: 18,18,18; /*rgb code*/
--bg-color-secondary: #333; --bg-color-secondary: #333;
--border-color: #252525; --border-color: #252525;
} }
/* Override dark mode with light mode styles if the user decides to swap */ /* Override dark mode with light mode styles if the user decides to swap */
body.light-theme { body.light-theme {
--text-color: #333; --text-color: 51,51,51;
--bg-color: #fafafa; --bg-color: 250,250,250; /*rgb code*/
--bg-color-secondary: #f1f3f4; --bg-color-secondary: #f1f3f4;
--border-color: #e7e8e8; --border-color: #e7e8e8;
} }
@ -1058,6 +1231,15 @@ x-dialog x-paper {
} }
} }
/*
iOS specific styles
*/
@supports (-webkit-overflow-scrolling: touch) {
html {
min-height: -webkit-fill-available;
}
}
/* webkit scrollbar style*/ /* webkit scrollbar style*/
::-webkit-scrollbar{ ::-webkit-scrollbar{