From 070e8831b499fb60eb68d28f2218a9d48e9af269 Mon Sep 17 00:00:00 2001 From: Vid Smole Date: Fri, 30 Jun 2023 12:35:45 +0200 Subject: [PATCH 1/2] Add support for viewing pdfs --- client/components/cards/attachments.css | 49 +++++++++++++++++++++++- client/components/cards/attachments.jade | 9 ++++- client/components/cards/attachments.js | 11 ++++++ 3 files changed, 67 insertions(+), 2 deletions(-) diff --git a/client/components/cards/attachments.css b/client/components/cards/attachments.css index 4f96902f4..c8322775f 100644 --- a/client/components/cards/attachments.css +++ b/client/components/cards/attachments.css @@ -1,7 +1,7 @@ .slide { /* swipebox slide background gradient of black to blue, so that back SVG images are visible */ background: rgb(2,0,36); - background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 14%, rgba(0,212,255,1) 100%); + background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 14%, rgba(0,212,255,1) 100%); } .attachment-upload { text-align: center; @@ -69,7 +69,54 @@ border: 1px solid #000; box-shadow: 0 1px 2px rgba(0,0,0,0.2); } +#viewer-overlay{ + width: 100%; + height: 100vh; + position: fixed; + top: 48px; /* height of the navbar */ + left: 0; + z-index: 9999 !important; + background: rgba(13,13,13,0.9); +} +#viewer-container { + position: relative; + width: 100%; + height: 100%; +} +#viewer-close { + color:white; + cursor: pointer; + font-size: 4em; + top: 0; + right: 16px; + position: absolute; + padding: 20 20; +} +#viewer-container{ + text-align: center; +} +#pdf-viewer { + width: 40vw; + height: 100vh; +} +.pdf-preview-error{ + margin-top: 20vh; + display: block; + font-size: 2em; + color: white; +} +@media screen and (max-width: 1600px) { + #pdf-viewer { + width: 60vw; + } +} + @media screen and (max-width: 800px) { + + #pdf-viewer { + width: 100vh; + } + .attachments-galery .attachment-item { width: 48%; } diff --git a/client/components/cards/attachments.jade b/client/components/cards/attachments.jade index 959992997..a664ea9a5 100644 --- a/client/components/cards/attachments.jade +++ b/client/components/cards/attachments.jade @@ -31,6 +31,12 @@ template(name="attachmentDeletePopup") button.js-confirm.negate.full(type="submit") {{_ 'delete'}} template(name="attachmentsGalery") + #viewer-overlay.hidden + #viewer-container + object#pdf-viewer(type="application/pdf") + span.pdf-preview-error Your device does not support previewing pdfs. Try downloading instead. + a#viewer-close.fa.fa-times-thin + .attachments-galery if currentUser.isBoardMember unless currentUser.isCommentOnly @@ -40,7 +46,8 @@ template(name="attachmentsGalery") i.fa.fa-plus each attachments .attachment-item - a.attachment-thumbnail.swipebox(href="{{link}}" title="{{sanitize name}}") + + span.attachment-thumbnail(href="{{link}}" title="{{sanitize name}}" class="{{#if isImage}}swipebox{{/if}} {{#if $eq extension 'pdf'}}pdf{{/if}}") if link if($eq extension 'svg') img.attachment-thumbnail-img(src="{{link}}" title="{{sanitize name}}" type="image/svg+xml") diff --git a/client/components/cards/attachments.js b/client/components/cards/attachments.js index 99b2e6c15..96ebd81ae 100644 --- a/client/components/cards/attachments.js +++ b/client/components/cards/attachments.js @@ -5,6 +5,17 @@ const filesize = require('filesize'); const prettyMilliseconds = require('pretty-ms'); Template.attachmentsGalery.events({ + 'click .pdf'(event) { + let link = $(event.currentTarget).attr("href"); + $("#pdf-viewer").attr("data", link); + $("#viewer-overlay").removeClass("hidden"); + }, + 'click #viewer-container'(event) { + $("#viewer-overlay").addClass("hidden"); + }, + 'click #viewer-close'(event) { + $("#viewer-overlay").addClass("hidden"); + }, 'click .js-add-attachment': Popup.open('cardAttachments'), // If we let this event bubble, FlowRouter will handle it and empty the page // content, see #101. From a8af5343a7ce8a0354efb93c04cbd782f06e592d Mon Sep 17 00:00:00 2001 From: Vid Smole Date: Fri, 30 Jun 2023 12:44:04 +0200 Subject: [PATCH 2/2] Fix typo --- client/components/boards/boardColors.css | 6 ++--- client/components/cards/attachments.css | 32 ++++++++++++------------ client/components/cards/attachments.jade | 4 +-- client/components/cards/attachments.js | 4 +-- client/components/cards/cardDetails.jade | 10 ++++---- 5 files changed, 28 insertions(+), 28 deletions(-) diff --git a/client/components/boards/boardColors.css b/client/components/boards/boardColors.css index 65b0b4003..bcb6b697e 100644 --- a/client/components/boards/boardColors.css +++ b/client/components/boards/boardColors.css @@ -1976,7 +1976,7 @@ background-color: #ccc; color: #222; } -.board-color-moderndark .attachments-galery .attachment-item { +.board-color-moderndark .attachments-gallery .attachment-item { color: #222; } .board-color-moderndark .minicard-description { @@ -2148,10 +2148,10 @@ .board-color-exodark .sidebar-content { box-shadow: 0 0 7px 0 #00897b; } -.board-color-exodark .attachments-galery .attachment-item { +.board-color-exodark .attachments-gallery .attachment-item { background: #2b2b2b; } -.board-color-exodark .attachments-galery .attachment-item:hover { +.board-color-exodark .attachments-gallery .attachment-item:hover { border: 1px solid #00897b; background: #2b2b2b; } diff --git a/client/components/cards/attachments.css b/client/components/cards/attachments.css index c8322775f..05207ce71 100644 --- a/client/components/cards/attachments.css +++ b/client/components/cards/attachments.css @@ -7,11 +7,11 @@ text-align: center; font-weight: bold; } -.attachments-galery { +.attachments-gallery { display: flex; flex-wrap: wrap; } -.attachments-galery .attachment-item { +.attachments-gallery .attachment-item { width: 31.33%; margin: 10px 1% 0; text-align: center; @@ -20,40 +20,40 @@ background: #ededed; min-height: 120px; } -.attachments-galery .attachment-item:hover { +.attachments-gallery .attachment-item:hover { background: #e0e0e0; } -.attachments-galery .attachment-item.add-attachment { +.attachments-gallery .attachment-item.add-attachment { display: flex; align-items: center; } -.attachments-galery .attachment-item.add-attachment a { +.attachments-gallery .attachment-item.add-attachment a { display: block; margin: auto; } -.attachments-galery .attachment-item .attachment-thumbnail { +.attachments-gallery .attachment-item .attachment-thumbnail { height: 80px; display: flex; align-items: center; justify-content: center; position: relative; } -.attachments-galery .attachment-item .attachment-thumbnail .attachment-thumbnail-img { +.attachments-gallery .attachment-item .attachment-thumbnail .attachment-thumbnail-img { max-height: 100%; max-width: 100%; } -.attachments-galery .attachment-item .attachment-thumbnail .attachment-thumbnail-ext { +.attachments-gallery .attachment-item .attachment-thumbnail .attachment-thumbnail-ext { text-transform: uppercase; font-size: 1.6em; } -.attachments-galery .attachment-item .attachment-details { +.attachments-gallery .attachment-item .attachment-details { font-size: 0.75em; margin: 3px; } -.attachments-galery .attachment-item .attachment-details .attachment-details-actions a { +.attachments-gallery .attachment-item .attachment-details .attachment-details-actions a { display: block; } -.attachments-galery .attachment-item .attachment-details .attachment-details-actions a.attachment-details-menu { +.attachments-gallery .attachment-item .attachment-details .attachment-details-actions a.attachment-details-menu { padding-top: 10px; } .attachment-image-preview { @@ -117,21 +117,21 @@ width: 100vh; } - .attachments-galery .attachment-item { + .attachments-gallery .attachment-item { width: 48%; } - .attachments-galery .attachment-item .attachment-thumbnail { + .attachments-gallery .attachment-item .attachment-thumbnail { height: 130px; } - .attachments-galery .attachment-item .attachment-details { + .attachments-gallery .attachment-item .attachment-details { font-size: 1.1em; } } @media screen and (max-width: 360px) { - .attachments-galery .attachment-item { + .attachments-gallery .attachment-item { width: 100%; } - .attachments-galery .attachment-item .attachment-thumbnail { + .attachments-gallery .attachment-item .attachment-thumbnail { height: 200px; } } diff --git a/client/components/cards/attachments.jade b/client/components/cards/attachments.jade index a664ea9a5..016039485 100644 --- a/client/components/cards/attachments.jade +++ b/client/components/cards/attachments.jade @@ -30,14 +30,14 @@ template(name="attachmentDeletePopup") p {{_ "attachment-delete-pop"}} button.js-confirm.negate.full(type="submit") {{_ 'delete'}} -template(name="attachmentsGalery") +template(name="attachmentsGallery") #viewer-overlay.hidden #viewer-container object#pdf-viewer(type="application/pdf") span.pdf-preview-error Your device does not support previewing pdfs. Try downloading instead. a#viewer-close.fa.fa-times-thin - .attachments-galery + .attachments-gallery if currentUser.isBoardMember unless currentUser.isCommentOnly unless currentUser.isWorker diff --git a/client/components/cards/attachments.js b/client/components/cards/attachments.js index 96ebd81ae..2c24ee5be 100644 --- a/client/components/cards/attachments.js +++ b/client/components/cards/attachments.js @@ -4,7 +4,7 @@ import DOMPurify from 'dompurify'; const filesize = require('filesize'); const prettyMilliseconds = require('pretty-ms'); -Template.attachmentsGalery.events({ +Template.attachmentsGallery.events({ 'click .pdf'(event) { let link = $(event.currentTarget).attr("href"); $("#pdf-viewer").attr("data", link); @@ -25,7 +25,7 @@ Template.attachmentsGalery.events({ 'click .js-open-attachment-menu': Popup.open('attachmentActions'), }); -Template.attachmentsGalery.helpers({ +Template.attachmentsGallery.helpers({ isBoardAdmin() { return Meteor.user().isBoardAdmin(); }, diff --git a/client/components/cards/cardDetails.jade b/client/components/cards/cardDetails.jade index 6f4d16358..4a773d1ba 100644 --- a/client/components/cards/cardDetails.jade +++ b/client/components/cards/cardDetails.jade @@ -541,8 +541,8 @@ template(name="cardDetails") +viewer = getDescription - .card-checklist-attachmentGalerys - .card-checklist-attachmentGalery.card-checklists + .card-checklist-attachmentGalleries + .card-checklist-attachmentGallery.card-checklists if currentBoard.allowsChecklists hr +checklists(cardId = _id) @@ -555,14 +555,14 @@ template(name="cardDetails") i.fa.fa-paperclip | {{_ 'attachments'}} if Meteor.settings.public.attachmentsUploadMaxSize - | {{_ 'max-upload-filesize'}} {{Meteor.settings.public.attachmentsUploadMaxSize}} + | {{_ 'max-upload-filesize'}} {{Meteor.settings.public.attachmentsUploadMaxSize}} br if Meteor.settings.public.attachmentsUploadMimeTypes | {{_ 'allowed-upload-filetypes'}} {{Meteor.settings.public.attachmentsUploadMimeTypes}} br | {{_ 'invalid-file'}} - .card-checklist-attachmentGalery.card-attachmentGalery - +attachmentsGalery + .card-checklist-attachmentGallery.card-attachmentGallery + +attachmentsGallery hr .card-details-right