diff --git a/Makefile b/Makefile index 96a92e0..3b20db1 100644 --- a/Makefile +++ b/Makefile @@ -64,6 +64,7 @@ deps: cp node_modules/medium-editor/dist/js/medium-editor.js vendor/ cp node_modules/medium-editor/dist/css/medium-editor.css vendor/ cp node_modules/medium-editor-autolist/dist/autolist.js vendor/ + cp node_modules/lozad/dist/lozad.js vendor/ depsmin: mkdir -p vendor @@ -74,6 +75,7 @@ depsmin: cp node_modules/medium-editor/dist/js/medium-editor.min.js vendor/medium-editor.js cp node_modules/medium-editor/dist/css/medium-editor.min.css vendor/medium-editor.css cp node_modules/medium-editor-autolist/dist/autolist.min.js vendor/autolist.js + cp node_modules/lozad/dist/lozad.min.js vendor/lozad.js js-templates: node_modules/handlebars/bin/handlebars js/templates -f js/templates.js diff --git a/appinfo/info.xml b/appinfo/info.xml index 82d8a89..ca7a4ee 100644 --- a/appinfo/info.xml +++ b/appinfo/info.xml @@ -5,7 +5,7 @@ Quick notes Quick notes with a basic rich text Quick notes with a basic rich text - 0.3.0 + 0.3.1 agpl Matias De lellis QuickNotes diff --git a/css/style.scss b/css/style.scss index 3b1b846..294c339 100644 --- a/css/style.scss +++ b/css/style.scss @@ -33,7 +33,6 @@ color: #202124; min-height: 150px; width: 250px; - padding: 10px; border-radius: 8px; box-shadow: 0 4px 6px #c1c1c1; } @@ -71,8 +70,9 @@ display: none; } -#div-content .save-button { +#div-content .buttons-toolbar { float: right; + display: flex; /*padding-right: 8px;*/ /*padding-bottom: 5px;*/ } @@ -101,6 +101,7 @@ .note-content { margin: 4px; overflow-wrap: break-word; + min-height: 75px; } .icon-header-note { @@ -137,9 +138,9 @@ not supported by any browser */ } -.note-toolbar { - float:left; - padding-top: 12px; +.colors-toolbar { + float: left; + padding-top: 10px; } .circle-toolbar { @@ -226,8 +227,8 @@ div[contenteditable="true"] { } .note-options { - bottom: 0; - /*padding: 5px;*/ + padding: 8px; + padding-top: 0px; } #note-share-options { @@ -264,7 +265,7 @@ div[contenteditable="true"] { } .note-tags { - margin-top: 10px; + margin-top: 8px; } /* Restore defaults select2 rules */ @@ -302,3 +303,36 @@ div[contenteditable="true"] { height: auto; min-height: unset; } + +.note-attachts { + position: relative; +} + +.note-attach-grid { + position: absolute; + top: 0%; + left: 0%; + height: 100%; + width: 100%; +} + +.note-attach { + background-size: contain; + width: 100%; + height: 100%; +} + +.attach-preview { + background-color: rgba(210, 210, 210, .5); +} + +.note-body { + padding: 10px; +} + +.round-tool-button { + width: 32px; + height: 32px; + padding: 0px; + border-radius: 50%; +} diff --git a/js/script.js b/js/script.js index 35b9499..a4305c8 100644 --- a/js/script.js +++ b/js/script.js @@ -165,6 +165,7 @@ View.prototype = { this._editablePinned(note.ispinned); this._editableColor(note.color); this._editableTags(note.tags); + this._editableAttachts(note.attachts); // Create medium div editor. this._initEditor(); @@ -178,6 +179,7 @@ View.prototype = { id: this._editableId(), title: this._editableTitle(), content: this._editableContent(), + attachts: this._editableAttachts(), color: this._editableColor(), pinned: this._editablePinned(), tags: this._editableTags() @@ -188,6 +190,9 @@ View.prototype = { var noteHtml = $(Handlebars.templates['note-item'](note)).children(); $('.notes-grid [data-id=' + note.id + ']').replaceWith(noteHtml); + self._resizeAttachtsGrid(); + lozad('.attach-preview').observe(); + // Hide modal editor and reset it. self._hideEditor(note.id); self._destroyEditor(); @@ -221,8 +226,13 @@ View.prototype = { emptyMsg: t('quicknotes', 'Nothing here. Take your first quick notes'), emptyIcon: OC.imagePath('quicknotes', 'app'), }); + $('#div-content').html(html); + // TODO: Move within handlebars template + this._resizeAttachtsGrid(); + lozad('.attach-preview').observe(); + // Init masonty grid to notes. $('.notes-grid').isotope({ itemSelector: '.note-grid-item', @@ -285,7 +295,7 @@ View.prototype = { $('#notes-grid-div').on("click", ".icon-delete-note", function (event) { event.stopPropagation(); - var gridnote = $(this).parent().parent(); + var gridnote = $(this).parent().parent().parent(); var id = parseInt(gridnote.data('id'), 10); var note = self._notes.read(id); @@ -317,7 +327,7 @@ View.prototype = { event.stopPropagation(); var icon = $(this); - var gridNote = icon.parent().parent(); + var gridNote = icon.parent().parent().parent(); var id = parseInt(gridNote.data('id'), 10); var note = self._notes.read(id); @@ -340,7 +350,7 @@ View.prototype = { event.stopPropagation(); var icon = $(this); - var gridNote = icon.parent().parent(); + var gridNote = icon.parent().parent().parent(); var id = parseInt(gridNote.data('id'), 10); var note = self._notes.read(id); @@ -437,6 +447,26 @@ View.prototype = { $('#modal-note-div #tag-button').trigger( "click"); }); + // handle attach button. + $('#modal-note-div #attach-button').click(function (event) { + event.stopPropagation(); + OC.dialogs.filepicker(t('quicknotes', 'Select file to attach'), function(datapath, returntype) { + OC.Files.getClient().getFileInfo(datapath).then((status, fileInfo) => { + var attach = { + file_id: fileInfo.id, + preview_url: OC.generateUrl('core') + '/preview.png?file=' + encodeURI(datapath) + '&x=512&y=512' + }; + + var attachts = self._editableAttachts(); + attachts.push(attach); + + self._editableAttachts(attachts); + }).fail(() => { + console.log("ERRORRR"); + }); + }, false, '*', true, OC.dialogs.FILEPICKER_TYPE_CHOOSE) + }); + // handle tags button. $('#modal-note-div #tag-button').click(function (event) { event.stopPropagation(); @@ -680,6 +710,43 @@ View.prototype = { $("#modal-note-div .note-tags").replaceWith(html); } }, + _editableAttachts: function(attachts) { + if (attachts === undefined) { + return $("#modal-note-div .note-attach").toArray().map(function (value) { + return { + file_id: value.getAttribute('attach-file-id'), + preview_url: value.getAttribute('data-background-image') + }; + }); + } else { + var html = Handlebars.templates['attachts']({ attachts: attachts}); + $("#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'); + } + }, + _resizeAttachtsGrid: function() { + var attachtsgrids = $('#notes-grid-div .note-attachts'); + attachtsgrids.each(function() { + var sAttachts = $(this).children('.note-attach-grid'); + sAttachts.parent().css('height', (250/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'); + }); + }, _initEditor: function() { var modalcontent = $('#modal-note-div #content-editable'); var editor = new MediumEditor(modalcontent, { diff --git a/js/templates/attachts.handlebars b/js/templates/attachts.handlebars new file mode 100644 index 0000000..270c9b7 --- /dev/null +++ b/js/templates/attachts.handlebars @@ -0,0 +1,7 @@ +
+ {{#each attachts}} +
+
+
+ {{/each}} +
\ No newline at end of file diff --git a/js/templates/note-item.handlebars b/js/templates/note-item.handlebars index bf15372..517acf9 100644 --- a/js/templates/note-item.handlebars +++ b/js/templates/note-item.handlebars @@ -11,30 +11,41 @@ {{{ content }}}
{{else}} -
- {{#if ispinned}} -
- {{else}} -
- {{/if}} -
- -
- {{{ title }}} +
+
+ {{#each attachts}} +
+
+
+ {{/each}}
-
- {{{ content }}} -
-
- {{#each tags}} -
{{{ name }}}
- {{/each}} -
+
+
+ {{#if ispinned}} +
+ {{else}} +
+ {{/if}} +
+ +
+ {{{ title }}} +
+
+
+ {{{ content }}} +
+
+ {{#each tags}} +
{{{ name }}}
+ {{/each}} +
+
{{/if}}
\ No newline at end of file diff --git a/js/templates/notes.handlebars b/js/templates/notes.handlebars index 80cc288..ba3a313 100644 --- a/js/templates/notes.handlebars +++ b/js/templates/notes.handlebars @@ -14,31 +14,42 @@ {{{ content }}}
{{else}} -
- {{#if ispinned}} -
- {{else}} -
- {{/if}} -
- -
- {{{ title }}} +
+
+ {{#each attachts}} +
+
+
+ {{/each}}
-
- {{{ content }}} -
-
- {{#each tags}} -
- {{{ name }}} +
+
+ {{#if ispinned}} +
+ {{else}} +
+ {{/if}} +
+ +
+ {{{ title }}}
- {{/each}} +
+
+ {{{ content }}} +
+
+ {{#each tags}} +
+ {{{ name }}} +
+ {{/each}} +
{{/if}}
@@ -48,17 +59,22 @@