From 75e6b308883974020dcea396f0a249ea0ccdc9e0 Mon Sep 17 00:00:00 2001
From: Martti Malmi <sirius@iki.fi>
Date: Sat, 16 May 2020 07:50:56 +0300
Subject: [PATCH] add close attachments button & esc

---
 src/css/style.css |  5 +++++
 src/js/app.js     | 43 +++++++++++++++++++++++++++++++------------
 2 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/src/css/style.css b/src/css/style.css
index 98e9c13e..333be7d9 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -391,6 +391,11 @@ header #back-button {
   max-height: 60vh;
 }
 
+#attachment-preview button {
+  display: block;
+  margin-bottom: 10px;
+}
+
 #message-list {
   display: flex;
   max-width: 700px;
diff --git a/src/js/app.js b/src/js/app.js
index eaea50da..edc83e3b 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -327,27 +327,47 @@ if (!iris.util.isMobile) {
   });
 }
 
+$(document).keyup(function(e) {
+  if (e.key === "Escape") { // escape key maps to keycode `27`
+    closeAttachmentsPreview();
+  }
+});
+
+function openAttachmentsPreview() {
+  var attachmentsPreview = $('#attachment-preview');
+  attachmentsPreview.empty();
+  var closeBtn = $('<button>').text('Cancel').click(closeAttachmentsPreview);
+  attachmentsPreview.append(closeBtn);
 
-$('#attach-file').click(event => {
-  event.preventDefault();
-  $('#attachment-input').click();
-})
-$('#attachment-input').change(e => {
-  $('#attachment-preview').empty();
   var files = $('#attachment-input')[0].files;
   if (files) {
-    $('#attachment-preview').show();
+    attachmentsPreview.show();
     $('#message-list').hide();
     for (var i = 0;i < files.length;i++) {
       getBase64(files[i]).then(base64 => {
         chats[activeChat].attachments = chats[activeChat].attachments || [];
         chats[activeChat].attachments.push({type: 'image', data: base64});
         var preview = $('<img>').attr('src', base64);
-        $('#attachment-preview').append(preview);
+        attachmentsPreview.append(preview);
       });
     }
   }
-});
+}
+
+function closeAttachmentsPreview() {
+  $('#attachment-preview').hide();
+  $('#message-list').show();
+  $('#message-view').scrollTop($('#message-view')[0].scrollHeight - $('#message-view')[0].clientHeight);
+  if (activeChat) {
+    chats[activeChat].attachments = null;
+  }
+}
+
+$('#attach-file').click(event => {
+  event.preventDefault();
+  $('#attachment-input').click();
+})
+$('#attachment-input').change(openAttachmentsPreview);
 
 $('#desktop-application-about').toggle(!iris.util.isMobile && !iris.util.isElectron);
 
@@ -463,6 +483,7 @@ function resetView() {
   $("#header-content").empty();
   $("#header-content").css({cursor: null});
   $('#private-key-qr').remove();
+  closeAttachmentsPreview();
 }
 
 function showMenu(show = true) {
@@ -992,9 +1013,7 @@ function showChat(pub) {
       msg.attachments = chats[pub].attachments;
     }
     chats[pub].send(msg);
-    chats[pub].attachments = null;
-    $('#attachment-preview').hide();
-    $('#message-list').show();
+    closeAttachmentsPreview();
     $('#new-msg').val('');
   });
   changeChatUnseenCount(pub, 0);