fix drop files when no peer is connected yet

This commit is contained in:
schlagmichdoch 2023-01-22 17:33:19 +01:00
parent 87aa958c60
commit 35aac22fae
2 changed files with 24 additions and 7 deletions

View file

@ -33,7 +33,7 @@ class PeersUI {
this.$cancelPasteModeBtn = $('cancelPasteModeBtn'); this.$cancelPasteModeBtn = $('cancelPasteModeBtn');
this.$cancelPasteModeBtn.addEventListener('click', _ => this._cancelPasteMode()); this.$cancelPasteModeBtn.addEventListener('click', _ => this._cancelPasteMode());
Events.on('dragover', _ => this._onDragOver()); Events.on('dragover', e => this._onDragOver(e));
Events.on('dragleave', _ => this._onDragEnd()); Events.on('dragleave', _ => this._onDragEnd());
Events.on('dragend', _ => this._onDragEnd()); Events.on('dragend', _ => this._onDragEnd());
@ -120,18 +120,21 @@ class PeersUI {
_onDrop(e) { _onDrop(e) {
e.preventDefault(); e.preventDefault();
if (!$$('x-peer').contains(e.target)) { if (!$$('x-peer') || !$$('x-peer').contains(e.target)) {
this._activatePasteMode(e.dataTransfer.files, '') this._activatePasteMode(e.dataTransfer.files, '')
} }
this._onDragEnd(); this._onDragEnd();
} }
_onDragOver() { _onDragOver(e) {
e.preventDefault();
this.$xInstructions.setAttribute('drop-bg', 1); this.$xInstructions.setAttribute('drop-bg', 1);
this.$xNoPeers.setAttribute('drop-bg', 1);
} }
_onDragEnd() { _onDragEnd() {
this.$xInstructions.removeAttribute('drop-bg', 1); this.$xInstructions.removeAttribute('drop-bg', 1);
this.$xNoPeers.removeAttribute('drop-bg');
} }
_onPaste(e) { _onPaste(e) {
@ -285,9 +288,7 @@ class PeerUI {
this._callbackTouchStart = _ => this._onTouchStart() this._callbackTouchStart = _ => this._onTouchStart()
this._callbackTouchEnd = e => this._onTouchEnd(e) this._callbackTouchEnd = e => this._onTouchEnd(e)
this._callbackPointerDown = e => this._onPointerDown(e) this._callbackPointerDown = e => this._onPointerDown(e)
// prevent browser's default file drop behavior // PasteMode
Events.on('dragover', e => e.preventDefault());
Events.on('drop', e => e.preventDefault());
Events.on('paste-mode-changed', _ => this._onPasteModeChanged()); Events.on('paste-mode-changed', _ => this._onPasteModeChanged());
} }

View file

@ -222,6 +222,22 @@ x-peers:not(:empty)+x-no-peers {
display: none; display: none;
} }
x-no-peers::before {
color: var(--primary-color);
font-size: 24px;
font-weight: 400;
letter-spacing: -.012em;
line-height: 32px;
}
x-no-peers[drop-bg]::before {
content: "Release to select recipient";
}
x-no-peers[drop-bg] * {
display: none;
}
/* Peer */ /* Peer */
@ -827,7 +843,7 @@ x-instructions[drop-peer]:before {
} }
x-instructions[drop-bg]:not([drop-peer]):before { x-instructions[drop-bg]:not([drop-peer]):before {
content: "Release to select recepient"; content: "Release to select recipient";
} }
x-instructions p { x-instructions p {