mirror of
https://github.com/zadam/trilium.git
synced 2024-09-22 16:46:09 +08:00
book has now zoom
This commit is contained in:
parent
144e75da9e
commit
02eb737b9d
|
@ -1,6 +1,18 @@
|
|||
import bundleService from "./bundle.js";
|
||||
import server from "./server.js";
|
||||
import linkService from "./link.js";
|
||||
import utils from "./utils.js";
|
||||
|
||||
const MIN_ZOOM_LEVEL = 1;
|
||||
const MAX_ZOOM_LEVEL = 6;
|
||||
|
||||
const ZOOMS = {
|
||||
1: 100,
|
||||
2: 49,
|
||||
3: 32,
|
||||
4: 24,
|
||||
5: 19,
|
||||
6: 16
|
||||
};
|
||||
|
||||
class NoteDetailBook {
|
||||
/**
|
||||
|
@ -9,14 +21,32 @@ class NoteDetailBook {
|
|||
constructor(ctx) {
|
||||
this.ctx = ctx;
|
||||
this.$component = ctx.$tabContent.find('.note-detail-book');
|
||||
this.$content = this.$component.find('.note-detail-book-content');
|
||||
this.$zoomInButton = this.$component.find('.book-zoom-in');
|
||||
this.$zoomOutButton = this.$component.find('.book-zoom-out');
|
||||
this.setZoom(1);
|
||||
|
||||
this.$zoomInButton.click(() => this.setZoom(this.zoomLevel - 1));
|
||||
this.$zoomOutButton.click(() => this.setZoom(this.zoomLevel + 1));
|
||||
}
|
||||
|
||||
setZoom(zoomLevel) {
|
||||
this.zoomLevel = zoomLevel;
|
||||
|
||||
this.$zoomInButton.prop("disabled", zoomLevel === MIN_ZOOM_LEVEL);
|
||||
this.$zoomOutButton.prop("disabled", zoomLevel === MAX_ZOOM_LEVEL);
|
||||
|
||||
this.$content.find('.note-book').css("flex-basis", ZOOMS[zoomLevel] + "%");
|
||||
}
|
||||
|
||||
async render() {
|
||||
this.$component.empty();
|
||||
this.$content.empty();
|
||||
|
||||
for (const childNote of await this.ctx.note.getChildNotes()) {
|
||||
this.$component.append(
|
||||
this.$content.append(
|
||||
$('<div class="note-book">')
|
||||
.css("flex-basis", ZOOMS[this.zoomLevel] + "%")
|
||||
.addClass("type-" + childNote.type)
|
||||
.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)))
|
||||
);
|
||||
|
@ -48,6 +78,35 @@ class NoteDetailBook {
|
|||
else if (note.type === 'image') {
|
||||
return $("<img>").attr("src", `api/images/${note.noteId}/${note.title}`);
|
||||
}
|
||||
else if (note.type === 'file') {
|
||||
function getFileUrl() {
|
||||
// electron needs absolute URL so we extract current host, port, protocol
|
||||
return utils.getHost() + "/api/notes/" + note.noteId + "/download";
|
||||
}
|
||||
|
||||
const $downloadButton = $('<button class="file-download btn btn-primary" type="button">Download</button>');
|
||||
const $openButton = $('<button class="file-open btn btn-primary" type="button">Open</button>');
|
||||
|
||||
$downloadButton.click(() => utils.download(getFileUrl()));
|
||||
$openButton.click(() => {
|
||||
if (utils.isElectron()) {
|
||||
const open = require("open");
|
||||
|
||||
open(getFileUrl());
|
||||
}
|
||||
else {
|
||||
window.location.href = getFileUrl();
|
||||
}
|
||||
});
|
||||
|
||||
// open doesn't work for protected notes since it works through browser which isn't in protected session
|
||||
$openButton.toggle(!note.isProtected);
|
||||
|
||||
return $('<div>')
|
||||
.append($downloadButton)
|
||||
.append(' ')
|
||||
.append($openButton);
|
||||
}
|
||||
else {
|
||||
return "<em>Content of this note cannot be displayed in the book format</em>";
|
||||
}
|
||||
|
@ -64,7 +123,7 @@ class NoteDetailBook {
|
|||
onNoteChange() {}
|
||||
|
||||
cleanup() {
|
||||
this.$component.empty();
|
||||
this.$content.empty();
|
||||
}
|
||||
|
||||
scrollToTop() {
|
||||
|
|
|
@ -75,9 +75,4 @@
|
|||
|
||||
.note-detail-relation-map .ui-contextmenu {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.note-detail-relation-map .floating-button {
|
||||
position: absolute !important;
|
||||
z-index: 100;
|
||||
}
|
|
@ -819,10 +819,41 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
|
|||
padding: 0.7rem 1rem !important; /* make modal header padding slightly smaller */
|
||||
}
|
||||
|
||||
.floating-button {
|
||||
position: absolute !important;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.note-detail-book-content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow: auto;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.note-book {
|
||||
border-radius: 10px;
|
||||
background-color: var(--accented-background-color);
|
||||
padding: 15px;
|
||||
margin: 10px;
|
||||
margin-left: 0;
|
||||
max-height: 300px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.note-book.type-image .note-book-content, .note-book.type-file .note-book-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.note-book-title {
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.note-book-content {
|
||||
flex-grow: 1;
|
||||
}
|
|
@ -9,7 +9,7 @@
|
|||
--main-background-color: white;
|
||||
--main-text-color: black;
|
||||
--main-border-color: #ccc;
|
||||
--accented-background-color: #eee;
|
||||
--accented-background-color: #f5f5f5;
|
||||
--more-accented-background-color: #ccc;
|
||||
--header-background-color: #f8f8f8;
|
||||
--button-background-color: #eee;
|
||||
|
|
|
@ -79,7 +79,7 @@ function getMime(fileName) {
|
|||
}
|
||||
|
||||
function getType(importContext, mime) {
|
||||
mime = mime.toLowerCase();
|
||||
mime = mime ? mime.toLowerCase() : '';
|
||||
|
||||
if (importContext.textImportedAsText && (mime === 'text/html' || ['text/markdown', 'text/x-markdown'].includes(mime))) {
|
||||
return 'text';
|
||||
|
@ -96,7 +96,7 @@ function getType(importContext, mime) {
|
|||
}
|
||||
|
||||
function normalizeMimeType(mime) {
|
||||
mime = mime.toLowerCase();
|
||||
mime = mime ? mime.toLowerCase() : '';
|
||||
|
||||
if (!(mime in CODE_MIME_TYPES) || CODE_MIME_TYPES[mime] === true) {
|
||||
return mime;
|
||||
|
|
|
@ -1 +1,13 @@
|
|||
<div class="note-detail-book note-detail-component"></div>
|
||||
<div class="note-detail-book note-detail-component">
|
||||
<div class="btn-group floating-button" style="right: 25px; top: 20px;">
|
||||
<button type="button"
|
||||
class="book-zoom-in btn icon-button jam jam-search-plus"
|
||||
title="Zoom In"></button>
|
||||
|
||||
<button type="button"
|
||||
class="book-zoom-out btn icon-button jam jam-search-minus"
|
||||
title="Zoom Out"></button>
|
||||
</div>
|
||||
|
||||
<div class="note-detail-book-content"></div>
|
||||
</div>
|
Loading…
Reference in a new issue