From 4e8d1dac6761a64c427a6d6587cdbed4b6f77558 Mon Sep 17 00:00:00 2001
From: zadam <adam.zivner@gmail.com>
Date: Mon, 10 Aug 2020 23:39:17 +0200
Subject: [PATCH] fixes for rendering PDF previews e.g. in include note

---
 .../app/services/note_content_renderer.js     | 24 ++++++++++++-------
 .../type_widgets/abstract_text_type_widget.js |  4 ++--
 src/public/stylesheets/style.css              | 12 ++++++++++
 3 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/src/public/app/services/note_content_renderer.js b/src/public/app/services/note_content_renderer.js
index 8b97f5d7a..7691f981b 100644
--- a/src/public/app/services/note_content_renderer.js
+++ b/src/public/app/services/note_content_renderer.js
@@ -24,7 +24,7 @@ async function getRenderedContent(note) {
             .attr("src", `api/images/${note.noteId}/${note.title}`)
             .css("max-width", "100%");
     }
-    else if (type === 'file') {
+    else if (type === 'file' || type === 'pdf') {
         function getFileUrl() {
             return utils.getUrlForDownload("api/notes/" + note.noteId + "/download");
         }
@@ -47,19 +47,21 @@ async function getRenderedContent(note) {
         // open doesn't work for protected notes since it works through browser which isn't in protected session
         $openButton.toggle(!note.isProtected);
 
-        $rendered = $('<div>');
+        $rendered = $('<div style="display: flex; flex-direction: column; height: 100%;">');
 
-        if (note.mime === 'application/pdf' && utils.isElectron()) {
-            const $pdfPreview = $('<iframe class="pdf-preview" style="width: 100%; height: 100%; flex-grow: 100;"></iframe>');
+        if (type === 'pdf') {
+            const $pdfPreview = $('<iframe class="pdf-preview" style="width: 100%; flex-grow: 100;"></iframe>');
             $pdfPreview.attr("src", utils.getUrlForDownload("api/notes/" + note.noteId + "/open"));
 
             $rendered.append($pdfPreview);
         }
 
-        $rendered
-            .append($downloadButton)
-            .append(' &nbsp; ')
-            .append($openButton);
+        $rendered.append(
+            $("<div>")
+                .append($downloadButton)
+                .append(' &nbsp; ')
+                .append($openButton)
+        );
     }
     else if (type === 'render') {
         $rendered = $('<div>');
@@ -90,6 +92,10 @@ async function getRenderedContent(note) {
 function getRenderingType(note) {
     let type = note.type;
 
+    if (type === 'file' && note.mime === 'application/pdf' && utils.isElectron()) {
+        type = 'pdf';
+    }
+
     if (note.isProtected) {
         if (protectedSessionHolder.isProtectedSessionAvailable()) {
             protectedSessionHolder.touchProtectedSession();
@@ -104,4 +110,4 @@ function getRenderingType(note) {
 
 export default {
     getRenderedContent
-};
\ No newline at end of file
+};
diff --git a/src/public/app/widgets/type_widgets/abstract_text_type_widget.js b/src/public/app/widgets/type_widgets/abstract_text_type_widget.js
index 54f44ccfb..d28a19a36 100644
--- a/src/public/app/widgets/type_widgets/abstract_text_type_widget.js
+++ b/src/public/app/widgets/type_widgets/abstract_text_type_widget.js
@@ -36,10 +36,10 @@ export default class AbstractTextTypeWidget extends TypeWidget {
                     .append($link)
             );
 
-            const {renderedContent} = await noteContentRenderer.getRenderedContent(note);
+            const {renderedContent, type} = await noteContentRenderer.getRenderedContent(note);
 
             $el.append(
-                $('<div class="include-note-content">')
+                $(`<div class="include-note-content type-${type}">`)
                     .append(renderedContent)
             );
         }
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index 29a0c832b..e61fcd418 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -693,11 +693,23 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
     overflow: auto;
 }
 
+.include-note.box-size-small .include-note-content.type-pdf {
+    height: 10em; /* PDF is rendered in iframe and must be sized absolutely */
+}
+
 .include-note.box-size-medium .include-note-content {
     max-height: 20em;
     overflow: auto;
 }
 
+.include-note.box-size-medium .include-note-content.type-pdf {
+    height: 20em; /* PDF is rendered in iframe and must be sized absolutely */
+}
+
+.include-note.box-size-full .include-note-content.type-pdf {
+    height: 50em; /* PDF is rendered in iframe and it's not possible to put full height so at least a large height */
+}
+
 .alert-warning {
     color: var(--main-text-color) !important;
     background-color: var(--accented-background-color) !important;