From 347c8fff73390d1bc64210037b33c88a7fb71f9a Mon Sep 17 00:00:00 2001
From: antelle <dmitryvit@gmail.com>
Date: Sun, 15 Mar 2020 12:41:02 +0100
Subject: [PATCH] fix #1309: back button in attachment preview

---
 .../views/details/details-attachment-view.js  |  5 +++
 .../views/details/details-history-view.js     |  2 +-
 app/scripts/views/details/details-view.js     |  1 +
 app/styles/areas/_details.scss                | 37 ++++++++++++++++++-
 app/templates/details/details-attachment.hbs  |  3 ++
 app/templates/details/details-history.hbs     |  4 +-
 release-notes.md                              |  1 +
 7 files changed, 49 insertions(+), 4 deletions(-)

diff --git a/app/scripts/views/details/details-attachment-view.js b/app/scripts/views/details/details-attachment-view.js
index 5568f32e..ac5a89bf 100644
--- a/app/scripts/views/details/details-attachment-view.js
+++ b/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 };
diff --git a/app/scripts/views/details/details-history-view.js b/app/scripts/views/details/details-history-view.js
index 30bd6c17..09794624 100644
--- a/app/scripts/views/details/details-history-view.js
+++ b/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',
diff --git a/app/scripts/views/details/details-view.js b/app/scripts/views/details/details-view.js
index 3aa86247..5f95e2d4 100644
--- a/app/scripts/views/details/details-view.js
+++ b/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');
     }
diff --git a/app/styles/areas/_details.scss b/app/styles/areas/_details.scss
index 1b1ef343..4cf0b7cd 100644
--- a/app/styles/areas/_details.scss
+++ b/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;
+            }
+        }
+    }
 }
diff --git a/app/templates/details/details-attachment.hbs b/app/templates/details/details-attachment.hbs
index ba516ba1..3a9d8e0b 100644
--- a/app/templates/details/details-attachment.hbs
+++ b/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}}
diff --git a/app/templates/details/details-history.hbs b/app/templates/details/details-history.hbs
index b85a8f03..b070f482 100644
--- a/app/templates/details/details-history.hbs
+++ b/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">
diff --git a/release-notes.md b/release-notes.md
index 717a2914..389d140a 100644
--- a/release-notes.md
+++ b/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