gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-06-06 18:08:33 +02:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

tabs wip

Browse Source
This commit is contained in:
zadam 2019-05-01 23:06:18 +02:00
parent 7e03f14e01
commit 63ab82a076
11 changed files with 100 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/public/javascripts/services/note_context.js
View File

@ -1,17 +1,19 @@
import treeService from "./tree"; import treeService from "./tree.js";
import protectedSessionHolder from "./protected_session_holder"; import protectedSessionHolder from "./protected_session_holder.js";
import server from "./server"; import server from "./server.js";
import bundleService from "./bundle"; import bundleService from "./bundle.js";
import attributeService from "./attributes"; import attributeService from "./attributes.js";
import treeUtils from "./tree_utils"; import treeUtils from "./tree_utils.js";
import utils from "./utils"; import utils from "./utils.js";
import noteDetailCode from "./note_detail_code"; import noteDetailCode from "./note_detail_code.js";
import noteDetailText from "./note_detail_text"; import noteDetailText from "./note_detail_text.js";
import noteDetailFile from "./note_detail_file"; import noteDetailFile from "./note_detail_file.js";
import noteDetailImage from "./note_detail_image"; import noteDetailImage from "./note_detail_image.js";
import noteDetailSearch from "./note_detail_search"; import noteDetailSearch from "./note_detail_search.js";
import noteDetailRender from "./note_detail_render"; import noteDetailRender from "./note_detail_render.js";
import noteDetailRelationMap from "./note_detail_relation_map"; import noteDetailRelationMap from "./note_detail_relation_map.js";
const $noteTabsContainer = $("#note-tab-container");
const componentClasses = { const componentClasses = {
'code': noteDetailCode, 'code': noteDetailCode,

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

@ -44,11 +44,22 @@ async function reload() {
} }
async function switchToNote(noteId) { 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 saveNotesIfChanged();
await loadNoteDetail(noteId); await loadNoteDetail(noteId);
} //}
} }
function getActiveNoteContent() { function getActiveNoteContent() {
@ -60,7 +71,7 @@ function onNoteChange(func) {
} }
async function saveNotesIfChanged() { async function saveNotesIfChanged() {
for (const ctx of noteContexts) { for (const ctx of Object.values(noteContexts)) {
await ctx.saveNoteIfChanged(); await ctx.saveNoteIfChanged();
} }
@ -103,7 +114,7 @@ function getActiveContext() {
} }
function showTab(noteId) { function showTab(noteId) {
for (const ctx of noteContexts) { for (const ctx of Object.values(noteContexts)) {
ctx.$noteTab.toggle(ctx.noteId === noteId); ctx.$noteTab.toggle(ctx.noteId === noteId);
} }
} }

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

@ -8,6 +8,7 @@ class NoteDetailText {
* @param {NoteContext} ctx * @param {NoteContext} ctx
*/ */
constructor(ctx) { constructor(ctx) {
this.ctx = ctx;
this.$component = ctx.$noteTab.find('.note-detail-text'); this.$component = ctx.$noteTab.find('.note-detail-text');
this.textEditor = null; this.textEditor = null;
@ -48,11 +49,11 @@ class NoteDetailText {
} }
} }
this.textEditor.isReadOnly = await isReadOnly(); this.textEditor.isReadOnly = await this.isReadOnly();
this.$component.show(); this.$component.show();
this.textEditor.setData(noteDetailService.getActiveNote().content); this.textEditor.setData(this.ctx.note.content);
} }
getContent() { getContent() {

18
src/views/details/file.ejs
View File

@ -1,32 +1,32 @@
<div id="note-detail-file" class="note-detail-component"> <div class="note-detail-file note-detail-component">
<table id="file-table"> <table class="file-table">
<tr> <tr>
<th>Note ID:</th> <th>Note ID:</th>
<td id="file-note-id"></td> <td class="file-note-id"></td>
</tr> </tr>
<tr> <tr>
<th>Original file name:</th> <th>Original file name:</th>
<td id="file-filename"></td> <td class="file-filename"></td>
</tr> </tr>
<tr> <tr>
<th>File type:</th> <th>File type:</th>
<td id="file-filetype"></td> <td class="file-filetype"></td>
</tr> </tr>
<tr> <tr>
<th>File size:</th> <th>File size:</th>
<td id="file-filesize"></td> <td class="file-filesize"></td>
</tr> </tr>
<tr id="file-preview-row"> <tr id="file-preview-row">
<th>Preview:</th> <th>Preview:</th>
<td> <td>
<pre id="file-preview-content"></pre> <pre class="file-preview-content"></pre>
</td> </td>
</tr> </tr>
<tr> <tr>
<td colspan="2"> <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>
&nbsp; &nbsp;
<button id="file-open" class="btn btn-primary" type="button">Open</button> <button class="file-open btn btn-primary" type="button">Open</button>
</td> </td>
</tr> </tr>
</table> </table>

16
src/views/details/image.ejs
View File

@ -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> <strong>Original file name:</strong>
<span id="image-filename"></span> <span class="image-filename"></span>
&nbsp; &nbsp; &nbsp; &nbsp;
<strong>File type:</strong> <strong>File type:</strong>
<span id="image-filetype"></span> <span class="image-filetype"></span>
&nbsp; &nbsp; &nbsp; &nbsp;
<strong>File size:</strong> <strong>File size:</strong>
<span id="image-filesize"></span> <span class="image-filesize"></span>
<br/><br/> <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>
&nbsp; &nbsp; &nbsp; &nbsp;
<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/> <br/><br/>
<div id="note-detail-image-wrapper"> <div class="note-detail-image-wrapper">
<img id="note-detail-image-view" /> <img class="note-detail-image-view" />
</div> </div>
</div> </div>

4
src/views/details/protected_session_password.ejs
View File

@ -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"> <form class="protected-session-password-form">
<div class="form-group"> <div class="form-group">
<label for="protected-session-password-in-detail">Showing protected note requires entering your password:</label> <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> </div>
<button class="btn btn-primary">Start protected session <kbd>enter</kbd></button> <button class="btn btn-primary">Start protected session <kbd>enter</kbd></button>

22
src/views/details/relation_map.ejs
View File

@ -1,5 +1,5 @@
<div id="note-detail-relation-map" class="note-detail-component"> <div class="note-detail-relation-map note-detail-component">
<button id="relation-map-create-child-note" class="btn btn-sm floating-button" type="button" <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"> title="Create new child note and add it into this relation map">
<span class="jam jam-plus"></span> <span class="jam jam-plus"></span>
@ -7,23 +7,21 @@
</button> </button>
<button type="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" 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;"> <div class="btn-group floating-button" style="right: 40px;">
<button type="button" <button type="button"
class="btn icon-button jam jam-search-plus" class="relation-map-zoom-in btn icon-button jam jam-search-plus"
title="Zoom In" title="Zoom In"></button>
id="relation-map-zoom-in"></button>
<button type="button" <button type="button"
class="btn icon-button jam jam-search-minus" class="relation-map-zoom-out btn icon-button jam jam-search-minus"
title="Zoom Out" title="Zoom Out"></button>
id="relation-map-zoom-out"></button>
</div> </div>
<div id="relation-map-wrapper"> <div class="relation-map-wrapper">
<div id="relation-map-container"></div> <div class="relation-map-container"></div>
</div> </div>
</div> </div>

6
src/views/details/render.ejs
View File

@ -1,9 +1,9 @@
<div id="note-detail-render" class="note-detail-component"> <div class="note-detail-render note-detail-component">
<div id="note-detail-render-help" class="alert alert-warning"> <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><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> <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>
<div id="note-detail-render-content"></div> <div class="note-detail-render-content"></div>
</div> </div>

8
src/views/details/search.ejs
View File

@ -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;"> <div style="display: flex; align-items: center; margin-right: 20px;">
<strong>Search string: &nbsp; &nbsp;</strong> <strong>Search string: &nbsp; &nbsp;</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> <span>
&nbsp; &nbsp; &nbsp; &nbsp;
<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> </span>
</div> </div>
<br /> <br />
<div id="note-detail-search-help"></div> <div class="note-detail-search-help"></div>
</div> </div>

18
src/views/tabs.ejs
View File

@ -18,17 +18,17 @@
</div> </div>
<div id="note-tab-container"> <div id="note-tab-container">
<div class="note-tab-content"> <div id="note-tab-content-template" class="note-tab-content">
<% include title.ejs %> <% 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 class="note-detail-component-wrapper">
<div id="note-detail-text" class="note-detail-component" tabindex="10000"></div> <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 %> <% include details/search.ejs %>
@ -42,13 +42,13 @@
<% include details/protected_session_password.ejs %> <% include details/protected_session_password.ejs %>
<div id="children-overview"></div> <div class="children-overview"></div>
</div> </div>
<div id="attribute-list"> <div class="attribute-list">
<button class="btn btn-sm show-attributes-button">Attributes:</button> <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> </div>
</div> </div>

46
src/views/title.ejs
View File

@ -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 style="display: flex; align-items: center;">
<div class="dropdown hide-toggle"> <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"> <button class="btn btn-sm dropdown-toggle note-path-list-button" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span id="note-path-count">1 path</span> <span class="note-path-count">1 path</span>
<span class="caret"></span> <span class="caret"></span>
</button> </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> </ul>
</div> </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;"> <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;" style="display: none; margin-right: 10px;"
title="Render" title="Render"></button>
id="render-button"></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;" style="display: none; margin-right: 10px;"
title="Execute (Ctrl+Enter)" title="Execute (Ctrl+Enter)"></button>
id="execute-script-button"></button>
<div class="btn-group btn-group-xs"> <div class="btn-group btn-group-xs">
<button type="button" <button type="button"
class="btn btn-sm icon-button jam jam-shield-check" class="btn btn-sm icon-button jam jam-shield-check protect-button"
id="protect-button"
title="Protected note can be viewed and edited only after entering password"> title="Protected note can be viewed and edited only after entering password">
</button> </button>
<button type="button" <button type="button"
class="btn btn-sm icon-button jam jam-shield-close" class="btn btn-sm icon-button jam jam-shield-close unprotect-button"
id="unprotect-button"
title="Not protected note can be viewed without entering password"> title="Not protected note can be viewed without entering password">
</button> </button>
</div> </div>
&nbsp; &nbsp; &nbsp; &nbsp;
<div id="note-type-wrapper" style="display: flex;"> <div class="note-type-wrapper" style="display: flex;">
<div class="dropdown" id="note-type"> <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"> <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> Type: <span data-bind="text: typeString()"></span>
<span class="caret"></span> <span class="caret"></span>
</button> </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">&check;</span> <strong>Text</strong></a> <a class="dropdown-item" data-bind="click: selectText, css: { selected: type() == 'text' }"><span class="check">&check;</span> <strong>Text</strong></a>
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>
<a class="dropdown-item" data-bind="click: selectRelationMap, css: { selected: type() == 'relation-map' && mime() == '' }"><span class="check">&check;</span> <strong>Relation Map</strong></a> <a class="dropdown-item" data-bind="click: selectRelationMap, css: { selected: type() == 'relation-map' && mime() == '' }"><span class="check">&check;</span> <strong>Relation Map</strong></a>
@ -61,18 +57,18 @@
</div> </div>
</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"> <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle">
Note actions Note actions
<span class="caret"></span> <span class="caret"></span>
</button> </button>
<div class="dropdown-menu dropdown-menu-right"> <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 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 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 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 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-note-info-button">Note info</a>
</div> </div>
</div> </div>
</div> </div>