Add covers for cards

2025-07-27 17:19:43 +02:00 · 2020-04-23 03:02:53 +05:00 · 2020-04-23 03:02:53 +05:00 · 3dffed90c6
commit 3dffed90c6
parent f743f4ea8b
26 changed files with 315 additions and 98 deletions
--- a/client/src/components/Card/Card.jsx
+++ b/client/src/components/Card/Card.jsx
@ -23,6 +23,7 @@ const Card = React.memo(
    name,
    dueDate,
    timer,
+    coverUrl,
    isPersisted,
    notificationsTotal,
    users,
@ -63,51 +64,60 @@ const Card = React.memo(

    const contentNode = (
      <>
-        {labels.length > 0 && (
-          <span className={styles.labels}>
-            {labels.map((label) => (
-              <span key={label.id} className={classNames(styles.attachment, styles.attachmentLeft)}>
-                <Label name={label.name} color={label.color} size="tiny" />
-              </span>
-            ))}
-          </span>
-        )}
-        <div className={styles.name}>{name}</div>
-        {tasks.length > 0 && <Tasks items={tasks} />}
-        {(dueDate || timer || notificationsTotal > 0) && (
-          <span className={styles.attachments}>
-            {notificationsTotal > 0 && (
-              <span
-                className={classNames(
-                  styles.attachment,
-                  styles.attachmentLeft,
-                  styles.notification,
-                )}
-              >
-                {notificationsTotal}
-              </span>
-            )}
-            {dueDate && (
-              <span className={classNames(styles.attachment, styles.attachmentLeft)}>
-                <DueDate value={dueDate} size="tiny" />
-              </span>
-            )}
-            {timer && (
-              <span className={classNames(styles.attachment, styles.attachmentLeft)}>
-                <Timer startedAt={timer.startedAt} total={timer.total} size="tiny" />
-              </span>
-            )}
-          </span>
-        )}
-        {users.length > 0 && (
-          <span className={classNames(styles.attachments, styles.attachmentsRight)}>
-            {users.map((user) => (
-              <span key={user.id} className={classNames(styles.attachment, styles.attachmentRight)}>
-                <User name={user.name} avatarUrl={user.avatarUrl} size="tiny" />
-              </span>
-            ))}
-          </span>
-        )}
+        {coverUrl && <img src={coverUrl} alt="" className={styles.cover} />}
+        <div className={styles.details}>
+          {labels.length > 0 && (
+            <span className={styles.labels}>
+              {labels.map((label) => (
+                <span
+                  key={label.id}
+                  className={classNames(styles.attachment, styles.attachmentLeft)}
+                >
+                  <Label name={label.name} color={label.color} size="tiny" />
+                </span>
+              ))}
+            </span>
+          )}
+          <div className={styles.name}>{name}</div>
+          {tasks.length > 0 && <Tasks items={tasks} />}
+          {(dueDate || timer || notificationsTotal > 0) && (
+            <span className={styles.attachments}>
+              {notificationsTotal > 0 && (
+                <span
+                  className={classNames(
+                    styles.attachment,
+                    styles.attachmentLeft,
+                    styles.notification,
+                  )}
+                >
+                  {notificationsTotal}
+                </span>
+              )}
+              {dueDate && (
+                <span className={classNames(styles.attachment, styles.attachmentLeft)}>
+                  <DueDate value={dueDate} size="tiny" />
+                </span>
+              )}
+              {timer && (
+                <span className={classNames(styles.attachment, styles.attachmentLeft)}>
+                  <Timer startedAt={timer.startedAt} total={timer.total} size="tiny" />
+                </span>
+              )}
+            </span>
+          )}
+          {users.length > 0 && (
+            <span className={classNames(styles.attachments, styles.attachmentsRight)}>
+              {users.map((user) => (
+                <span
+                  key={user.id}
+                  className={classNames(styles.attachment, styles.attachmentRight)}
+                >
+                  <User name={user.name} avatarUrl={user.avatarUrl} size="tiny" />
+                </span>
+              ))}
+            </span>
+          )}
+        </div>
      </>
    );

@ -121,7 +131,7 @@ const Card = React.memo(
                {isPersisted ? (
                  <>
                    <Link
-                      to={isPersisted && Paths.CARDS.replace(':id', id)}
+                      to={Paths.CARDS.replace(':id', id)}
                      className={styles.content}
                      onClick={handleClick}
                    >
@ -173,6 +183,7 @@ Card.propTypes = {
  name: PropTypes.string.isRequired,
  dueDate: PropTypes.instanceOf(Date),
  timer: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  coverUrl: PropTypes.string,
  isPersisted: PropTypes.bool.isRequired,
  notificationsTotal: PropTypes.number.isRequired,
  /* eslint-disable react/forbid-prop-types */
@ -196,6 +207,7 @@ Card.propTypes = {
 Card.defaultProps = {
  dueDate: undefined,
  timer: undefined,
+  coverUrl: undefined,
 };

 export default Card;
--- a/client/src/components/Card/Card.module.css
+++ b/client/src/components/Card/Card.module.css
@ -68,7 +68,6 @@
 .content {
  cursor: grab;
  display: block;
-  padding: 6px 8px 0;
 }

 .content:after {
@ -77,6 +76,15 @@
  clear: both;
 }

+.cover {
+  border-radius: 3px 3px 0 0;
+  vertical-align: middle;
+}
+
+.details {
+  padding: 6px 8px 0;
+}
+
 .labels {
  display: block;
  max-width: 100%;
--- a/client/src/components/CardModal/Attachments/Attachments.jsx
+++ b/client/src/components/CardModal/Attachments/Attachments.jsx
@ -3,7 +3,18 @@ import PropTypes from 'prop-types';

 import Item from './Item';

-const Attachments = React.memo(({ items, onUpdate, onDelete }) => {
+const Attachments = React.memo(({ items, onUpdate, onDelete, onCoverUpdate }) => {
+  const handleCoverSelect = useCallback(
+    (id) => {
+      onCoverUpdate(id);
+    },
+    [onCoverUpdate],
+  );
+
+  const handleCoverDeselect = useCallback(() => {
+    onCoverUpdate(null);
+  }, [onCoverUpdate]);
+
  const handleUpdate = useCallback(
    (id, data) => {
      onUpdate(id, data);
@ -25,9 +36,12 @@ const Attachments = React.memo(({ items, onUpdate, onDelete }) => {
          key={item.id}
          name={item.name}
          url={item.url}
-          thumbnailUrl={item.thumbnailUrl}
+          coverUrl={item.coverUrl}
          createdAt={item.createdAt}
+          isCover={item.isCover}
          isPersisted={item.isPersisted}
+          onCoverSelect={() => handleCoverSelect(item.id)}
+          onCoverDeselect={handleCoverDeselect}
          onUpdate={(data) => handleUpdate(item.id, data)}
          onDelete={() => handleDelete(item.id)}
        />
@ -40,6 +54,7 @@ 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,
 };

 export default Attachments;
--- a/client/src/components/CardModal/Attachments/Item.jsx
+++ b/client/src/components/CardModal/Attachments/Item.jsx
@ -2,20 +2,44 @@ import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
-import { Button, Icon, Loader } from 'semantic-ui-react';
+import { Button, Icon, Label, Loader } from 'semantic-ui-react';

 import EditPopup from './EditPopup';

 import styles from './Item.module.css';

 const Item = React.memo(
-  ({ name, url, thumbnailUrl, createdAt, isPersisted, onUpdate, onDelete }) => {
+  ({
+    name,
+    url,
+    coverUrl,
+    createdAt,
+    isCover,
+    isPersisted,
+    onCoverSelect,
+    onCoverDeselect,
+    onUpdate,
+    onDelete,
+  }) => {
    const [t] = useTranslation();

    const handleClick = useCallback(() => {
      window.open(url, '_blank');
    }, [url]);

+    const handleToggleCoverClick = useCallback(
+      (event) => {
+        event.stopPropagation();
+
+        if (isCover) {
+          onCoverDeselect();
+        } else {
+          onCoverSelect();
+        }
+      },
+      [isCover, onCoverSelect, onCoverDeselect],
+    );
+
    if (!isPersisted) {
      return (
        <div className={classNames(styles.wrapper, styles.wrapperSubmitting)}>
@ -36,19 +60,46 @@ const Item = React.memo(
        <div
          className={styles.thumbnail}
          style={{
-            backgroundImage: thumbnailUrl && `url(${thumbnailUrl}`,
+            backgroundImage: coverUrl && `url(${coverUrl}`,
          }}
        >
-          {!thumbnailUrl && <span className={styles.extension}>{extension || '-'}</span>}
+          {coverUrl ? (
+            isCover && (
+              <Label corner="left" size="tiny" icon="star" className={styles.thumbnailLabel} />
+            )
+          ) : (
+            <span className={styles.extension}>{extension || '-'}</span>
+          )}
        </div>
        <div className={styles.details}>
          <span className={styles.name}>{name}</span>
-          <span className={styles.options}>
+          <span className={styles.date}>
            {t('format:longDateTime', {
              postProcess: 'formatDate',
              value: createdAt,
            })}
          </span>
+          {coverUrl && (
+            <span className={styles.options}>
+              <button type="button" className={styles.option} onClick={handleToggleCoverClick}>
+                <Icon
+                  name="window maximize outline"
+                  flipped="vertically"
+                  size="small"
+                  className={styles.optionIcon}
+                />
+                <span className={styles.optionText}>
+                  {isCover
+                    ? t('action.removeCover', {
+                        context: 'title',
+                      })
+                    : t('action.makeCover', {
+                        context: 'title',
+                      })}
+                </span>
+              </button>
+            </span>
+          )}
        </div>
        <EditPopup
          defaultData={{
@ -69,16 +120,19 @@ const Item = React.memo(
 Item.propTypes = {
  name: PropTypes.string.isRequired,
  url: PropTypes.string,
-  thumbnailUrl: PropTypes.string,
+  coverUrl: PropTypes.string,
  createdAt: PropTypes.instanceOf(Date),
+  isCover: PropTypes.bool.isRequired,
  isPersisted: PropTypes.bool.isRequired,
+  onCoverSelect: PropTypes.func.isRequired,
+  onCoverDeselect: PropTypes.func.isRequired,
  onUpdate: PropTypes.func.isRequired,
  onDelete: PropTypes.func.isRequired,
 };

 Item.defaultProps = {
  url: undefined,
-  thumbnailUrl: undefined,
+  coverUrl: undefined,
  createdAt: undefined,
 };

--- a/client/src/components/CardModal/Attachments/Item.module.css
+++ b/client/src/components/CardModal/Attachments/Item.module.css
@ -16,9 +16,16 @@
  background-color: rgba(9, 30, 66, 0.08) !important;
 }

+.date {
+  display: block;
+  color: #6b808c;
+  line-height: 20px;
+  margin-bottom: 6px;
+}
+
 .details {
  box-sizing: border-box;
-  padding: 8px 32px 8px 128px;
+  padding: 6px 32px 6px 128px;
  margin: 0;
  min-height: 80px;
  z-index: 0;
@ -45,11 +52,31 @@
  word-wrap: break-word;
 }

+.option {
+  background: none;
+  border: none;
+  color: #6b808c;
+  cursor: pointer;
+  outline: none;
+  padding: 0;
+}
+
+.option:hover {
+  color: #172b4d;
+}
+
+.optionIcon {
+  margin-right: 6px !important;
+}
+
+.optionText {
+  text-decoration: underline;
+}
+
 .options {
  display: block;
  color: #6b808c;
  line-height: 20px;
-  margin-bottom: 8px;
 }

 .thumbnail {
@ -70,6 +97,10 @@
  z-index: 1;
 }

+.thumbnailLabel {
+  border-color: rgba(255, 255, 255, 0.8) !important;
+}
+
 .wrapper {
  cursor: pointer;
  margin-bottom: 8px;
--- a/client/src/components/CardModal/CardModal.jsx
+++ b/client/src/components/CardModal/CardModal.jsx
@ -98,6 +98,15 @@ const CardModal = React.memo(
      [onUpdate],
    );

+    const handleCoverUpdate = useCallback(
+      (newCoverAttachmentId) => {
+        onUpdate({
+          coverAttachmentId: newCoverAttachmentId,
+        });
+      },
+      [onUpdate],
+    );
+
    const handleAttachmentFileSelect = useCallback(
      (file) => {
        onAttachmentCreate({
@ -278,6 +287,7 @@ const CardModal = React.memo(
                      items={attachments}
                      onUpdate={onAttachmentUpdate}
                      onDelete={onAttachmentDelete}
+                      onCoverUpdate={handleCoverUpdate}
                    />
                  </div>
                </div>