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,5 +1,14 @@
-<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">
+  <div class="modal-dialog modal-lg" style="max-width: 1000px" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">Add note link</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </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"/>
@@ -35,8 +44,8 @@
               <label for="clone-prefix">Prefix (optional)</label>
               <input id="clone-prefix" class="form-control" style="width: 100%;">
             </div>
-
+        </div>
-    <div style="display: flex; justify-content: space-between">
+        <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">
@@ -44,4 +53,6 @@
           </button>
         </div>
       </form>
+    </div>
+  </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">
+  <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">
+  <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>
-
+      </div>
+      <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,5 +1,13 @@
-<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">
+    <div class="modal-content">
+      <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>
 
@@ -17,4 +25,6 @@
           <div id="note-revision-content" style="height: 600px; width: 600px; overflow: auto;"></div>
         </div>
       </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,4 +1,13 @@
-<div id="options-dialog" class="tdialog" title="Options">
+<div id="options-dialog" class="modal fade mx-auto" tabindex="-1" role="dialog">
+  <div class="modal-dialog modal-lg" style="min-width: 1000px;" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">Options</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="options-tabs">
           <ul>
             <li><a href="#appearance">Appearance</a></li>
@@ -195,4 +204,7 @@
             </table>
           </div>
         </div>
+      </div>
+    </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">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">Protected session</h5>
+        <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 style="display: flex; justify-content: space-between;">
+        <div class="modal-footer">
-      <button class="btn btn-sm">Start protected session <kbd>enter</kbd></button>
+          <button class="btn btn-primary btn-sm">Start protected session <kbd>enter</kbd></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>
 </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,4 +1,13 @@
-<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 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">
@@ -9,4 +18,7 @@
           <thead></thead>
           <tbody></tbody>
         </table>
+      </div>
+    </div>
+  </div>
 </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 %>