Merge branch 'stable'

src/public/javascripts/dialogs/options/sync.js

@@ -12,7 +12,7 @@ const TPL = `
 
     <div class="form-group">
         <label for="sync-server-timeout">Sync timeout (milliseconds)</label>
-        <input class="form-control" id="sync-server-timeout" min="1" max="10000000" type="number">
+        <input class="form-control" id="sync-server-timeout" min="1" max="10000000" type="number" style="text-align: left;">
     </div>
 
     <div class="form-group">

src/public/javascripts/services/frontend_script_api.js

@@ -58,13 +58,13 @@ function FrontendScriptApi(startNote, currentNote, originEntity = null, tabConte
     };
 
     /**
-     * Activates newly created note. Compared to this.activateNote() also refreshes tree.
+     * Activates newly created note. Compared to this.activateNote() also makes sure that frontend has been fully synced.
      *
      * @param {string} notePath (or noteId)
      * @return {Promise<void>}
      */
     this.activateNewNote = async notePath => {
-        await treeService.reload();
+        await ws.waitForMaxKnownSyncId();
 
         await treeService.activateNote(notePath, noteDetailService.focusAndSelectTitle);
     };

src/public/javascripts/services/note_detail_book.js

@@ -43,6 +43,7 @@ class NoteDetailBook {
         this.$zoomInButton = this.$component.find('.book-zoom-in-button');
         this.$zoomOutButton = this.$component.find('.book-zoom-out-button');
         this.$expandChildrenButton = this.$component.find('.expand-children-button');
+        this.$help = this.$component.find('.note-detail-book-help');
 
         this.$zoomInButton.on('click', () => this.setZoom(this.zoomLevel - 1));
         this.$zoomOutButton.on('click', () => this.setZoom(this.zoomLevel + 1));
@@ -105,6 +106,7 @@ class NoteDetailBook {
 
     async render() {
         this.$content.empty();
+        this.$help.hide();
 
         if (this.isAutoBook()) {
             const $addTextLink = $('<a href="javascript:">here</a>').on('click', () => {
@@ -124,7 +126,9 @@ class NoteDetailBook {
     }
 
     async renderIntoElement(note, $container) {
-        for (const childNote of await note.getChildNotes()) {
+        const childNotes = await note.getChildNotes();
+
+        for (const childNote of childNotes) {
             const childNotePath = this.ctx.notePath + '/' + childNote.noteId;
 
             const {type, renderedContent} = await noteContentRenderer.getRenderedContent(childNote);
@@ -152,6 +156,10 @@ class NoteDetailBook {
 
             $container.append($card);
         }
+
+        if (childNotes.length === 0) {
+            this.$help.show();
+        }
     }
 
     /** @return {boolean} true if this is "auto book" activated (empty text note) and not explicit book note */

src/public/javascripts/services/note_detail_text.js

@@ -116,15 +116,19 @@ class NoteDetailText {
     }
 
     getContent() {
-        let content = this.textEditor.getData();
+        const content = this.textEditor.getData();
 
         // if content is only tags/whitespace (typically <p>&nbsp;</p>), then just make it empty
         // this is important when setting new note to code
-        if (jQuery(content).text().trim() === '' && !content.includes("<img")) {
-            content = '';
-        }
+        return this.isContentEmpty(content) ? '' : content;
+    }
 
-        return content;
+    isContentEmpty(content) {
+        content = content.toLowerCase();
+
+        return jQuery(content).text().trim() === ''
+            && !content.includes("<img")
+            && !content.includes("<section")
     }
 
     async isReadOnly() {

src/public/javascripts/services/utils.js

@@ -213,7 +213,11 @@ function closeActiveDialog() {
 }
 
 function isHtmlEmpty(html) {
-    return $("<div>").html(html).text().trim().length === 0 && !html.toLowerCase().includes('<img');
+    html = html.toLowerCase();
+
+    return $("<div>").html(html).text().trim().length === 0
+        && !html.includes('<img')
+        && !html.includes('<section');
 }
 
 async function clearBrowserCache() {

src/public/javascripts/widgets/note_info.js

@@ -1,18 +1,18 @@
 import StandardWidget from "./standard_widget.js";
 
 const TPL = `
-<table class="note-info-table">
+<table class="note-info-table" style="table-layout: fixed; width: 100%;">
     <tr>
-        <th>Note ID:</th>
-        <td colspan="3" class="note-info-note-id"></td>
+        <th nowrap>Note ID:</th>
+        <td nowrap colspan="3" class="note-info-note-id"></td>
     </tr>
     <tr>
-        <th>Created:</th>
-        <td colspan="3" class="note-info-date-created"></td>
+        <th nowrap>Created:</th>
+        <td nowrap colspan="3" style="overflow: hidden; text-overflow: ellipsis;" class="note-info-date-created"></td>
     </tr>
     <tr>
-        <th>Modified:</th>
-        <td colspan="3" class="note-info-date-modified"></td>
+        <th nowrap>Modified:</th>
+        <td nowrap colspan="3" style="overflow: hidden; text-overflow: ellipsis;" class="note-info-date-modified"></td>
     </tr>
     <tr>
         <th>Type:</th>
@@ -39,10 +39,19 @@ class NoteInfoWidget extends StandardWidget {
         const note = this.ctx.note;
 
         $noteId.text(note.noteId);
-        $dateCreated.text(note.dateCreated);
-        $dateModified.text(note.dateModified);
+        $dateCreated
+            .text(note.dateCreated)
+            .attr("title", note.dateCreated);
+
+        $dateModified
+            .text(note.dateModified)
+            .attr("title", note.dateCreated);
+
         $type.text(note.type);
-        $mime.text(note.mime).attr("title", note.mime);
+
+        $mime
+            .text(note.mime)
+            .attr("title", note.mime);
     }
 
     eventReceived(name, data) {