Skip to content

Commit

Permalink
Merge branch 'pdf-preview-download' into 'main'
Browse files Browse the repository at this point in the history 
Add button to download preview PDF

See merge request reportcreator/reportcreator!753
  • Loading branch information
@MWedl
MWedl committed Nov 6, 2024
2 parents 62668fc + 24229d8 commit 0db12e5
Show file tree
Hide file tree
Showing 5 changed files with 73 additions and 90 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
5 changes: 5 additions & 0 deletions frontend/src/components/Pdf.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@
@load="iframeLoaded = true"
class="pdfviewer"
:class="{loading: !iframeLoaded}"
:style="{
colorScheme: theme.current.value.dark ? 'dark': 'light',
}"
title="PDF Viewer"
/>
</template>
Expand All @@ -16,6 +19,8 @@ const props = defineProps<{
value: Uint8Array|string|null;
}>();
const theme = useTheme();
const iframeRef = ref();
const iframeLoaded = ref(false);
async function updatePdf() {
Expand Down
2 changes: 1 addition & 1 deletion packages/pdfviewer/src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
112 changes: 39 additions & 73 deletions packages/pdfviewer/src/viewer.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
Expand Down Expand Up @@ -66,6 +73,8 @@ body {
}
#toolbarViewer {
height: var(--toolbar-height);
display: flex;
flex-direction: row;;
}
#toolbarViewerMiddle {
width: max-content;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
}
Expand All @@ -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);
Expand All @@ -238,6 +200,10 @@ body {
width: 26em;
background-color: var(--toolbar-bg-color);
padding: 1px;

display: flex;
flex-direction: row;
align-items: center;
}

#findInput {
Expand All @@ -256,7 +222,7 @@ body {

#findResultsCount {
text-align: center;
padding: 4px 5px;
/* padding: 4px 5px; */
margin: 5px;
}
:is(#findResultsCount, #findMsg):empty {
Expand Down
43 changes: 27 additions & 16 deletions packages/pdfviewer/src/viewer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,20 +12,26 @@
<div id="mainContainer">

<div class="findbar hidden" id="findbar">
<input id="findInput" class="toolbarField" title="Find" placeholder="Find" tabindex="91" autocomplete="off" data-l10n-id="find_input" aria-invalid="false">
<div id="findbarMessageContainer" aria-live="polite">
<span id="findResultsCount" class="toolbarLabel"></span>
<span id="findMsg" class="toolbarLabel">No results</span>
<div>
<input id="findInput" class="toolbarField" title="Find" placeholder="Find" tabindex="91" autocomplete="off" data-l10n-id="find_input" aria-invalid="false">
</div>
<div>
<div id="findbarMessageContainer" aria-live="polite">
<span id="findResultsCount" class="toolbarLabel"></span>
<span id="findMsg" class="toolbarLabel">No results</span>
</div>
</div>
<div>
<button id="findPrevious" class="toolbarButton" title="Find the previous occurrence of the phrase" tabindex="92" data-l10n-id="find_previous">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z" /></svg>
</button>
<button id="findNext" class="toolbarButton" title="Find the next occurrence of the phrase" tabindex="93" data-l10n-id="find_next">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
</button>
<button id="findToggle" class="toolbarButton" title="Close" tabindex="94" data-l10n-id="find_close">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" /></svg>
</button>
</div>
<button id="findPrevious" class="toolbarButton" title="Find the previous occurrence of the phrase" tabindex="92" data-l10n-id="find_previous">
<span class="icon"><span class="icon-prev"></span></span>
</button>
<button id="findNext" class="toolbarButton" title="Find the next occurrence of the phrase" tabindex="93" data-l10n-id="find_next">
<span class="icon"><span class="icon-next"></span></span>
</button>
<button id="findToggle" class="toolbarButton" title="Close" tabindex="94" data-l10n-id="find_close">
<span class="icon"><span class="icon-close"></span></span>
</button>
</div>

<div class="toolbar">
Expand All @@ -40,7 +46,7 @@
<div class="toolbarSpacing"></div>

<button id="zoomOut" class="toolbarButton" title="Zoom Out" tabindex="21">
<span class="icon"><span class="icon-minus"></span></span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19,13H5V11H19V13Z" /></svg>
</button>
<select id="scaleSelect" class="toolbarField" title="Zoom" tabindex="23">
<option id="pageAutoOption" title="" value="auto" selected="selected">Automatic Zoom</option>
Expand All @@ -58,9 +64,14 @@
<option title="" value="4">400%</option>
</select>
<button id="zoomIn" class="toolbarButton" title="Zoom In" tabindex="22">
<span class="icon"><span class="icon-plus"></span></span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" /></svg>
</button>
</div>

<div id="toolbarViewerRight">
<button id="download" class="toolbarButton hiddenMediumView" title="Download Preview PDF" tabindex="33" data-l10n-id="save">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" /></svg>
</button>

</div>
</div>
</div>
Expand Down

0 comments on commit 0db12e5

Please sign in to comment.