mirror of
https://github.com/zadam/trilium.git
synced 2024-09-21 16:16:04 +08:00
tabs wip
This commit is contained in:
parent
7e03f14e01
commit
63ab82a076
|
@ -1,17 +1,19 @@
|
|||
import treeService from "./tree";
|
||||
import protectedSessionHolder from "./protected_session_holder";
|
||||
import server from "./server";
|
||||
import bundleService from "./bundle";
|
||||
import attributeService from "./attributes";
|
||||
import treeUtils from "./tree_utils";
|
||||
import utils from "./utils";
|
||||
import noteDetailCode from "./note_detail_code";
|
||||
import noteDetailText from "./note_detail_text";
|
||||
import noteDetailFile from "./note_detail_file";
|
||||
import noteDetailImage from "./note_detail_image";
|
||||
import noteDetailSearch from "./note_detail_search";
|
||||
import noteDetailRender from "./note_detail_render";
|
||||
import noteDetailRelationMap from "./note_detail_relation_map";
|
||||
import treeService from "./tree.js";
|
||||
import protectedSessionHolder from "./protected_session_holder.js";
|
||||
import server from "./server.js";
|
||||
import bundleService from "./bundle.js";
|
||||
import attributeService from "./attributes.js";
|
||||
import treeUtils from "./tree_utils.js";
|
||||
import utils from "./utils.js";
|
||||
import noteDetailCode from "./note_detail_code.js";
|
||||
import noteDetailText from "./note_detail_text.js";
|
||||
import noteDetailFile from "./note_detail_file.js";
|
||||
import noteDetailImage from "./note_detail_image.js";
|
||||
import noteDetailSearch from "./note_detail_search.js";
|
||||
import noteDetailRender from "./note_detail_render.js";
|
||||
import noteDetailRelationMap from "./note_detail_relation_map.js";
|
||||
|
||||
const $noteTabsContainer = $("#note-tab-container");
|
||||
|
||||
const componentClasses = {
|
||||
'code': noteDetailCode,
|
||||
|
|
|
@ -44,11 +44,22 @@ async function reload() {
|
|||
}
|
||||
|
||||
async function switchToNote(noteId) {
|
||||
if (getActiveNoteId() !== noteId) {
|
||||
if (Object.keys(noteContexts).length === 0) {
|
||||
const tabContent = $("#note-tab-content-template").clone();
|
||||
|
||||
tabContent.removeAttr('id');
|
||||
tabContent.attr('data-note-id', noteId);
|
||||
|
||||
$noteTabsContainer.append(tabContent);
|
||||
|
||||
noteContexts[noteId] = new NoteContext(noteId);
|
||||
}
|
||||
|
||||
//if (getActiveNoteId() !== noteId) {
|
||||
await saveNotesIfChanged();
|
||||
|
||||
await loadNoteDetail(noteId);
|
||||
}
|
||||
//}
|
||||
}
|
||||
|
||||
function getActiveNoteContent() {
|
||||
|
@ -60,7 +71,7 @@ function onNoteChange(func) {
|
|||
}
|
||||
|
||||
async function saveNotesIfChanged() {
|
||||
for (const ctx of noteContexts) {
|
||||
for (const ctx of Object.values(noteContexts)) {
|
||||
await ctx.saveNoteIfChanged();
|
||||
}
|
||||
|
||||
|
@ -103,7 +114,7 @@ function getActiveContext() {
|
|||
}
|
||||
|
||||
function showTab(noteId) {
|
||||
for (const ctx of noteContexts) {
|
||||
for (const ctx of Object.values(noteContexts)) {
|
||||
ctx.$noteTab.toggle(ctx.noteId === noteId);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -8,6 +8,7 @@ class NoteDetailText {
|
|||
* @param {NoteContext} ctx
|
||||
*/
|
||||
constructor(ctx) {
|
||||
this.ctx = ctx;
|
||||
this.$component = ctx.$noteTab.find('.note-detail-text');
|
||||
this.textEditor = null;
|
||||
|
||||
|
@ -48,11 +49,11 @@ class NoteDetailText {
|
|||
}
|
||||
}
|
||||
|
||||
this.textEditor.isReadOnly = await isReadOnly();
|
||||
this.textEditor.isReadOnly = await this.isReadOnly();
|
||||
|
||||
this.$component.show();
|
||||
|
||||
this.textEditor.setData(noteDetailService.getActiveNote().content);
|
||||
this.textEditor.setData(this.ctx.note.content);
|
||||
}
|
||||
|
||||
getContent() {
|
||||
|
|
|
@ -1,32 +1,32 @@
|
|||
<div id="note-detail-file" class="note-detail-component">
|
||||
<table id="file-table">
|
||||
<div class="note-detail-file note-detail-component">
|
||||
<table class="file-table">
|
||||
<tr>
|
||||
<th>Note ID:</th>
|
||||
<td id="file-note-id"></td>
|
||||
<td class="file-note-id"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Original file name:</th>
|
||||
<td id="file-filename"></td>
|
||||
<td class="file-filename"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>File type:</th>
|
||||
<td id="file-filetype"></td>
|
||||
<td class="file-filetype"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>File size:</th>
|
||||
<td id="file-filesize"></td>
|
||||
<td class="file-filesize"></td>
|
||||
</tr>
|
||||
<tr id="file-preview-row">
|
||||
<th>Preview:</th>
|
||||
<td>
|
||||
<pre id="file-preview-content"></pre>
|
||||
<pre class="file-preview-content"></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<button id="file-download" class="btn btn-primary" type="button">Download</button>
|
||||
<button class="file-download btn btn-primary" type="button">Download</button>
|
||||
|
||||
<button id="file-open" class="btn btn-primary" type="button">Open</button>
|
||||
<button class="file-open btn btn-primary" type="button">Open</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
|
@ -1,28 +1,28 @@
|
|||
<div id="note-detail-image" class="note-detail-component">
|
||||
<div class="note-detail-image note-detail-component">
|
||||
<strong>Original file name:</strong>
|
||||
<span id="image-filename"></span>
|
||||
<span class="image-filename"></span>
|
||||
|
||||
|
||||
|
||||
<strong>File type:</strong>
|
||||
<span id="image-filetype"></span>
|
||||
<span class="image-filetype"></span>
|
||||
|
||||
|
||||
|
||||
<strong>File size:</strong>
|
||||
<span id="image-filesize"></span>
|
||||
<span class="image-filesize"></span>
|
||||
|
||||
<br/><br/>
|
||||
|
||||
<button id="image-download" class="btn btn-primary" type="button">Download</button>
|
||||
<button class="image-download btn btn-primary" type="button">Download</button>
|
||||
|
||||
|
||||
|
||||
<button id="image-copy-to-clipboard" class="btn btn-primary" type="button">Copy to clipboard</button>
|
||||
<button class="image-copy-to-clipboard btn btn-primary" type="button">Copy to clipboard</button>
|
||||
|
||||
<br/><br/>
|
||||
|
||||
<div id="note-detail-image-wrapper">
|
||||
<img id="note-detail-image-view" />
|
||||
<div class="note-detail-image-wrapper">
|
||||
<img class="note-detail-image-view" />
|
||||
</div>
|
||||
</div>
|
|
@ -1,8 +1,8 @@
|
|||
<div id="protected-session-password-component" class="note-detail-component">
|
||||
<div class="protected-session-password-component note-detail-component">
|
||||
<form class="protected-session-password-form">
|
||||
<div class="form-group">
|
||||
<label for="protected-session-password-in-detail">Showing protected note requires entering your password:</label>
|
||||
<input id="protected-session-password-in-detail" class="form-control protected-session-password" type="password">
|
||||
<input class="protected-session-password-in-detail form-control protected-session-password" type="password">
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary">Start protected session <kbd>enter</kbd></button>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<div id="note-detail-relation-map" class="note-detail-component">
|
||||
<button id="relation-map-create-child-note" class="btn btn-sm floating-button" type="button"
|
||||
<div class="note-detail-relation-map note-detail-component">
|
||||
<button class="relation-map-create-child-note btn btn-sm floating-button" type="button"
|
||||
title="Create new child note and add it into this relation map">
|
||||
<span class="jam jam-plus"></span>
|
||||
|
||||
|
@ -7,23 +7,21 @@
|
|||
</button>
|
||||
|
||||
<button type="button"
|
||||
class="btn icon-button floating-button jam jam-crop"
|
||||
class="relation-map-reset-pan-zoom btn icon-button floating-button jam jam-crop"
|
||||
title="Reset pan & zoom to initial coordinates and magnification"
|
||||
id="relation-map-reset-pan-zoom" style="right: 100px;"></button>
|
||||
style="right: 100px;"></button>
|
||||
|
||||
<div class="btn-group floating-button" style="right: 40px;">
|
||||
<button type="button"
|
||||
class="btn icon-button jam jam-search-plus"
|
||||
title="Zoom In"
|
||||
id="relation-map-zoom-in"></button>
|
||||
class="relation-map-zoom-in btn icon-button jam jam-search-plus"
|
||||
title="Zoom In"></button>
|
||||
|
||||
<button type="button"
|
||||
class="btn icon-button jam jam-search-minus"
|
||||
title="Zoom Out"
|
||||
id="relation-map-zoom-out"></button>
|
||||
class="relation-map-zoom-out btn icon-button jam jam-search-minus"
|
||||
title="Zoom Out"></button>
|
||||
</div>
|
||||
|
||||
<div id="relation-map-wrapper">
|
||||
<div id="relation-map-container"></div>
|
||||
<div class="relation-map-wrapper">
|
||||
<div class="relation-map-container"></div>
|
||||
</div>
|
||||
</div>
|
|
@ -1,9 +1,9 @@
|
|||
<div id="note-detail-render" class="note-detail-component">
|
||||
<div id="note-detail-render-help" class="alert alert-warning">
|
||||
<div class="note-detail-render note-detail-component">
|
||||
<div class="note-detail-render-help 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 class="note-detail-render-content"></div>
|
||||
</div>
|
|
@ -1,15 +1,15 @@
|
|||
<div id="note-detail-search" class="note-detail-component">
|
||||
<div class="note-detail-search note-detail-component">
|
||||
<div style="display: flex; align-items: center; margin-right: 20px;">
|
||||
<strong>Search string: </strong>
|
||||
<textarea rows="4" style="width: auto !important; flex-grow: 4" class="form-control" id="search-string"></textarea>
|
||||
<textarea rows="4" style="width: auto !important; flex-grow: 4" class="search-string form-control"></textarea>
|
||||
|
||||
<span>
|
||||
|
||||
<button type="button" class="btn btn-primary" id="note-detail-search-refresh-results-button">Refresh search results</button>
|
||||
<button type="button" class="btn btn-primary note-detail-search-refresh-results-button">Refresh search results</button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<div id="note-detail-search-help"></div>
|
||||
<div class="note-detail-search-help"></div>
|
||||
</div>
|
|
@ -18,17 +18,17 @@
|
|||
</div>
|
||||
|
||||
<div id="note-tab-container">
|
||||
<div class="note-tab-content">
|
||||
<div id="note-tab-content-template" class="note-tab-content">
|
||||
<% include title.ejs %>
|
||||
|
||||
<div id="note-detail-script-area"></div>
|
||||
<div class="note-detail-script-area"></div>
|
||||
|
||||
<table id="note-detail-promoted-attributes"></table>
|
||||
<table class="note-detail-promoted-attributes"></table>
|
||||
|
||||
<div id="note-detail-component-wrapper">
|
||||
<div id="note-detail-text" class="note-detail-component" tabindex="10000"></div>
|
||||
<div class="note-detail-component-wrapper">
|
||||
<div class="note-detail-text note-detail-component" tabindex="10000"></div>
|
||||
|
||||
<div id="note-detail-code" class="note-detail-component"></div>
|
||||
<div class="note-detail-code note-detail-component"></div>
|
||||
|
||||
<% include details/search.ejs %>
|
||||
|
||||
|
@ -42,13 +42,13 @@
|
|||
|
||||
<% include details/protected_session_password.ejs %>
|
||||
|
||||
<div id="children-overview"></div>
|
||||
<div class="children-overview"></div>
|
||||
</div>
|
||||
|
||||
<div id="attribute-list">
|
||||
<div class="attribute-list">
|
||||
<button class="btn btn-sm show-attributes-button">Attributes:</button>
|
||||
|
||||
<span id="attribute-list-inner"></span>
|
||||
<span class="attribute-list-inner"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
|
@ -1,53 +1,49 @@
|
|||
<div id="title-container" style="flex-grow: 0; flex-shrink: 0;">
|
||||
<div style="flex-grow: 0; flex-shrink: 0;">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<div class="dropdown hide-toggle">
|
||||
<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>
|
||||
<button class="btn btn-sm dropdown-toggle note-path-list-button" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="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 class="note-path-list dropdown-menu" aria-labelledby="note-path-list-button">
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<input autocomplete="off" value="" id="note-title" tabindex="1">
|
||||
<input autocomplete="off" value="" class="note-title" tabindex="1">
|
||||
|
||||
<span id="saved-indicator" title="All changes have been saved" class="jam jam-check"></span>
|
||||
<span class="saved-indicator jam jam-check" title="All changes have been saved"></span>
|
||||
|
||||
<div class="hide-toggle" style="display: flex; align-items: center;">
|
||||
<button class="btn btn-sm icon-button jam jam-play"
|
||||
<button class="btn btn-sm icon-button jam jam-play render-button"
|
||||
style="display: none; margin-right: 10px;"
|
||||
title="Render"
|
||||
id="render-button"></button>
|
||||
title="Render"></button>
|
||||
|
||||
<button class="btn btn-sm icon-button jam jam-play"
|
||||
<button class="btn btn-sm icon-button jam jam-play execute-script-button"
|
||||
style="display: none; margin-right: 10px;"
|
||||
title="Execute (Ctrl+Enter)"
|
||||
id="execute-script-button"></button>
|
||||
title="Execute (Ctrl+Enter)"></button>
|
||||
|
||||
<div class="btn-group btn-group-xs">
|
||||
<button type="button"
|
||||
class="btn btn-sm icon-button jam jam-shield-check"
|
||||
id="protect-button"
|
||||
class="btn btn-sm icon-button jam jam-shield-check protect-button"
|
||||
title="Protected note can be viewed and edited only after entering password">
|
||||
</button>
|
||||
|
||||
<button type="button"
|
||||
class="btn btn-sm icon-button jam jam-shield-close"
|
||||
id="unprotect-button"
|
||||
class="btn btn-sm icon-button jam jam-shield-close unprotect-button"
|
||||
title="Not protected note can be viewed without entering password">
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div id="note-type-wrapper" style="display: flex;">
|
||||
<div class="dropdown" id="note-type">
|
||||
<div class="note-type-wrapper" style="display: flex;">
|
||||
<div class="dropdown note-type">
|
||||
<button data-bind="disable: isDisabled()" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle">
|
||||
Type: <span data-bind="text: typeString()"></span>
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<div id="note-type-dropdown" class="dropdown-menu dropdown-menu-right">
|
||||
<div class="note-type-dropdown 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>
|
||||
|
@ -61,18 +57,18 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown" id="note-actions">
|
||||
<div class="dropdown note-actions">
|
||||
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle">
|
||||
Note actions
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<a class="dropdown-item" id="show-note-revisions-button" data-bind="css: { disabled: type() == 'file' || type() == 'image' }">Revisions</a>
|
||||
<a class="dropdown-item show-note-revisions-button" data-bind="css: { disabled: type() == 'file' || type() == 'image' }">Revisions</a>
|
||||
<a class="dropdown-item show-attributes-button"><kbd>Alt+A</kbd> Attributes</a>
|
||||
<a class="dropdown-item" id="show-source-button" data-bind="css: { disabled: type() != 'text' && type() != 'code' && type() != 'relation-map' && type() != 'search' }">Note source</a>
|
||||
<a class="dropdown-item" id="import-files-button">Import files</a>
|
||||
<a class="dropdown-item" id="export-note-button" data-bind="css: { disabled: type() != 'text' }">Export note</a>
|
||||
<a class="dropdown-item" id="show-note-info-button">Note info</a>
|
||||
<a class="dropdown-item show-source-button" data-bind="css: { disabled: type() != 'text' && type() != 'code' && type() != 'relation-map' && type() != 'search' }">Note source</a>
|
||||
<a class="dropdown-item import-files-button">Import files</a>
|
||||
<a class="dropdown-item export-note-button" data-bind="css: { disabled: type() != 'text' }">Export note</a>
|
||||
<a class="dropdown-item show-note-info-button">Note info</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Reference in a new issue