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>