Andreas/wekan
1
0
Fork 0
mirror of https://github.com/wekan/wekan.git synced 2026-03-13 00:46:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Merge pull request #4989 from VidVidex/master

Browse source 
Add support for viewing pdfs
This commit is contained in:
Lauri Ojansivu 2023-06-30 10:03:20 -04:00 • committed by GitHub
commit 94992fca44
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 95 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

6
client/components/boards/boardColors.css
View file

@ -1976,7 +1976,7 @@
background-color: #ccc; background-color: #ccc;
color: #222; color: #222;
} }
.board-color-moderndark .attachments-galery .attachment-item { .board-color-moderndark .attachments-gallery .attachment-item {
color: #222; color: #222;
} }
.board-color-moderndark .minicard-description { .board-color-moderndark .minicard-description {
@ -2148,10 +2148,10 @@
.board-color-exodark .sidebar-content { .board-color-exodark .sidebar-content {
box-shadow: 0 0 7px 0 #00897b; box-shadow: 0 0 7px 0 #00897b;
} }
.board-color-exodark .attachments-galery .attachment-item { .board-color-exodark .attachments-gallery .attachment-item {
background: #2b2b2b; background: #2b2b2b;
} }
.board-color-exodark .attachments-galery .attachment-item:hover { .board-color-exodark .attachments-gallery .attachment-item:hover {
border: 1px solid #00897b; border: 1px solid #00897b;
background: #2b2b2b; background: #2b2b2b;
} }

81
client/components/cards/attachments.css
View file

@ -1,17 +1,17 @@
.slide { .slide {
/* swipebox slide background gradient of black to blue, so that back SVG images are visible */ /* swipebox slide background gradient of black to blue, so that back SVG images are visible */
background: rgb(2,0,36); 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 { .attachment-upload {
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
} }
.attachments-galery { .attachments-gallery {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.attachments-galery .attachment-item { .attachments-gallery .attachment-item {
width: 31.33%; width: 31.33%;
margin: 10px 1% 0; margin: 10px 1% 0;
text-align: center; text-align: center;
@ -20,40 +20,40 @@
background: #ededed; background: #ededed;
min-height: 120px; min-height: 120px;
} }
.attachments-galery .attachment-item:hover { .attachments-gallery .attachment-item:hover {
background: #e0e0e0; background: #e0e0e0;
} }
.attachments-galery .attachment-item.add-attachment { .attachments-gallery .attachment-item.add-attachment {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.attachments-galery .attachment-item.add-attachment a { .attachments-gallery .attachment-item.add-attachment a {
display: block; display: block;
margin: auto; margin: auto;
} }
.attachments-galery .attachment-item .attachment-thumbnail { .attachments-gallery .attachment-item .attachment-thumbnail {
height: 80px; height: 80px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: relative; position: relative;
} }
.attachments-galery .attachment-item .attachment-thumbnail .attachment-thumbnail-img { .attachments-gallery .attachment-item .attachment-thumbnail .attachment-thumbnail-img {
max-height: 100%; max-height: 100%;
max-width: 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; text-transform: uppercase;
font-size: 1.6em; font-size: 1.6em;
} }
.attachments-galery .attachment-item .attachment-details { .attachments-gallery .attachment-item .attachment-details {
font-size: 0.75em; font-size: 0.75em;
margin: 3px; margin: 3px;
} }
.attachments-galery .attachment-item .attachment-details .attachment-details-actions a { .attachments-gallery .attachment-item .attachment-details .attachment-details-actions a {
display: block; 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; padding-top: 10px;
} }
.attachment-image-preview { .attachment-image-preview {
@ -69,22 +69,69 @@
border: 1px solid #000; border: 1px solid #000;
box-shadow: 0 1px 2px rgba(0,0,0,0.2); 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) { @media screen and (max-width: 800px) {
.attachments-galery .attachment-item {
#pdf-viewer {
width: 100vh;
}
.attachments-gallery .attachment-item {
width: 48%; width: 48%;
} }
.attachments-galery .attachment-item .attachment-thumbnail { .attachments-gallery .attachment-item .attachment-thumbnail {
height: 130px; height: 130px;
} }
.attachments-galery .attachment-item .attachment-details { .attachments-gallery .attachment-item .attachment-details {
font-size: 1.1em; font-size: 1.1em;
} }
} }
@media screen and (max-width: 360px) { @media screen and (max-width: 360px) {
.attachments-galery .attachment-item { .attachments-gallery .attachment-item {
width: 100%; width: 100%;
} }
.attachments-galery .attachment-item .attachment-thumbnail { .attachments-gallery .attachment-item .attachment-thumbnail {
height: 200px; height: 200px;
} }
} }

13
client/components/cards/attachments.jade
View file

@ -30,8 +30,14 @@ template(name="attachmentDeletePopup")
p {{_ "attachment-delete-pop"}} p {{_ "attachment-delete-pop"}}
button.js-confirm.negate.full(type="submit") {{_ 'delete'}} button.js-confirm.negate.full(type="submit") {{_ 'delete'}}
template(name="attachmentsGalery") template(name="attachmentsGallery")
.attachments-galery #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-gallery
if currentUser.isBoardMember if currentUser.isBoardMember
unless currentUser.isCommentOnly unless currentUser.isCommentOnly
unless currentUser.isWorker unless currentUser.isWorker
@ -40,7 +46,8 @@ template(name="attachmentsGalery")
i.fa.fa-plus i.fa.fa-plus
each attachments each attachments
.attachment-item .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 link
if($eq extension 'svg') if($eq extension 'svg')
img.attachment-thumbnail-img(src="{{link}}" title="{{sanitize name}}" type="image/svg+xml") img.attachment-thumbnail-img(src="{{link}}" title="{{sanitize name}}" type="image/svg+xml")

15
client/components/cards/attachments.js
View file

@ -4,7 +4,18 @@ import DOMPurify from 'dompurify';
const filesize = require('filesize'); const filesize = require('filesize');
const prettyMilliseconds = require('pretty-ms'); 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);
$("#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'), 'click .js-add-attachment': Popup.open('cardAttachments'),
// If we let this event bubble, FlowRouter will handle it and empty the page // If we let this event bubble, FlowRouter will handle it and empty the page
// content, see #101. // content, see #101.
@ -14,7 +25,7 @@ Template.attachmentsGalery.events({
'click .js-open-attachment-menu': Popup.open('attachmentActions'), 'click .js-open-attachment-menu': Popup.open('attachmentActions'),
}); });
Template.attachmentsGalery.helpers({ Template.attachmentsGallery.helpers({
isBoardAdmin() { isBoardAdmin() {
return Meteor.user().isBoardAdmin(); return Meteor.user().isBoardAdmin();
}, },

10
client/components/cards/cardDetails.jade
View file

@ -541,8 +541,8 @@ template(name="cardDetails")
+viewer +viewer
= getDescription = getDescription
.card-checklist-attachmentGalerys .card-checklist-attachmentGalleries
.card-checklist-attachmentGalery.card-checklists .card-checklist-attachmentGallery.card-checklists
if currentBoard.allowsChecklists if currentBoard.allowsChecklists
hr hr
+checklists(cardId = _id) +checklists(cardId = _id)
@ -555,14 +555,14 @@ template(name="cardDetails")
i.fa.fa-paperclip i.fa.fa-paperclip
| {{_ 'attachments'}} | {{_ 'attachments'}}
if Meteor.settings.public.attachmentsUploadMaxSize if Meteor.settings.public.attachmentsUploadMaxSize
| {{_ 'max-upload-filesize'}} {{Meteor.settings.public.attachmentsUploadMaxSize}} | {{_ 'max-upload-filesize'}} {{Meteor.settings.public.attachmentsUploadMaxSize}}
br br
if Meteor.settings.public.attachmentsUploadMimeTypes if Meteor.settings.public.attachmentsUploadMimeTypes
| {{_ 'allowed-upload-filetypes'}} {{Meteor.settings.public.attachmentsUploadMimeTypes}} | {{_ 'allowed-upload-filetypes'}} {{Meteor.settings.public.attachmentsUploadMimeTypes}}
br br
| {{_ 'invalid-file'}} | {{_ 'invalid-file'}}
.card-checklist-attachmentGalery.card-attachmentGalery .card-checklist-attachmentGallery.card-attachmentGallery
+attachmentsGalery +attachmentsGallery
hr hr
.card-details-right .card-details-right