Minz/quicknotes
1
0
Fork 0
mirror of https://github.com/JanGross/quicknotes.git synced 2025-11-30 23:37:16 +01:00
Code Issues Packages Projects Releases Wiki Activity

Reorganize code, and fix the notes whithin the modal..

Browse Source
This commit is contained in:
Matias De lellis
2020-06-05 17:54:44 -03:00
parent c70c87a20d
commit 4e531856f5
3 changed files with 126 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
css/style.scss
View File

@@ -87,10 +87,10 @@
}
#div-content .note-title {
margin-right: 52px;
font-size: 18px;
font-weight: bold;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
@@ -149,7 +149,7 @@
border: 1px solid rgba(0, 0, 0, 0.2);
}
.ciclle-toolbar:hover {
.circle-toolbar:hover {
color: #ccc;
text-decoration:none;
background:#333;
@@ -216,7 +216,7 @@ div[contenteditable="true"] {
}
#title-editable {
width: 100%;
width: 90%;
background: none;
color: unset;
border: none;

197
js/script.js
View File

@@ -139,9 +139,11 @@ Notes.prototype = {
},
updateActive: function (title, content, pinned, tags, color) {
var note = this.getActive();
note.title = title;
note.content = content;
note.pinned = pinned;
note.pinned = pinned ? 1 : 0;
note.ispinned = pinned;
note.tags = tags;
note.color = color;
@@ -194,36 +196,51 @@ View.prototype = {
},
editNote: function (id) {
var self = this;
var modal = $('#modal-note-div');
// Get selected note elements
var note = $('.notes-grid [data-id=' + id + ']').parent();
var title = note.find(".note-title").html();
var content = note.find(".note-content").html();
var pinned = note.find(".icon-pinned").length > 0;
var tags = note.find(".note-tags").html();
var color = note.children().css("background-color");
// Get modal elements
var modaltitle = $('#modal-note-div #title-editable');
var modalcontent = $('#modal-note-div #content-editable');
var pinicon = $('#modal-note-div .icon-header-note');
var modaltags = $('#modal-note-div .note-tags');
var modalnote = $("#modal-note-div .quicknote");
var note = $('.notes-grid [data-id=' + id + ']').parent();
var modalid = modalnote.data('id');
if (id == modalid)
return;
var title = note.find(".note-title").html();
var content = note.find(".note-content").html();
var tags = note.find(".note-tags").html();
var color = note.children().css("background-color");
var colors = modal[0].getElementsByClassName("circle-toolbar");
// Sync color
var colors = modalnote[0].getElementsByClassName("circle-toolbar");
$.each(colors, function(i, c) {
if(color == c.style.backgroundColor) {
c.className += " icon-checkmark";
}
});
var modalid = modalnote.data('id');
if (id == modalid)
return;
// Sync pin icon
if (pinned) {
pinicon.removeClass("icon-pin");
pinicon.addClass("icon-pinned");
} else {
pinicon.removeClass("icon-pinned");
pinicon.addClass("icon-pin");
}
// Sync main content
modalnote.data('id', id);
modaltitle.html(title);
modalcontent.html(content);
modaltags.html(tags);
modalnote.css("background-color", color);
// Create medium div editor.
var autolist = new AutoList();
var editor = new MediumEditor(modalcontent, {
targetBlank: true,
@@ -295,6 +312,7 @@ View.prototype = {
/* Animate to center */
var modal = $('#modal-note-div');
modal.removeClass("hide-modal-note");
modal.addClass("show-modal-note");
@@ -328,6 +346,7 @@ View.prototype = {
var title = $('#modal-note-div #title-editable').html().trim();
var content = $('#modal-note-div #content-editable').html().trim();
var pinned = $('#modal-note-div').find(".icon-pinned").length > 0;
var color = this.colorToHex($("#modal-note-div .quicknote").css("background-color"));
var tags = $("#modal-note-div .slim-tag").toArray().map(function (value) {
return {
@@ -350,7 +369,7 @@ View.prototype = {
*/
var self = this;
this._notes.updateId(id, title, content, false, tags, color).done(function () {
this._notes.updateId(id, title, content, pinned, tags, color).done(function () {
var modal = $('#modal-note-div');
var modalnote = $("#modal-note-div .quicknote");
var modaltitle = $('#modal-note-div #title-editable');
@@ -370,11 +389,11 @@ View.prototype = {
self._editor.destroy();
self._changed = false;
// TODO: Update grid note instead of redraw everything
self.render();
}).fail(function () {
alert('DOh!. Could not update note!.');
});
},
cancelEdit: function () {
var self = this;
@@ -463,15 +482,15 @@ View.prototype = {
var modalnote = $("#modal-note-div .quicknote");
// Show delete icon on hover.
$("#app-content").on("mouseenter", ".quicknote", function() {
$("#notes-grid-div").on("mouseenter", ".quicknote", function() {
$(this).find(".icon-header-note").addClass( "show-header-icon");
});
$("#app-content").on("mouseleave", ".quicknote", function() {
$("#notes-grid-div").on("mouseleave", ".quicknote", function() {
$(this).find(".icon-header-note").removeClass("show-header-icon");
});
// Open notes when clicking them.
$("#app-content").on("click", ".quicknote", function (event) {
$("#notes-grid-div").on("click", ".quicknote", function (event) {
event.stopPropagation();
if($(this).hasClass('shared')) return; //shares don't allow editing
@@ -485,57 +504,12 @@ View.prototype = {
});
// Doesn't show modal dialog when opening link
$("#app-content").on("click", ".note-grid-item a", function (event) {
$("#notes-grid-div").on("click", ".note-grid-item a", function (event) {
event.stopPropagation();
});
// Cancel when click outside the modal.
$('#app-content').on('click', '.modal-note-background', function (event) {
event.stopPropagation();
if (!self._changed) {
self.cancelEdit();
return;
}
OC.dialogs.confirm(
t('facerecognition', 'Do you want to discard the changes?'),
t('facerecognition', 'Unsaved changes'),
function(result) {
if (result) {
self.cancelEdit();
}
},
true
);
});
// Handle hotkeys
$(document).off("keyup"); // FIXME: This prevent exponential calls of save note.
$(document).on("keyup", function(event) {
if (event.keyCode == 27) {
event.stopPropagation();
if (!self._changed) {
self.cancelEdit();
return;
}
OC.dialogs.confirm(
t('facerecognition', 'Do you want to discard the changes?'),
t('facerecognition', 'Unsaved changes'),
function(result) {
if (result) {
self.cancelEdit();
}
},
true
);
}
else if (event.keyCode == 13 && event.altKey) {
event.preventDefault();
event.stopPropagation();
self.saveNote();
}
});
$('#app-content').on('click', '.slim-tag', function (event) {
$('#notes-grid-div').on('click', '.slim-tag', function (event) {
event.stopPropagation();
var tagId = parseInt($(this).attr('tag-id'), 10);
$('.notes-grid').isotope({ filter: function() {
@@ -555,7 +529,7 @@ View.prototype = {
// Remove note icon
var self = this;
$('#app-content').on("click", ".icon-delete-note", function (event) {
$('#notes-grid-div').on("click", ".icon-delete-note", function (event) {
event.stopPropagation();
var note = $(this).parent().parent();
@@ -585,7 +559,7 @@ View.prototype = {
);
});
$('#app-content').on("click", ".icon-pin", function (event) {
$('#notes-grid-div').on("click", ".icon-pin", function (event) {
event.stopPropagation();
var icon = $(this);
@@ -604,7 +578,7 @@ View.prototype = {
});
});
$('#app-content').on("click", ".icon-pinned", function (event) {
$('#notes-grid-div').on("click", ".icon-pinned", function (event) {
event.stopPropagation();
var icon = $(this);
@@ -619,7 +593,7 @@ View.prototype = {
icon.attr('title', t('quicknotes', 'Pin note'));
$('.notes-grid').isotope('updateSortData').isotope();
}).fail(function () {
alert('Could not unpin');
alert('Could not unpin note');
});
});
@@ -627,17 +601,73 @@ View.prototype = {
* Modal actions.
*/
// Handle colors.
$('#modal-note-div .circle-toolbar').click(function (event) {
// Cancel when click outside the modal.
$('#div-content').on('click', '.modal-note-background', function (event) {
event.stopPropagation();
if (!self._changed) {
self.cancelEdit();
return;
}
OC.dialogs.confirm(
t('facerecognition', 'Do you want to discard the changes?'),
t('facerecognition', 'Unsaved changes'),
function(result) {
if (result) {
self.cancelEdit();
}
},
true
);
});
// But handles the click until the modal
$('#div-content').on('click', '.modal-content', function (event) {
event.stopPropagation();
});
// Handle hotkeys
$(document).off("keyup"); // FIXME: This prevent exponential calls of save note.
$(document).on("keyup", function(event) {
if (event.keyCode == 27) {
event.stopPropagation();
if (!self._changed) {
self.cancelEdit();
return;
}
OC.dialogs.confirm(
t('facerecognition', 'Do you want to discard the changes?'),
t('facerecognition', 'Unsaved changes'),
function(result) {
if (result) {
self.cancelEdit();
}
},
true
);
}
else if (event.keyCode == 13 && event.altKey) {
event.preventDefault();
event.stopPropagation();
self.saveNote();
}
});
// Pin note in modal
$('#modal-note-div').on("click", ".icon-pin", function (event) {
event.stopPropagation();
var oldColorTool = $('#modal-note-div .circle-toolbar.icon-checkmark');
$.each(oldColorTool, function(i, oct) {
$(oct).removeClass('icon-checkmark');
});
$(this).addClass('icon-checkmark');
var color = $(this).css("background-color");
modalnote.css("background-color", color);
$(this).removeClass("icon-pin");
$(this).addClass("icon-pinned");
$(this).attr('title', t('quicknotes', 'Unpin note'));
});
// Unpin note in modal
$('#modal-note-div').on("click", ".icon-pinned", function (event) {
event.stopPropagation();
$(this).removeClass("icon-pinned");
$(this).addClass("icon-pin");
$(this).attr('title', t('quicknotes', 'Pin note'));
});
// handle share editing notes.
@@ -714,6 +744,19 @@ View.prototype = {
});
});
// Handle colors.
$('#modal-note-div .circle-toolbar').click(function (event) {
event.stopPropagation();
var oldColorTool = $('#modal-note-div .circle-toolbar.icon-checkmark');
$.each(oldColorTool, function(i, oct) {
$(oct).removeClass('icon-checkmark');
});
$(this).addClass('icon-checkmark');
var color = $(this).css("background-color");
modalnote.css("background-color", color);
});
// handle tags button.
$('#modal-note-div #tag-button').click(function (event) {
event.stopPropagation();

5
js/templates/notes.handlebars
View File

@@ -1,8 +1,8 @@
{{#if notes}}
<div class="notes-grid">
<div id="notes-grid-div" class="notes-grid">
{{#each notes}}
<div class="note-grid-item">
<div class="quicknote noselect {{#if active}}note-active{{/if}} {{#if isshared}}shared{{/if}} {{#if sharedwith}}shareowner{{/if}}" style="background-color: {{color}}" data-id="{{ id }}" data-timestamp="{{ timestamp }}" >
<div class="quicknote noselect {{#if isshared}}shared{{/if}} {{#if sharedwith}}shareowner{{/if}}" style="background-color: {{color}}" data-id="{{ id }}" data-timestamp="{{ timestamp }}" >
{{#if isshared}}
<div>
<div class='icon-share shared-title' title="Shared by {{ userid }}"></div>
@@ -49,6 +49,7 @@
<div class="modal-content">
<div class="quicknote note-active" style="background-color: #F7EB96" data-id="-1">
<div>
<div class="icon-header-note icon-pin fixed-header-icon" title="{{t "quicknotes" "Pin note"}}"></div>
<div contenteditable="true" id='title-editable' class='note-title'></div>
</div>
<div contenteditable="true" id='content-editable' class='note-content'></div>