diff --git a/css/style.scss b/css/style.scss index 294c339..079c112 100644 --- a/css/style.scss +++ b/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; } diff --git a/js/script.js b/js/script.js index a4305c8..0db671f 100644 --- a/js/script.js +++ b/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() { diff --git a/js/templates/attachts.handlebars b/js/templates/attachts.handlebars index 270c9b7..eaed505 100644 --- a/js/templates/attachts.handlebars +++ b/js/templates/attachts.handlebars @@ -2,6 +2,7 @@ {{#each attachts}}