diff options
| -rw-r--r-- | Zotlabs/Module/Notes.php | 11 | ||||
| -rw-r--r-- | Zotlabs/Widget/Notes.php | 1 | ||||
| -rw-r--r-- | view/css/conversation.css | 2 | ||||
| -rw-r--r-- | view/css/widgets.css | 18 | ||||
| -rw-r--r-- | view/tpl/notes.tpl | 103 |
5 files changed, 120 insertions, 15 deletions
diff --git a/Zotlabs/Module/Notes.php b/Zotlabs/Module/Notes.php index 6e8e03f20..57b8f30db 100644 --- a/Zotlabs/Module/Notes.php +++ b/Zotlabs/Module/Notes.php @@ -19,7 +19,12 @@ class Notes extends Controller { if(! Apps::system_app_installed(local_channel(), 'Notes')) return EMPTY_STR; - $ret = array('success' => true); + $ret = [ + 'success' => false, + 'html' => '' + ]; + + if(array_key_exists('note_text',$_REQUEST)) { $body = escape_tags($_REQUEST['note_text']); @@ -33,6 +38,10 @@ class Notes extends Controller { set_pconfig(local_channel(),'notes','text.bak',$old_text); } set_pconfig(local_channel(),'notes','text',$body); + + $ret['html'] = bbcode($body); + $ret['success'] = true; + } // push updates to channel clones diff --git a/Zotlabs/Widget/Notes.php b/Zotlabs/Widget/Notes.php index 05c1a0292..66c90ef7d 100644 --- a/Zotlabs/Widget/Notes.php +++ b/Zotlabs/Widget/Notes.php @@ -20,6 +20,7 @@ class Notes { $o = replace_macros($tpl, array( '$banner' => t('Notes'), '$text' => $text, + '$html' => bbcode($text), '$save' => t('Save'), '$app' => ((isset($arr['app'])) ? true : false), '$hidden' => ((isset($arr['hidden'])) ? true : false) diff --git a/view/css/conversation.css b/view/css/conversation.css index dbb930fc7..88081c2c6 100644 --- a/view/css/conversation.css +++ b/view/css/conversation.css @@ -313,7 +313,7 @@ code { } code.inline-code { - padding: 0px 4px; + padding: 0.2em; display: inline; } diff --git a/view/css/widgets.css b/view/css/widgets.css index a67c10ed2..b78725919 100644 --- a/view/css/widgets.css +++ b/view/css/widgets.css @@ -41,13 +41,23 @@ li:hover .widget-nav-pills-icons { /* notes */ #note-text { - border: 1px solid rgba(0,0,0,.125); - padding: 5px; + padding: 7px 10px; width: 100%; resize: vertical; min-height: 250px; - overflow: auto; - outline: none; + overflow-y: auto; + overflow-x: hidden; +} + +#note-text-html { + padding: 7px 10px; + height: 250px; + width: 100%; + resize: vertical; + min-height: 250px; + overflow-y: auto; + overflow-x: hidden; + } /* saved searches */ diff --git a/view/tpl/notes.tpl b/view/tpl/notes.tpl index 0ae0604ef..22a249fd9 100644 --- a/view/tpl/notes.tpl +++ b/view/tpl/notes.tpl @@ -1,37 +1,122 @@ {{if $app}} <div id="personal-notes" class="generic-content-wrapper{{if $hidden}} d-none{{/if}}"> - <div class="section-title-wrapper"> + <div class="section-title-wrapper clearfix"> + <div class="float-end rounded border border-secondary p-1 text-muted small note-mode" title="Double click into note for edit mode">Read mode</div> <h2>{{$banner}}</h2> </div> - <div class="section-content-wrapper"> + <div class="section-content-wrapper-np"> {{else}} <div id="personal-notes" class="widget{{if $hidden}} d-none{{/if}}"> - <h3>{{$banner}}</h3> + <div class="float-end rounded border border-secondary mb-1 ps-1 pe-1 text-muted small note-mode" title="Double click note for edit mode">Read mode</div> + <h3 class="float-start">{{$banner}}</h3> {{/if}} - <textarea name="note_text" id="note-text" class="{{if $app}}form-control border-0{{/if}}">{{$text}}</textarea> + <textarea name="note_text" id="note-text" class="form-control{{if $app}} border-0{{else}} p-1{{/if}}" style="display: none;">{{$text}}</textarea> + <div id="note-text-html" class="{{if !$app}}border rounded p-1{{/if}}">{{$html}}</div> <script> var noteSaveTimer = null; var noteText = $('#note-text'); + var noteTextHTML = $('#note-text-html'); + var noteMode = $('.note-mode'); + var noteEditing = false; + + noteText.bbco_autocomplete('bbcode'); $(document).on('focusout',"#note-text",function(e){ if(noteSaveTimer) clearTimeout(noteSaveTimer); + + noteEditing = false; notePostFinal(); noteSaveTimer = null; + setNoteMode(noteMode, 'saving'); }); - $(document).on('focusin',"#note-text",function(e){ - noteSaveTimer = setTimeout(noteSaveChanges,10000); + $(document).on('dblclick',"#note-text-html",function(e){ + noteEditing = 1; + noteText.show().focusin(); + noteText.height(noteTextHTML.outerHeight()); + noteText.scrollTop(noteTextHTML.scrollTop()); + noteTextHTML.hide(); + setNoteMode(noteMode, 'edit'); + + $(document).one('click', function(e) { + if (e.target.id !== 'note-text') { + noteTextHTML.show(); + noteTextHTML.height(noteText.outerHeight()); + noteTextHTML.scrollTop(noteText.scrollTop()); + noteText.hide(); + setNoteMode(noteMode, 'read'); + } + }); + + $(document).one('click', '#note-text', function(e){ + noteEditing = 2; + setNoteMode(noteMode, 'editing'); + noteSaveTimer = setTimeout(noteSaveChanges,10000); + }); + }); + + function notePostFinal() { - $.post('notes/sync', { 'note_text' : $('#note-text').val() }); + $.post( + 'notes/sync', + { + 'note_text' : noteText.val() + }, + function (data) { + noteTextHTML.html(data.html); + noteTextHTML.show(); + noteTextHTML.height(noteText.outerHeight()); + noteTextHTML.scrollTop(noteText.scrollTop()); + noteText.hide(); + setNoteMode(noteMode, 'saved'); + } + ); } function noteSaveChanges() { - $.post('notes', { 'note_text' : $('#note-text').val() }); - noteSaveTimer = setTimeout(noteSaveChanges,10000); + $.post('notes', { 'note_text' : noteText.val() }); + noteSaveTimer = setTimeout(noteSaveChanges, 10000); } + + function setNoteMode (obj, mode) { + switch(mode) { + case 'edit': + obj.removeClass('border-secondary border-success text-muted text-success') + obj.addClass('border-danger text-danger') + obj.html('Edit mode'); + break; + case 'editing': + obj.removeClass('border-secondary border-success text-muted text-success') + obj.addClass('border-danger text-danger') + obj.html('Editing...'); + break; + case 'saving': + obj.removeClass('border-secondary border-danger text-muted text-danger') + obj.addClass('border-success text-success') + obj.html('Saving...'); + break; + case 'saved': + obj.removeClass('border-secondary border-danger text-muted text-danger') + obj.addClass('border-success text-success') + obj.html('Saved'); + setTimeout(function () { + if(noteEditing) { + setNoteMode(noteMode, noteEditing === 1 ? 'edit' : 'editing'); + } + else { + setNoteMode(noteMode, 'read'); + } + }, 3000); + break; + case 'read': + default: + obj.removeClass('border-success border-danger text-success text-danger').addClass('border-secondary text-muted').html('Read mode'); + } + } + </script> {{if $app}} </div> |