feat: Version 2

Closes #627, closes #1047

client/src/components/projects/ProjectSettingsModal/BackgroundPane/AddImageZone.jsx

@@ -0,0 +1,84 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import React, { useCallback, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import { useDropzone } from 'react-dropzone';
+
+import styles from './AddImageZone.module.scss';
+
+const AddImageZone = React.memo(({ children, onCreate }) => {
+  const [t] = useTranslation();
+
+  const handleDropAccepted = useCallback(
+    (files) => {
+      onCreate(files[0]);
+    },
+    [onCreate],
+  );
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    accept: {
+      'image/*': [],
+    },
+    multiple: false,
+    noClick: true,
+    noKeyboard: true,
+    onDropAccepted: handleDropAccepted,
+  });
+
+  useEffect(() => {
+    const handlePaste = (event) => {
+      if (!event.clipboardData) {
+        return;
+      }
+
+      const file = event.clipboardData.files[0];
+
+      if (file) {
+        if (!file.type.startsWith('image/')) {
+          return;
+        }
+
+        onCreate(file);
+        return;
+      }
+
+      const item = event.clipboardData.items[0];
+
+      if (!item || !item.type.startsWith('image/')) {
+        return;
+      }
+
+      if (item.kind === 'file') {
+        onCreate(item.getAsFile());
+      }
+    };
+
+    window.addEventListener('paste', handlePaste);
+
+    return () => {
+      window.removeEventListener('paste', handlePaste);
+    };
+  }, [onCreate]);
+
+  return (
+    /* eslint-disable-next-line react/jsx-props-no-spreading */
+    <div {...getRootProps()}>
+      {isDragActive && <div className={styles.dropzone}>{t('common.dropFileToUpload')}</div>}
+      {children}
+      {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+      <input {...getInputProps()} />
+    </div>
+  );
+});
+
+AddImageZone.propTypes = {
+  children: PropTypes.node.isRequired,
+  onCreate: PropTypes.func.isRequired,
+};
+
+export default AddImageZone;

client/src/components/projects/ProjectSettingsModal/BackgroundPane/AddImageZone.module.scss

@@ -0,0 +1,20 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .dropzone {
+    background: white;
+    font-size: 20px;
+    font-weight: bold;
+    height: 100%;
+    line-height: 30px;
+    opacity: 0.7;
+    padding-top: 200px;
+    position: absolute;
+    text-align: center;
+    width: 100%;
+    z-index: 2001;
+  }
+}

client/src/components/projects/ProjectSettingsModal/BackgroundPane/BackgroundPane.jsx

@@ -0,0 +1,75 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import React, { useCallback, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { Button, Tab } from 'semantic-ui-react';
+
+import selectors from '../../../../selectors';
+import entryActions from '../../../../entry-actions';
+import { ProjectBackgroundTypes } from '../../../../constants/Enums';
+import Gradients from './Gradients';
+import Images from './Images';
+import AddImageZone from './AddImageZone';
+
+import styles from './BackgroundPane.module.scss';
+
+const TITLE_BY_TYPE = {
+  [ProjectBackgroundTypes.GRADIENT]: 'common.gradients',
+  [ProjectBackgroundTypes.IMAGE]: 'common.uploadedImages',
+};
+
+const BackgroundPane = React.memo(() => {
+  const { backgroundType: currentType } = useSelector(selectors.selectCurrentProject);
+
+  const dispatch = useDispatch();
+  const [t] = useTranslation();
+
+  const [activeType, setActiveType] = useState(
+    () => currentType || ProjectBackgroundTypes.GRADIENT,
+  );
+
+  const handleImageCreate = useCallback(
+    (file) => {
+      dispatch(
+        entryActions.createBackgroundImageInCurrentProject({
+          file,
+        }),
+      );
+
+      setActiveType(ProjectBackgroundTypes.IMAGE);
+    },
+    [dispatch],
+  );
+
+  const handleActiveTypeChange = useCallback((_, { value }) => {
+    setActiveType(value);
+  }, []);
+
+  return (
+    <Tab.Pane attached={false} className={styles.wrapper}>
+      <AddImageZone onCreate={handleImageCreate}>
+        <Button.Group fluid basic className={styles.activeTypeButtonGroup}>
+          {[ProjectBackgroundTypes.GRADIENT, ProjectBackgroundTypes.IMAGE].map((type) => (
+            <Button
+              key={type}
+              type="button"
+              value={type}
+              active={type === activeType}
+              onClick={handleActiveTypeChange}
+            >
+              {t(TITLE_BY_TYPE[type])}
+            </Button>
+          ))}
+        </Button.Group>
+        {activeType === ProjectBackgroundTypes.GRADIENT && <Gradients />}
+        {activeType === ProjectBackgroundTypes.IMAGE && <Images />}
+      </AddImageZone>
+    </Tab.Pane>
+  );
+});
+
+export default BackgroundPane;

client/src/components/projects/ProjectSettingsModal/BackgroundPane/BackgroundPane.module.scss

@@ -0,0 +1,15 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .activeTypeButtonGroup {
+    margin-bottom: 12px;
+  }
+
+  .wrapper {
+    border: none;
+    box-shadow: none;
+  }
+}

