Pārlūkot izejas kodu

"Download all" when receiving multiple files

RobinLinus 4 gadi atpakaļ
vecāks
revīzija
26352be478
3 mainītis faili ar 26 papildinājumiem un 3 dzēšanām
  1. 5 1
      client/index.html
  2. 10 0
      client/scripts/ui.js
  3. 11 2
      client/styles.css

+ 5 - 1
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>

+ 10 - 0
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
+    }
 }
 
 

+ 11 - 2
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;