zadam/trilium
1
1
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2024-09-21 08:06:03 +08:00
Code Issues 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 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,

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

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

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

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

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

@ -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>
&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>
</tr>
</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>
<span id="image-filename"></span>
<span class="image-filename"></span>
&nbsp; &nbsp;
<strong>File type:</strong>
<span id="image-filetype"></span>
<span class="image-filetype"></span>
&nbsp; &nbsp;
<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>
&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/>
<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>

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

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

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

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

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

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;">
<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>
&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>
</div>
<br />
<div id="note-detail-search-help"></div>
<div class="note-detail-search-help"></div>
</div>

18
src/views/tabs.ejs
View file

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

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 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>
&nbsp; &nbsp;
<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">&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">&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>