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 server from "./server.js";
|
||||||
import linkService from "./link.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 {
|
class NoteDetailBook {
|
||||||
/**
|
/**
|
||||||
|
@ -9,14 +21,32 @@ class NoteDetailBook {
|
||||||
constructor(ctx) {
|
constructor(ctx) {
|
||||||
this.ctx = ctx;
|
this.ctx = ctx;
|
||||||
this.$component = ctx.$tabContent.find('.note-detail-book');
|
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() {
|
async render() {
|
||||||
this.$component.empty();
|
this.$content.empty();
|
||||||
|
|
||||||
for (const childNote of await this.ctx.note.getChildNotes()) {
|
for (const childNote of await this.ctx.note.getChildNotes()) {
|
||||||
this.$component.append(
|
this.$content.append(
|
||||||
$('<div class="note-book">')
|
$('<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($('<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)))
|
||||||
);
|
);
|
||||||
|
@ -48,6 +78,35 @@ class NoteDetailBook {
|
||||||
else if (note.type === 'image') {
|
else if (note.type === 'image') {
|
||||||
return $("<img>").attr("src", `api/images/${note.noteId}/${note.title}`);
|
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 {
|
else {
|
||||||
return "<em>Content of this note cannot be displayed in the book format</em>";
|
return "<em>Content of this note cannot be displayed in the book format</em>";
|
||||||
}
|
}
|
||||||
|
@ -64,7 +123,7 @@ class NoteDetailBook {
|
||||||
onNoteChange() {}
|
onNoteChange() {}
|
||||||
|
|
||||||
cleanup() {
|
cleanup() {
|
||||||
this.$component.empty();
|
this.$content.empty();
|
||||||
}
|
}
|
||||||
|
|
||||||
scrollToTop() {
|
scrollToTop() {
|
||||||
|
|
|
@ -76,8 +76,3 @@
|
||||||
.note-detail-relation-map .ui-contextmenu {
|
.note-detail-relation-map .ui-contextmenu {
|
||||||
z-index: 100;
|
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 */
|
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 {
|
.note-book {
|
||||||
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;
|
||||||
|
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-background-color: white;
|
||||||
--main-text-color: black;
|
--main-text-color: black;
|
||||||
--main-border-color: #ccc;
|
--main-border-color: #ccc;
|
||||||
--accented-background-color: #eee;
|
--accented-background-color: #f5f5f5;
|
||||||
--more-accented-background-color: #ccc;
|
--more-accented-background-color: #ccc;
|
||||||
--header-background-color: #f8f8f8;
|
--header-background-color: #f8f8f8;
|
||||||
--button-background-color: #eee;
|
--button-background-color: #eee;
|
||||||
|
|
|
@ -79,7 +79,7 @@ function getMime(fileName) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function getType(importContext, mime) {
|
function getType(importContext, mime) {
|
||||||
mime = mime.toLowerCase();
|
mime = mime ? mime.toLowerCase() : '';
|
||||||
|
|
||||||
if (importContext.textImportedAsText && (mime === 'text/html' || ['text/markdown', 'text/x-markdown'].includes(mime))) {
|
if (importContext.textImportedAsText && (mime === 'text/html' || ['text/markdown', 'text/x-markdown'].includes(mime))) {
|
||||||
return 'text';
|
return 'text';
|
||||||
|
@ -96,7 +96,7 @@ function getType(importContext, mime) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function normalizeMimeType(mime) {
|
function normalizeMimeType(mime) {
|
||||||
mime = mime.toLowerCase();
|
mime = mime ? mime.toLowerCase() : '';
|
||||||
|
|
||||||
if (!(mime in CODE_MIME_TYPES) || CODE_MIME_TYPES[mime] === true) {
|
if (!(mime in CODE_MIME_TYPES) || CODE_MIME_TYPES[mime] === true) {
|
||||||
return mime;
|
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