client/src/components/projects/ProjectSettingsModal/BackgroundPane/Gradients/Gradients.jsx

@@ -0,0 +1,21 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import React from 'react';
+
+import BACKGROUND_GRADIENTS from '../../../../../constants/BackgroundGradients';
+import Item from './Item';
+
+import styles from './Gradients.module.scss';
+
+const Gradients = React.memo(() => (
+  <div className={styles.wrapper}>
+    {BACKGROUND_GRADIENTS.map((backgroundGradient) => (
+      <Item key={backgroundGradient} name={backgroundGradient} />
+    ))}
+  </div>
+));
+
+export default Gradients;

client/src/components/projects/ProjectSettingsModal/BackgroundPane/Gradients/Gradients.module.scss

@@ -0,0 +1,39 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .wrapper {
+    display: grid;
+    gap: 10px;
+    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
+    max-height: 60vh;
+    overflow-y: auto;
+
+    @supports (-moz-appearance: none) {
+      scrollbar-color: rgba(0, 0, 0, 0.32) transparent;
+      scrollbar-width: thin;
+    }
+
+    &:after {
+      clear: both;
+      content: "";
+      display: table;
+    }
+
+    &::-webkit-scrollbar {
+      width: 9px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-clip: padding-box;
+      border-left: 0.25em transparent solid;
+      border-radius: 3px;
+    }
+  }
+}

client/src/components/projects/ProjectSettingsModal/BackgroundPane/Gradients/Item.jsx

@@ -0,0 +1,74 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import upperFirst from 'lodash/upperFirst';
+import camelCase from 'lodash/camelCase';
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { useDispatch, useSelector } from 'react-redux';
+import { Button, Label } from 'semantic-ui-react';
+
+import selectors from '../../../../../selectors';
+import entryActions from '../../../../../entry-actions';
+import { ProjectBackgroundTypes } from '../../../../../constants/Enums';
+
+import styles from './Item.module.scss';
+import globalStyles from '../../../../../styles.module.scss';
+
+const Item = React.memo(({ name }) => {
+  const isActive = useSelector((state) => {
+    const { backgroundType, backgroundGradient } = selectors.selectCurrentProject(state);
+    return backgroundType === ProjectBackgroundTypes.GRADIENT && name === backgroundGradient;
+  });
+
+  const dispatch = useDispatch();
+
+  const handleClick = useCallback(() => {
+    dispatch(
+      entryActions.updateCurrentProject(
+        isActive
+          ? {
+              backgroundType: null,
+              backgroundGradient: null,
+            }
+          : {
+              backgroundType: ProjectBackgroundTypes.GRADIENT,
+              backgroundGradient: name,
+            },
+      ),
+    );
+  }, [name, isActive, dispatch]);
+
+  return (
+    <Button
+      type="button"
+      className={classNames(
+        styles.wrapper,
+        globalStyles[`background${upperFirst(camelCase(name))}`],
+      )}
+      onClick={handleClick}
+    >
+      {isActive && (
+        <Label
+          corner="left"
+          size="mini"
+          icon={{
+            name: 'checkmark',
+            color: 'grey',
+            inverted: true,
+          }}
+          className={styles.label}
+        />
+      )}
+    </Button>
+  );
+});
+
+Item.propTypes = {
+  name: PropTypes.string.isRequired,
+};
+
+export default Item;

client/src/components/projects/ProjectSettingsModal/BackgroundPane/Gradients/Item.module.scss

@@ -0,0 +1,25 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .label {
+    border-color: rgba(29, 46, 63, 0.8);
+
+    i {
+      cursor: inherit;
+    }
+  }
+
+  .wrapper {
+    height: 74px;
+    margin: 0;
+    padding: 0;
+    position: relative;
+
+    &:hover {
+      opacity: 0.9;
+    }
+  }
+}

