mirror of
https://github.com/plankanban/planka.git
synced 2025-07-18 12:49:43 +02:00
feat: Add gallery for attachments
This commit is contained in:
parent
0bf4004046
commit
8f4d60c46f
22 changed files with 351 additions and 102 deletions
31
client/package-lock.json
generated
31
client/package-lock.json
generated
|
@ -17,6 +17,7 @@
|
||||||
"js-cookie": "^3.0.1",
|
"js-cookie": "^3.0.1",
|
||||||
"lodash": "^4.17.20",
|
"lodash": "^4.17.20",
|
||||||
"node-sass": "^7.0.1",
|
"node-sass": "^7.0.1",
|
||||||
|
"photoswipe": "^5.2.7",
|
||||||
"prop-types": "^15.8.1",
|
"prop-types": "^15.8.1",
|
||||||
"react": "^17.0.2",
|
"react": "^17.0.2",
|
||||||
"react-beautiful-dnd": "^13.0.0",
|
"react-beautiful-dnd": "^13.0.0",
|
||||||
|
@ -26,6 +27,7 @@
|
||||||
"react-i18next": "^11.16.6",
|
"react-i18next": "^11.16.6",
|
||||||
"react-input-mask": "^2.0.4",
|
"react-input-mask": "^2.0.4",
|
||||||
"react-markdown": "^8.0.2",
|
"react-markdown": "^8.0.2",
|
||||||
|
"react-photoswipe-gallery": "^2.2.1",
|
||||||
"react-redux": "^7.2.8",
|
"react-redux": "^7.2.8",
|
||||||
"react-router-dom": "^5.3.1",
|
"react-router-dom": "^5.3.1",
|
||||||
"react-scripts": "5.0.1",
|
"react-scripts": "5.0.1",
|
||||||
|
@ -16224,6 +16226,14 @@
|
||||||
"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
|
||||||
"integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
|
"integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
|
||||||
},
|
},
|
||||||
|
"node_modules/photoswipe": {
|
||||||
|
"version": "5.2.7",
|
||||||
|
"resolved": "https://registry.npmjs.org/photoswipe/-/photoswipe-5.2.7.tgz",
|
||||||
|
"integrity": "sha512-AogMba7W/O5gOtDIZ8cQuou1ltwxlaLNoZY1qi1s+kbYXpZk9D6rXxnNGAfDppl+bfe+sKLW2w2sx+3uQ8oPzg==",
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.12.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/picocolors": {
|
"node_modules/picocolors": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
|
||||||
|
@ -18230,6 +18240,16 @@
|
||||||
"react-dom": "^15.5.x || ^16.x || ^17.x"
|
"react-dom": "^15.5.x || ^16.x || ^17.x"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/react-photoswipe-gallery": {
|
||||||
|
"version": "2.2.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-photoswipe-gallery/-/react-photoswipe-gallery-2.2.1.tgz",
|
||||||
|
"integrity": "sha512-xaUKKmwRLCpEzB8+bU7yxjXvRBHaInpBcI6YQY0UOeFctHAL3jGRDk9j2YbwmlgN7kRStHTcyrSNxr+zSaOnKg==",
|
||||||
|
"peerDependencies": {
|
||||||
|
"photoswipe": ">= 5.2.2",
|
||||||
|
"prop-types": ">= 15.7.0",
|
||||||
|
"react": ">= 16.8.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/react-popper": {
|
"node_modules/react-popper": {
|
||||||
"version": "2.2.5",
|
"version": "2.2.5",
|
||||||
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
|
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
|
||||||
|
@ -35010,6 +35030,11 @@
|
||||||
"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
|
||||||
"integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
|
"integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
|
||||||
},
|
},
|
||||||
|
"photoswipe": {
|
||||||
|
"version": "5.2.7",
|
||||||
|
"resolved": "https://registry.npmjs.org/photoswipe/-/photoswipe-5.2.7.tgz",
|
||||||
|
"integrity": "sha512-AogMba7W/O5gOtDIZ8cQuou1ltwxlaLNoZY1qi1s+kbYXpZk9D6rXxnNGAfDppl+bfe+sKLW2w2sx+3uQ8oPzg=="
|
||||||
|
},
|
||||||
"picocolors": {
|
"picocolors": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
|
||||||
|
@ -36319,6 +36344,12 @@
|
||||||
"integrity": "sha512-a5Q7CkWznBRUWPmocCvE8b6lEYw1s6+opp/60dCunhO+G6E4tDTO2Sd2jKE+leEnnrLAE2Wj5DlDHNqj5wPv1Q==",
|
"integrity": "sha512-a5Q7CkWznBRUWPmocCvE8b6lEYw1s6+opp/60dCunhO+G6E4tDTO2Sd2jKE+leEnnrLAE2Wj5DlDHNqj5wPv1Q==",
|
||||||
"requires": {}
|
"requires": {}
|
||||||
},
|
},
|
||||||
|
"react-photoswipe-gallery": {
|
||||||
|
"version": "2.2.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-photoswipe-gallery/-/react-photoswipe-gallery-2.2.1.tgz",
|
||||||
|
"integrity": "sha512-xaUKKmwRLCpEzB8+bU7yxjXvRBHaInpBcI6YQY0UOeFctHAL3jGRDk9j2YbwmlgN7kRStHTcyrSNxr+zSaOnKg==",
|
||||||
|
"requires": {}
|
||||||
|
},
|
||||||
"react-popper": {
|
"react-popper": {
|
||||||
"version": "2.2.5",
|
"version": "2.2.5",
|
||||||
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
|
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
|
||||||
|
|
|
@ -74,6 +74,7 @@
|
||||||
"js-cookie": "^3.0.1",
|
"js-cookie": "^3.0.1",
|
||||||
"lodash": "^4.17.20",
|
"lodash": "^4.17.20",
|
||||||
"node-sass": "^7.0.1",
|
"node-sass": "^7.0.1",
|
||||||
|
"photoswipe": "^5.2.7",
|
||||||
"prop-types": "^15.8.1",
|
"prop-types": "^15.8.1",
|
||||||
"react": "^17.0.2",
|
"react": "^17.0.2",
|
||||||
"react-beautiful-dnd": "^13.0.0",
|
"react-beautiful-dnd": "^13.0.0",
|
||||||
|
@ -83,6 +84,7 @@
|
||||||
"react-i18next": "^11.16.6",
|
"react-i18next": "^11.16.6",
|
||||||
"react-input-mask": "^2.0.4",
|
"react-input-mask": "^2.0.4",
|
||||||
"react-markdown": "^8.0.2",
|
"react-markdown": "^8.0.2",
|
||||||
|
"react-photoswipe-gallery": "^2.2.1",
|
||||||
"react-redux": "^7.2.8",
|
"react-redux": "^7.2.8",
|
||||||
"react-router-dom": "^5.3.1",
|
"react-router-dom": "^5.3.1",
|
||||||
"react-scripts": "5.0.1",
|
"react-scripts": "5.0.1",
|
||||||
|
|
|
@ -1,88 +1,153 @@
|
||||||
import React, { useCallback } from 'react';
|
import React, { useCallback } from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { Button } from 'semantic-ui-react';
|
import { Gallery, Item as GalleryItem } from 'react-photoswipe-gallery';
|
||||||
|
import { Button, Grid } from 'semantic-ui-react';
|
||||||
import { useToggle } from '../../../lib/hooks';
|
import { useToggle } from '../../../lib/hooks';
|
||||||
|
|
||||||
import Item from './Item';
|
import Item from './Item';
|
||||||
|
|
||||||
import styles from './Attachments.module.scss';
|
import styles from './Attachments.module.scss';
|
||||||
|
|
||||||
const Attachments = React.memo(({ items, onUpdate, onDelete, onCoverUpdate }) => {
|
const INITIALLY_VISIBLE = 4;
|
||||||
const [t] = useTranslation();
|
|
||||||
const [isOpened, toggleOpened] = useToggle();
|
|
||||||
|
|
||||||
const handleToggleClick = useCallback(() => {
|
const Attachments = React.memo(
|
||||||
toggleOpened();
|
({ items, onUpdate, onDelete, onCoverUpdate, onGalleryOpen, onGalleryClose }) => {
|
||||||
}, [toggleOpened]);
|
const [t] = useTranslation();
|
||||||
|
const [isAllVisible, toggleAllVisible] = useToggle();
|
||||||
|
|
||||||
const handleCoverSelect = useCallback(
|
const handleCoverSelect = useCallback(
|
||||||
(id) => {
|
(id) => {
|
||||||
onCoverUpdate(id);
|
onCoverUpdate(id);
|
||||||
},
|
},
|
||||||
[onCoverUpdate],
|
[onCoverUpdate],
|
||||||
);
|
);
|
||||||
|
|
||||||
const handleCoverDeselect = useCallback(() => {
|
const handleCoverDeselect = useCallback(() => {
|
||||||
onCoverUpdate(null);
|
onCoverUpdate(null);
|
||||||
}, [onCoverUpdate]);
|
}, [onCoverUpdate]);
|
||||||
|
|
||||||
const handleUpdate = useCallback(
|
const handleUpdate = useCallback(
|
||||||
(id, data) => {
|
(id, data) => {
|
||||||
onUpdate(id, data);
|
onUpdate(id, data);
|
||||||
},
|
},
|
||||||
[onUpdate],
|
[onUpdate],
|
||||||
);
|
);
|
||||||
|
|
||||||
const handleDelete = useCallback(
|
const handleDelete = useCallback(
|
||||||
(id) => {
|
(id) => {
|
||||||
onDelete(id);
|
onDelete(id);
|
||||||
},
|
},
|
||||||
[onDelete],
|
[onDelete],
|
||||||
);
|
);
|
||||||
|
|
||||||
const visibleItems = isOpened ? items : items.slice(0, 4);
|
const handleBeforeGalleryOpen = useCallback(
|
||||||
|
(gallery) => {
|
||||||
|
onGalleryOpen();
|
||||||
|
|
||||||
return (
|
gallery.on('destroy', () => {
|
||||||
<>
|
onGalleryClose();
|
||||||
{visibleItems.map((item) => (
|
});
|
||||||
<Item
|
},
|
||||||
key={item.id}
|
[onGalleryOpen, onGalleryClose],
|
||||||
name={item.name}
|
);
|
||||||
url={item.url}
|
|
||||||
coverUrl={item.coverUrl}
|
const handleToggleAllVisibleClick = useCallback(() => {
|
||||||
createdAt={item.createdAt}
|
toggleAllVisible();
|
||||||
isCover={item.isCover}
|
}, [toggleAllVisible]);
|
||||||
isPersisted={item.isPersisted}
|
|
||||||
onCoverSelect={() => handleCoverSelect(item.id)}
|
const galleryItemsNode = items.map((item, index) => {
|
||||||
onCoverDeselect={handleCoverDeselect}
|
const props = item.coverUrl
|
||||||
onUpdate={(data) => handleUpdate(item.id, data)}
|
? {
|
||||||
onDelete={() => handleDelete(item.id)}
|
width: item.imageWidth,
|
||||||
/>
|
height: item.imageHeight,
|
||||||
))}
|
|
||||||
{items.length > 4 && (
|
|
||||||
<Button
|
|
||||||
fluid
|
|
||||||
content={
|
|
||||||
isOpened
|
|
||||||
? t('action.showFewerAttachments')
|
|
||||||
: t('action.showAllAttachments', {
|
|
||||||
hidden: items.length - visibleItems.length,
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
className={styles.toggleButton}
|
: {
|
||||||
onClick={handleToggleClick}
|
content: (
|
||||||
/>
|
<Grid verticalAlign="middle" className={styles.contentWrapper}>
|
||||||
)}
|
<Grid.Column textAlign="center" className={styles.content}>
|
||||||
</>
|
{t('common.thereIsNoPreviewAvailableForThisAttachment')}
|
||||||
);
|
</Grid.Column>
|
||||||
});
|
</Grid>
|
||||||
|
),
|
||||||
|
};
|
||||||
|
|
||||||
|
const isVisible = isAllVisible || index < INITIALLY_VISIBLE;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<GalleryItem
|
||||||
|
{...props} // eslint-disable-line react/jsx-props-no-spreading
|
||||||
|
key={item.id}
|
||||||
|
original={item.url}
|
||||||
|
caption={item.name}
|
||||||
|
>
|
||||||
|
{({ ref, open }) =>
|
||||||
|
isVisible ? (
|
||||||
|
<Item
|
||||||
|
ref={ref}
|
||||||
|
name={item.name}
|
||||||
|
url={item.url}
|
||||||
|
coverUrl={item.coverUrl}
|
||||||
|
createdAt={item.createdAt}
|
||||||
|
isCover={item.isCover}
|
||||||
|
isPersisted={item.isPersisted}
|
||||||
|
onClick={item.coverUrl ? open : undefined}
|
||||||
|
onCoverSelect={() => handleCoverSelect(item.id)}
|
||||||
|
onCoverDeselect={handleCoverDeselect}
|
||||||
|
onUpdate={(data) => handleUpdate(item.id, data)}
|
||||||
|
onDelete={() => handleDelete(item.id)}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<span ref={ref} />
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</GalleryItem>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Gallery
|
||||||
|
withCaption
|
||||||
|
withDownloadButton
|
||||||
|
options={{
|
||||||
|
showHideAnimationType: 'none',
|
||||||
|
closeTitle: '',
|
||||||
|
zoomTitle: '',
|
||||||
|
arrowPrevTitle: '',
|
||||||
|
arrowNextTitle: '',
|
||||||
|
errorMsg: '',
|
||||||
|
}}
|
||||||
|
onBeforeOpen={handleBeforeGalleryOpen}
|
||||||
|
>
|
||||||
|
{galleryItemsNode}
|
||||||
|
</Gallery>
|
||||||
|
{items.length > INITIALLY_VISIBLE && (
|
||||||
|
<Button
|
||||||
|
fluid
|
||||||
|
content={
|
||||||
|
isAllVisible
|
||||||
|
? t('action.showFewerAttachments')
|
||||||
|
: t('action.showAllAttachments', {
|
||||||
|
hidden: items.length - INITIALLY_VISIBLE,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
className={styles.toggleButton}
|
||||||
|
onClick={handleToggleAllVisibleClick}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
Attachments.propTypes = {
|
Attachments.propTypes = {
|
||||||
items: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
|
items: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
|
||||||
onUpdate: PropTypes.func.isRequired,
|
onUpdate: PropTypes.func.isRequired,
|
||||||
onDelete: PropTypes.func.isRequired,
|
onDelete: PropTypes.func.isRequired,
|
||||||
onCoverUpdate: PropTypes.func.isRequired,
|
onCoverUpdate: PropTypes.func.isRequired,
|
||||||
|
onGalleryOpen: PropTypes.func.isRequired,
|
||||||
|
onGalleryClose: PropTypes.func.isRequired,
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Attachments;
|
export default Attachments;
|
||||||
|
|
|
@ -1,4 +1,14 @@
|
||||||
:global(#app) {
|
:global(#app) {
|
||||||
|
.content {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentWrapper {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.toggleButton {
|
.toggleButton {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
|
|
@ -8,24 +8,32 @@ import EditPopup from './EditPopup';
|
||||||
|
|
||||||
import styles from './Item.module.scss';
|
import styles from './Item.module.scss';
|
||||||
|
|
||||||
const Item = React.memo(
|
const Item = React.forwardRef(
|
||||||
({
|
(
|
||||||
name,
|
{
|
||||||
url,
|
name,
|
||||||
coverUrl,
|
url,
|
||||||
createdAt,
|
coverUrl,
|
||||||
isCover,
|
createdAt,
|
||||||
isPersisted,
|
isCover,
|
||||||
onCoverSelect,
|
isPersisted,
|
||||||
onCoverDeselect,
|
onCoverSelect,
|
||||||
onUpdate,
|
onCoverDeselect,
|
||||||
onDelete,
|
onClick,
|
||||||
}) => {
|
onUpdate,
|
||||||
|
onDelete,
|
||||||
|
},
|
||||||
|
ref,
|
||||||
|
) => {
|
||||||
const [t] = useTranslation();
|
const [t] = useTranslation();
|
||||||
|
|
||||||
const handleClick = useCallback(() => {
|
const handleClick = useCallback(() => {
|
||||||
window.open(url, '_blank');
|
if (onClick) {
|
||||||
}, [url]);
|
onClick();
|
||||||
|
} else {
|
||||||
|
window.open(url, '_blank');
|
||||||
|
}
|
||||||
|
}, [url, onClick]);
|
||||||
|
|
||||||
const handleToggleCoverClick = useCallback(
|
const handleToggleCoverClick = useCallback(
|
||||||
(event) => {
|
(event) => {
|
||||||
|
@ -54,7 +62,7 @@ const Item = React.memo(
|
||||||
return (
|
return (
|
||||||
/* eslint-disable jsx-a11y/click-events-have-key-events,
|
/* eslint-disable jsx-a11y/click-events-have-key-events,
|
||||||
jsx-a11y/no-static-element-interactions */
|
jsx-a11y/no-static-element-interactions */
|
||||||
<div className={styles.wrapper} onClick={handleClick}>
|
<div ref={ref} className={styles.wrapper} onClick={handleClick}>
|
||||||
{/* eslint-enable jsx-a11y/click-events-have-key-events,
|
{/* eslint-enable jsx-a11y/click-events-have-key-events,
|
||||||
jsx-a11y/no-static-element-interactions */}
|
jsx-a11y/no-static-element-interactions */}
|
||||||
<div
|
<div
|
||||||
|
@ -133,6 +141,7 @@ Item.propTypes = {
|
||||||
createdAt: PropTypes.instanceOf(Date),
|
createdAt: PropTypes.instanceOf(Date),
|
||||||
isCover: PropTypes.bool.isRequired,
|
isCover: PropTypes.bool.isRequired,
|
||||||
isPersisted: PropTypes.bool.isRequired,
|
isPersisted: PropTypes.bool.isRequired,
|
||||||
|
onClick: PropTypes.func,
|
||||||
onCoverSelect: PropTypes.func.isRequired,
|
onCoverSelect: PropTypes.func.isRequired,
|
||||||
onCoverDeselect: PropTypes.func.isRequired,
|
onCoverDeselect: PropTypes.func.isRequired,
|
||||||
onUpdate: PropTypes.func.isRequired,
|
onUpdate: PropTypes.func.isRequired,
|
||||||
|
@ -143,6 +152,7 @@ Item.defaultProps = {
|
||||||
url: undefined,
|
url: undefined,
|
||||||
coverUrl: undefined,
|
coverUrl: undefined,
|
||||||
createdAt: undefined,
|
createdAt: undefined,
|
||||||
|
onClick: undefined,
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Item;
|
export default React.memo(Item);
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useCallback } from 'react';
|
import React, { useCallback, useRef } from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
|
@ -73,6 +73,8 @@ const CardModal = React.memo(
|
||||||
}) => {
|
}) => {
|
||||||
const [t] = useTranslation();
|
const [t] = useTranslation();
|
||||||
|
|
||||||
|
const isGalleryOpened = useRef(false);
|
||||||
|
|
||||||
const handleNameUpdate = useCallback(
|
const handleNameUpdate = useCallback(
|
||||||
(newName) => {
|
(newName) => {
|
||||||
onUpdate({
|
onUpdate({
|
||||||
|
@ -124,6 +126,22 @@ const CardModal = React.memo(
|
||||||
});
|
});
|
||||||
}, [isSubscribed, onUpdate]);
|
}, [isSubscribed, onUpdate]);
|
||||||
|
|
||||||
|
const handleGalleryOpen = useCallback(() => {
|
||||||
|
isGalleryOpened.current = true;
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleGalleryClose = useCallback(() => {
|
||||||
|
isGalleryOpened.current = false;
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleClose = useCallback(() => {
|
||||||
|
if (isGalleryOpened.current) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
onClose();
|
||||||
|
}, [onClose]);
|
||||||
|
|
||||||
const userIds = users.map((user) => user.id);
|
const userIds = users.map((user) => user.id);
|
||||||
const labelIds = labels.map((label) => label.id);
|
const labelIds = labels.map((label) => label.id);
|
||||||
|
|
||||||
|
@ -328,6 +346,8 @@ const CardModal = React.memo(
|
||||||
onUpdate={onAttachmentUpdate}
|
onUpdate={onAttachmentUpdate}
|
||||||
onDelete={onAttachmentDelete}
|
onDelete={onAttachmentDelete}
|
||||||
onCoverUpdate={handleCoverUpdate}
|
onCoverUpdate={handleCoverUpdate}
|
||||||
|
onGalleryOpen={handleGalleryOpen}
|
||||||
|
onGalleryClose={handleGalleryClose}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -445,7 +465,7 @@ const CardModal = React.memo(
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Modal open closeIcon size="small" centered={false} onClose={onClose}>
|
<Modal open closeIcon size="small" centered={false} onClose={handleClose}>
|
||||||
{canEdit ? (
|
{canEdit ? (
|
||||||
<AttachmentAddZone onCreate={onAttachmentCreate}>{contentNode}</AttachmentAddZone>
|
<AttachmentAddZone onCreate={onAttachmentCreate}>{contentNode}</AttachmentAddZone>
|
||||||
) : (
|
) : (
|
||||||
|
|
|
@ -10,6 +10,7 @@ import CoreWrapperContainer from '../containers/CoreWrapperContainer';
|
||||||
import NotFound from './NotFound';
|
import NotFound from './NotFound';
|
||||||
|
|
||||||
import 'react-datepicker/dist/react-datepicker.css';
|
import 'react-datepicker/dist/react-datepicker.css';
|
||||||
|
import 'photoswipe/dist/photoswipe.css';
|
||||||
import '../lib/custom-ui/styles.css';
|
import '../lib/custom-ui/styles.css';
|
||||||
|
|
||||||
import '../styles.module.scss';
|
import '../styles.module.scss';
|
||||||
|
|
|
@ -32,7 +32,7 @@ const createData = (timer) => {
|
||||||
const TimerEditStep = React.memo(({ defaultValue, onUpdate, onBack, onClose }) => {
|
const TimerEditStep = React.memo(({ defaultValue, onUpdate, onBack, onClose }) => {
|
||||||
const [t] = useTranslation();
|
const [t] = useTranslation();
|
||||||
const [data, handleFieldChange, setData] = useForm(() => createData(defaultValue));
|
const [data, handleFieldChange, setData] = useForm(() => createData(defaultValue));
|
||||||
const [isEditing, toggleEdit] = useToggle();
|
const [isEditing, toggleEditing] = useToggle();
|
||||||
|
|
||||||
const hoursField = useRef(null);
|
const hoursField = useRef(null);
|
||||||
const minutesField = useRef(null);
|
const minutesField = useRef(null);
|
||||||
|
@ -55,10 +55,10 @@ const TimerEditStep = React.memo(({ defaultValue, onUpdate, onBack, onClose }) =
|
||||||
onClose();
|
onClose();
|
||||||
}, [defaultValue, onUpdate, onClose]);
|
}, [defaultValue, onUpdate, onClose]);
|
||||||
|
|
||||||
const handleToggleEditClick = useCallback(() => {
|
const handleToggleEditingClick = useCallback(() => {
|
||||||
setData(createData(defaultValue));
|
setData(createData(defaultValue));
|
||||||
toggleEdit();
|
toggleEditing();
|
||||||
}, [defaultValue, setData, toggleEdit]);
|
}, [defaultValue, setData, toggleEditing]);
|
||||||
|
|
||||||
const handleSubmit = useCallback(() => {
|
const handleSubmit = useCallback(() => {
|
||||||
const parts = {
|
const parts = {
|
||||||
|
@ -149,7 +149,7 @@ const TimerEditStep = React.memo(({ defaultValue, onUpdate, onBack, onClose }) =
|
||||||
type="button"
|
type="button"
|
||||||
icon={isEditing ? 'close' : 'edit'}
|
icon={isEditing ? 'close' : 'edit'}
|
||||||
className={styles.iconButton}
|
className={styles.iconButton}
|
||||||
onClick={handleToggleEditClick}
|
onClick={handleToggleEditingClick}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
{isEditing && <Button positive content={t('action.save')} />}
|
{isEditing && <Button positive content={t('action.save')} />}
|
||||||
|
|
|
@ -134,6 +134,7 @@ export default {
|
||||||
subscribeToMyOwnCardsByDefault: 'Standardmäßig meine eigenen Karten abonnieren',
|
subscribeToMyOwnCardsByDefault: 'Standardmäßig meine eigenen Karten abonnieren',
|
||||||
taskActions_title: 'Aufgabenaktionen',
|
taskActions_title: 'Aufgabenaktionen',
|
||||||
tasks: 'Aufgaben',
|
tasks: 'Aufgaben',
|
||||||
|
thereIsNoPreviewAvailableForThisAttachment: 'Für diesen Anhang ist keine Vorschau verfügbar',
|
||||||
time: 'Zeit',
|
time: 'Zeit',
|
||||||
timer: 'Timer',
|
timer: 'Timer',
|
||||||
title: 'Titel',
|
title: 'Titel',
|
||||||
|
|
|
@ -127,6 +127,8 @@ export default {
|
||||||
subscribeToMyOwnCardsByDefault: 'Subscribe to my own cards by default',
|
subscribeToMyOwnCardsByDefault: 'Subscribe to my own cards by default',
|
||||||
taskActions_title: 'Task Actions',
|
taskActions_title: 'Task Actions',
|
||||||
tasks: 'Tasks',
|
tasks: 'Tasks',
|
||||||
|
thereIsNoPreviewAvailableForThisAttachment:
|
||||||
|
'There is no preview available for this attachment',
|
||||||
time: 'Time',
|
time: 'Time',
|
||||||
timer: 'Timer',
|
timer: 'Timer',
|
||||||
title: 'Title',
|
title: 'Title',
|
||||||
|
|
|
@ -122,6 +122,7 @@ export default {
|
||||||
subscribeToMyOwnCardsByDefault: 'По умолчанию подписаться на мои собственные карточки',
|
subscribeToMyOwnCardsByDefault: 'По умолчанию подписаться на мои собственные карточки',
|
||||||
taskActions: 'Действия с задачей',
|
taskActions: 'Действия с задачей',
|
||||||
tasks: 'Задачи',
|
tasks: 'Задачи',
|
||||||
|
thereIsNoPreviewAvailableForThisAttachment: 'Предпросмотр для этого вложения недоступен',
|
||||||
time: 'Время',
|
time: 'Время',
|
||||||
timer: 'Таймер',
|
timer: 'Таймер',
|
||||||
title: 'Название',
|
title: 'Название',
|
||||||
|
|
|
@ -101,6 +101,10 @@
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pswp .pswp__img--placeholder {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#root {
|
#root {
|
||||||
|
|
4
package-lock.json
generated
4
package-lock.json
generated
|
@ -1,12 +1,12 @@
|
||||||
{
|
{
|
||||||
"name": "planka",
|
"name": "planka",
|
||||||
"version": "1.1.5",
|
"version": "1.2.1",
|
||||||
"lockfileVersion": 2,
|
"lockfileVersion": 2,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "planka",
|
"name": "planka",
|
||||||
"version": "1.1.5",
|
"version": "1.2.1",
|
||||||
"hasInstallScript": true,
|
"hasInstallScript": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|
|
@ -24,6 +24,16 @@ module.exports = {
|
||||||
required: true,
|
required: true,
|
||||||
columnName: 'is_image',
|
columnName: 'is_image',
|
||||||
},
|
},
|
||||||
|
imageWidth: {
|
||||||
|
type: 'number',
|
||||||
|
allowNull: true,
|
||||||
|
columnName: 'image_width',
|
||||||
|
},
|
||||||
|
imageHeight: {
|
||||||
|
type: 'number',
|
||||||
|
allowNull: true,
|
||||||
|
columnName: 'image_height',
|
||||||
|
},
|
||||||
name: {
|
name: {
|
||||||
type: 'string',
|
type: 'string',
|
||||||
required: true,
|
required: true,
|
||||||
|
|
|
@ -20,20 +20,24 @@
|
||||||
* https://sailsjs.com/anatomy/app.js
|
* https://sailsjs.com/anatomy/app.js
|
||||||
*/
|
*/
|
||||||
|
|
||||||
require('dotenv').config();
|
const dotenv = require('dotenv');
|
||||||
|
|
||||||
// Ensure we're in the project directory, so cwd-relative paths work as expected
|
// Ensure we're in the project directory, so cwd-relative paths work as expected
|
||||||
// no matter where we actually lift from.
|
// no matter where we actually lift from.
|
||||||
// > Note: This is not required in order to lift, but it is a convenient default.
|
// > Note: This is not required in order to lift, but it is a convenient default.
|
||||||
process.chdir(__dirname);
|
process.chdir(__dirname);
|
||||||
|
|
||||||
|
dotenv.config();
|
||||||
|
|
||||||
// Attempt to import `sails` dependency, as well as `rc` (for loading `.sailsrc` files).
|
// Attempt to import `sails` dependency, as well as `rc` (for loading `.sailsrc` files).
|
||||||
let sails;
|
let sails;
|
||||||
let rc;
|
let rc;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
sails = require('sails'); // eslint-disable-line global-require
|
/* eslint-disable global-require */
|
||||||
rc = require('sails/accessible/rc'); // eslint-disable-line global-require
|
sails = require('sails');
|
||||||
|
rc = require('sails/accessible/rc');
|
||||||
|
/* eslint-enable global-require */
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
/* eslint-disable no-console */
|
/* eslint-disable no-console */
|
||||||
console.error("Encountered an error when attempting to require('sails'):");
|
console.error("Encountered an error when attempting to require('sails'):");
|
||||||
|
|
7
server/config/env/production.js
vendored
7
server/config/env/production.js
vendored
|
@ -321,4 +321,11 @@ module.exports = {
|
||||||
// baseUrl: 'https://example.com',
|
// baseUrl: 'https://example.com',
|
||||||
// internalEmailAddress: 'support@example.com',
|
// internalEmailAddress: 'support@example.com',
|
||||||
},
|
},
|
||||||
|
|
||||||
|
routes: {
|
||||||
|
'GET /*': {
|
||||||
|
view: 'index',
|
||||||
|
skipAssets: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
|
@ -84,9 +84,4 @@ module.exports.routes = {
|
||||||
action: 'attachments/download-thumbnail',
|
action: 'attachments/download-thumbnail',
|
||||||
skipAssets: false,
|
skipAssets: false,
|
||||||
},
|
},
|
||||||
|
|
||||||
'GET /*': {
|
|
||||||
view: 'index',
|
|
||||||
skipAssets: true,
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,10 +1,12 @@
|
||||||
const config = require('./knexfile');
|
const initKnex = require('knex');
|
||||||
|
|
||||||
const knex = require('knex')(config); // eslint-disable-line import/order
|
const knexfile = require('./knexfile');
|
||||||
|
|
||||||
|
const knex = initKnex(knexfile);
|
||||||
|
|
||||||
(async () => {
|
(async () => {
|
||||||
try {
|
try {
|
||||||
const isExists = await knex.schema.hasTable(config.migrations.tableName);
|
const isExists = await knex.schema.hasTable(knexfile.migrations.tableName);
|
||||||
|
|
||||||
await knex.migrate.latest();
|
await knex.migrate.latest();
|
||||||
if (!isExists) {
|
if (!isExists) {
|
||||||
|
|
|
@ -1,7 +1,8 @@
|
||||||
const path = require('path');
|
const path = require('path');
|
||||||
|
const dotenv = require('dotenv');
|
||||||
const _ = require('lodash');
|
const _ = require('lodash');
|
||||||
|
|
||||||
require('dotenv').config({
|
dotenv.config({
|
||||||
path: path.resolve(__dirname, '../.env'),
|
path: path.resolve(__dirname, '../.env'),
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
module.exports.up = (knex) =>
|
module.exports.up = (knex) =>
|
||||||
knex.schema.createTable('card', (table) => {
|
knex.schema.createTable('card', async (table) => {
|
||||||
/* Columns */
|
/* Columns */
|
||||||
|
|
||||||
table.bigInteger('id').primary().defaultTo(knex.raw('next_id()'));
|
table.bigInteger('id').primary().defaultTo(knex.raw('next_id()'));
|
||||||
|
@ -12,7 +12,7 @@ module.exports.up = (knex) =>
|
||||||
table.specificType('position', 'double precision');
|
table.specificType('position', 'double precision');
|
||||||
table.text('name').notNullable();
|
table.text('name').notNullable();
|
||||||
table.text('description');
|
table.text('description');
|
||||||
table.timestamp('dueDate', true);
|
table.timestamp('due_date', true);
|
||||||
table.jsonb('timer');
|
table.jsonb('timer');
|
||||||
|
|
||||||
table.timestamp('created_at', true);
|
table.timestamp('created_at', true);
|
||||||
|
|
|
@ -0,0 +1,45 @@
|
||||||
|
const path = require('path');
|
||||||
|
const sharp = require('sharp');
|
||||||
|
|
||||||
|
const getConfig = require('../../get-config');
|
||||||
|
|
||||||
|
module.exports.up = async (knex) => {
|
||||||
|
await knex.schema.table('attachment', (table) => {
|
||||||
|
/* Columns */
|
||||||
|
|
||||||
|
table.integer('image_width');
|
||||||
|
table.integer('image_height');
|
||||||
|
});
|
||||||
|
|
||||||
|
const config = await getConfig();
|
||||||
|
const attachments = await knex('attachment');
|
||||||
|
|
||||||
|
// eslint-disable-next-line no-restricted-syntax
|
||||||
|
for (attachment of attachments) {
|
||||||
|
if (attachment.is_image) {
|
||||||
|
const image = sharp(
|
||||||
|
path.join(config.custom.attachmentsPath, attachment.dirname, attachment.filename),
|
||||||
|
);
|
||||||
|
|
||||||
|
let metadata;
|
||||||
|
try {
|
||||||
|
metadata = await image.metadata(); // eslint-disable-line no-await-in-loop
|
||||||
|
} catch (error) {
|
||||||
|
continue; // eslint-disable-line no-continue
|
||||||
|
}
|
||||||
|
|
||||||
|
// eslint-disable-next-line no-await-in-loop
|
||||||
|
await knex('attachment')
|
||||||
|
.update({
|
||||||
|
image_width: metadata.width,
|
||||||
|
image_height: metadata.height,
|
||||||
|
})
|
||||||
|
.where('id', attachment.id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports.down = (knex) =>
|
||||||
|
knex.schema.table('attachment', (table) => {
|
||||||
|
table.dropColumns('image_width', 'image_height');
|
||||||
|
});
|
38
server/get-config.js
Normal file
38
server/get-config.js
Normal file
|
@ -0,0 +1,38 @@
|
||||||
|
const dotenv = require('dotenv');
|
||||||
|
const sails = require('sails');
|
||||||
|
const rc = require('sails/accessible/rc');
|
||||||
|
|
||||||
|
process.chdir(__dirname);
|
||||||
|
dotenv.config();
|
||||||
|
|
||||||
|
const config = rc('sails');
|
||||||
|
|
||||||
|
const getConfigPromise = new Promise((resolve) => {
|
||||||
|
sails.load(
|
||||||
|
{
|
||||||
|
...config,
|
||||||
|
hooks: {
|
||||||
|
...config.hooks,
|
||||||
|
logger: false,
|
||||||
|
request: false,
|
||||||
|
views: false,
|
||||||
|
blueprints: false,
|
||||||
|
responses: false,
|
||||||
|
helpers: false,
|
||||||
|
pubsub: false,
|
||||||
|
policies: false,
|
||||||
|
services: false,
|
||||||
|
security: false,
|
||||||
|
i18n: false,
|
||||||
|
session: false,
|
||||||
|
http: false,
|
||||||
|
userhooks: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
() => {
|
||||||
|
resolve(sails.config);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
module.exports = () => getConfigPromise;
|
Loading…
Add table
Add a link
Reference in a new issue