From 35aac22fae90ee940000ed95c41aade418a19387 Mon Sep 17 00:00:00 2001
From: schlagmichdoch <schlagmichdoch@users.noreply.github.com>
Date: Sun, 22 Jan 2023 17:33:19 +0100
Subject: [PATCH] fix drop files when no peer is connected yet

---
 public/scripts/ui.js | 13 +++++++------
 public/styles.css    | 18 +++++++++++++++++-
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/public/scripts/ui.js b/public/scripts/ui.js
index 56f85a1..9d22c4b 100644
--- a/public/scripts/ui.js
+++ b/public/scripts/ui.js
@@ -33,7 +33,7 @@ class PeersUI {
         this.$cancelPasteModeBtn = $('cancelPasteModeBtn');
         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('dragend', _ => this._onDragEnd());
 
@@ -120,18 +120,21 @@ class PeersUI {
 
     _onDrop(e) {
         e.preventDefault();
-        if (!$$('x-peer').contains(e.target)) {
+        if (!$$('x-peer') || !$$('x-peer').contains(e.target)) {
             this._activatePasteMode(e.dataTransfer.files, '')
         }
         this._onDragEnd();
     }
 
-    _onDragOver() {
+    _onDragOver(e) {
+        e.preventDefault();
         this.$xInstructions.setAttribute('drop-bg', 1);
+        this.$xNoPeers.setAttribute('drop-bg', 1);
     }
 
     _onDragEnd() {
         this.$xInstructions.removeAttribute('drop-bg', 1);
+        this.$xNoPeers.removeAttribute('drop-bg');
     }
 
     _onPaste(e) {
@@ -285,9 +288,7 @@ class PeerUI {
         this._callbackTouchStart = _ => this._onTouchStart()
         this._callbackTouchEnd = e => this._onTouchEnd(e)
         this._callbackPointerDown = e => this._onPointerDown(e)
-        // prevent browser's default file drop behavior
-        Events.on('dragover', e => e.preventDefault());
-        Events.on('drop', e => e.preventDefault());
+        // PasteMode
         Events.on('paste-mode-changed', _ => this._onPasteModeChanged());
     }
 
diff --git a/public/styles.css b/public/styles.css
index 467b043..78e44f4 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -222,6 +222,22 @@ x-peers:not(:empty)+x-no-peers {
     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 */
@@ -827,7 +843,7 @@ x-instructions[drop-peer]:before {
 }
 
 x-instructions[drop-bg]:not([drop-peer]):before {
-    content: "Release to select recepient";
+    content: "Release to select recipient";
 }
 
 x-instructions p {