gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-03-01 14:22:32 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

migrated all remaining dialogs to bootstrap modals, #203

Browse Source
This commit is contained in:
azivner 2018-11-06 17:47:40 +01:00
parent 6fb99ae89e
commit 2f4ef0a4a2
29 changed files with 480 additions and 397 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/public/javascripts/dialogs/add_link.js
View File

@ -39,10 +39,7 @@ async function showDialog() {
setLinkType('selected-to-current');
}
$dialog.dialog({
modal: true,
width: 800
});
$dialog.modal();
$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');
}
}

7
src/public/javascripts/dialogs/attributes.js
View File

@ -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({

15
src/public/javascripts/dialogs/branch_prefix.js
View File

@ -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 $form = $("#edit-tree-prefix-form");
const $treePrefixInput = $("#tree-prefix-input");
const $noteTitle = $('#tree-prefix-note-title');
const $dialog = $("#branch-prefix-dialog");
const $form = $("#branch-prefix-form");
const $treePrefixInput = $("#branch-prefix-input");
const $noteTitle = $('#branch-prefix-note-title');
let branchId;
async function showDialog() {
glob.activeDialog = $dialog;
await $dialog.dialog({
modal: true,
width: 600
});
$dialog.modal();
const currentNode = treeService.getCurrentNode();
@ -37,7 +34,7 @@ async function savePrefix() {
await treeService.setPrefix(branchId, prefix);
$dialog.dialog("close");
$dialog.modal('hide');
}
$form.submit(() => {

6
src/public/javascripts/dialogs/event_log.js
View File

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

4
src/public/javascripts/dialogs/jump_to_note.js
View File

@ -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() {

6
src/public/javascripts/dialogs/note_revisions.js
View File

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

6
src/public/javascripts/dialogs/note_source.js
View File

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

5
src/public/javascripts/dialogs/options.js
View File

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

25
src/public/javascripts/dialogs/recent_changes.js
View File

@ -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({
modal: true,
width: 800,
height: 700
});
$dialog.modal();
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(' (').append(revLink).append(')'));
.append(noteLink));
}
$dialog.append(dayEl);
$content.append(dayEl);
}
}

11
src/public/javascripts/dialogs/sql_console.js
View File

@ -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({
modal: true,
width: $(window).width(),
height: $(window).height(),
open: function() {
initEditor();
}
});
$dialog.modal();
}
async function initEditor() {

2
src/public/javascripts/services/link.js
View File

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

8
src/public/javascripts/services/note_detail_text.js
View File

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

19
src/public/javascripts/services/protected_session.js
View File

@ -40,18 +40,7 @@ function ensureProtectedSession(requireProtectedSession, modal) {
$noteDetailWrapper.hide();
}
$dialog.dialog({
// 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();
}
}
});
$dialog.modal();
}
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);

6
src/public/stylesheets/style.css
View File

@ -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;
}

10
src/routes/api/recent_changes.js
View File

@ -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;
}

17
src/views/dialogs/add_link.ejs
View File

@ -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 style="display: flex; justify-content: space-between">
</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">
@ -45,3 +54,5 @@
</div>
</form>
</div>
</div>
</div>

21
src/views/dialogs/attributes.ejs
View File

@ -1,5 +1,5 @@
<div id="jump-to-note-dialog" class="modal mx-auto" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div id="attributes-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">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>

25
src/views/dialogs/branch_prefix.ejs Normal file
View File

@ -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>

16
src/views/dialogs/edit_tree_prefix.ejs
View File

@ -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>

14
src/views/dialogs/event_log.ejs
View File

@ -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>

2
src/views/dialogs/jump_to_note.ejs
View File

@ -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">

17
src/views/dialogs/markdown_import.ejs
View File

@ -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>

14
src/views/dialogs/note_revisions.ejs
View File

@ -1,5 +1,13 @@
<div id="note-revisions-dialog" class="tdialog" title="Note revisions">
<div style="display: flex;">
<div id="note-revisions-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">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>
@ -18,3 +26,5 @@
</div>
</div>
</div>
</div>
</div>

16
src/views/dialogs/note_source.ejs
View File

@ -1,3 +1,15 @@
<div id="note-source-dialog" class="tdialog" title="Note source">
<textarea id="note-source" readonly="readonly"></textarea>
<div id="note-source-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">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>

14
src/views/dialogs/options.ejs
View File

@ -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>
@ -196,3 +205,6 @@
</div>
</div>
</div>
</div>
</div>
</div>

19
src/views/dialogs/protected_session_password.ejs
View File

@ -1,12 +1,21 @@
<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 style="display: flex; justify-content: space-between;">
<button class="btn btn-sm">Start protected session <kbd>enter</kbd></button>
</div>
<div class="modal-footer">
<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
@ -14,3 +23,5 @@
</div>
</form>
</div>
</div>
</div>

15
src/views/dialogs/recent_changes.ejs
View File

@ -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>

14
src/views/dialogs/sql_console.ejs
View File

@ -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">
@ -10,3 +19,6 @@
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>

2
src/views/index.ejs
View File

@ -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 %>