client/src/components/projects/ProjectSettingsModal/BackgroundPane/Gradients/index.js

@@ -0,0 +1,8 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import Gradients from './Gradients';
+
+export default Gradients;

client/src/components/projects/ProjectSettingsModal/BackgroundPane/Image.jsx

@@ -0,0 +1,76 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Icon, Label } from 'semantic-ui-react';
+
+import { usePopupInClosableContext } from '../../../../hooks';
+import ConfirmationStep from '../../../common/ConfirmationStep';
+
+import styles from './Image.module.scss';
+
+const Image = React.memo(({ url, isActive, onSelect, onDeselect, onDelete }) => {
+  const handleClick = useCallback(() => {
+    if (isActive) {
+      onDeselect();
+    } else {
+      onSelect();
+    }
+  }, [isActive, onSelect, onDeselect]);
+
+  const ConfirmationPopup = usePopupInClosableContext(ConfirmationStep);
+
+  return (
+    /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,
+                                jsx-a11y/no-static-element-interactions */
+    <div
+      className={styles.wrapper}
+      style={{
+        background: `url("${url}") center / cover`,
+      }}
+      onClick={handleClick}
+    >
+      {isActive && (
+        <Label
+          corner="left"
+          size="mini"
+          icon={{
+            name: 'checkmark',
+            color: 'grey',
+            inverted: true,
+          }}
+          className={styles.label}
+        />
+      )}
+      {onDelete && (
+        <ConfirmationPopup
+          title="common.deleteBackgroundImage"
+          content="common.areYouSureYouWantToDeleteThisBackgroundImage"
+          buttonContent="action.deleteBackgroundImage"
+          onConfirm={onDelete}
+        >
+          <Button className={styles.deleteButton}>
+            <Icon fitted name="trash alternate" size="small" />
+          </Button>
+        </ConfirmationPopup>
+      )}
+    </div>
+  );
+});
+
+Image.propTypes = {
+  url: PropTypes.string.isRequired,
+  isActive: PropTypes.bool.isRequired,
+  onSelect: PropTypes.func.isRequired,
+  onDeselect: PropTypes.func.isRequired,
+  onDelete: PropTypes.func,
+};
+
+Image.defaultProps = {
+  onDelete: undefined,
+};
+
+export default Image;

client/src/components/projects/ProjectSettingsModal/BackgroundPane/Image.module.scss

@@ -0,0 +1,43 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .deleteButton {
+    background: rgba(255, 255, 255, 0.9);
+    box-shadow: none;
+    line-height: 1;
+    margin: 0;
+    min-height: 24px;
+    opacity: 0;
+    padding: 0;
+    position: absolute;
+    right: 4px;
+    top: 4px;
+    width: 24px;
+  }
+
+  .label {
+    border-color: rgba(29, 46, 63, 0.8);
+
+    i {
+      cursor: inherit;
+    }
+  }
+
+  .wrapper {
+    border-radius: 3px;
+    cursor: pointer;
+    height: 74px;
+    position: relative;
+
+    &:hover {
+      opacity: 0.9;
+
+      .deleteButton {
+        opacity: 1;
+      }
+    }
+  }
+}

client/src/components/projects/ProjectSettingsModal/BackgroundPane/Images/Images.jsx

@@ -0,0 +1,65 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import React, { useCallback, useEffect, useRef } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { Button } from 'semantic-ui-react';
+import { FilePicker } from '../../../../../lib/custom-ui';
+
+import selectors from '../../../../../selectors';
+import entryActions from '../../../../../entry-actions';
+import Item from './Item';
+
+import styles from './Images.module.scss';
+
+const Images = React.memo(() => {
+  const backgroundImageIds = useSelector(selectors.selectBackgroundImageIdsForCurrentProject);
+
+  const dispatch = useDispatch();
+  const [t] = useTranslation();
+
+  const fieldRef = useRef(null);
+
+  const handleFileSelect = useCallback(
+    (file) => {
+      dispatch(
+        entryActions.createBackgroundImageInCurrentProject({
+          file,
+        }),
+      );
+    },
+    [dispatch],
+  );
+
+  useEffect(() => {
+    fieldRef.current.focus();
+  }, []);
+
+  return (
+    <>
+      <div className={styles.images}>
+        {backgroundImageIds.map((backgroundImageId) => (
+          <Item key={backgroundImageId} id={backgroundImageId} />
+        ))}
+      </div>
+      <div className={styles.actions}>
+        <div className={styles.action}>
+          <FilePicker accept="image/*" onSelect={handleFileSelect}>
+            <Button
+              ref={fieldRef}
+              content={t('action.uploadNewImage', {
+                context: 'title',
+              })}
+              className={styles.actionButton}
+            />
+          </FilePicker>
+        </div>
+      </div>
+    </>
+  );
+});
+
+export default Images;

