ref: Collapse image data into one column

client/package-lock.json

@@ -17,6 +17,7 @@
         "js-cookie": "^3.0.1",
         "lodash": "^4.17.20",
         "node-sass": "^7.0.1",
+        "photoswipe": "^5.2.7",
         "prop-types": "^15.8.1",
         "react": "^17.0.2",
         "react-beautiful-dnd": "^13.0.0",
@@ -26,6 +27,7 @@
         "react-i18next": "^11.16.6",
         "react-input-mask": "^2.0.4",
         "react-markdown": "^8.0.2",
+        "react-photoswipe-gallery": "^2.2.1",
         "react-redux": "^7.2.8",
         "react-router-dom": "^5.3.1",
         "react-scripts": "5.0.1",
@@ -16224,6 +16226,14 @@
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
       "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": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -18230,6 +18240,16 @@
         "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": {
       "version": "2.2.5",
       "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",
       "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": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -36319,6 +36344,12 @@
       "integrity": "sha512-a5Q7CkWznBRUWPmocCvE8b6lEYw1s6+opp/60dCunhO+G6E4tDTO2Sd2jKE+leEnnrLAE2Wj5DlDHNqj5wPv1Q==",
       "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": {
       "version": "2.2.5",
       "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",

client/package.json

@@ -74,6 +74,7 @@
     "js-cookie": "^3.0.1",
     "lodash": "^4.17.20",
     "node-sass": "^7.0.1",
+    "photoswipe": "^5.2.7",
     "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-beautiful-dnd": "^13.0.0",
@@ -83,6 +84,7 @@
     "react-i18next": "^11.16.6",
     "react-input-mask": "^2.0.4",
     "react-markdown": "^8.0.2",
+    "react-photoswipe-gallery": "^2.2.1",
     "react-redux": "^7.2.8",
     "react-router-dom": "^5.3.1",
     "react-scripts": "5.0.1",

client/src/components/CardModal/Attachments/Attachments.jsx

@@ -1,88 +1,150 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 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 Item from './Item';
 
 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
+      },
+      [onGalleryOpen, onGalleryClose],
+    );
+
+    const handleToggleAllVisibleClick = useCallback(() => {
+      toggleAllVisible();
+    }, [toggleAllVisible]);
+
+    const galleryItemsNode = items.map((item, index) => {
+      const props = item.image
+        ? item.image
+        : {
+            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}
-          name={item.name}
+          original={item.url}
-          url={item.url}
+          caption={item.name}
-          coverUrl={item.coverUrl}
+        >
-          createdAt={item.createdAt}
+          {({ ref, open }) =>
-          isCover={item.isCover}
+            isVisible ? (
-          isPersisted={item.isPersisted}
+              <Item
-          onCoverSelect={() => handleCoverSelect(item.id)}
+                ref={ref}
-          onCoverDeselect={handleCoverDeselect}
+                name={item.name}
-          onUpdate={(data) => handleUpdate(item.id, data)}
+                url={item.url}
-          onDelete={() => handleDelete(item.id)}
+                coverUrl={item.coverUrl}
-        />
+                createdAt={item.createdAt}
-      ))}
+                isCover={item.isCover}
-      {items.length > 4 && (
+                isPersisted={item.isPersisted}
-        <Button
+                onClick={item.image ? open : undefined}
-          fluid
+                onCoverSelect={() => handleCoverSelect(item.id)}
-          content={
+                onCoverDeselect={handleCoverDeselect}
-            isOpened
+                onUpdate={(data) => handleUpdate(item.id, data)}
-              ? t('action.showFewerAttachments')
+                onDelete={() => handleDelete(item.id)}
-              : t('action.showAllAttachments', {
+              />
-                  hidden: items.length - visibleItems.length,
+            ) : (
-                })
+              <span ref={ref} />
+            )
           }
-          className={styles.toggleButton}
+        </GalleryItem>
-          onClick={handleToggleClick}
+      );
-        />
+    });
-      )}
+
-    </>
+    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 = {
   items: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
   onUpdate: PropTypes.func.isRequired,
   onDelete: PropTypes.func.isRequired,
   onCoverUpdate: PropTypes.func.isRequired,
+  onGalleryOpen: PropTypes.func.isRequired,
+  onGalleryClose: PropTypes.func.isRequired,
 };
 
 export default Attachments;

