From 24229d8c8d5b53dca6d1a99951903b0ff7c7e3fc Mon Sep 17 00:00:00 2001 From: Michael Wedl Date: Wed, 6 Nov 2024 10:12:28 +0100 Subject: [PATCH] Add button to download preview PDF --- CHANGELOG.md | 1 + frontend/src/components/Pdf.vue | 5 ++ packages/pdfviewer/src/index.js | 2 +- packages/pdfviewer/src/viewer.css | 112 ++++++++++------------------- packages/pdfviewer/src/viewer.html | 43 ++++++----- 5 files changed, 73 insertions(+), 90 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index df4ebbb93..8651c7e88 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ * Show PDF render timing information * Fix error while updating user fields via REST API * Update HTB designs to improve table rendering performance +* Add button to download preview PDF ## v2024.81 - 2024-10-25 diff --git a/frontend/src/components/Pdf.vue b/frontend/src/components/Pdf.vue index 74d55f39d..cbe3cd642 100644 --- a/frontend/src/components/Pdf.vue +++ b/frontend/src/components/Pdf.vue @@ -5,6 +5,9 @@ @load="iframeLoaded = true" class="pdfviewer" :class="{loading: !iframeLoaded}" + :style="{ + colorScheme: theme.current.value.dark ? 'dark': 'light', + }" title="PDF Viewer" /> @@ -16,6 +19,8 @@ const props = defineProps<{ value: Uint8Array|string|null; }>(); +const theme = useTheme(); + const iframeRef = ref(); const iframeLoaded = ref(false); async function updatePdf() { diff --git a/packages/pdfviewer/src/index.js b/packages/pdfviewer/src/index.js index e2aedaa36..1959fbb09 100644 --- a/packages/pdfviewer/src/index.js +++ b/packages/pdfviewer/src/index.js @@ -41,11 +41,11 @@ function getViewerConfiguration() { customScaleOption: document.getElementById("customScaleOption"), zoomIn: document.getElementById("zoomIn"), zoomOut: document.getElementById("zoomOut"), + download: document.getElementById("download"), previous: disabled, next: disabled, print: disabled, - download: disabled, viewFind: disabled, openFile: disabled, editorFreeTextButton: disabled, diff --git a/packages/pdfviewer/src/viewer.css b/packages/pdfviewer/src/viewer.css index 1a9393b28..04c19293d 100644 --- a/packages/pdfviewer/src/viewer.css +++ b/packages/pdfviewer/src/viewer.css @@ -1,21 +1,28 @@ - @import 'pdfjs-dist/web/pdf_viewer.css'; +@import 'pdfjs-dist/web/pdf_viewer.css'; - :root { - --body-bg-color: #525659; - --main-color: rgba(249, 249, 250, 1); - - --toolbar-height: 2rem; - --toolbar-bg-color: #323639; - --toolbar-border-color: rgba(12, 12, 13, 1); +:root { + --body-bg-color: #525659; + --main-color: rgba(249, 249, 250, 1); + --toolbar-height: 2rem; + --toolbar-bg-color: #323639; + --toolbar-border-color: rgba(12, 12, 13, 1); + --field-color: var(--main-color); + --field-bg-color: rgba(64, 64, 68, 1); + --field-border-color: rgba(115, 115, 115, 1); + --hover-bg-color: rgba(102, 102, 103, 1); +} - --field-color: var(--main-color); - --field-bg-color: rgba(64, 64, 68, 1); - --field-border-color: rgba(115, 115, 115, 1); +html { + color-scheme: light dark; +} +@media (prefers-color-scheme: dark) { + html { + color-scheme: dark light; + } +} - --hover-bg-color: rgba(102, 102, 103, 1); - } - * { +* { padding: 0; margin: 0; } @@ -66,6 +73,8 @@ body { } #toolbarViewer { height: var(--toolbar-height); + display: flex; + flex-direction: row;; } #toolbarViewerMiddle { width: max-content; @@ -76,6 +85,12 @@ body { display: flex; align-items: center; } +#toolbarViewerRight { + float: right; + display: flex; + align-items: center; + padding-right: 0.5em; +} .toolbar { position: relative; @@ -147,12 +162,16 @@ body { background: none; width: 1.5em; height: 1.5em; - padding: 0.2em; + /* padding: 0.2em; */ border-radius: 2px; color: var(--main-color); cursor: pointer; user-select: none; } +.toolbarButton svg { + fill: var(--main-color); +} + .toolbarButton[disabled] { opacity: 0.5; } @@ -167,63 +186,6 @@ body { } -.icon-plus, .icon-minus, .icon-close, .icon-prev, .icon-next { - position: relative; - display: block; - width: 100%; - height: 100%; -} -.icon-plus::before, .icon-minus::before, .icon-close::before { - content: " "; - position: absolute; - display: block; - background-color: #fff; - height: 10%; - margin-top: -5%; - top: 50%; - left: 5%; - right: 5%; -} -.icon-plus::after, .icon-close::after { - content: " "; - position: absolute; - display: block; - background-color: #fff; - width: 10%; - margin-left: -5%; - left: 50%; - top: 5%; - bottom: 5%; -} -.icon-close::before, .icon-close::after { - transform: rotate(-45deg); -} -.icon-prev::after { - content: ""; - position: absolute; - display: block; - width: 60%; - height: 60%; - border-top: 0.2em solid white; - border-right: 0.2em solid white; - transform: rotate(-45deg); - top: 30%; - left: 10%; -} -.icon-next::after { - content: ""; - position: absolute; - display: block; - width: 60%; - height: 60%; - border-bottom: 0.2em solid white; - border-left: 0.2em solid white; - transform: rotate(-45deg); - bottom: 30%; - left: 10%; -} - - .findbar { position: absolute; top: calc(var(--toolbar-height) + 1px); @@ -238,6 +200,10 @@ body { width: 26em; background-color: var(--toolbar-bg-color); padding: 1px; + + display: flex; + flex-direction: row; + align-items: center; } #findInput { @@ -256,7 +222,7 @@ body { #findResultsCount { text-align: center; - padding: 4px 5px; + /* padding: 4px 5px; */ margin: 5px; } :is(#findResultsCount, #findMsg):empty { diff --git a/packages/pdfviewer/src/viewer.html b/packages/pdfviewer/src/viewer.html index f00523a01..fbb0def6a 100644 --- a/packages/pdfviewer/src/viewer.html +++ b/packages/pdfviewer/src/viewer.html @@ -12,20 +12,26 @@