snapdrop

commit 26352be478f4e6e98ed77979033dd782ce197456
parent 2c6ea6e008f99a844a2448caa0593956822aca2a
Author: RobinLinus <robinlinus@users.noreply.github.com>
Date:   Sun, 20 Dec 2020 21:30:28 +0100

"Download all" when receiving multiple files

Diffstat:
M
client/index.html
 | 
6
+++++-
M
client/scripts/ui.js
 | 
10
++++++++++
M
client/styles.css
 | 
13
+++++++++++--

3 files changed, 26 insertions(+), 3 deletions(-)
diff --git a/client/index.html b/client/index.html
@@ -71,8 +71,12 @@
                 <h3>File Received</h3>
                 <div class="font-subheading" id="fileName">Filename</div>
                 <div class="font-body2" id="fileSize"></div>
+                <div class="row">
+                    <label for="autoDownload" class="grow">Ask to save each file before downloading</label>
+                    <input type="checkbox" id="autoDownload" checked=""> 
+                </div>
                 <div class="row-reverse">
-                    <a class="button" close id="download" title="Download File" autofocus>Download</a>
+                    <a class="button" close id="download" title="Download File" autofocus>Save</a>
                     <button class="button" close>Ignore</button>
                 </div>
             </x-paper>
diff --git a/client/scripts/ui.js b/client/scripts/ui.js
@@ -261,6 +261,11 @@ class ReceiveDialog extends Dialog {
         $a.href = url;
         $a.download = file.name;
 
+        if(this._autoDownload()){
+            $a.click()
+            return
+        }
+
         this.$el.querySelector('#fileName').textContent = file.name;
         this.$el.querySelector('#fileSize').textContent = this._formatFileSize(file.size);
         this.show();
@@ -289,6 +294,11 @@ class ReceiveDialog extends Dialog {
         super.hide();
         this._dequeueFile();
     }
+
+
+    _autoDownload(){
+        return !this.$el.querySelector('#autoDownload').checked
+    }
 }
 
 
diff --git a/client/styles.css b/client/styles.css
@@ -50,6 +50,10 @@ body {
     justify-content: center;
 }
 
+.grow {
+    flex-grow: 1;
+}
+
 .full {
     position: absolute;
     top: 0;
@@ -357,11 +361,17 @@ x-dialog .row-reverse>.button {
     margin-left: 8px;
 }
 
-x-dialog a{
+x-dialog a {
     color: var(--primary-color);
 }
 
 /* Receive Dialog */
+#receiveDialog .row{
+    margin-top: 24px;
+    margin-bottom: 8px;
+}
+
+/* Receive Text Dialog */
 
 #receiveTextDialog #text {
     width: 100%;
@@ -469,7 +479,6 @@ button::-moz-focus-inner {
 
 /* Text Input */
 
-input,
 textarea {
     width: 100%;
     box-sizing: border-box;