From 46d3160da40e9efa82060273887dcb3f7ebba0c9 Mon Sep 17 00:00:00 2001
From: zadam <adam.zivner@gmail.com>
Date: Wed, 1 Jul 2020 23:35:00 +0200
Subject: [PATCH] removed detail.css, added to individual type widgets

---
 src/public/app/widgets/note_detail.js        |  3 +-
 src/public/app/widgets/type_widgets/book.js  | 74 ++++++++++++++-
 src/public/app/widgets/type_widgets/file.js  | 18 +++-
 src/public/app/widgets/type_widgets/image.js | 14 ++-
 src/public/stylesheets/detail.css            | 97 --------------------
 src/services/html_sanitizer.js               |  4 +-
 src/views/desktop.ejs                        |  1 -
 src/views/mobile.ejs                         |  3 +-
 8 files changed, 106 insertions(+), 108 deletions(-)
 delete mode 100644 src/public/stylesheets/detail.css

diff --git a/src/public/app/widgets/note_detail.js b/src/public/app/widgets/note_detail.js
index 7047c80bd..d7ebe0ebd 100644
--- a/src/public/app/widgets/note_detail.js
+++ b/src/public/app/widgets/note_detail.js
@@ -259,8 +259,7 @@ export default class NoteDetailWidget extends TabAwareWidget {
                 "libraries/bootstrap/css/bootstrap.min.css",
                 "stylesheets/print.css",
                 "stylesheets/relation_map.css",
-                "stylesheets/themes.css",
-                "stylesheets/detail.css"
+                "stylesheets/themes.css"
             ],
             debug: true
         });
