fix #1309: back button in attachment preview

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

@@ -7,6 +7,7 @@ class DetailsAttachmentView extends View {
     template = template;
 
     events = {
+        'click .details__subview-close': 'closeAttachment',
         'click .details__attachment-preview-download-btn': 'downloadAttachment'
     };
 
@@ -45,6 +46,10 @@ class DetailsAttachmentView extends View {
     downloadAttachment() {
         this.emit('download');
     }
+
+    closeAttachment() {
+        this.emit('close');
+    }
 }
 
 export { DetailsAttachmentView };

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

@@ -14,7 +14,7 @@ class DetailsHistoryView extends View {
     template = template;
 
     events = {
-        'click .details__history-close': 'closeHistory',
+        'click .details__subview-close': 'closeHistory',
         'click .details__history-timeline-item': 'timelineItemClick',
         'click .details__history-arrow-prev': 'timelinePrevClick',
         'click .details__history-arrow-next': 'timelineNextClick',

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

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

app/styles/areas/_details.scss

@@ -563,8 +563,8 @@
             display: flex;
             flex-direction: column;
             flex: 1 0 auto;
-            justify-content: center;
-            align-self: center;
+            justify-content: flex-start;
+            align-self: flex-start;
             align-items: center;
             text-align: center;
             .details__attachment-preview-icon {
@@ -579,6 +579,9 @@
             .details__attachment-preview-buttons {
                 margin-top: $large-padding;
             }
+            .details__attachment-preview-data {
+                padding-top: $large-padding;
+            }
         }
     }
 
@@ -730,4 +733,34 @@
             }
         }
     }
+
+    &__subview-close {
+        align-self: flex-end;
+        float: right;
+        cursor: pointer;
+        user-select: none;
+        &-pre,
+        &-post {
+            display: none;
+        }
+        @include mobile {
+            line-height: $mobile-back-button-height;
+            height: $mobile-back-button-height;
+            padding: $base-padding;
+            font-size: 1.2em;
+            > i {
+                margin-right: 0.3em;
+                font-size: 1.2em;
+                vertical-align: text-bottom;
+            }
+            &-pre {
+                display: inline;
+            }
+        }
+        @include nomobile {
+            &-post {
+                display: inline;
+            }
+        }
+    }
 }

app/templates/details/details-attachment.hbs

@@ -1,4 +1,7 @@
 <div class="details__attachment-preview">
+    <div class="details__subview-close">
+        <i class="fa fa-chevron-left details__subview-close-pre"></i>{{res 'detHistoryReturn'}} <i class="fa fa-external-link-square details__subview-close-post"></i>
+    </div>
     <div class="details__attachment-preview-data"></div>
     <i class="fa details__attachment-preview-icon"></i>
     {{#if isMobile}}

app/templates/details/details-history.hbs

@@ -1,4 +1,7 @@
 <div class="details__history">
+    <div class="details__subview-close">
+        <i class="fa fa-chevron-left details__subview-close-pre"></i>{{res 'detHistoryReturn'}} <i class="fa fa-external-link-square details__subview-close-post"></i>
+    </div>
     <div class="details__history-desc muted-color">{{res 'detHistoryClickPoint'}}</div>
     <div class="details__history-top">
         <div class="details__history-timeline">
@@ -6,7 +9,6 @@
             <div class="details__history-arrow-prev"><i class="fa fa-long-arrow-left"></i></div>
             <div class="details__history-arrow-next"><i class="fa fa-long-arrow-right"></i></div>
         </div>
-        <a class="details__history-close">{{res 'detHistoryReturn'}} <i class="fa fa-external-link-square"></i></a>
     </div>
     <div class="details__history-body">
         <div class="details__field">

release-notes.md

@@ -6,6 +6,7 @@ Release notes
 `*` #1397: Segoe UI font on Windows  
 `+` #1393: option to disable saving and exporting (canSaveTo)  
 `+` #1006: password generator patterns  
+`+` #1309: back button in attachment preview  
 `-` fix #1396: fixed hyperlinks in notes  
 `-` fix #1323: version in the About dialog  
 `-` fix #734: OTP secrets with spaces