gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-04 13:39:01 +01:00
Code Issues Actions 20 Packages Projects Releases Wiki Activity

nested note rendering in book

Browse Source
This commit is contained in:
zadam 2019-10-05 09:33:31 +02:00
parent 02eb737b9d
commit 5892b5b851
2 changed files with 56 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/public/javascripts/services/note_detail_book.js
View File

@ -1,6 +1,7 @@
import server from "./server.js"; import server from "./server.js";
import linkService from "./link.js"; import linkService from "./link.js";
import utils from "./utils.js"; import utils from "./utils.js";
import treeCache from "./tree_cache.js";
const MIN_ZOOM_LEVEL = 1; const MIN_ZOOM_LEVEL = 1;
const MAX_ZOOM_LEVEL = 6; const MAX_ZOOM_LEVEL = 6;
@ -28,6 +29,26 @@ class NoteDetailBook {
this.$zoomInButton.click(() => this.setZoom(this.zoomLevel - 1)); this.$zoomInButton.click(() => this.setZoom(this.zoomLevel - 1));
this.$zoomOutButton.click(() => this.setZoom(this.zoomLevel + 1)); this.$zoomOutButton.click(() => this.setZoom(this.zoomLevel + 1));
this.$content.on('click', '.note-book-open-children-button', async ev => {
const $card = $(ev.target).closest('.note-book-card');
const noteId = $card.attr('data-note-id');
const note = await treeCache.getNote(noteId);
$card.find('.note-book-open-children-button').hide();
$card.find('.note-book-hide-children-button').show();
await this.renderIntoElement(note, $card.find('.note-book-children-content'));
});
this.$content.on('click', '.note-book-hide-children-button', async ev => {
const $card = $(ev.target).closest('.note-book-card');
$card.find('.note-book-open-children-button').show();
$card.find('.note-book-hide-children-button').hide();
$card.find('.note-book-children-content').empty();
});
} }
setZoom(zoomLevel) { setZoom(zoomLevel) {
@ -36,21 +57,38 @@ class NoteDetailBook {
this.$zoomInButton.prop("disabled", zoomLevel === MIN_ZOOM_LEVEL); this.$zoomInButton.prop("disabled", zoomLevel === MIN_ZOOM_LEVEL);
this.$zoomOutButton.prop("disabled", zoomLevel === MAX_ZOOM_LEVEL); this.$zoomOutButton.prop("disabled", zoomLevel === MAX_ZOOM_LEVEL);
this.$content.find('.note-book').css("flex-basis", ZOOMS[zoomLevel] + "%"); this.$content.find('.note-book-card').css("flex-basis", ZOOMS[zoomLevel] + "%");
} }
async render() { async render() {
this.$content.empty(); this.$content.empty();
for (const childNote of await this.ctx.note.getChildNotes()) { await this.renderIntoElement(this.ctx.note, this.$content);
this.$content.append( }
$('<div class="note-book">')
async renderIntoElement(note, $container) {
for (const childNote of await note.getChildNotes()) {
const $card = $('<div class="note-book-card">')
.attr('data-note-id', childNote.noteId)
.css("flex-basis", ZOOMS[this.zoomLevel] + "%") .css("flex-basis", ZOOMS[this.zoomLevel] + "%")
.addClass("type-" + childNote.type) .addClass("type-" + childNote.type)
.append($('<h5 class="note-book-title">').append(await linkService.createNoteLink(childNote.noteId, null, false))) .append($('<h5 class="note-book-title">').append(await linkService.createNoteLink(childNote.noteId, null, false)))
.append($('<div class="note-book-content">').append(await this.getNoteContent(childNote))) .append($('<div class="note-book-content">').append(await this.getNoteContent(childNote)));
const childCount = childNote.getChildNoteIds().length;
if (childCount > 0) {
const label = `${childCount} child${childCount > 1 ? 'ren' : ''}`;
$card.append($('<div class="note-book-children">')
.append($(`<a class="note-book-open-children-button" href="javascript:">Show ${label}</a>`))
.append($(`<a class="note-book-hide-children-button" href="javascript:">Hide ${label}</a>`).hide())
.append($('<div class="note-book-children-content">'))
); );
} }
$container.append($card);
}
} }
async getNoteContent(note) { async getNoteContent(note) {

11
src/public/stylesheets/style.css
View File

@ -831,19 +831,26 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
align-content: start; align-content: start;
} }
.note-book { .note-book-card {
border-radius: 10px; border-radius: 10px;
background-color: var(--accented-background-color); background-color: var(--accented-background-color);
padding: 15px; padding: 15px;
margin: 10px; margin: 10px;
margin-left: 0; margin-left: 0;
max-height: 300px;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-shrink: 0; flex-shrink: 0;
} }
.note-book-card .note-book-card {
border: 1px solid var(--main-border-color);
}
.note-book-content {
max-height: 250px;
}
.note-book.type-image .note-book-content, .note-book.type-file .note-book-content { .note-book.type-image .note-book-content, .note-book.type-file .note-book-content {
display: flex; display: flex;
align-items: center; align-items: center;