client/src/components/projects/ProjectSettingsModal/BackgroundPane/Images/Images.module.scss

@@ -0,0 +1,64 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .action {
+    border: none;
+    border-radius: 0.28571429rem;
+    display: inline-block;
+    height: 36px;
+    overflow: hidden;
+    position: relative;
+    transition: background 0.3s ease;
+    width: 100%;
+
+    &:hover {
+      background: #e9e9e9;
+    }
+  }
+
+  .actions {
+    margin-top: 20px;
+  }
+
+  .actionButton {
+    background: transparent;
+    color: #6b808c;
+    font-weight: normal;
+    height: 36px;
+    line-height: 24px;
+    padding: 6px 12px;
+    text-align: left;
+    text-decoration: underline;
+    width: 100%;
+  }
+
+  .images {
+    display: grid;
+    gap: 10px;
+    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
+    max-height: 60vh;
+    overflow-y: auto;
+
+    @supports (-moz-appearance: none) {
+      scrollbar-color: rgba(0, 0, 0, 0.32) transparent;
+      scrollbar-width: thin;
+    }
+
+    &::-webkit-scrollbar {
+      width: 9px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-clip: padding-box;
+      border-left: 0.25em transparent solid;
+      border-radius: 3px;
+    }
+  }
+}

client/src/components/projects/ProjectSettingsModal/BackgroundPane/Images/Item.jsx

@@ -0,0 +1,75 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import React, { useCallback, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import { Loader } from 'semantic-ui-react';
+
+import selectors from '../../../../../selectors';
+import entryActions from '../../../../../entry-actions';
+import { ProjectBackgroundTypes } from '../../../../../constants/Enums';
+import Image from '../Image';
+
+import styles from './Item.module.scss';
+
+const Item = React.memo(({ id }) => {
+  const selectBackgroundImageById = useMemo(() => selectors.makeSelectBackgroundImageById(), []);
+
+  const backgroundImage = useSelector((state) => selectBackgroundImageById(state, id));
+
+  const isActive = useSelector((state) => {
+    const { backgroundType, backgroundImageId } = selectors.selectCurrentProject(state);
+    return backgroundType === ProjectBackgroundTypes.IMAGE && id === backgroundImageId;
+  });
+
+  const dispatch = useDispatch();
+
+  const handleSelect = useCallback(() => {
+    dispatch(
+      entryActions.updateCurrentProject({
+        backgroundType: ProjectBackgroundTypes.IMAGE,
+        backgroundImageId: id,
+      }),
+    );
+  }, [id, dispatch]);
+
+  const handleDeselect = useCallback(() => {
+    dispatch(
+      entryActions.updateCurrentProject({
+        backgroundType: null,
+        backgroundImageId: null,
+      }),
+    );
+  }, [dispatch]);
+
+  const handleDelete = useCallback(() => {
+    dispatch(entryActions.deleteBackgroundImage(id));
+  }, [id, dispatch]);
+
+  if (!backgroundImage.isPersisted) {
+    return (
+      <div className={styles.wrapperSubmitting}>
+        <Loader inverted />
+      </div>
+    );
+  }
+
+  return (
+    <Image
+      url={backgroundImage.thumbnailUrls.outside360}
+      isActive={isActive}
+      onSelect={handleSelect}
+      onDeselect={handleDeselect}
+      onDelete={handleDelete}
+    />
+  );
+});
+
+Item.propTypes = {
+  id: PropTypes.string.isRequired,
+};
+
+export default Item;

client/src/components/projects/ProjectSettingsModal/BackgroundPane/Images/Item.module.scss

@@ -0,0 +1,13 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .wrapperSubmitting {
+    background: rgba(9, 30, 66, 0.04);
+    border-radius: 3px;
+    height: 74px;
+    position: relative;
+  }
+}

client/src/components/projects/ProjectSettingsModal/BackgroundPane/Images/index.js

@@ -0,0 +1,8 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import Images from './Images';
+
+export default Images;

client/src/components/projects/ProjectSettingsModal/BackgroundPane/index.js

@@ -0,0 +1,8 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import BackgroundPane from './BackgroundPane';
+
+export default BackgroundPane;