migrated all remaining dialogs to bootstrap modals, #203

src/public/javascripts/dialogs/add_link.js

@@ -39,10 +39,7 @@ async function showDialog() {
         setLinkType('selected-to-current');
     }
 
-    $dialog.dialog({
+    $dialog.modal();
-        modal: true,
-        width: 800
-    });
 
     $autoComplete.val('').focus();
     $clonePrefix.val('');
@@ -106,7 +103,7 @@ $form.submit(() => {
         if (linkType === 'html') {
             const linkTitle = $linkTitle.val();
 
-            $dialog.dialog("close");
+            $dialog.modal('hide');
 
             const linkHref = '#' + notePath;
 
@@ -124,14 +121,14 @@ $form.submit(() => {
 
             cloningService.cloneNoteTo(noteId, noteDetailService.getCurrentNoteId(), prefix);
 
-            $dialog.dialog("close");
+            $dialog.modal('hide');
         }
         else if (linkType === 'current-to-selected') {
             const prefix = $clonePrefix.val();
 
             cloningService.cloneNoteTo(noteDetailService.getCurrentNoteId(), noteId, prefix);
 
-            $dialog.dialog("close");
+            $dialog.modal('hide');
         }
     }
 

src/public/javascripts/dialogs/attributes.js

@@ -223,6 +223,11 @@ function AttributesModel() {
 }
 
 async function showDialog() {
+    // lazily apply bindings on first use
+    if (!ko.dataFor($dialog[0])) {
+        ko.applyBindings(attributesModel, $dialog[0]);
+    }
+
     glob.activeDialog = $dialog;
 
     await attributesModel.loadAttributes();
@@ -230,8 +235,6 @@ async function showDialog() {
     $dialog.modal();
 }
 
-ko.applyBindings(attributesModel, $dialog[0]);
-
 $dialog.on('focus', '.attribute-name', function (e) {
     if (!$(this).hasClass("ui-autocomplete-input")) {
         $(this).autocomplete({

src/public/javascripts/dialogs/branch_prefix.js

@@ -3,20 +3,17 @@ import server from '../services/server.js';
 import treeCache from "../services/tree_cache.js";
 import treeUtils from "../services/tree_utils.js";
 
-const $dialog = $("#edit-tree-prefix-dialog");
+const $dialog = $("#branch-prefix-dialog");
-const $form = $("#edit-tree-prefix-form");
+const $form = $("#branch-prefix-form");
-const $treePrefixInput = $("#tree-prefix-input");
+const $treePrefixInput = $("#branch-prefix-input");
-const $noteTitle = $('#tree-prefix-note-title');
+const $noteTitle = $('#branch-prefix-note-title');
 
 let branchId;
 
 async function showDialog() {
     glob.activeDialog = $dialog;
 
-    await $dialog.dialog({
+    $dialog.modal();
-        modal: true,
-        width: 600
-    });
 
     const currentNode = treeService.getCurrentNode();
 
@@ -37,7 +34,7 @@ async function savePrefix() {
 
     await treeService.setPrefix(branchId, prefix);
 
-    $dialog.dialog("close");
+    $dialog.modal('hide');
 }
 
 $form.submit(() => {

src/public/javascripts/dialogs/event_log.js

@@ -8,11 +8,7 @@ const $list = $("#event-log-list");
 async function showDialog() {
     glob.activeDialog = $dialog;
 
-    $dialog.dialog({
+    $dialog.modal();
-        modal: true,
-        width: 800,
-        height: 700
-    });
 
     const result = await server.get('event-log');
 

src/public/javascripts/dialogs/jump_to_note.js

@@ -29,7 +29,7 @@ async function showDialog() {
 
             treeService.activateNote(notePath);
 
-            $dialog.dialog('close');
+            $dialog.modal('hide');
         }
     });
 
@@ -47,7 +47,7 @@ function showInFullText(e) {
     searchNotesService.showSearch();
     searchNotesService.doSearch(searchText);
 
-    $dialog.dialog('close');
+    $dialog.modal('hide');
 }
 
 function showRecentNotes() {

src/public/javascripts/dialogs/note_revisions.js

@@ -16,11 +16,7 @@ async function showCurrentNoteRevisions() {
 async function showNoteRevisionsDialog(noteId, noteRevisionId) {
     glob.activeDialog = $dialog;
 
-    $dialog.dialog({
+    $dialog.modal();
-        modal: true,
-        width: 800,
-        height: 700
-    });
 
     $list.empty();
     $content.empty();

src/public/javascripts/dialogs/note_source.js

@@ -6,11 +6,7 @@ const $noteSource = $("#note-source");
 function showDialog() {
     glob.activeDialog = $dialog;
 
-    $dialog.dialog({
+    $dialog.modal();
-        modal: true,
-        width: 800,
-        height: 500
-    });
 
     const noteText = noteDetailService.getCurrentNote().content;
 

src/public/javascripts/dialogs/options.js

@@ -20,10 +20,7 @@ async function showDialog() {
 
     const options = await server.get('options');
 
-    $dialog.dialog({
+    $dialog.modal();
-        modal: true,
-        width: 1000
-    });
 
     $tabs.tabs();
 

src/public/javascripts/dialogs/recent_changes.js

@@ -3,22 +3,19 @@ import utils from '../services/utils.js';
 import server from '../services/server.js';
 
 const $dialog = $("#recent-changes-dialog");
+const $content = $("#recent-changes-content");
 
 async function showDialog() {
     glob.activeDialog = $dialog;
 
-    $dialog.dialog({
+    $dialog.modal();
-        modal: true,
-        width: 800,
-        height: 700
-    });
 
-    const result = await server.get('recent-changes/');
+    const result = await server.get('recent-changes');
 
-    $dialog.empty();
+    $content.empty();
 
     if (result.length === 0) {
-        $dialog.append("No changes yet ...");
+        $content.append("No changes yet ...");
     }
 
     const groupedByDate = groupByDate(result);
@@ -31,13 +28,6 @@ async function showDialog() {
         for (const change of dayChanges) {
             const formattedTime = utils.formatTime(utils.parseDate(change.dateModifiedTo));
 
-            const revLink = $("<a>", {
-                href: 'javascript:',
-                text: 'rev'
-            }).attr('data-action', 'note-revision')
-                .attr('data-note-path', change.noteId)
-                .attr('data-note-revision-id', change.noteRevisionId);
-
             let noteLink;
 
             if (change.current_isDeleted) {
@@ -49,11 +39,10 @@ async function showDialog() {
 
             changesListEl.append($('<li>')
                 .append(formattedTime + ' - ')
-                .append(noteLink)
+                .append(noteLink));
-                .append(' (').append(revLink).append(')'));
         }
 
-        $dialog.append(dayEl);
+        $content.append(dayEl);
     }
 }
 

src/public/javascripts/dialogs/sql_console.js

@@ -11,17 +11,12 @@ const $resultBody = $('#sql-console-results tbody');
 
 let codeEditor;
 
+$dialog.on("shown.bs.modal", e => initEditor());
+
 function showDialog() {
     glob.activeDialog = $dialog;
 
-    $dialog.dialog({
+    $dialog.modal();
-        modal: true,
-        width: $(window).width(),
-        height: $(window).height(),
-        open: function() {
-            initEditor();
-        }
-    });
 }
 
 async function initEditor() {

src/public/javascripts/services/link.js

@@ -59,7 +59,7 @@ function openNotePath(notePath) {
 
     if (glob.activeDialog) {
         try {
-            glob.activeDialog.dialog('close');
+            glob.activeDialog.modal('hide');
         } catch (e) {
         }
     }

src/public/javascripts/services/note_detail_text.js

@@ -78,18 +78,14 @@ async function importMarkdownInline() {
 
         glob.activeDialog = $markdownImportDialog;
 
-        $markdownImportDialog.dialog({
+        $markdownImportDialog.modal();
-            modal: true,
-            width: 700,
-            height: 500
-        });
     }
 }
 
 async function sendMarkdownDialog() {
     const text = $markdownImportTextarea.val();
 
-    $markdownImportDialog.dialog('close');
+    $markdownImportDialog.modal('hide');
 
     await convertMarkdownToHtml(text);
 

src/public/javascripts/services/protected_session.js

@@ -40,18 +40,7 @@ function ensureProtectedSession(requireProtectedSession, modal) {
             $noteDetailWrapper.hide();
         }
 
-        $dialog.dialog({
+        $dialog.modal();
-            // everything is now non-modal, because modal dialog caused weird high CPU usage on opening
-            // and tearing of text input
-            modal: false,
-            width: 400,
-            open: () => {
-                if (!modal) {
-                    // dialog steals focus for itself, which is not what we want for non-modal (viewing)
-                    treeService.getCurrentNode().setFocus();
-                }
-            }
-        });
     }
     else {
         dfd.resolve(false);
@@ -73,7 +62,7 @@ async function setupProtectedSession() {
 
     protectedSessionHolder.setProtectedSessionId(response.protectedSessionId);
 
-    $dialog.dialog("close");
+    $dialog.modal("hide");
 
     noteDetailService.reload();
     treeService.reload();
@@ -96,7 +85,7 @@ async function setupProtectedSession() {
 function ensureDialogIsClosed() {
     // this may fal if the dialog has not been previously opened
     try {
-        $dialog.dialog('close');
+        $dialog.modal('hide');
     }
     catch (e) {}
 
@@ -167,6 +156,8 @@ $passwordForm.submit(() => {
     return false;
 });
 
+$dialog.on("shown.bs.modal", e => $password.focus());
+
 $protectButton.click(protectNoteAndSendToServer);
 $unprotectButton.click(unprotectNoteAndSendToServer);
 

src/public/stylesheets/style.css

@@ -520,3 +520,9 @@ table.promoted-attributes-in-tooltip td, table.promoted-attributes-in-tooltip th
 .context-menu .dropdown-item {
     padding: 2px 10px 2px 10px;
 }
+
+/* if modal height overflows, then only modal body scrolls */
+.modal-body {
+    max-height: calc(100vh - 120px);
+    overflow-y: auto;
+}

src/routes/api/recent_changes.js

@@ -1,12 +1,14 @@
 "use strict";
 
 const sql = require('../../services/sql');
+const protectedSessionService = require('../../services/protected_session');
 
 async function getRecentChanges() {
     const recentChanges = await sql.getRows(
         `SELECT 
             notes.isDeleted AS current_isDeleted,
             notes.title AS current_title,
+            notes.isProtected AS current_isProtected,
             note_revisions.*
         FROM 
             note_revisions
@@ -15,6 +17,14 @@ async function getRecentChanges() {
             dateModifiedTo DESC 
         LIMIT 1000`);
 
+    if (!protectedSessionService.isProtectedSessionAvailable()) {
+        for (const change of recentChanges) {
+            if (change.current_isProtected) {
+                change.title = change.current_title = "[Protected]";
+            }
+        }
+    }
+
     return recentChanges;
 }
 

src/views/dialogs/add_link.ejs

@@ -1,47 +1,58 @@
-<div id="add-link-dialog" class="tdialog" title="Add note link">
+<div id="add-link-dialog" class="modal fade mx-auto" tabindex="-1" role="dialog">
-  <form id="add-link-form">
+  <div class="modal-dialog modal-lg" style="max-width: 1000px" role="document">
-    <div id="add-link-type-div" class="radio">
+    <div class="modal-content">
-      <label title="Add HTML link to the selected note at cursor in current note">
+      <div class="modal-header">
-        <input type="radio" name="add-link-type" value="html"/>
+        <h5 class="modal-title">Add note link</h5>
-        add normal HTML link</label>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-
+          <span aria-hidden="true">&times;</span>
-      <label title="Add selected note as a child of current note">
+        </button>
-        <input type="radio" name="add-link-type" value="selected-to-current"/>
-        add selected note to current note</label>
-
-      <label title="Add current note as a child of the selected note">
-        <input type="radio" name="add-link-type" value="current-to-selected"/>
-        add current note to selected note</label>
-    </div>
-
-    <div class="form-group">
-      <label for="note-autocomplete">Note</label>
-
-      <div class="input-group">
-        <input id="note-autocomplete" class="form-control" placeholder="search for note by its name">
-
-          <div class="input-group-append">
-            <span class="input-group-text show-recent-notes-button" title="Show recent notes"></span>
-          </div>
       </div>
-    </div>
+      <form id="add-link-form">
+        <div class="modal-body">
+            <div id="add-link-type-div" class="radio">
+              <label title="Add HTML link to the selected note at cursor in current note">
+                <input type="radio" name="add-link-type" value="html"/>
+                add normal HTML link</label>
 
-    <div class="form-group" id="add-link-title-form-group">
+              <label title="Add selected note as a child of current note">
-      <label for="link-title">Link title</label>
+                <input type="radio" name="add-link-type" value="selected-to-current"/>
-      <input id="link-title" class="form-control" style="width: 100%;">
+                add selected note to current note</label>
-    </div>
 
-    <div class="form-group" id="add-link-prefix-form-group" title="Cloned note will be shown in note tree with given prefix">
+              <label title="Add current note as a child of the selected note">
-      <label for="clone-prefix">Prefix (optional)</label>
+                <input type="radio" name="add-link-type" value="current-to-selected"/>
-      <input id="clone-prefix" class="form-control" style="width: 100%;">
+                add current note to selected note</label>
-    </div>
+            </div>
 
-    <div style="display: flex; justify-content: space-between">
+            <div class="form-group">
-      <button class="btn btn-primary">Add note link <kbd>enter</kbd></button>
+              <label for="note-autocomplete">Note</label>
 
-      <button class="btn btn-sm" type="button" data-help-page="Links">
+              <div class="input-group">
-        <i class="glyphicon glyphicon-info-sign"></i> Help
+                <input id="note-autocomplete" class="form-control" placeholder="search for note by its name">
-      </button>
+
+                <div class="input-group-append">
+                  <span class="input-group-text show-recent-notes-button" title="Show recent notes"></span>
+                </div>
+              </div>
+            </div>
+
+            <div class="form-group" id="add-link-title-form-group">
+              <label for="link-title">Link title</label>
+              <input id="link-title" class="form-control" style="width: 100%;">
+            </div>
+
+            <div class="form-group" id="add-link-prefix-form-group" title="Cloned note will be shown in note tree with given prefix">
+              <label for="clone-prefix">Prefix (optional)</label>
+              <input id="clone-prefix" class="form-control" style="width: 100%;">
+            </div>
+        </div>
+        <div class="modal-footer" style="display: flex; justify-content: space-between;">
+          <button class="btn btn-primary">Add note link <kbd>enter</kbd></button>
+
+          <button class="btn btn-sm" type="button" data-help-page="Links">
+            <i class="glyphicon glyphicon-info-sign"></i> Help
+          </button>
+        </div>
+      </form>
     </div>
-  </form>
+  </div>
 </div>

src/views/dialogs/attributes.ejs

@@ -1,5 +1,5 @@
-<div id="jump-to-note-dialog" class="modal mx-auto" tabindex="-1" role="dialog">
+<div id="attributes-dialog" class="modal fade mx-auto" tabindex="-1" role="dialog">
-  <div class="modal-dialog modal-lg" role="document">
+  <div class="modal-dialog modal-lg" style="max-width: 1000px" role="document">
     <div class="modal-content">
       <div class="modal-header">
         <h5 class="modal-title">Note attributes</h5>
@@ -9,15 +9,6 @@
       </div>
       <div class="modal-body">
         <form data-bind="submit: save">
-          <div style="display: flex; justify-content: space-between;">
-            <button class="btn btn-large" style="width: 200px;" id="save-attributes-button" type="submit">
-              Save changes <kbd>enter</kbd></button>
-
-            <button class="btn btn-sm" type="button" data-help-page="Attributes">
-              <i class="glyphicon glyphicon-info-sign"></i> Help
-            </button>
-          </div>
-
           <div style="height: 97%; overflow: auto">
             <table id="owned-attributes-table" class="table">
               <thead>
@@ -133,6 +124,14 @@
           </div>
         </form>
       </div>
+      <div class="modal-footer" style="display: flex; justify-content: space-between;">
+        <button class="btn btn-primary btn-large" style="width: 200px;" id="save-attributes-button" type="submit">
+          Save changes <kbd>enter</kbd></button>
+
+        <button class="btn btn-sm" type="button" data-help-page="Attributes">
+          <i class="glyphicon glyphicon-info-sign"></i> Help
+        </button>
+      </div>
     </div>
   </div>
 </div>

src/views/dialogs/branch_prefix.ejs

@@ -0,0 +1,25 @@
+<div id="branch-prefix-dialog" class="modal fade mx-auto" tabindex="-1" role="dialog">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">Edit branch prefix</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <div class="form-group">
+          <label for="branch-prefix-input">Prefix: </label> &nbsp;
+          <input id="branch-prefix-input" style="width: 20em;"> - <span id="branch-prefix-note-title"></span>
+        </div>
+      </div>
+      <div class="modal-footer" style="display: flex; justify-content: space-between;">
+        <button class="btn btn-primary btn-sm">Save</button>
+
+        <button class="btn btn-sm" type="button" data-help-page="Tree-concepts#prefix">
+          <i class="glyphicon glyphicon-info-sign"></i> Help
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

src/views/dialogs/edit_tree_prefix.ejs

@@ -1,16 +0,0 @@
-<div id="edit-tree-prefix-dialog" class="tdialog" title="Edit tree prefix">
-  <form id="edit-tree-prefix-form">
-    <div class="form-group">
-      <label for="tree-prefix-input">Prefix: </label> &nbsp;
-      <input id="tree-prefix-input" style="width: 20em;"> - <span id="tree-prefix-note-title"></span>
-    </div>
-
-    <div style="display: flex; justify-content: space-between;">
-      <button class="btn btn-sm">Save</button>
-
-      <button class="btn btn-sm" type="button" data-help-page="Tree-concepts#prefix">
-        <i class="glyphicon glyphicon-info-sign"></i> Help
-      </button>
-    </div>
-  </form>
-</div>

src/views/dialogs/event_log.ejs

@@ -1,3 +1,15 @@
-<div id="event-log-dialog" class="tdialog" title="Event log">
+<div id="event-log-dialog" class="modal fade mx-auto" tabindex="-1" role="dialog">
-  <ul id="event-log-list"></ul>
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">Event log</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <ul id="event-log-list"></ul>
+      </div>
+    </div>
+  </div>
 </div>

src/views/dialogs/jump_to_note.ejs

@@ -1,4 +1,4 @@
-<div id="jump-to-note-dialog" class="modal mx-auto" tabindex="-1" role="dialog">
+<div id="jump-to-note-dialog" class="modal fade mx-auto" tabindex="-1" role="dialog">
   <div class="modal-dialog modal-lg" role="document">
     <div class="modal-content">
       <div class="modal-header">

src/views/dialogs/markdown_import.ejs

@@ -1,7 +1,20 @@
-<div id="markdown-import-dialog" class="tdialog" title="Markdown import" style="padding: 20px;">
+<div id="markdown-import-dialog" class="modal fade mx-auto" tabindex="-1" role="dialog">
-  <p>Because of browser sandbox it's not possible to directly read clipboard from JavaScript. Please paste the Markdown to import to textarea below and click on Import button</p>
+  <div class="modal-dialog modal-lg" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">Markdown import</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <p>Because of browser sandbox it's not possible to directly read clipboard from JavaScript. Please paste the Markdown to import to textarea below and click on Import button</p>
 
-  <textarea id="markdown-import-textarea" style="height: 340px; width: 100%"></textarea>
+        <textarea id="markdown-import-textarea" style="height: 340px; width: 100%"></textarea>
-
+      </div>
-  <button id="markdown-import-button" class="btn btn-primary">Import <kbd>CTRL+Enter</kbd></button>
+      <div class="modal-footer">
+        <button id="markdown-import-button" class="btn btn-primary">Import <kbd>CTRL+Enter</kbd></button>
+      </div>
+    </div>
+  </div>
 </div>

src/views/dialogs/note_revisions.ejs

@@ -1,20 +1,30 @@
-<div id="note-revisions-dialog" class="tdialog" title="Note revisions">
+<div id="note-revisions-dialog" class="modal fade mx-auto" tabindex="-1" role="dialog">
-  <div style="display: flex;">
+  <div class="modal-dialog modal-lg" role="document">
-    <select id="note-revision-list" size="25" style="width: 150px; height: 630px;">
+    <div class="modal-content">
-    </select>
+      <div class="modal-header">
+        <h5 class="modal-title">Note revisions</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body" style="display: flex;">
+        <select id="note-revision-list" size="25" style="width: 150px; height: 630px;">
+        </select>
 
-    <div id="note-revision-content-wrapper" style="flex-grow: 1; margin-left: 20px;">
+        <div id="note-revision-content-wrapper" style="flex-grow: 1; margin-left: 20px;">
-      <div style="display: flex">
+          <div style="display: flex">
-        <h3 id="note-revision-title" style="margin: 3px; flex-grow: 100;"></h3>
+            <h3 id="note-revision-title" style="margin: 3px; flex-grow: 100;"></h3>
 
-        <div>
+            <div>
-          <button class="btn btn-sm" type="button" data-help-page="Note-revisions">
+              <button class="btn btn-sm" type="button" data-help-page="Note-revisions">
-            <i class="glyphicon glyphicon-info-sign"></i> Help
+                <i class="glyphicon glyphicon-info-sign"></i> Help
-          </button>
+              </button>
+            </div>
+          </div>
+
+          <div id="note-revision-content" style="height: 600px; width: 600px; overflow: auto;"></div>
         </div>
       </div>
-
-      <div id="note-revision-content" style="height: 600px; width: 600px; overflow: auto;"></div>
     </div>
   </div>
 </div>

src/views/dialogs/note_source.ejs

@@ -1,3 +1,15 @@
-<div id="note-source-dialog" class="tdialog" title="Note source">
+<div id="note-source-dialog" class="modal fade mx-auto" tabindex="-1" role="dialog">
-  <textarea id="note-source" readonly="readonly"></textarea>
+  <div class="modal-dialog modal-lg" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">Note source</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <textarea id="note-source" readonly="readonly" style="min-height: 500px;"></textarea>
+      </div>
+    </div>
+  </div>
 </div>

src/views/dialogs/options.ejs

@@ -1,198 +1,210 @@
-<div id="options-dialog" class="tdialog" title="Options">
+<div id="options-dialog" class="modal fade mx-auto" tabindex="-1" role="dialog">
-  <div id="options-tabs">
+  <div class="modal-dialog modal-lg" style="min-width: 1000px;" role="document">
-    <ul>
+    <div class="modal-content">
-      <li><a href="#appearance">Appearance</a></li>
+      <div class="modal-header">
-      <li><a href="#change-password">Change password</a></li>
+        <h5 class="modal-title">Options</h5>
-      <li><a href="#protected-session-timeout">Protected session</a></li>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-      <li><a href="#note-revision-snapshot-time-interval">Note revisions</a></li>
+          <span aria-hidden="true">&times;</span>
-      <li><a href="#sync-setup">Sync</a></li>
+        </button>
-      <li><a href="#advanced">Advanced</a></li>
+      </div>
-      <li><a href="#about">About Trilium</a></li>
+      <div class="modal-body">
-    </ul>
+        <div id="options-tabs">
-    <div id="appearance">
+          <ul>
-      <p>Settings on this options tab are saved automatically after each change.</p>
+            <li><a href="#appearance">Appearance</a></li>
+            <li><a href="#change-password">Change password</a></li>
+            <li><a href="#protected-session-timeout">Protected session</a></li>
+            <li><a href="#note-revision-snapshot-time-interval">Note revisions</a></li>
+            <li><a href="#sync-setup">Sync</a></li>
+            <li><a href="#advanced">Advanced</a></li>
+            <li><a href="#about">About Trilium</a></li>
+          </ul>
+          <div id="appearance">
+            <p>Settings on this options tab are saved automatically after each change.</p>
 
-      <form>
+            <form>
-        <div class="form-group">
+              <div class="form-group">
-          <label for="theme-select">Theme</label>
+                <label for="theme-select">Theme</label>
-          <select class="form-control" id="theme-select">
+                <select class="form-control" id="theme-select">
-            <option value="white">White</option>
+                  <option value="white">White</option>
-            <option value="dark">Dark</option>
+                  <option value="dark">Dark</option>
-            <option value="black">Black</option>
+                  <option value="black">Black</option>
-          </select>
+                </select>
+              </div>
+
+              <div class="form-group">
+                <label for="zoom-factor-select">Zoom factor (desktop build only)</label>
+
+                <input type="number" class="form-control" id="zoom-factor-select" min="0.3" max="2.0" step="0.1"/>
+              </div>
+
+              <p>Zooming can be controlled with CTRL-+ and CTRL-= shortcuts as well.</p>
+
+              <h3>Left pane sizing</h3>
+
+              <div class="form-group">
+                <label for="left-pane-min-width">Left pane minimum width (in pixels)</label>
+
+                <input type="number" class="form-control" id="left-pane-min-width" min="100" max="2000" step="1"/>
+              </div>
+
+              <div class="form-group">
+                <label for="left-pane-min-width">Left pane width percent of window size</label>
+
+                <input type="number" class="form-control" id="left-pane-width-percent" min="0" max="99" step="1"/>
+              </div>
+
+              <p>Left pane width is calculated from the percent of window size, if this is smaller than minimum width, then minimum width is used. If you want to have fixed width left pane, set minimum width to the desired width and set percent to 0.</p>
+
+            </form>
+          </div>
+          <div id="change-password">
+            <form id="change-password-form">
+              <div class="form-group">
+                <label for="old-password">Old password</label>
+                <input class="form-control" id="old-password" type="password">
+              </div>
+
+              <div class="form-group">
+                <label for="new-password1">New password</label>
+                <input class="form-control" id="new-password1" type="password">
+              </div>
+
+              <div class="form-group">
+                <label for="new-password2">New password once more</label>
+                <input class="form-control" id="new-password2" type="password">
+              </div>
+
+              <button class="btn btn-sm">Change password</button>
+            </form>
+          </div>
+          <div id="protected-session-timeout">
+            <p>Protected session timeout is a time period after which the protected session is wiped out from
+              browser's memory. This is measured from the last interaction with protected notes.</p>
+
+            <form id="protected-session-timeout-form">
+              <div class="form-group">
+                <label for="protected-session-timeout-in-seconds">Protected session timeout (in seconds)</label>
+                <input class="form-control" id="protected-session-timeout-in-seconds" type="number">
+              </div>
+
+              <div style="display: flex; justify-content: space-between;">
+                <button class="btn btn-sm">Save</button>
+
+                <button class="btn btn-sm" type="button" data-help-page="Protected-notes">
+                  <i class="glyphicon glyphicon-info-sign"></i> Help
+                </button>
+              </div>
+            </form>
+          </div>
+          <div id="note-revision-snapshot-time-interval">
+            <p>Note revision snapshot time interval is time in seconds after which new note revision will be created for the note.</p>
+
+            <form id="note-revision-snapshot-time-interval-form">
+              <div class="form-group">
+                <label for="note-revision-snapshot-time-interval-in-seconds">Note revision snapshot time interval (in seconds)</label>
+                <input class="form-control" id="note-revision-snapshot-time-interval-in-seconds" type="number">
+              </div>
+
+              <div style="display: flex; justify-content: space-between;">
+                <button class="btn btn-sm">Save</button>
+
+                <button class="btn btn-sm" type="button" data-help-page="Note-revisions">
+                  <i class="glyphicon glyphicon-info-sign"></i> Help
+                </button>
+              </div>
+            </form>
+          </div>
+          <div id="sync-setup">
+            <h4 style="margin-top: 0px;">Sync configuration</h4>
+
+            <form id="sync-setup-form">
+              <div class="form-group">
+                <label for="sync-server-host">Server instance address</label>
+                <input class="form-control" id="sync-server-host" placeholder="https://<host>:<port>">
+              </div>
+
+              <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">
+              </div>
+
+              <div class="form-group">
+                <label for="sync-proxy">Sync proxy server (optional)</label>
+                <input class="form-control" id="sync-proxy" placeholder="https://<host>:<port>">
+              </div>
+
+              <div style="display: flex; justify-content: space-between;">
+                <button class="btn btn-sm">Save</button>
+
+                <button class="btn btn-sm" type="button" data-help-page="Synchronization">
+                  <i class="glyphicon glyphicon-info-sign"></i> Help
+                </button>
+              </div>
+            </form>
+
+            <h4>Sync test</h4>
+
+            <p>This will test connection and handshake to the sync server. If sync server isn't initialized, this will set it up to sync with local document.</p>
+
+            <button id="test-sync-button" class="btn btn-sm">Test sync</button>
+          </div>
+          <div id="advanced">
+            <h4 style="margin-top: 0px;">Sync</h4>
+            <button id="force-full-sync-button" class="btn btn-sm">Force full sync</button>
+
+            <br/>
+            <br/>
+
+            <button id="fill-sync-rows-button" class="btn btn-sm">Fill sync rows</button>
+
+            <h4>Debugging</h4>
+
+            <button id="anonymize-button" class="btn btn-sm">Save anonymized database</button><br/><br/>
+
+            <p>This action will create a new copy of the database and anonymise it (remove all note content and leave only structure and metadata)
+              for sharing online for debugging purposes without fear of leaking your personal data.</p>
+
+            <h4>Image cleanup</h4>
+
+            <p>This will remove all image data of images not used in any current version of note from the database (metadata will remain).
+
+              This means that some images can disappear from note revisions.</p>
+
+            <button id="cleanup-unused-images-button" class="btn btn-sm">Permanently cleanup unused images</button>
+
+            <h4>Vacuum database</h4>
+
+            <p>This will rebuild database which will typically result in smaller database file. No data will be actually changed.</p>
+
+            <button id="vacuum-database-button" class="btn btn-sm">Vacuum database</button>
+          </div>
+          <div id="about">
+            <table class="table">
+              <tr>
+                <th>App version:</th>
+                <td id="app-version"></td>
+              </tr>
+              <tr>
+                <th>DB version:</th>
+                <td id="db-version"></td>
+              </tr>
+              <tr>
+                <th>Sync version:</th>
+                <td id="sync-version"></td>
+              </tr>
+              <tr>
+                <th>Build date:</th>
+                <td id="build-date"></td>
+              </tr>
+
+              <tr>
+                <th>Build revision:</th>
+                <td><a href="" target="_blank" id="build-revision"></a></td>
+              </tr>
+            </table>
+          </div>
         </div>
-
+      </div>
-        <div class="form-group">
-          <label for="zoom-factor-select">Zoom factor (desktop build only)</label>
-
-          <input type="number" class="form-control" id="zoom-factor-select" min="0.3" max="2.0" step="0.1"/>
-        </div>
-
-        <p>Zooming can be controlled with CTRL-+ and CTRL-= shortcuts as well.</p>
-
-        <h3>Left pane sizing</h3>
-
-        <div class="form-group">
-          <label for="left-pane-min-width">Left pane minimum width (in pixels)</label>
-
-          <input type="number" class="form-control" id="left-pane-min-width" min="100" max="2000" step="1"/>
-        </div>
-
-        <div class="form-group">
-          <label for="left-pane-min-width">Left pane width percent of window size</label>
-
-          <input type="number" class="form-control" id="left-pane-width-percent" min="0" max="99" step="1"/>
-        </div>
-
-        <p>Left pane width is calculated from the percent of window size, if this is smaller than minimum width, then minimum width is used. If you want to have fixed width left pane, set minimum width to the desired width and set percent to 0.</p>
-
-      </form>
-    </div>
-    <div id="change-password">
-      <form id="change-password-form">
-        <div class="form-group">
-          <label for="old-password">Old password</label>
-          <input class="form-control" id="old-password" type="password">
-        </div>
-
-        <div class="form-group">
-          <label for="new-password1">New password</label>
-          <input class="form-control" id="new-password1" type="password">
-        </div>
-
-        <div class="form-group">
-          <label for="new-password2">New password once more</label>
-          <input class="form-control" id="new-password2" type="password">
-        </div>
-
-        <button class="btn btn-sm">Change password</button>
-      </form>
-    </div>
-    <div id="protected-session-timeout">
-      <p>Protected session timeout is a time period after which the protected session is wiped out from
-        browser's memory. This is measured from the last interaction with protected notes.</p>
-
-      <form id="protected-session-timeout-form">
-        <div class="form-group">
-          <label for="protected-session-timeout-in-seconds">Protected session timeout (in seconds)</label>
-          <input class="form-control" id="protected-session-timeout-in-seconds" type="number">
-        </div>
-
-        <div style="display: flex; justify-content: space-between;">
-          <button class="btn btn-sm">Save</button>
-
-          <button class="btn btn-sm" type="button" data-help-page="Protected-notes">
-            <i class="glyphicon glyphicon-info-sign"></i> Help
-          </button>
-        </div>
-      </form>
-    </div>
-    <div id="note-revision-snapshot-time-interval">
-      <p>Note revision snapshot time interval is time in seconds after which new note revision will be created for the note.</p>
-
-      <form id="note-revision-snapshot-time-interval-form">
-        <div class="form-group">
-          <label for="note-revision-snapshot-time-interval-in-seconds">Note revision snapshot time interval (in seconds)</label>
-          <input class="form-control" id="note-revision-snapshot-time-interval-in-seconds" type="number">
-        </div>
-
-        <div style="display: flex; justify-content: space-between;">
-          <button class="btn btn-sm">Save</button>
-
-          <button class="btn btn-sm" type="button" data-help-page="Note-revisions">
-            <i class="glyphicon glyphicon-info-sign"></i> Help
-          </button>
-        </div>
-      </form>
-    </div>
-    <div id="sync-setup">
-      <h4 style="margin-top: 0px;">Sync configuration</h4>
-
-      <form id="sync-setup-form">
-        <div class="form-group">
-          <label for="sync-server-host">Server instance address</label>
-          <input class="form-control" id="sync-server-host" placeholder="https://<host>:<port>">
-        </div>
-
-        <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">
-        </div>
-
-        <div class="form-group">
-          <label for="sync-proxy">Sync proxy server (optional)</label>
-          <input class="form-control" id="sync-proxy" placeholder="https://<host>:<port>">
-        </div>
-
-        <div style="display: flex; justify-content: space-between;">
-          <button class="btn btn-sm">Save</button>
-
-          <button class="btn btn-sm" type="button" data-help-page="Synchronization">
-            <i class="glyphicon glyphicon-info-sign"></i> Help
-          </button>
-        </div>
-      </form>
-
-      <h4>Sync test</h4>
-
-      <p>This will test connection and handshake to the sync server. If sync server isn't initialized, this will set it up to sync with local document.</p>
-
-      <button id="test-sync-button" class="btn btn-sm">Test sync</button>
-    </div>
-    <div id="advanced">
-      <h4 style="margin-top: 0px;">Sync</h4>
-      <button id="force-full-sync-button" class="btn btn-sm">Force full sync</button>
-
-      <br/>
-      <br/>
-
-      <button id="fill-sync-rows-button" class="btn btn-sm">Fill sync rows</button>
-
-      <h4>Debugging</h4>
-
-      <button id="anonymize-button" class="btn btn-sm">Save anonymized database</button><br/><br/>
-
-      <p>This action will create a new copy of the database and anonymise it (remove all note content and leave only structure and metadata)
-        for sharing online for debugging purposes without fear of leaking your personal data.</p>
-
-      <h4>Image cleanup</h4>
-
-      <p>This will remove all image data of images not used in any current version of note from the database (metadata will remain).
-
-        This means that some images can disappear from note revisions.</p>
-
-      <button id="cleanup-unused-images-button" class="btn btn-sm">Permanently cleanup unused images</button>
-
-      <h4>Vacuum database</h4>
-
-      <p>This will rebuild database which will typically result in smaller database file. No data will be actually changed.</p>
-
-      <button id="vacuum-database-button" class="btn btn-sm">Vacuum database</button>
-    </div>
-    <div id="about">
-      <table class="table">
-        <tr>
-          <th>App version:</th>
-          <td id="app-version"></td>
-        </tr>
-        <tr>
-          <th>DB version:</th>
-          <td id="db-version"></td>
-        </tr>
-        <tr>
-          <th>Sync version:</th>
-          <td id="sync-version"></td>
-        </tr>
-        <tr>
-          <th>Build date:</th>
-          <td id="build-date"></td>
-        </tr>
-
-        <tr>
-          <th>Build revision:</th>
-          <td><a href="" target="_blank" id="build-revision"></a></td>
-        </tr>
-      </table>
     </div>
   </div>
 </div>

src/views/dialogs/protected_session_password.ejs

@@ -1,16 +1,27 @@
-<div id="protected-session-password-dialog" class="tdialog" title="Protected session">
+<div id="protected-session-password-dialog" class="modal fade mx-auto" tabindex="-1" role="dialog">
-  <form id="protected-session-password-form">
+  <div class="modal-dialog" role="document">
-    <div class="form-group">
+    <div class="modal-content">
-      <label for="protected-session-password">To proceed with requested action you need to start protected session by entering password:</label>
+      <div class="modal-header">
-      <input id="protected-session-password" class="form-control" type="password">
+        <h5 class="modal-title">Protected session</h5>
-    </div>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <form id="protected-session-password-form">
+        <div class="modal-body">
+          <div class="form-group">
+            <label for="protected-session-password">To proceed with requested action you need to start protected session by entering password:</label>
+            <input id="protected-session-password" class="form-control" type="password">
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button class="btn btn-primary btn-sm">Start protected session <kbd>enter</kbd></button>
 
-    <div style="display: flex; justify-content: space-between;">
+          <button class="btn btn-sm" type="button" data-help-page="Protected-notes">
-      <button class="btn btn-sm">Start protected session <kbd>enter</kbd></button>
+            <i class="glyphicon glyphicon-info-sign"></i> Help
-
+          </button>
-      <button class="btn btn-sm" type="button" data-help-page="Protected-notes">
+        </div>
-        <i class="glyphicon glyphicon-info-sign"></i> Help
+      </form>
-      </button>
     </div>
-  </form>
+  </div>
 </div>

src/views/dialogs/recent_changes.ejs

@@ -1,2 +1,15 @@
-<div id="recent-changes-dialog" class="tdialog" title="Recent changes">
+<div id="recent-changes-dialog" class="modal fade mx-auto" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Recent changes</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div id="recent-changes-content"></div>
+            </div>
+        </div>
+    </div>
 </div>

src/views/dialogs/sql_console.ejs

@@ -1,12 +1,24 @@
-<div id="sql-console-dialog" class="tdialog" title="SQL console">
+<div id="sql-console-dialog" class="modal fade mx-auto" tabindex="-1" role="dialog">
-  <div id="sql-console-query"></div>
+  <div class="modal-dialog modal-lg" style="max-width: 1000px;" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">SQL console</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <div id="sql-console-query"></div>
 
-  <div style="text-align: center">
+        <div style="text-align: center">
-    <button class="btn btn-danger" id="sql-console-execute">Execute <kbd>CTRL+ENTER</kbd></button>
+          <button class="btn btn-danger" id="sql-console-execute">Execute <kbd>CTRL+ENTER</kbd></button>
+        </div>
+
+        <table id="sql-console-results" class="table table-striped" style="overflow: scroll; width: 100%;">
+          <thead></thead>
+          <tbody></tbody>
+        </table>
+      </div>
+    </div>
   </div>
-
-  <table id="sql-console-results" class="table table-striped" style="overflow: scroll; width: 100%;">
-    <thead></thead>
-    <tbody></tbody>
-  </table>
 </div>

src/views/index.ejs

@@ -306,7 +306,7 @@
 
       <% include dialogs/add_link.ejs %>
       <% include dialogs/attributes.ejs %>
-      <% include dialogs/edit_tree_prefix.ejs %>
+      <% include dialogs/branch_prefix.ejs %>
       <% include dialogs/event_log.ejs %>
       <% include dialogs/jump_to_note.ejs %>
       <% include dialogs/markdown_import.ejs %>