Add attachment popup, hide attachments if more than 4

client/src/components/CardModal/AddAttachment.jsx

@@ -1,23 +0,0 @@
-import React, { useCallback } from 'react';
-import PropTypes from 'prop-types';
-import { FilePicker } from '../../lib/custom-ui';
-
-const AddAttachment = React.memo(({ children, onCreate }) => {
-  const handleFileSelect = useCallback(
-    (file) => {
-      onCreate({
-        file,
-      });
-    },
-    [onCreate],
-  );
-
-  return <FilePicker onSelect={handleFileSelect}>{children}</FilePicker>;
-});
-
-AddAttachment.propTypes = {
-  children: PropTypes.element.isRequired,
-  onCreate: PropTypes.func.isRequired,
-};
-
-export default AddAttachment;

client/src/components/CardModal/AddAttachmentPopup.jsx

@@ -0,0 +1,54 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import { Menu } from 'semantic-ui-react';
+import { withPopup } from '../../lib/popup';
+import { FilePicker, Popup } from '../../lib/custom-ui';
+
+import styles from './AddAttachmentPopup.module.css';
+
+const AddAttachmentStep = React.memo(({ onCreate, onClose }) => {
+  const [t] = useTranslation();
+
+  const handleFileSelect = useCallback(
+    (file) => {
+      onCreate({
+        file,
+      });
+      onClose();
+    },
+    [onCreate, onClose],
+  );
+
+  return (
+    <>
+      <Popup.Header>
+        {t('common.addAttachment', {
+          context: 'title',
+        })}
+      </Popup.Header>
+      <Popup.Content>
+        <Menu secondary vertical className={styles.menu}>
+          <FilePicker onSelect={handleFileSelect}>
+            <Menu.Item className={styles.menuItem}>
+              {t('common.fromComputer', {
+                context: 'title',
+              })}
+            </Menu.Item>
+          </FilePicker>
+        </Menu>
+        <hr className={styles.divider} />
+        <div className={styles.tip}>
+          {t('common.pressPasteShortcutToAddAttachmentFromClipboard')}
+        </div>
+      </Popup.Content>
+    </>
+  );
+});
+
+AddAttachmentStep.propTypes = {
+  onCreate: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+export default withPopup(AddAttachmentStep);

client/src/components/CardModal/AddAttachmentPopup.module.css

@@ -0,0 +1,20 @@
+.divider {
+  background-color: #eee;
+  border: 0;
+  height: 1px;
+  margin-bottom: 8px;
+}
+
+.menu {
+  margin: -7px -12px -5px !important;
+  width: calc(100% + 24px) !important;
+}
+
+.menuItem {
+  margin: 0 !important;
+  padding-left: 14px !important;
+}
+
+.tip {
+  opacity: 0.5;
+}

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

@@ -1,9 +1,21 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import { Button } from 'semantic-ui-react';
+import { useToggle } from '../../../lib/hooks';
 
 import Item from './Item';
 
+import styles from './Attachments.module.css';
+
 const Attachments = React.memo(({ items, onUpdate, onDelete, onCoverUpdate }) => {
+  const [t] = useTranslation();
+  const [isOpened, toggleOpened] = useToggle();
+
+  const handleToggleClick = useCallback(() => {
+    toggleOpened();
+  }, [toggleOpened]);
+
   const handleCoverSelect = useCallback(
     (id) => {
       onCoverUpdate(id);
@@ -29,9 +41,11 @@ const Attachments = React.memo(({ items, onUpdate, onDelete, onCoverUpdate }) =>
     [onDelete],
   );
 
+  const visibleItems = isOpened ? items : items.slice(0, 4);
+
   return (
     <>
-      {items.map((item) => (
+      {visibleItems.map((item) => (
         <Item
           key={item.id}
           name={item.name}
@@ -46,6 +60,20 @@ const Attachments = React.memo(({ items, onUpdate, onDelete, onCoverUpdate }) =>
           onDelete={() => handleDelete(item.id)}
         />
       ))}
+      {items.length > 4 && (
+        <Button
+          fluid
+          content={
+            isOpened
+              ? t('action.showFewerAttachments')
+              : t('action.showAllAttachments', {
+                  hidden: items.length - visibleItems.length,
+                })
+          }
+          className={styles.toggleButton}
+          onClick={handleToggleClick}
+        />
+      )}
     </>
   );
 });

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

@@ -0,0 +1,16 @@
+.toggleButton {
+  background: transparent !important;
+  box-shadow: none !important;
+  color: #6b808c !important;
+  font-weight: normal !important;
+  margin-top: 8px !important;
+  padding: 6px 11px !important;
+  text-align: left !important;
+  text-decoration: underline !important;
+  transition: none;
+}
+
+.toggleButton:hover {
+  background: rgba(9, 30, 66, 0.08) !important;
+  color: #092d42 !important;
+}

client/src/components/CardModal/CardModal.jsx

@@ -9,8 +9,8 @@ import NameField from './NameField';
 import EditDescription from './EditDescription';
 import Tasks from './Tasks';
 import Attachments from './Attachments';
-import AddAttachment from './AddAttachment';
 import AddAttachmentZone from './AddAttachmentZone';
+import AddAttachmentPopup from './AddAttachmentPopup';
 import Actions from './Actions';
 import User from '../User';
 import Label from '../Label';
@@ -337,12 +337,12 @@ const CardModal = React.memo(
                       {t('common.timer')}
                     </Button>
                   </EditTimerPopup>
-                  <AddAttachment onCreate={onAttachmentCreate}>
+                  <AddAttachmentPopup onCreate={onAttachmentCreate}>
                     <Button fluid className={styles.actionButton}>
                       <Icon name="attach" className={styles.actionIcon} />
                       {t('common.attachment')}
                     </Button>
-                  </AddAttachment>
+                  </AddAttachmentPopup>
                 </div>
                 <div className={styles.actions}>
                   <span className={styles.actionsTitle}>{t('common.actions')}</span>

client/src/locales/en/app.js

@@ -11,6 +11,7 @@ export default {
     common: {
       account: 'Account',
       actions: 'Actions',
+      addAttachment_title: 'Add Attachment',
       addComment: 'Add comment',
       addMember_title: 'Add Member',
       addUser_title: 'Add User',
@@ -77,6 +78,7 @@ export default {
       enterTaskDescription: 'Enter task description...',
       filterByLabels_title: 'Filter By Labels',
       filterByMembers_title: 'Filter By Members',
+      fromComputer_title: 'From Computer',
       hours: 'Hours',
       invalidCurrentPassword: 'Invalid current password',
       labels: 'Labels',
@@ -95,6 +97,8 @@ export default {
       organization: 'Organization',
       phone: 'Phone',
       preferences: 'Preferences',
+      pressPasteShortcutToAddAttachmentFromClipboard:
+        'Tip: press Ctrl-V (Cmd-V on Mac) to add an attachment from the clipboard.',
       projectNotFound_title: 'Project Not Found',
       refreshPageToLoadLastDataAndReceiveUpdates:
         '<0>Refresh the page</0> to load last data<br />and receive updates',
@@ -166,6 +170,8 @@ export default {
       removeFromProject: 'Remove from project',
       removeMember: 'Remove member',
       save: 'Save',
+      showAllAttachments: 'Show all attachments ({{hidden}} hidden)',
+      showFewerAttachments: 'Show fewer attachments',
       start: 'Start',
       stop: 'Stop',
       subscribe: 'Subscribe',

client/src/locales/ru/app.js

@@ -15,6 +15,7 @@ export default {
     common: {
       account: 'Учетная запись',
       actions: 'Действия',
+      addAttachment: 'Добавление вложения',
       addComment: 'Добавление комментария',
       addMember: 'Добавление участника',
       addUser: 'Добавление пользователя',
@@ -81,6 +82,7 @@ export default {
       enterTaskDescription: 'Введите описание задачи...',
       filterByLabels: 'Фильтр по меткам',
       filterByMembers: 'Фильтр по участникам',
+      fromComputer: 'С компьютера',
       hours: 'Часы',
       invalidCurrentPassword: 'Неверный текущий пароль',
       labels: 'Метки',
@@ -99,6 +101,8 @@ export default {
       organization: 'Организация',
       phone: 'Телефон',
       preferences: 'Предпочтения',
+      pressPasteShortcutToAddAttachmentFromClipboard:
+        'Совет: нажмите Ctrl-V (Cmd-V на Mac), чтобы добавить вложение из буфера обмена.',
       projectNotFound: 'Доска не найдена',
       refreshPageToLoadLastDataAndReceiveUpdates:
         '<0>Обновите страницу</0>, чтобы загрузить<br />актуальные данные и получать обновления',
@@ -167,6 +171,8 @@ export default {
       removeFromProject: 'Удалить из проекта',
       removeMember: 'Удалить участника',
       save: 'Сохранить',
+      showAllAttachments: 'Показать все вложения ({{hidden}} скрыто)',
+      showFewerAttachments: 'Показать меньше вложений',
       start: 'Начать',
       stop: 'Остановить',
       subscribe: 'Подписаться',