From bee3d91690477005d0253aa9ad8524df6160533f Mon Sep 17 00:00:00 2001 From: Matias De lellis Date: Sat, 21 May 2016 16:44:19 -0300 Subject: [PATCH] Positioning the modal editor in the position of the original note --- css/style.css | 19 ++-------- js/script.js | 43 ++++++++++++++--------- templates/part.note-modal-editable.php | 48 +++++++++++++------------- 3 files changed, 53 insertions(+), 57 deletions(-) diff --git a/css/style.css b/css/style.css index f588d92..15d97f6 100644 --- a/css/style.css +++ b/css/style.css @@ -92,7 +92,7 @@ /* The Modal (background) */ -.modal-note { +.modal-note-background { position: fixed; /* Stay in place */ z-index: 10000; /* Sit on top */ padding-top: 100px; /* Location of the box */ @@ -117,6 +117,7 @@ #content-editable { min-height: 20px; } + /* Modal Content */ .modal-content { @@ -125,20 +126,4 @@ width: 60%; height: auto; min-height: unset; - box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); - -webkit-animation-name: animatetop; - -webkit-animation-duration: 0.4s; - animation-name: animatetop; - animation-duration: 0.4s -} - -/* Add Animation */ -@-webkit-keyframes animatetop { - from {top:-300px; opacity:0} - to {top:0; opacity:1} -} - -@keyframes animatetop { - from {top:-300px; opacity:0} - to {top:0; opacity:1} } diff --git a/js/script.js b/js/script.js index ba5aad2..ea0a54a 100644 --- a/js/script.js +++ b/js/script.js @@ -153,10 +153,10 @@ View.prototype = { $('.notes-grid').isotope({ filter: '*'}); }, editNote: function (id) { - var modal = $('#modal-note-editable'); - var modaltitle = $('#modal-note-editable #title-editable'); - var modalcontent = $('#modal-note-editable #content-editable'); - var modalnote = $("#modal-note-editable .quicknote"); + var modal = $('#modal-note-div'); + var modaltitle = $('#modal-note-div #title-editable'); + var modalcontent = $('#modal-note-div #content-editable'); + var modalnote = $("#modal-note-div .quicknote"); var note = $('.notes-grid [data-id=' + id + ']').parent(); @@ -174,15 +174,24 @@ View.prototype = { modalcontent.html(content); modalnote.css("background-color", color); + /* Positioning the modal to the original size */ + $(".modal-content").css({ + "position" : "absolute", + "left" : note.offset().left, + "top" : note.offset().top, + "width" : note.width(), + "min-height": note.height(), + "height:" : "auto" + }); modal.removeClass("hide-modal-note"); modal.addClass("show-modal-note"); modalcontent.focus(); }, cancelEdit: function () { - var modal = $('#modal-note-editable'); - var modaltitle = $('#modal-note-editable #title-editable'); - var modalcontent = $('#modal-note-editable #content-editable'); - var modalnote = $("#modal-note-editable .quicknote"); + var modal = $('#modal-note-div'); + var modaltitle = $('#modal-note-div #title-editable'); + var modalcontent = $('#modal-note-dive #content-editable'); + var modalnote = $("#modal-note-div .quicknote"); this._notes.unsetActive(); this.showAll(); @@ -213,10 +222,10 @@ View.prototype = { }); // Handle click event to open note. - var modal = $('#modal-note-editable'); - var modaltitle = $('#modal-note-editable #title-editable'); - var modalcontent = $('#modal-note-editable #content-editable'); - var modalnote = $("#modal-note-editable .quicknote"); + var modal = $('#modal-note-div'); + var modaltitle = $('#modal-note-div #title-editable'); + var modalcontent = $('#modal-note-div #content-editable'); + var modalnote = $("#modal-note-div .quicknote"); // Show delete icon on hover. $(".quicknote").hover(function() { @@ -235,6 +244,11 @@ View.prototype = { self.editNote(id); }); + // Cancel when click outside the modal. + $(".modal-note-background").click(function () { + self.cancelEdit(); + }); + // Cancel with escape key $(document).keyup(function(event) { if (event.keyCode == 27) { @@ -341,16 +355,13 @@ View.prototype = { }); }); - // load a note + // show a note $('#app-navigation .note > a').click(function () { var id = parseInt($(this).parent().data('id'), 10); $('.notes-grid').isotope({ filter: function() { var itemId = parseInt($(this).children().data('id'), 10); return id == itemId; } }); - self.editNote(id); - -// self._notes.load(id); }); // Handle colors. diff --git a/templates/part.note-modal-editable.php b/templates/part.note-modal-editable.php index 86a3fc5..9efd65c 100644 --- a/templates/part.note-modal-editable.php +++ b/templates/part.note-modal-editable.php @@ -1,27 +1,27 @@ -