Implement remove attachments.

css/style.scss

@@ -326,6 +326,22 @@ div[contenteditable="true"] {
     background-color: rgba(210, 210, 210, .5);
 }
 
+.attach-remove {
+    position: absolute;
+    bottom: 8px;
+    right: 8px;
+    padding: 12px;
+    background-color: rgba(210, 210, 210, .4);
+    opacity: 0.54;
+    border-radius: 50%;
+}
+
+.attach-remove:hover {
+    cursor: pointer;
+    background-color: rgba(210, 210, 210, .5);
+    opacity: 0.87;
+}
+
 .note-body {
     padding: 10px;
 }

js/script.js

@@ -422,6 +422,13 @@ View.prototype = {
             }
         });
 
+        // Pin note in modal
+        $('#modal-note-div').on("click", ".attach-remove", function (event) {
+            event.stopPropagation();
+            $(this).parent().remove();
+            self._resizeAttachtsModal();
+        });
+
         // Pin note in modal
         $('#modal-note-div').on("click", ".icon-pin", function (event) {
             event.stopPropagation();
@@ -723,17 +730,23 @@ View.prototype = {
             $("#modal-note-div .note-attachts").replaceWith(html);
 
             lozad('.attach-preview').observe();
-
-            var sAttachts = $('#modal-note-div .note-attach-grid');
-            sAttachts.parent().css('height', (500/sAttachts.length) + 'px');
-            sAttachts.first().children().css('border-top-left-radius', '8px');
-            sAttachts.each(function(index) {
-                $(this).css('width', (100/sAttachts.length) + '%');
-                $(this).css('left', (100/sAttachts.length)*index + '%');
-            });
-            sAttachts.last().children().css('border-top-right-radius', '8px');
+            this._resizeAttachtsModal();
         }
     },
+    _resizeAttachtsModal: function() {
+        var sAttachts = $('#modal-note-div .note-attach-grid');
+        if (sAttachts.length === 0) {
+            $('#modal-note-div .note-attachts').css('height','');
+            return;
+        }
+        sAttachts.parent().css('height', (500/sAttachts.length) + 'px');
+        sAttachts.first().children().first().css('border-top-left-radius', '8px');
+        sAttachts.each(function(index) {
+            $(this).css('width', (100/sAttachts.length) + '%');
+            $(this).css('left', (100/sAttachts.length)*index + '%');
+        });
+        sAttachts.last().children().first().css('border-top-right-radius', '8px');
+    },
     _resizeAttachtsGrid: function() {
         var attachtsgrids = $('#notes-grid-div .note-attachts');
         attachtsgrids.each(function() {

js/templates/attachts.handlebars

@@ -2,6 +2,7 @@
 	{{#each attachts}}
 		<div class='note-attach-grid'>
 			<div class="attach-preview note-attach" attach-file-id="{{file_id}}" data-background-image="{{preview_url}}"/>
+			<div class="attach-remove icon-delete" title="{{t "quicknotes" "Delete attachment"}}"/>
 		</div>
 	{{/each}}
 </div>