fix #862: downloading attachments on mobile

app/scripts/locales/base.json

@@ -224,6 +224,7 @@
 
     "detAttDownload": "Shift-click the attachment button to download it or",
     "detAttDelToRemove": "Delete to remove",
+    "detAttSave": "Save as …",
     "detEmpty": "Your passwords will be displayed here",
     "detGroupRestore": "To restore this group, please drag it to any group outside trash",
     "detHistoryClickPoint": "Click entry history timeline point to view state",
@@ -438,7 +439,7 @@
     "setFileLocalHint": "Want to work seamlessly with local files?",
     "setFileDownloadApp": "Download a desktop app",
     "setFileSave": "Save",
-    "setFileSaveTo": "Save to ...",
+    "setFileSaveTo": "Save to …",
     "setFileClose": "Close",
     "setFileSync": "Sync",
     "setFileSyncVerb": "Sync",

app/scripts/views/details/details-attachment-view.js

@@ -1,14 +1,19 @@
 import { View } from 'framework/views/view';
 import { Shortcuts } from 'comp/app/shortcuts';
+import { Features } from 'util/features';
 import template from 'templates/details/details-attachment.hbs';
 
 class DetailsAttachmentView extends View {
     template = template;
 
-    events = {};
+    events = {
+        'click .details__attachment-preview-download-btn': 'downloadAttachment'
+    };
 
     render(complete) {
-        super.render();
+        super.render({
+            isMobile: Features.isMobile
+        });
         const shortcut = this.$el.find('.details__attachment-preview-download-text-shortcut');
         shortcut.html(Shortcuts.actionShortcutSymbol(false));
         const blob = new Blob([this.model.getBinary()], { type: this.model.mimeType });
@@ -36,6 +41,10 @@ class DetailsAttachmentView extends View {
         this.$el.find('.details__attachment-preview-icon').addClass('fa-' + this.model.icon);
         complete();
     }
+
+    downloadAttachment() {
+        this.emit('download');
+    }
 }
 
 export { DetailsAttachmentView };

app/scripts/views/details/details-view.js

@@ -545,6 +545,7 @@ class DetailsView extends View {
         });
         subView.attId = id;
         subView.render(this.pageResized.bind(this));
+        subView.on('download', () => this.downloadAttachment(attachment));
         this.views.sub = subView;
         attBtn.addClass('details__attachment--active');
     }

app/styles/areas/_details.scss

@@ -560,9 +560,12 @@
             }
             .details__attachment-preview-download-text {
                 position: static;
-                margin-top: 2em;
+                margin-top: $large-padding;
                 opacity: 1;
             }
+            .details__attachment-preview-buttons {
+                margin-top: $large-padding;
+            }
         }
     }
 

app/templates/details/details-attachment.hbs

@@ -1,6 +1,12 @@
 <div class="details__attachment-preview">
     <div class="details__attachment-preview-data"></div>
     <i class="fa details__attachment-preview-icon"></i>
-    <div class="details__attachment-preview-download-text">{{res 'detAttDownload'}}&nbsp;
-        <span class="details__attachment-preview-download-text-shortcut"></span>{{res 'detAttDelToRemove'}}</div>
+    {{#if isMobile}}
+        <div class="details__attachment-preview-buttons">
+            <button class="btn-silent details__attachment-preview-download-btn">{{res 'detAttSave'}}</button>
+        </div>
+    {{else}}
+        <div class="details__attachment-preview-download-text">{{res 'detAttDownload'}}
+            &nbsp;<span class="details__attachment-preview-download-text-shortcut"></span>{{res 'detAttDelToRemove'}}</div>
+    {{/if}}
 </div>

release-notes.md

@@ -5,6 +5,7 @@ Release notes
 `+` #1108: setting for running in an iframe  
 `+` #963: keyboard shortcut to copy OTP in background  
 `+` #565: global shortcut to open KeeWeb  
+`+` #862: downloading attachments on mobile  
 `-` fix #1273: untranslated menu items  
 
 ##### v1.11.6 (2019-10-04)