diff --git a/src/public/app/widgets/type_widgets/book.js b/src/public/app/widgets/type_widgets/book.js
index 260c180a9..a4876ca55 100644
--- a/src/public/app/widgets/type_widgets/book.js
+++ b/src/public/app/widgets/type_widgets/book.js
@@ -35,6 +35,76 @@ const ZOOMS = {
 
 const TPL = `
 <div class="note-detail-book note-detail-printable">
+    <style>
+    /*
+     * We have specific CSS file here instead of being part of the respective widgets to also include this in the printing process
+     */
+    
+    .note-detail-book {
+        height: 100%;
+        padding: 10px;
+        position: relative;
+    }
+    
+    .note-detail-book-content {
+        display: flex;
+        flex-wrap: wrap;
+        overflow: auto;
+        height: 100%;
+        align-content: start;
+    }
+    
+    .note-book-card {
+        border-radius: 10px;
+        background-color: var(--accented-background-color);
+        padding: 15px;
+        padding-bottom: 5px;
+        margin: 5px;
+        margin-left: 0;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        flex-shrink: 0;
+    }
+    
+    .note-book-card .note-book-card {
+        border: 1px solid var(--main-border-color);
+    }
+    
+    .note-book-content {
+        overflow: hidden;
+    }
+    
+    .note-book-card.type-image .note-book-content, .note-book-card.type-file .note-book-content, .note-book-card.type-protected-session .note-book-content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+    }
+    
+    .note-book-card.type-image .note-book-content img, .note-book-card.type-text .note-book-content img {
+        max-width: 100%;
+        max-height: 100%;
+    }
+    
+    .note-book-title {
+        flex-grow: 0;
+    }
+    
+    .note-book-content {
+        flex-grow: 1;
+    }
+    
+    .note-book-auto-message {
+        background-color: var(--accented-background-color);
+        text-align: center;
+        width: 100%;
+        border-radius: 10px;
+        padding: 5px;
+        margin-top: 5px;
+    }
+    </style>
+
     <div class="btn-group floating-button" style="right: 20px; top: 20px;">
         <button type="button"
                 class="expand-children-button btn icon-button bx bx-move-vertical"
@@ -100,7 +170,7 @@ export default class BookTypeWidget extends TypeWidget {
 
             $card.find('.note-book-children-content').empty();
         });
-        
+
         return this.$widget;
     }
 
@@ -241,4 +311,4 @@ export default class BookTypeWidget extends TypeWidget {
     cleanup() {
         this.$content.empty();
     }
-}
\ No newline at end of file
+}
diff --git a/src/public/app/widgets/type_widgets/file.js b/src/public/app/widgets/type_widgets/file.js
index 275138781..08045c49c 100644
--- a/src/public/app/widgets/type_widgets/file.js
+++ b/src/public/app/widgets/type_widgets/file.js
@@ -6,9 +6,25 @@ import TypeWidget from "./type_widget.js";
 const TPL = `
 <div class="note-detail-file note-detail-printable">
     <style>
-        .file-table td {
+        .note-detail-file {
+            padding: 10px;
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+        }
+        
+        .file-table th, .file-table td {
+            padding: 5px;
             overflow-wrap: anywhere;
         }
+        
+        .file-preview-content {
+            background-color: var(--accented-background-color);
+            padding: 15px;
+            max-height: 300px;
+            overflow: auto;
+            margin: 10px;
+        }
     </style>
 
     <table class="file-table">
diff --git a/src/public/app/widgets/type_widgets/image.js b/src/public/app/widgets/type_widgets/image.js
index 4e993ca7c..8bed7be4e 100644
--- a/src/public/app/widgets/type_widgets/image.js
+++ b/src/public/app/widgets/type_widgets/image.js
@@ -5,6 +5,18 @@ import TypeWidget from "./type_widget.js";
 
 const TPL = `
 <div class="note-detail-image note-detail-printable">
+    <style>
+        .note-detail-image {
+            text-align: center;
+            height: 100%;
+            overflow: auto;
+        }
+        
+        .note-detail-image-view {
+            max-width: 100%;
+        }
+    </style>
+
     <div class="no-print" style="display: flex; justify-content: space-evenly; margin: 10px;">
         <button class="image-download btn btn-sm btn-primary" type="button">Download</button>
 
@@ -139,4 +151,4 @@ class ImageTypeWidget extends TypeWidget {
     }
 }
 
-export default ImageTypeWidget
\ No newline at end of file
+export default ImageTypeWidget
diff --git a/src/public/stylesheets/detail.css b/src/public/stylesheets/detail.css
deleted file mode 100644
index 54a2d0715..000000000
--- a/src/public/stylesheets/detail.css
+++ /dev/null
@@ -1,97 +0,0 @@
-/*
- * We have specific CSS file here instead of being part of the respective widgets to also include this in the printing process
- */
-
-.note-detail-book {
-    height: 100%;
-    padding: 10px;
-    position: relative;
-}
-
-.note-detail-book-content {
-    display: flex;
-    flex-wrap: wrap;
-    overflow: auto;
-    height: 100%;
-    align-content: start;
-}
-
-.note-book-card {
-    border-radius: 10px;
-    background-color: var(--accented-background-color);
-    padding: 15px;
-    padding-bottom: 5px;
-    margin: 5px;
-    margin-left: 0;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    flex-shrink: 0;
-}
-
-.note-book-card .note-book-card {
-    border: 1px solid var(--main-border-color);
-}
-
-.note-book-content {
-    overflow: hidden;
-}
-
-.note-book-card.type-image .note-book-content, .note-book-card.type-file .note-book-content, .note-book-card.type-protected-session .note-book-content {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-}
-
-.note-book-card.type-image .note-book-content img, .note-book-card.type-text .note-book-content img {
-    max-width: 100%;
-    max-height: 100%;
-}
-
-.note-book-title {
-    flex-grow: 0;
-}
-
-.note-book-content {
-    flex-grow: 1;
-}
-
-.note-book-auto-message {
-    background-color: var(--accented-background-color);
-    text-align: center;
-    width: 100%;
-    border-radius: 10px;
-    padding: 5px;
-    margin-top: 5px;
-}
-
-.note-detail-image {
-    text-align: center;
-    height: 100%;
-    overflow: auto;
-}
-
-.note-detail-image-view {
-    max-width: 100%;
-}
-
-.note-detail-file {
-    padding: 10px;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-}
-
-.file-table th, .file-table td {
-    padding: 10px;
-    font-size: larger;
-}
-
-.file-preview-content {
-    background-color: var(--accented-background-color);
-    padding: 15px;
-    max-height: 300px;
-    overflow: auto;
-    margin: 10px;
-}
diff --git a/src/services/html_sanitizer.js b/src/services/html_sanitizer.js
index beb947957..16468ed54 100644
--- a/src/services/html_sanitizer.js
+++ b/src/services/html_sanitizer.js
@@ -8,8 +8,8 @@ function sanitize(dirtyHtml) {
             // h1 is removed since that should be note's title
             'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'p', 'a', 'ul', 'ol',
             'li', 'b', 'i', 'strong', 'em', 'strike', 'abbr', 'code', 'hr', 'br', 'div',
-            'table', 'thead', 'caption', 'tbody', 'tr', 'th', 'td', 'pre', 'section', 'figure', 'span',
-            'label', 'input'
+            'table', 'thead', 'caption', 'tbody', 'tr', 'th', 'td', 'pre', 'section', 'img',
+            'figure', 'span', 'label', 'input'
         ],
         allowedAttributes: {
             'a': [ 'href', 'class' ],
diff --git a/src/views/desktop.ejs b/src/views/desktop.ejs
index 8f5560d1e..e6fe91d47 100644
--- a/src/views/desktop.ejs
+++ b/src/views/desktop.ejs
@@ -81,7 +81,6 @@
 
 <link href="stylesheets/themes.css" rel="stylesheet">
 <link href="stylesheets/style.css" rel="stylesheet">
-<link href="stylesheets/detail.css" rel="stylesheet">
 
 <script>
     $("body").show();
diff --git a/src/views/mobile.ejs b/src/views/mobile.ejs
index 74d440fff..1e510054b 100644
--- a/src/views/mobile.ejs
+++ b/src/views/mobile.ejs
@@ -135,9 +135,8 @@
 
 <link href="stylesheets/themes.css" rel="stylesheet">
 <link href="stylesheets/style.css" rel="stylesheet">
-<link href="stylesheets/detail.css" rel="stylesheet">
 
 <link rel="stylesheet" type="text/css" href="libraries/boxicons/css/boxicons.min.css">
 
 </body>
-</html>
\ No newline at end of file
+</html>