2017-10-14 23:31:44 -04:00
<!DOCTYPE html>
2018-06-08 23:18:53 -04:00
<html lang="en" class="theme-<%= theme %>">
2017-10-14 23:31:44 -04:00
<head>
2017-10-15 19:10:36 -04:00
<meta charset="utf-8">
2017-12-26 12:55:40 -05:00
<title>Trilium Notes</title>
2017-10-14 23:31:44 -04:00
</head>
<body>
2018-09-06 11:54:04 +02:00
<div id="container" style="display:none; grid-template-columns: minmax(<%= leftPaneMinWidth %>px, <%= leftPaneWidthPercent %>fr) <%= rightPaneWidthPercent %>fr">
2017-10-15 19:10:36 -04:00
<div id="header" class="hide-toggle">
2018-05-26 22:54:06 -04:00
<div id="history-navigation" style="display: none;">
<a id="history-back-button" title="Go to previous note." class="icon-action"
2018-06-07 23:02:21 -04:00
style="background: url('/images/icons/back-24.png')"></a>
2018-05-26 22:54:06 -04:00
<a id="history-forward-button" title="Go to next note." class="icon-action"
2018-06-07 23:02:21 -04:00
style="background: url('/images/icons/forward-24.png')"></a>
2018-05-26 22:54:06 -04:00
</div>
2018-05-31 20:00:39 -04:00
<div style="flex-grow: 100; display: flex;">
2018-11-05 21:12:03 +01:00
<button class="btn btn-sm" id="jump-to-note-dialog-button" title="CTRL+J">Jump to note</button>
<button class="btn btn-sm" id="recent-changes-button">Recent changes</button>
2018-05-31 20:00:39 -04:00
<div>
<span style="font-size: smaller">Protected session:</span>
<div class="btn-group btn-group-xs">
<button type="button" class="btn" id="protected-session-on">On</button>
<button type="button" class="btn active" id="protected-session-off">Off</button>
</div>
</div>
2017-10-15 19:10:36 -04:00
</div>
2018-02-03 10:37:57 -05:00
<div id="plugin-buttons">
</div>
2017-10-15 19:10:36 -04:00
<div>
2018-11-05 21:12:03 +01:00
<button class="btn btn-sm" id="sync-now-button" title="Number of outstanding changes to be pushed to server">
2018-02-03 10:37:57 -05:00
<span class="ui-icon ui-icon-refresh"></span>
2018-07-24 21:43:15 +02:00
Sync now (<span id="outstanding-syncs-count">0</span>)
2017-12-22 07:00:17 -05:00
</button>
2017-10-29 11:22:41 -04:00
2018-11-05 21:12:03 +01:00
<button class="btn btn-sm" id="options-button">
2018-04-01 17:41:28 -04:00
<span class="ui-icon ui-icon-gear"></span> Options</button>
2017-10-15 19:10:36 -04:00
2017-12-26 22:19:42 -05:00
<form action="logout" id="logout-button" method="POST" style="display: inline;">
2018-11-05 21:12:03 +01:00
<button type="submit" class="btn btn-sm">Logout</button>
2017-10-15 19:10:36 -04:00
</form>
</div>
</div>
2018-09-06 09:33:38 +02:00
<div id="left-pane" class="hide-toggle">
<div id="global-buttons">
2018-03-24 00:54:50 -04:00
<a id="create-top-level-note-button" title="Create new top level note" class="icon-action"
2018-06-07 23:02:21 -04:00
style="background: url('/images/icons/file-plus-24.png')"></a>
2017-10-15 19:10:36 -04:00
2018-08-29 18:31:29 +02:00
<a id="collapse-tree-button" title="Collapse note tree. Shortcut ALT+C" class="icon-action"
2018-06-07 23:02:21 -04:00
style="background: url('/images/icons/list-24.png')"></a>
2017-10-15 19:10:36 -04:00
2018-03-24 00:54:50 -04:00
<a id="scroll-to-current-note-button" title="Scroll to current note. Shortcut CTRL+." class="icon-action"
2018-06-07 23:02:21 -04:00
style="background: url('/images/icons/crosshair-24.png')"></a>
2017-10-15 19:10:36 -04:00
2018-08-29 18:31:29 +02:00
<a id="toggle-search-button" title="Search in notes. Shortcut CTRL+S" class="icon-action"
2018-06-07 23:02:21 -04:00
style="background: url('/images/icons/search-24.png')"></a>
2017-12-04 18:21:57 -05:00
</div>
2018-02-26 00:07:43 -05:00
<input type="file" id="import-upload" style="display: none" />
2017-10-15 19:10:36 -04:00
2018-09-06 09:33:38 +02:00
<div id="search-box">
2018-04-13 19:58:33 -04:00
<div style="display: flex; align-items: center;">
<input name="search-text" placeholder="Search text, labels" style="flex-grow: 100; margin-left: 5px; margin-right: 5px;" autocomplete="off">
2018-06-09 09:28:50 -04:00
<button id="do-search-button" class="btn btn-sm icon-button" title="Search (enter)"
style="background-image: url('/images/icons/search-20.png');"></button>
2018-06-04 23:21:45 -04:00
2018-06-09 09:28:50 -04:00
<button id="save-search-button" class="btn btn-sm icon-button" title="Save search"
style="background-image: url('/images/icons/save-20.png');"></button>
2018-06-07 19:50:16 -04:00
2018-06-09 09:28:50 -04:00
<button id="close-search-button" class="btn btn-sm icon-button" title="Close search"
style="background-image: url('/images/icons/x-20.png');"></button>
2018-04-13 19:58:33 -04:00
</div>
2018-06-03 20:42:25 -04:00
</div>
2018-03-13 20:02:00 -04:00
2018-06-04 20:22:41 -04:00
<div id="search-results">
2018-06-03 20:42:25 -04:00
<strong>Search results:</strong>
2018-03-13 20:02:00 -04:00
2018-06-03 20:42:25 -04:00
<ul id="search-results-inner">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
2017-10-15 19:10:36 -04:00
</div>
2018-06-04 20:22:41 -04:00
<div id="tree"></div>
2017-11-21 20:04:06 -05:00
</div>
2018-09-06 09:33:38 +02:00
<div id="title-container">
2018-06-10 10:53:39 -04:00
<div style="display: flex; align-items: center;">
<div class="dropdown hide-toggle">
2018-05-31 23:21:47 -04:00
<button id="note-path-list-button" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle">
<span id="note-path-count">1 path</span>
<span class="caret"></span>
</button>
<ul id="note-path-list" class="dropdown-menu" aria-labelledby="note-path-list-button">
</ul>
</div>
2018-08-16 23:16:17 +02:00
<input autocomplete="off" value="" id="note-title" style="margin-left: 15px; font-size: x-large; border: 0; width: 5em; flex-grow: 100;" tabindex="1">
2018-05-31 23:21:47 -04:00
2018-06-10 10:53:39 -04:00
<div class="hide-toggle" style="display: flex; align-items: center;">
<span id="note-id-display" title="Note ID"></span>
<button class="btn btn-sm icon-button"
style="display: none; margin-right: 10px; background-image: url('/images/icons/play-20.png');"
2018-08-28 20:55:21 +02:00
title="Render"
2018-06-10 10:53:39 -04:00
id="render-button"></button>
<button class="btn btn-sm icon-button"
style="display: none; margin-right: 10px; background-image: url('/images/icons/play-20.png');"
title="Execute (Ctrl+Enter)"
id="execute-script-button"></button>
<div>
<button type="button"
class="btn btn-sm icon-button"
id="protect-button"
title="Protected note can be viewed and edited only after entering password"
style="background-image: url('/images/icons/shield-20.png');">
</button><button type="button"
class="btn btn-sm icon-button"
id="unprotect-button"
title="Not protected note can be viewed without entering password"
style="background-image: url('/images/icons/shield-off-20.png');">
</button>
</div>
2017-12-25 09:46:11 -05:00
2018-06-10 10:53:39 -04:00
<div class="dropdown" id="note-type" data-bind="visible: type() != 'search'">
2018-11-05 21:12:03 +01:00
<button data-bind="disable: isDisabled()" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle">
2018-06-10 10:53:39 -04:00
Type: <span data-bind="text: typeString()"></span>
<span class="caret"></span>
</button>
2018-11-05 21:12:03 +01:00
<div id="note-type-dropdown" class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" data-bind="click: selectText, css: { selected: type() == 'text' }"><span class="check">✓</span> <strong>Text</strong></a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" data-bind="click: selectRelationMap, css: { selected: type() == 'relation-map' && mime() == '' }"><span class="check">✓</span> <strong>Relation Map</strong></a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" data-bind="click: selectRender, css: { selected: type() == 'render' && mime() == '' }"><span class="check">✓</span> <strong>Render HTML note</strong></a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" data-bind="click: selectCode, css: { selected: type() == 'code' && mime() == '' }"><span class="check">✓</span> <strong>Code</strong></a>
2018-06-10 10:53:39 -04:00
<!-- ko foreach: codeMimeTypes -->
2018-11-05 21:12:03 +01:00
<a class="dropdown-item" data-bind="click: $parent.selectCodeMime, css: { selected: $parent.type() == 'code' && $parent.mime() == mime }"><span class="check">✓</span> <span data-bind="text: title"></span></a>
2018-06-10 10:53:39 -04:00
<!-- /ko -->
2018-11-05 21:12:03 +01:00
</div>
2018-06-10 10:53:39 -04:00
</div>
2018-01-21 23:06:25 -05:00
2018-06-10 10:53:39 -04:00
<div class="dropdown" id="note-actions">
2018-11-05 21:12:03 +01:00
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle">
2018-06-10 10:53:39 -04:00
Note actions
<span class="caret"></span>
</button>
2018-11-05 21:12:03 +01:00
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" id="show-note-revisions-button">Revisions</a>
<a class="dropdown-item show-attributes-button"><kbd>Alt+A</kbd> Attributes</a>
<a class="dropdown-item" id="show-source-button">HTML source</a>
<a class="dropdown-item" id="upload-file-button">Upload file</a>
<a class="dropdown-item" id="export-note-to-markdown-button">Export as markdown</a>
</div>
2018-06-10 10:53:39 -04:00
</div>
2018-01-19 19:36:41 -05:00
</div>
2017-10-15 19:10:36 -04:00
</div>
</div>
2018-05-08 16:39:01 -04:00
<div id="note-detail-wrapper">
2018-07-29 16:06:13 +02:00
<div id="note-detail-script-area"></div>
2018-08-06 14:43:42 +02:00
<table id="note-detail-promoted-attributes"></table>
2018-08-06 08:59:26 +02:00
2018-04-11 22:44:33 -04:00
<div id="note-detail-component-wrapper">
2018-08-14 13:50:04 +02:00
<div id="note-detail-text" class="note-detail-component" tabindex="10000"></div>
2018-04-08 22:38:52 -04:00
<div id="note-detail-search" class="note-detail-component">
<div style="display: flex; align-items: center;">
<strong>Search string: </strong>
<textarea rows="4" cols="50" id="search-string"></textarea>
</div>
<br />
<h4>Help</h4>
<p>
<ul>
<li>
<code>@abc</code> - matches notes with label abc</li>
<li>
<code>@!abc</code> - matches notes without abc label (maybe not the best syntax)</li>
<li>
<code>@abc=true</code> - matches notes with label abc having value true</li>
<li><code>@abc!=true</code></li>
<li>
<code>@"weird label"="weird value"</code> - works also with whitespace inside names values</li>
<li>
<code>@abc and @def</code> - matches notes with both abc and def</li>
<li>
<code>@abc @def</code> - AND relation is implicit when specifying multiple labels</li>
<li>
<code>@abc or @def</code> - OR relation</li>
<li>
<code>@abc<=5</code> - numerical comparison (also >, >=, <).</li>
<li>
<code>some search string @abc @def</code> - combination of fulltext and label search - both of them need to match (OR not supported)</li>
<li>
<code>@abc @def some search string</code> - same combination</li>
</ul>
2018-08-15 10:14:14 +02:00
<button class="btn btn-sm" type="button" data-help-page="Search">
<i class="glyphicon glyphicon-info-sign"></i> Complete help on search
</button>
2018-04-08 22:38:52 -04:00
</p>
2018-03-11 10:49:22 -04:00
</div>
2018-04-08 22:38:52 -04:00
<div id="note-detail-code" class="note-detail-component"></div>
2018-08-28 20:55:21 +02:00
<div id="note-detail-render" class="note-detail-component">
<div id="note-detail-render-help" class="alert alert-warning">
<p><strong>This help note is shown because this note of type Render HTML doesn't have required relation to function properly.</strong></p>
<p>Render HTML note type is used for <a href="https://github.com/zadam/trilium/wiki/Scripts">scripting</a>. In short, you have a HTML code note (optionally with some JavaScript) and this note will render it. To make it work, you need to define a relation (in <a class="show-attributes-button">Attributes dialog</a>) called "renderNote" pointing to the HTML note to render. Once that's defined you can click on the "play" button to render.</p>
</div>
<div id="note-detail-render-content"></div>
</div>
2018-04-08 22:38:52 -04:00
<div id="note-detail-file" class="note-detail-component">
<table id="file-table">
<tr>
<th>File name:</th>
<td id="file-filename"></td>
</tr>
<tr>
<th>File type:</th>
<td id="file-filetype"></td>
</tr>
<tr>
<th>File size:</th>
<td id="file-filesize"></td>
</tr>
<tr>
<td>
<button id="file-download" class="btn btn-primary" type="button">Download</button>
<button id="file-open" class="btn btn-primary" type="button">Open</button>
</td>
</tr>
</table>
</div>
2018-03-11 10:49:22 -04:00
2018-04-08 22:38:52 -04:00
<input type="file" id="file-upload" style="display: none" />
2018-10-18 11:25:33 +02:00
<div id="note-detail-relation-map" class="note-detail-component">
2018-10-31 12:29:01 +01:00
<button id="relation-map-add-child-notes" class="btn" type="button"
title="Add all child notes of this relation map note">Add child notes</button>
2018-10-31 18:21:58 +01:00
2018-10-31 12:29:01 +01:00
<button id="relation-map-create-child-note" class="btn" type="button"
title="Create new child note and add it into this relation map">Create child note</button>
2018-10-18 11:46:07 +02:00
2018-10-30 20:22:05 +01:00
<div class="btn-group" style="float: right; padding-right: 20px;">
<button type="button"
class="btn icon-button24"
title="Zoom In"
id="relation-map-zoom-in"
style="background-image: url('/images/icons/zoom-in-24.png');"/>
<button type="button"
class="btn icon-button24"
title="Zoom Out"
id="relation-map-zoom-out"
style="background-image: url('/images/icons/zoom-out-24.png');"/>
</div>
2018-10-18 11:46:07 +02:00
<div id="relation-map-canvas"></div>
2018-10-18 11:25:33 +02:00
</div>
2018-03-11 10:49:22 -04:00
</div>
2018-01-20 21:56:03 -05:00
2018-04-11 00:10:11 -04:00
<div id="children-overview"></div>
2018-02-04 20:23:30 -05:00
2018-08-06 09:41:01 +02:00
<div id="attribute-list">
<button class="btn btn-sm show-attributes-button">Attributes:</button>
<span id="attribute-list-inner"></span>
</div>
2018-02-04 20:23:30 -05:00
</div>
2017-10-15 19:10:36 -04:00
2018-11-06 12:46:29 +01:00
<div class="dropdown-menu dropdown-menu-sm context-menu" id="tree-context-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
2018-11-06 14:16:38 +01:00
<% include dialogs/add_link.ejs %>
<% include dialogs/attributes.ejs %>
2018-11-06 17:47:40 +01:00
<% include dialogs/branch_prefix.ejs %>
2018-11-06 14:16:38 +01:00
<% include dialogs/event_log.ejs %>
<% include dialogs/jump_to_note.ejs %>
<% include dialogs/markdown_import.ejs %>
<% include dialogs/note_revisions.ejs %>
<% include dialogs/note_source.ejs %>
<% include dialogs/options.ejs %>
<% include dialogs/protected_session_password.ejs %>
<% include dialogs/recent_changes.ejs %>
<% include dialogs/sql_console.ejs %>
2018-09-06 09:33:38 +02:00
</div>
2017-10-15 19:10:36 -04:00
<script type="text/javascript">
2018-03-25 20:18:08 -04:00
window.baseApiUrl = 'api/';
window.glob = {
2017-12-16 20:48:34 -05:00
activeDialog: null,
2017-12-19 23:22:21 -05:00
sourceId: '<%= sourceId %>',
2018-04-02 21:34:28 -04:00
maxSyncIdAtLoad: <%= maxSyncIdAtLoad %>,
instanceName: '<%= instanceName %>'
2017-12-16 20:48:34 -05:00
};
2017-10-15 19:10:36 -04:00
</script>
2017-10-20 23:43:20 -04:00
<!-- Required for correct loading of scripts in Electron -->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
2018-03-24 12:52:58 -04:00
<script src="/libraries/jquery.min.js"></script>
2017-10-15 19:10:36 -04:00
<!-- bootstrap needs to be included before jQuery UI, otherwise close icon in the dialog will be missing -->
2018-11-05 21:12:03 +01:00
<link href="/libraries/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/libraries/bootstrap/js/bootstrap.bundle.min.js"></script>
2017-10-15 19:10:36 -04:00
2018-03-24 12:52:58 -04:00
<script src="/libraries/bootstrap-notify.min.js"></script>
2017-11-26 12:56:07 -05:00
2017-10-15 19:10:36 -04:00
<!-- Include Fancytree skin and library -->
2018-03-24 12:52:58 -04:00
<link href="/libraries/fancytree/skin-win8/ui.fancytree.css" rel="stylesheet">
2018-11-06 19:35:42 +01:00
<script src="/libraries/fancytree/jquery.fancytree-all-deps.min.js"></script>
2017-10-15 19:10:36 -04:00
2018-03-24 12:52:58 -04:00
<script src="/libraries/jquery.hotkeys.js"></script>
<script src="/libraries/jquery.fancytree.hotkeys.js"></script>
2017-10-15 19:10:36 -04:00
2018-03-24 12:52:58 -04:00
<script src="/libraries/knockout.min.js"></script>
2018-01-11 00:01:16 -05:00
2018-03-24 12:52:58 -04:00
<link href="/stylesheets/style.css" rel="stylesheet">
2017-10-15 19:10:36 -04:00
2018-03-25 13:02:39 -04:00
<script src="/javascripts/services/bootstrap.js" type="module"></script>
2018-03-24 11:18:46 -04:00
2018-01-02 22:01:38 -05:00
<script type="text/javascript">
// we hide container initally because otherwise it is rendered first without CSS and then flickers into
// final form which is pretty ugly.
$("#container").show();
</script>
2018-03-07 23:24:23 -05:00
<style type="text/css">
<%= appCss %>
</style>
2017-10-14 23:31:44 -04:00
</body>
2017-10-15 19:10:36 -04:00
</html>
