Docker/planka
Docker/planka
1
0
Fork 0
mirror of https://github.com/plankanban/planka.git synced 2025-07-19 13:19:44 +02:00
Code Issues Releases Activity

feat: Add pdf viewer to attachments gallery

Browse source
This commit is contained in:
Maksim Eltyshev 2022-06-22 16:59:54 +02:00
parent 320f630554
commit 938f67f004
2 changed files with 41 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

31
client/src/components/CardModal/Attachments/Attachments.jsx
View file

@ -1,8 +1,9 @@
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classNames from 'classnames';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Gallery, Item as GalleryItem } from 'react-photoswipe-gallery'; import { Gallery, Item as GalleryItem } from 'react-photoswipe-gallery';
import { Button, Grid } from 'semantic-ui-react'; import { Button } from 'semantic-ui-react';
import { useToggle } from '../../../lib/hooks'; import { useToggle } from '../../../lib/hooks';
import Item from './Item'; import Item from './Item';
@ -57,17 +58,27 @@ const Attachments = React.memo(
}, [toggleAllVisible]); }, [toggleAllVisible]);
const galleryItemsNode = items.map((item, index) => { const galleryItemsNode = items.map((item, index) => {
const props = item.image const isPdf = item.url.endsWith('.pdf');
? item.image
: { let props;
content: ( if (item.image) {
<Grid verticalAlign="middle" className={styles.contentWrapper}> props = item.image;
<Grid.Column textAlign="center" className={styles.content}> } else {
props = {
content: isPdf ? (
// eslint-disable-next-line jsx-a11y/alt-text
<object
data={item.url}
type="application/pdf"
className={classNames(styles.content, styles.contentPdf)}
/>
) : (
<span className={classNames(styles.content, styles.contentError)}>
{t('common.thereIsNoPreviewAvailableForThisAttachment')} {t('common.thereIsNoPreviewAvailableForThisAttachment')}
</Grid.Column> </span>
</Grid>
), ),
}; };
}
const isVisible = isAllVisible || index < INITIALLY_VISIBLE; const isVisible = isAllVisible || index < INITIALLY_VISIBLE;
@ -88,7 +99,7 @@ const Attachments = React.memo(
createdAt={item.createdAt} createdAt={item.createdAt}
isCover={item.isCover} isCover={item.isCover}
isPersisted={item.isPersisted} isPersisted={item.isPersisted}
onClick={item.image ? open : undefined} onClick={item.image || isPdf ? open : undefined}
onCoverSelect={() => handleCoverSelect(item.id)} onCoverSelect={() => handleCoverSelect(item.id)}
onCoverDeselect={handleCoverDeselect} onCoverDeselect={handleCoverDeselect}
onUpdate={(data) => handleUpdate(item.id, data)} onUpdate={(data) => handleUpdate(item.id, data)}

20
client/src/components/CardModal/Attachments/Attachments.module.scss
View file

@ -1,12 +1,24 @@
:global(#app) { :global(#app) {
.content { .content {
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
}
.contentPdf {
height: 100%;
width: 1120px;
}
.contentError {
color: #fff; color: #fff;
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
} height: 20px;
width: 470px;
.contentWrapper {
height: 100%;
} }
.toggleButton { .toggleButton {