client/src/components/CardModal/Attachments/Attachments.module.scss

@@ -1,4 +1,14 @@
 :global(#app) {
+  .content {
+    color: #fff;
+    font-size: 20px;
+    font-weight: 700;
+  }
+
+  .contentWrapper {
+    height: 100%;
+  }
+
   .toggleButton {
     background: transparent;
     box-shadow: none;

client/src/components/CardModal/Attachments/Item.jsx

@@ -8,24 +8,32 @@ import EditPopup from './EditPopup';
 
 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 handleClick = useCallback(() => {
-      window.open(url, '_blank');
+      if (onClick) {
-    }, [url]);
+        onClick();
+      } else {
+        window.open(url, '_blank');
+      }
+    }, [url, onClick]);
 
     const handleToggleCoverClick = useCallback(
       (event) => {
@@ -54,7 +62,7 @@ const Item = React.memo(
     return (
       /* eslint-disable jsx-a11y/click-events-have-key-events,
                         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,
                           jsx-a11y/no-static-element-interactions */}
         <div
@@ -133,6 +141,7 @@ Item.propTypes = {
   createdAt: PropTypes.instanceOf(Date),
   isCover: PropTypes.bool.isRequired,
   isPersisted: PropTypes.bool.isRequired,
+  onClick: PropTypes.func,
   onCoverSelect: PropTypes.func.isRequired,
   onCoverDeselect: PropTypes.func.isRequired,
   onUpdate: PropTypes.func.isRequired,
@@ -143,6 +152,7 @@ Item.defaultProps = {
   url: undefined,
   coverUrl: undefined,
   createdAt: undefined,
+  onClick: undefined,
 };
 
-export default Item;
+export default React.memo(Item);

client/src/components/CardModal/CardModal.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
@@ -73,6 +73,8 @@ const CardModal = React.memo(
   }) => {
     const [t] = useTranslation();
 
+    const isGalleryOpened = useRef(false);
+
     const handleNameUpdate = useCallback(
       (newName) => {
         onUpdate({
@@ -124,6 +126,22 @@ const CardModal = React.memo(
       });
     }, [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 labelIds = labels.map((label) => label.id);
 
@@ -328,6 +346,8 @@ const CardModal = React.memo(
                     onUpdate={onAttachmentUpdate}
                     onDelete={onAttachmentDelete}
                     onCoverUpdate={handleCoverUpdate}
+                    onGalleryOpen={handleGalleryOpen}
+                    onGalleryClose={handleGalleryClose}
                   />
                 </div>
               </div>
@@ -445,7 +465,7 @@ const CardModal = React.memo(
     );
 
     return (
-      <Modal open closeIcon size="small" centered={false} onClose={onClose}>
+      <Modal open closeIcon size="small" centered={false} onClose={handleClose}>
         {canEdit ? (
           <AttachmentAddZone onCreate={onAttachmentCreate}>{contentNode}</AttachmentAddZone>
         ) : (

client/src/components/Root.jsx

@@ -10,6 +10,7 @@ import CoreWrapperContainer from '../containers/CoreWrapperContainer';
 import NotFound from './NotFound';
 
 import 'react-datepicker/dist/react-datepicker.css';
+import 'photoswipe/dist/photoswipe.css';
 import '../lib/custom-ui/styles.css';
 
 import '../styles.module.scss';

client/src/components/TimerEditStep/TimerEditStep.jsx

@@ -32,7 +32,7 @@ const createData = (timer) => {
 const TimerEditStep = React.memo(({ defaultValue, onUpdate, onBack, onClose }) => {
   const [t] = useTranslation();
   const [data, handleFieldChange, setData] = useForm(() => createData(defaultValue));
-  const [isEditing, toggleEdit] = useToggle();
+  const [isEditing, toggleEditing] = useToggle();
 
   const hoursField = useRef(null);
   const minutesField = useRef(null);
@@ -55,10 +55,10 @@ const TimerEditStep = React.memo(({ defaultValue, onUpdate, onBack, onClose }) =
     onClose();
   }, [defaultValue, onUpdate, onClose]);
 
-  const handleToggleEditClick = useCallback(() => {
+  const handleToggleEditingClick = useCallback(() => {
     setData(createData(defaultValue));
-    toggleEdit();
+    toggleEditing();
-  }, [defaultValue, setData, toggleEdit]);
+  }, [defaultValue, setData, toggleEditing]);
 
   const handleSubmit = useCallback(() => {
     const parts = {
@@ -149,7 +149,7 @@ const TimerEditStep = React.memo(({ defaultValue, onUpdate, onBack, onClose }) =
               type="button"
               icon={isEditing ? 'close' : 'edit'}
               className={styles.iconButton}
-              onClick={handleToggleEditClick}
+              onClick={handleToggleEditingClick}
             />
           </div>
           {isEditing && <Button positive content={t('action.save')} />}

client/src/locales/de/core.js

@@ -134,6 +134,7 @@ export default {
       subscribeToMyOwnCardsByDefault: 'Standardmäßig meine eigenen Karten abonnieren',
       taskActions_title: 'Aufgabenaktionen',
       tasks: 'Aufgaben',
+      thereIsNoPreviewAvailableForThisAttachment: 'Für diesen Anhang ist keine Vorschau verfügbar',
       time: 'Zeit',
       timer: 'Timer',
       title: 'Titel',

client/src/locales/en/core.js

@@ -127,6 +127,8 @@ export default {
       subscribeToMyOwnCardsByDefault: 'Subscribe to my own cards by default',
       taskActions_title: 'Task Actions',
       tasks: 'Tasks',
+      thereIsNoPreviewAvailableForThisAttachment:
+        'There is no preview available for this attachment',
       time: 'Time',
       timer: 'Timer',
       title: 'Title',

client/src/locales/index.js

@@ -11,6 +11,7 @@ import frLogin from './fr/login';
 import jaLogin from './ja/login';
 import plLogin from './pl/login';
 import ruLogin from './ru/login';
+import skLogin from './sk/login';
 import svLogin from './sv/login';
 import uzLogin from './uz/login';
 import zhLogin from './zh/login';
@@ -25,6 +26,7 @@ const localePairs = [
   ['ja', jaLogin],
   ['pl', plLogin],
   ['ru', ruLogin],
+  ['sk', skLogin],
   ['sv', svLogin],
   ['uz', uzLogin],
   ['zh', zhLogin],

client/src/locales/ru/core.js

@@ -122,6 +122,7 @@ export default {
       subscribeToMyOwnCardsByDefault: 'По умолчанию подписаться на мои собственные карточки',
       taskActions: 'Действия с задачей',
       tasks: 'Задачи',
+      thereIsNoPreviewAvailableForThisAttachment: 'Предпросмотр для этого вложения недоступен',
       time: 'Время',
       timer: 'Таймер',
       title: 'Название',

client/src/locales/sk/core.js

@@ -0,0 +1,215 @@
+import dateFns from 'date-fns/locale/sk';
+
+export default {
+  dateFns,
+
+  format: {
+    date: 'd.M.yyyy',
+    time: 'p',
+    dateTime: '$t(format:date) $t(format:time)',
+    longDate: 'd MMM',
+    longDateTime: "d MMMM 'v' p",
+  },
+
+  translation: {
+    common: {
+      account: 'Účet',
+      actions: 'Akcia',
+      addAttachment_title: 'Pridať prílohu',
+      addComment: 'Pridať komentár',
+      addManager_title: 'Pridať správcu',
+      addMember_title: 'Pridať člena',
+      addUser_title: 'Pridať používateľa',
+      administrator: 'Administrátor',
+      all: 'Všetko',
+      allChangesWillBeAutomaticallySavedAfterConnectionRestored:
+        'Všetky zmeny budú automaticky uložené<br />po obnovení spojenia',
+      areYouSureYouWantToDeleteThisAttachment: 'Naozaj chcete zmazať túto prílohu?',
+      areYouSureYouWantToDeleteThisBoard: 'Naozaj chcete zmazať túto tabuľu?',
+      areYouSureYouWantToDeleteThisCard: 'Naozaj chcete zmazať túto kartu?',
+      areYouSureYouWantToDeleteThisComment: 'Naozaj chcete zmazať tento komentár?',
+      areYouSureYouWantToDeleteThisLabel: 'Naozaj chcete zmazať tento štítok?',
+      areYouSureYouWantToDeleteThisList: 'Naozaj chcete zmazať tento zoznam?',
+      areYouSureYouWantToDeleteThisProject: 'Naozaj chcete zmazať tento projekt?',
+      areYouSureYouWantToDeleteThisTask: 'Naozaj chcete zmazať túto úlohu?',
+      areYouSureYouWantToDeleteThisUser: 'Naozaj chcete zmazať tohoto používateľa?',
+      areYouSureYouWantToLeaveBoard: 'Naozaj chcete opustiť túto tabuľu?',
+      areYouSureYouWantToLeaveProject: 'Naozaj chcete opustiť tento projekt?',
+      areYouSureYouWantToRemoveThisManagerFromProject:
+        'Naozaj chcete zmazať daného správcu tohto projektu?',
+      areYouSureYouWantToRemoveThisMemberFromBoard:
+        'Naozaj chcete odstrániť tohoto člena z tabule?',
+      attachment: 'Príloha',
+      attachments: 'Prílohy',
+      authentication: 'Overenie',
+      background: 'Pozadie',
+      board: 'Tabuľa',
+      boardNotFound_title: 'Tabuľa neexistuje',
+      cardActions_title: 'Akcie na karte',
+      cardNotFound_title: 'Karta neexistuje',
+      cardOrActionAreDeleted: 'Karta alebo akcia sú zmazané',
+      color: 'Farba',
+      createBoard_title: 'Vytvoriť tabuľu',
+      createLabel_title: 'Vytvoriť štítok',
+      createNewOneOrSelectExistingOne: 'Vytvoriť nový alebo vyberte<br />už existujúci',
+      createProject_title: 'Vytvoriť projekt',
+      createTextFile_title: 'Vytvoriť textový súbor',
+      currentPassword: 'Aktuálne heslo',
+      dangerZone_title: 'Nebezpečná zóna',
+      date: 'Dátum',
+      dueDate_title: 'Termín do',
+      deleteAttachment_title: 'Zmazať prílohu',
+      deleteBoard_title: 'Zmazať tabuľu',
+      deleteCard_title: 'Zmazať kartu',
+      deleteComment_title: 'Zmazať komentár',
+      deleteLabel_title: 'Zmazať štítok',
+      deleteList_title: 'Zmazať zoznam',
+      deleteProject_title: 'Zmazať projekt',
+      deleteTask_title: 'Zmazať úlohu',
+      deleteUser_title: 'Zmazať používateľa',
+      description: 'Popis',
+      dropFileToUpload: 'Potiahnutím nahraj súbor',
+      editAttachment_title: 'Upraviť prílohu',
+      editAvatar_title: 'Upraviť avatar',
+      editBoard_title: 'Upraviť tabuľu',
+      editDueDate_title: 'Upraviť Termín do',
+      editEmail_title: 'Upraviť e-mail',
+      editInformation_title: 'Upraviť informácie',
+      editLabel_title: 'Upraviť štítok',
+      editPassword_title: 'Upraviť heslo',
+      editTimer_title: 'Upraviť časovač',
+      editUsername_title: 'Upraviť používateľské meno',
+      email: 'E-mail',
+      emailAlreadyInUse: 'E-mail je už použitý',
+      enterCardTitle: 'Vlož názov karty...',
+      enterDescription: 'Vlož popis...',
+      enterFilename: 'Vlož názov súboru',
+      enterListTitle: 'Vlož názov zoznamu...',
+      enterProjectTitle: 'Vlož názov projektu',
+      enterTaskDescription: 'Vlož popis úlohy...',
+      filterByLabels_title: 'Filtruj podľa štítku',
+      filterByMembers_title: 'Filtruj podľa člena',
+      fromComputer_title: 'Z počítača',
+      general: 'Všeobecné',
+      hours: 'Hodiny',
+      invalidCurrentPassword: 'Neplatné aktuálne heslo',
+      labels: 'Štítky',
+      leaveBoard_title: 'Opustiť tabuľu',
+      leaveProject_title: 'Opustiť projekt',
+      list: 'Zoznam',
+      listActions_title: 'Zoznam akcií',
+      managers: 'Správcovia',
+      members: 'Členovia',
+      minutes: 'Minúty',
+      moveCard_title: 'Presunúť kartu',
+      name: 'Meno',
+      newEmail: 'Nový e-mail',
+      newPassword: 'Nové heslo',
+      newUsername: 'Nové používateľské meno',
+      noConnectionToServer: 'Nie je spojenie k serveru',
+      noBoards: 'Žiadne tabule',
+      noLists: 'Žiadne zoznamy',
+      noProjects: 'Žiadne projekty',
+      notifications: 'Oznámenia',
+      noUnreadNotifications: 'Žiadne neprečítané oznámenia',
+      openBoard_title: 'Otvoriť tabuľu',
+      optional_inline: 'voliteľné',
+      organization: 'Spoločnosť',
+      phone: 'Telefón',
+      preferences: 'Voľby',
+      pressPasteShortcutToAddAttachmentFromClipboard:
+        'Tip: stlačte Ctrl-V (Cmd-V na Mac) pre vloženie prílohy zo schránky.',
+      project: 'Projekt',
+      projectNotFound_title: 'Projekt neexistuje',
+      removeManager_title: 'Odstrániť správcu',
+      removeMember_title: 'Odstrániť člena',
+      seconds: 'Sekúnd',
+      selectBoard: 'Vybrať tabuľu',
+      selectList: 'Vybrať zoznam',
+      selectProject: 'Vybrať projekt',
+      settings: 'Nastavenia',
+      subscribeToMyOwnCardsByDefault: 'Predvolene odoberať vlastné karty',
+      taskActions_title: 'Akcie na úlohe',
+      tasks: 'Úlohy',
+      time: 'Čas',
+      timer: 'Časovač',
+      title: 'Názov',
+      userActions_title: 'Akcie na používateľovi',
+      userAddedThisCardToList: '<0>{{user}}</0><1> pridal kartu do {{list}}</1>',
+      userLeftNewCommentToCard: '{{user}} zanechal nový komentár «{{comment}}» k <2>{{card}}</2>',
+      userMovedCardFromListToList: '{{user}} presunul <2>{{card}}</2> z {{fromList}} do {{toList}}',
+      userMovedThisCardFromListToList:
+        '<0>{{user}}</0><1> presunul túto kartu z {{fromList}} do {{toList}}</1>',
+      username: 'Používateľské meno',
+      usernameAlreadyInUse: 'Používateľské meno je zabrané',
+      users: 'Používatelia',
+      writeComment: 'Napísať komentár...',
+    },
+
+    action: {
+      addAnotherCard: 'Pridať ďalšiu kartu',
+      addAnotherList: 'Pridať ďalší zoznam',
+      addAnotherTask: 'Pridať ďalšiu úlohu',
+      addCard: 'Pridať kartu',
+      addCard_title: 'Pridať kartu',
+      addComment: 'Pridať komentár',
+      addList: 'Pridať zoznam',
+      addMoreDetailedDescription: 'Pridať ďalší detailný popis',
+      addTask: 'Pridať úlohu',
+      addToCard: 'Pridať na kartu',
+      addUser: 'Pridať používateľa',
+      createBoard: 'Vytvoriť tabuľu',
+      createFile: 'Vytvoriť súbor',
+      createLabel: 'Vytvoriť štítok',
+      createNewLabel: 'Vytvoriť nový štítok',
+      createProject: 'Vytvoriť projekt',
+      delete: 'Zmazať',
+      deleteAttachment: 'Zmazať prílohu',
+      deleteAvatar: 'Zmazať avatar',
+      deleteBoard: 'Zmazať tabuľu',
+      deleteCard: 'Zmazať kartu',
+      deleteCard_title: 'Zmazať kartu',
+      deleteComment: 'Zmazať komentár',
+      deleteImage: 'Zmazať obrázok',
+      deleteLabel: 'Zmazať štítok',
+      deleteList: 'Zmazať zoznam',
+      deleteList_title: 'Zmazať zoznam',
+      deleteProject: 'Zmazať projekt',
+      deleteProject_title: 'Zmazať projekt',
+      deleteTask: 'Zmazať úlohu',
+      deleteTask_title: 'Zmazať úlohu',
+      deleteUser: 'Zmazať používateľa',
+      edit: 'Upraviť',
+      editDueDate_title: 'Upraviť termín do',
+      editDescription_title: 'Upraviť popis',
+      editEmail_title: 'Upraviť e-mail',
+      editInformation_title: 'Upraviť informácie',
+      editPassword_title: 'Upraviť heslo',
+      editTimer_title: 'Upraviť časovač',
+      editTitle_title: 'Upraviť názov',
+      editUsername_title: 'Upraviť používateľské meno',
+      leaveBoard: 'Opustiť tabuľu',
+      leaveProject: 'Opustiť projekt',
+      logOut_title: 'Odhlásiť sa',
+      makeCover_title: 'Vytvoriť obal',
+      move: 'Presunúť',
+      moveCard_title: 'Presunúť kartu',
+      remove: 'Odstrániť',
+      removeBackground: 'Odstrániť pozadie',
+      removeCover_title: 'Odstrániť obal',
+      removeFromBoard: 'Odstrániť z tabule',
+      removeFromProject: 'Odstrániť z projektu',
+      removeManager: 'Odstrániť správcu',
+      removeMember: 'Odstrániť člena',
+      save: 'Uložiť',
+      showAllAttachments: 'Zozbraziť všetky prílohy ({{hidden}} skryté)',
+      showFewerAttachments: 'Zobraziť menej príloh',
+      start: 'Start',
+      stop: 'Stop',
+      subscribe: 'Odoberať',
+      unsubscribe: 'Neodoberať',
+      uploadNewAvatar: 'Nahrať nový avatar',
+      uploadNewImage: 'Nahrať nový obrázok',
+    },
+  },
+};

client/src/locales/sk/login.js

@@ -0,0 +1,20 @@
+export default {
+  translation: {
+    common: {
+      emailOrUsername: 'E-mail alebo používateľské meno',
+      invalidEmailOrUsername: 'Nesprávny e-mail alebo používateľské meno',
+      invalidPassword: 'Nesprávne heslo',
+      logInToPlanka: 'Prihlásiť sa do Planka',
+      noInternetConnection: 'Bez pripojenia k internetu',
+      pageNotFound_title: 'Stránka neexistuje',
+      password: 'Heslo',
+      projectManagement: 'Správa projektu',
+      serverConnectionFailed: 'Pripojenie k serveru zlyhalo',
+      unknownError: 'Neznáma chyba, skúste to neskôr',
+    },
+
+    action: {
+      logIn: 'Prihlásiť sa',
+    },
+  },
+};

client/src/models/Attachment.js

@@ -9,6 +9,7 @@ export default class extends Model {
     id: attr(),
     url: attr(),
     coverUrl: attr(),
+    image: attr(),
     name: attr(),
     cardId: fk({
       to: 'Card',

client/src/styles.module.scss

@@ -101,6 +101,10 @@
         border-radius: 0;
       }
     }
+
+    .pswp .pswp__img--placeholder {
+      display: none !important;
+    }
   }
 
   #root {

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "planka",
-  "version": "1.1.5",
+  "version": "1.2.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "planka",
-      "version": "1.1.5",
+      "version": "1.2.1",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "planka",
-  "version": "1.1.5",
+  "version": "1.2.1",
   "private": true,
   "homepage": "https://plankanban.github.io/planka",
   "repository": {

server/api/controllers/attachments/create.js

@@ -54,10 +54,8 @@ module.exports = {
 
         const attachment = await sails.helpers.attachments.createOne(
           {
-            dirname: file.extra.dirname,
+            ...file.extra,
             filename: file.filename,
-            isImage: file.extra.isImage,
-            name: file.extra.name,
           },
           currentUser,
           card,

server/api/controllers/attachments/download-thumbnail.js

@@ -46,7 +46,7 @@ module.exports = {
       }
     }
 
-    if (!attachment.isImage) {
+    if (!attachment.image) {
       throw Errors.ATTACHMENT_NOT_FOUND;
     }
 

server/api/controllers/attachments/download.js

@@ -53,7 +53,7 @@ module.exports = {
     }
 
     this.res.type(attachment.filename);
-    if (!attachment.isImage && path.extname(attachment.filename) !== '.pdf') {
+    if (!attachment.image && path.extname(attachment.filename) !== '.pdf') {
       this.res.set('Content-Disposition', 'attachment');
     }
     this.res.set('Cache-Control', 'private, max-age=900'); // TODO: move to config

server/api/helpers/attachments/create-one.js

@@ -38,7 +38,7 @@ module.exports = {
       inputs.request,
     );
 
-    if (!inputs.card.coverAttachmentId && attachment.isImage) {
+    if (!inputs.card.coverAttachmentId && attachment.image) {
       await sails.helpers.cards.updateOne(inputs.card, {
         coverAttachmentId: attachment.id,
       });

server/api/helpers/utils/create-attachment-receiver.js

@@ -43,15 +43,20 @@ module.exports = {
         await writeFile(path.join(rootPath, filename), buffer);
 
         const image = sharp(buffer);
-        let imageMetadata;
+        let metadata;
 
         try {
-          imageMetadata = await image.metadata();
+          metadata = await image.metadata();
         } catch (error) {} // eslint-disable-line no-empty
 
-        if (imageMetadata) {
+        const extra = {
+          dirname,
+          name: file.filename,
+        };
+
+        if (metadata && !['svg', 'pdf'].includes(metadata.format)) {
           let cover256Buffer;
-          if (imageMetadata.height > imageMetadata.width) {
+          if (metadata.height > metadata.width) {
             cover256Buffer = await image
               .resize(256, 320)
               .jpeg({
@@ -75,17 +80,16 @@ module.exports = {
           fs.mkdirSync(thumbnailsPath);
 
           await writeFile(path.join(thumbnailsPath, 'cover-256.jpg'), cover256Buffer);
+
+          extra.image = _.pick(metadata, ['width', 'height']);
+        } else {
+          extra.image = null;
         }
 
-        // eslint-disable-next-line no-param-reassign
+        Object.assign(file, {
-        file.extra = {
+          filename,
-          dirname,
+          extra,
-          isImage: !!imageMetadata,
+        });
-          name: file.filename,
-        };
-
-        // eslint-disable-next-line no-param-reassign
-        file.filename = filename;
 
         return done();
       } catch (error) {

server/api/models/Attachment.js

@@ -19,10 +19,8 @@ module.exports = {
       type: 'string',
       required: true,
     },
-    isImage: {
+    image: {
-      type: 'boolean',
+      type: 'json',
-      required: true,
-      columnName: 'is_image',
     },
     name: {
       type: 'string',
@@ -51,9 +49,9 @@ module.exports = {
 
   customToJSON() {
     return {
-      ..._.omit(this, ['dirname', 'filename', 'isImage']),
+      ..._.omit(this, ['dirname', 'filename']),
       url: `${sails.config.custom.attachmentsUrl}/${this.id}/download/${this.filename}`,
-      coverUrl: this.isImage
+      coverUrl: this.image
         ? `${sails.config.custom.attachmentsUrl}/${this.id}/download/thumbnails/cover-256.jpg`
         : null,
     };

server/app.js

@@ -20,20 +20,24 @@
  *   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
 // no matter where we actually lift from.
 // > Note: This is not required in order to lift, but it is a convenient default.
 process.chdir(__dirname);
 
+dotenv.config();
+
 // Attempt to import `sails` dependency, as well as `rc` (for loading `.sailsrc` files).
 let sails;
 let rc;
 
 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) {
   /* eslint-disable no-console */
   console.error("Encountered an error when attempting to require('sails'):");

server/db/init.js

@@ -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 () => {
   try {
-    const isExists = await knex.schema.hasTable(config.migrations.tableName);
+    const isExists = await knex.schema.hasTable(knexfile.migrations.tableName);
 
     await knex.migrate.latest();
     if (!isExists) {

server/db/knexfile.js

@@ -1,7 +1,8 @@
 const path = require('path');
+const dotenv = require('dotenv');
 const _ = require('lodash');
 
-require('dotenv').config({
+dotenv.config({
   path: path.resolve(__dirname, '../.env'),
 });
 

server/db/migrations/20180722003614_create_card_table.js

@@ -1,5 +1,5 @@
 module.exports.up = (knex) =>
-  knex.schema.createTable('card', (table) => {
+  knex.schema.createTable('card', async (table) => {
     /* Columns */
 
     table.bigInteger('id').primary().defaultTo(knex.raw('next_id()'));
@@ -12,7 +12,7 @@ module.exports.up = (knex) =>
     table.specificType('position', 'double precision');
     table.text('name').notNullable();
     table.text('description');
-    table.timestamp('dueDate', true);
+    table.timestamp('due_date', true);
     table.jsonb('timer');
 
     table.timestamp('created_at', true);

server/db/migrations/20220523131229_add_image_to_attachment_table.js

@@ -0,0 +1,73 @@
+const path = require('path');
+const sharp = require('sharp');
+const _ = require('lodash');
+
+const getConfig = require('../../get-config');
+
+module.exports.up = async (knex) => {
+  await knex.schema.table('attachment', (table) => {
+    /* Columns */
+
+    table.jsonb('image');
+  });
+
+  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
+      }
+
+      if (!['svg', 'pdf'].includes(metadata.format)) {
+        // eslint-disable-next-line no-await-in-loop
+        await knex('attachment')
+          .update({
+            image: _.pick(metadata, ['width', 'height']),
+          })
+          .where('id', attachment.id);
+      }
+    }
+  }
+
+  return knex.schema.table('attachment', (table) => {
+    table.dropColumn('is_image');
+  });
+};
+
+module.exports.down = async (knex) => {
+  await knex.schema.table('attachment', (table) => {
+    /* Columns */
+
+    table.boolean('is_image');
+  });
+
+  const attachments = await knex('attachment');
+
+  // eslint-disable-next-line no-restricted-syntax
+  for (attachment of attachments) {
+    // eslint-disable-next-line no-await-in-loop
+    await knex('attachment')
+      .update({
+        is_image: !!attachment.image,
+      })
+      .where('id', attachment.id);
+  }
+
+  await knex.schema.table('attachment', (table) => {
+    table.dropColumn('image');
+  });
+
+  return knex.schema.alterTable('attachment', (table) => {
+    table.boolean('is_image').notNullable().alter();
+  });
+};

server/get-config.js

@@ -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;