mirror of
https://github.com/zadam/trilium.git
synced 2025-03-01 14:22:32 +01:00
basic implementation of children overview, closes #80
This commit is contained in:
azivner
parent
1f96a6beab
commit
f4079604c9
@ -14,6 +14,10 @@ class Branch {
|
||||
return await this.treeCache.getNote(this.noteId);
|
||||
}
|
||||
|
||||
isTopLevel() {
|
||||
return this.parentNoteId === 'root';
|
||||
}
|
||||
|
||||
get toString() {
|
||||
return `Branch(branchId=${this.branchId})`;
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import treeService from './tree.js';
|
||||
import treeUtils from './tree_utils.js';
|
||||
import noteTypeService from './note_type.js';
|
||||
import protectedSessionService from './protected_session.js';
|
||||
import protectedSessionHolder from './protected_session_holder.js';
|
||||
@ -24,6 +25,7 @@ const $noteDetailWrapper = $("#note-detail-wrapper");
|
||||
const $noteIdDisplay = $("#note-id-display");
|
||||
const $labelList = $("#label-list");
|
||||
const $labelListInner = $("#label-list-inner");
|
||||
const $childrenOverview = $("#children-overview");
|
||||
|
||||
let currentNote = null;
|
||||
|
||||
@ -73,14 +75,14 @@ function noteChanged() {
|
||||
async function reload() {
|
||||
// no saving here
|
||||
|
||||
await loadNoteToEditor(getCurrentNoteId());
|
||||
await loadNoteDetail(getCurrentNoteId());
|
||||
}
|
||||
|
||||
async function switchToNote(noteId) {
|
||||
if (getCurrentNoteId() !== noteId) {
|
||||
await saveNoteIfChanged();
|
||||
|
||||
await loadNoteToEditor(noteId);
|
||||
await loadNoteDetail(noteId);
|
||||
}
|
||||
}
|
||||
|
||||
@ -137,7 +139,7 @@ async function handleProtectedSession() {
|
||||
protectedSessionService.ensureDialogIsClosed();
|
||||
}
|
||||
|
||||
async function loadNoteToEditor(noteId) {
|
||||
async function loadNoteDetail(noteId) {
|
||||
currentNote = await loadNote(noteId);
|
||||
|
||||
if (isNewNoteCreated) {
|
||||
@ -175,6 +177,26 @@ async function loadNoteToEditor(noteId) {
|
||||
$noteDetailWrapper.scrollTop(0);
|
||||
|
||||
await loadLabelList();
|
||||
|
||||
await showChildrenOverview();
|
||||
}
|
||||
|
||||
async function showChildrenOverview() {
|
||||
const note = getCurrentNote();
|
||||
|
||||
$childrenOverview.empty();
|
||||
|
||||
const notePath = treeService.getCurrentNotePath();
|
||||
|
||||
for (const childBranch of await note.getChildBranches()) {
|
||||
const link = $('<a>', {
|
||||
href: 'javascript:',
|
||||
text: await treeUtils.getNoteTitle(childBranch.noteId, childBranch.parentNoteId)
|
||||
}).attr('action', 'note').attr('note-path', notePath + '/' + childBranch.noteId);
|
||||
|
||||
const childEl = $('<div class="child-overview">').html(link);
|
||||
$childrenOverview.append(childEl);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadLabelList() {
|
||||
|
||||
@ -5,9 +5,9 @@
|
||||
display: grid;
|
||||
grid-template-areas: "header header"
|
||||
"tree-actions title"
|
||||
"search note-content"
|
||||
"tree note-content"
|
||||
"parent-list note-content"
|
||||
"search note-detail"
|
||||
"tree note-detail"
|
||||
"parent-list note-detail"
|
||||
"parent-list label-list";
|
||||
grid-template-columns: 2fr 5fr;
|
||||
grid-template-rows: auto
|
||||
@ -288,4 +288,21 @@ div.ui-tooltip {
|
||||
#file-table th, #file-table td {
|
||||
padding: 10px;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
#children-overview {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.child-overview {
|
||||
font-weight: bold;
|
||||
font-size: large;
|
||||
padding: 10px;
|
||||
border: 1px solid black;
|
||||
width: 150px;
|
||||
height: 95px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -132,76 +132,81 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative; overflow: auto; grid-area: note-content; padding-left: 10px; padding-top: 10px;" id="note-detail-wrapper">
|
||||
<div id="note-detail-text" class="note-detail-component"></div>
|
||||
<div style="position: relative; overflow: hidden; grid-area: note-detail; padding-left: 10px; padding-top: 10px; display: flex; flex-direction: column;" id="note-detail-wrapper">
|
||||
<div style="flex-grow: 1; position: relative; overflow: auto; flex-basis: content;">
|
||||
<div id="note-detail-text" style="height: 100%;" class="note-detail-component"></div>
|
||||
|
||||
<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 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>
|
||||
|
||||
<a href="https://github.com/zadam/trilium/wiki/Labels">Complete help on search syntax</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
<div id="note-detail-code" class="note-detail-component"></div>
|
||||
|
||||
<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>
|
||||
<div id="note-detail-render" class="note-detail-component"></div>
|
||||
|
||||
<a href="https://github.com/zadam/trilium/wiki/Labels">Complete help on search syntax</a>
|
||||
</p>
|
||||
<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>
|
||||
|
||||
<input type="file" id="file-upload" style="display: none" />
|
||||
</div>
|
||||
|
||||
<div id="note-detail-code" class="note-detail-component"></div>
|
||||
|
||||
<div id="note-detail-render" class="note-detail-component"></div>
|
||||
|
||||
<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 id="children-overview" style="flex-grow: 1000; flex-shrink: 1000; flex-basis: 1px; height: 100px; overflow: hidden; display: flex; flex-wrap: wrap">
|
||||
</div>
|
||||
|
||||
<input type="file" id="file-upload" style="display: none" />
|
||||
</div>
|
||||
|
||||
<div id="label-list">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user