feat: add option to edit the color of a list

client/src/components/ColorPicker/ColorPicker.jsx

@@ -0,0 +1,52 @@
+import classNames from 'classnames';
+import camelCase from 'lodash/camelCase';
+import upperFirst from 'lodash/upperFirst';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Button } from 'semantic-ui-react';
+import { useTranslation } from 'react-i18next';
+
+import globalStyles from '../../styles.module.scss';
+import styles from './ColorPicker.module.scss';
+
+const ColorPicker = React.memo(({ current, onChange, colors, allowDeletion }) => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <div className={styles.colorButtons}>
+        {colors.map((color) => (
+          <Button
+            key={color}
+            type="button"
+            name="color"
+            value={color}
+            className={classNames(
+              styles.colorButton,
+              color === current && styles.colorButtonActive,
+              globalStyles[`background${upperFirst(camelCase(color))}`],
+            )}
+            onClick={onChange}
+          />
+        ))}
+      </div>
+      {allowDeletion && (
+        <Button fluid value={undefined} onClick={onChange} content={t('action.deleteColor')} />
+      )}
+    </>
+  );
+});
+
+ColorPicker.propTypes = {
+  current: PropTypes.string,
+  colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+  onChange: PropTypes.func,
+  allowDeletion: PropTypes.bool,
+};
+
+ColorPicker.defaultProps = {
+  current: undefined,
+  onChange: undefined,
+  allowDeletion: false,
+};
+
+export default ColorPicker;

client/src/components/ColorPicker/ColorPicker.module.scss

@@ -0,0 +1,40 @@
+:global(#app) {
+  .colorButton {
+    float: left;
+    height: 40px;
+    margin: 4px;
+    padding: 0;
+    position: relative;
+    width: 49.6px;
+
+    &:hover {
+      opacity: 0.9;
+    }
+  }
+
+  .colorButtonActive:before {
+    bottom: 3px;
+    color: #ffffff;
+    content: 'Г';
+    font-size: 18px;
+    line-height: 36px;
+    position: absolute;
+    right: 6px;
+    text-align: center;
+    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
+    top: 0;
+    transform: rotate(-135deg);
+    width: 36px;
+  }
+
+  .colorButtons {
+    margin: -4px;
+    padding-bottom: 16px;
+
+    &:after {
+      content: '';
+      display: table;
+      clear: both;
+    }
+  }
+}

client/src/components/ColorPicker/index.js

@@ -0,0 +1,3 @@
+import ColorPicker from './ColorPicker';
+
+export default ColorPicker;

client/src/components/LabelsStep/Editor.jsx

@@ -1,16 +1,12 @@
-import upperFirst from 'lodash/upperFirst';
-import camelCase from 'lodash/camelCase';
 import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
-import { Button } from 'semantic-ui-react';
 import { Input } from '../../lib/custom-ui';
 
 import LabelColors from '../../constants/LabelColors';
+import ColorPicker from '../ColorPicker';
 
 import styles from './Editor.module.scss';
-import globalStyles from '../../styles.module.scss';
 
 const Editor = React.memo(({ data, onFieldChange }) => {
   const [t] = useTranslation();
@@ -33,22 +29,7 @@ const Editor = React.memo(({ data, onFieldChange }) => {
         onChange={onFieldChange}
       />
       <div className={styles.text}>{t('common.color')}</div>
-      <div className={styles.colorButtons}>
-        {LabelColors.map((color) => (
-          <Button
-            key={color}
-            type="button"
-            name="color"
-            value={color}
-            className={classNames(
-              styles.colorButton,
-              color === data.color && styles.colorButtonActive,
-              globalStyles[`background${upperFirst(camelCase(color))}`],
-            )}
-            onClick={onFieldChange}
-          />
-        ))}
-      </div>
+      <ColorPicker colors={LabelColors} current={data.color} onChange={onFieldChange} />
     </>
   );
 });

client/src/components/LabelsStep/Editor.module.scss

@@ -1,43 +1,4 @@
 :global(#app) {
-  .colorButton {
-    float: left;
-    height: 40px;
-    margin: 4px;
-    padding: 0;
-    position: relative;
-    width: 49.6px;
-
-    &:hover {
-      opacity: 0.9;
-    }
-  }
-
-  .colorButtonActive:before {
-    bottom: 3px;
-    color: #ffffff;
-    content: "Г";
-    font-size: 18px;
-    line-height: 36px;
-    position: absolute;
-    right: 6px;
-    text-align: center;
-    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
-    top: 0;
-    transform: rotate(-135deg);
-    width: 36px;
-  }
-
-  .colorButtons {
-    margin: -4px;
-    padding-bottom: 16px;
-
-    &:after {
-      content: "";
-      display: table;
-      clear: both;
-    }
-  }
-
   .field {
     margin-bottom: 8px;
   }

client/src/components/List/ActionsStep.jsx

@@ -4,7 +4,9 @@ import { useTranslation } from 'react-i18next';
 import { Menu } from 'semantic-ui-react';
 import { Popup } from '../../lib/custom-ui';
 
+import ListColors from '../../constants/ListColors';
 import { useSteps } from '../../hooks';
+import ColorPicker from '../ColorPicker';
 import ListSortStep from '../ListSortStep';
 import DeleteStep from '../DeleteStep';
 
@@ -13,9 +15,11 @@ import styles from './ActionsStep.module.scss';
 const StepTypes = {
   DELETE: 'DELETE',
   SORT: 'SORT',
+  EDIT_COLOR: 'CHANGE_COLOR',
 };
 
-const ActionsStep = React.memo(({ onNameEdit, onCardAdd, onSort, onDelete, onClose }) => {
+const ActionsStep = React.memo(
+  ({ onNameEdit, onCardAdd, onSort, onDelete, onClose, onColorEdit, color }) => {
     const [t] = useTranslation();
     const [step, openStep, handleBack] = useSteps();
 
@@ -37,6 +41,10 @@ const ActionsStep = React.memo(({ onNameEdit, onCardAdd, onSort, onDelete, onClo
       openStep(StepTypes.DELETE);
     }, [openStep]);
 
+    const hanndleEditColorClick = useCallback(() => {
+      openStep(StepTypes.EDIT_COLOR);
+    }, [openStep]);
+
     const handleSortTypeSelect = useCallback(
       (type) => {
         onSort({
@@ -62,6 +70,24 @@ const ActionsStep = React.memo(({ onNameEdit, onCardAdd, onSort, onDelete, onClo
               onBack={handleBack}
             />
           );
+        case StepTypes.EDIT_COLOR:
+          return (
+            <>
+              <Popup.Header onBack={handleBack}>
+                {t('action.editColor', {
+                  context: 'title',
+                })}
+              </Popup.Header>
+              <Popup.Content>
+                <ColorPicker
+                  colors={ListColors}
+                  current={color}
+                  allowDeletion
+                  onChange={(e) => onColorEdit(e.currentTarget.value)}
+                />
+              </Popup.Content>
+            </>
+          );
         default:
       }
     }
@@ -90,6 +116,11 @@ const ActionsStep = React.memo(({ onNameEdit, onCardAdd, onSort, onDelete, onClo
                 context: 'title',
               })}
             </Menu.Item>
+            <Menu.Item className={styles.menuItem} onClick={hanndleEditColorClick}>
+              {t('action.editColor', {
+                context: 'title',
+              })}
+            </Menu.Item>
             <Menu.Item className={styles.menuItem} onClick={handleDeleteClick}>
               {t('action.deleteList', {
                 context: 'title',
@@ -99,7 +130,8 @@ const ActionsStep = React.memo(({ onNameEdit, onCardAdd, onSort, onDelete, onClo
         </Popup.Content>
       </>
     );
-});
+  },
+);
 
 ActionsStep.propTypes = {
   onNameEdit: PropTypes.func.isRequired,
@@ -107,6 +139,8 @@ ActionsStep.propTypes = {
   onDelete: PropTypes.func.isRequired,
   onSort: PropTypes.func.isRequired,
   onClose: PropTypes.func.isRequired,
+  onColorEdit: PropTypes.func.isRequired,
+  color: PropTypes.string.isRequired,
 };
 
 export default ActionsStep;

client/src/components/List/List.jsx

@@ -1,25 +1,29 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import camelCase from 'lodash/camelCase';
 import { useTranslation } from 'react-i18next';
+import upperFirst from 'lodash/upperFirst';
 import { Draggable, Droppable } from 'react-beautiful-dnd';
 import { Button, Icon } from 'semantic-ui-react';
 import { usePopup } from '../../lib/popup';
 
 import DroppableTypes from '../../constants/DroppableTypes';
 import CardContainer from '../../containers/CardContainer';
-import NameEdit from './NameEdit';
 import CardAdd from './CardAdd';
+import NameEdit from './NameEdit';
 import ActionsStep from './ActionsStep';
 import { ReactComponent as PlusMathIcon } from '../../assets/images/plus-math-icon.svg';
 
 import styles from './List.module.scss';
+import globalStyles from '../../styles.module.scss';
 
 const List = React.memo(
   ({
     id,
     index,
     name,
+    color,
     isPersisted,
     cardIds,
     canEdit,
@@ -49,6 +53,15 @@ const List = React.memo(
       [onUpdate],
     );
 
+    const handleColorEdit = useCallback(
+      (newColor) => {
+        onUpdate({
+          color: newColor,
+        });
+      },
+      [onUpdate],
+    );
+
     const handleAddCardClick = useCallback(() => {
       setIsAddCardOpened(true);
     }, []);
@@ -109,7 +122,12 @@ const List = React.memo(
             ref={innerRef}
             className={styles.innerWrapper}
           >
-            <div className={styles.outerWrapper}>
+            <div
+              className={classNames(
+                styles.outerWrapper,
+                globalStyles[`background${upperFirst(camelCase(color))}`],
+              )}
+            >
               {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,
                                            jsx-a11y/no-static-element-interactions */}
               <div
@@ -118,7 +136,9 @@ const List = React.memo(
                 onClick={handleHeaderClick}
               >
                 <NameEdit ref={nameEdit} defaultValue={name} onUpdate={handleNameUpdate}>
-                  <div className={styles.headerName}>{name}</div>
+                  <div className={classNames(styles.headerName, color && styles.whiteText)}>
+                    {name}
+                  </div>
                 </NameEdit>
                 {isPersisted && canEdit && (
                   <ActionsPopup
@@ -126,6 +146,8 @@ const List = React.memo(
                     onCardAdd={handleCardAdd}
                     onDelete={onDelete}
                     onSort={onSort}
+                    color={color}
+                    onColorEdit={handleColorEdit}
                   >
                     <Button className={classNames(styles.headerButton, styles.target)}>
                       <Icon fitted name="pencil" size="small" />
@@ -140,11 +162,16 @@ const List = React.memo(
                 <button
                   type="button"
                   disabled={!isPersisted}
-                  className={classNames(styles.addCardButton)}
+                  className={classNames(
+                    styles.addCardButton,
+                    globalStyles[`background${upperFirst(camelCase(color))}`],
+                  )}
                   onClick={handleAddCardClick}
                 >
-                  <PlusMathIcon className={styles.addCardButtonIcon} />
-                  <span className={styles.addCardButtonText}>
+                  <PlusMathIcon
+                    className={classNames(styles.addCardButtonIcon, color && styles.whiteText)}
+                  />
+                  <span className={classNames(styles.addCardButtonText, color && styles.whiteText)}>
                     {cardIds.length > 0 ? t('action.addAnotherCard') : t('action.addCard')}
                   </span>
                 </button>
@@ -161,6 +188,7 @@ List.propTypes = {
   id: PropTypes.string.isRequired,
   index: PropTypes.number.isRequired,
   name: PropTypes.string.isRequired,
+  color: PropTypes.string.isRequired,
   isPersisted: PropTypes.bool.isRequired,
   cardIds: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
   canEdit: PropTypes.bool.isRequired,

client/src/components/List/List.module.scss

@@ -127,6 +127,11 @@
     word-break: break-word;
   }
 
+  .whiteText {
+    color: #ffffff;
+    fill: #ffffff;
+  }
+
   .innerWrapper {
     margin-right: 8px;
     width: 272px;

client/src/components/ProjectSettingsModal/BackgroundPane.jsx

@@ -1,18 +1,15 @@
 import { dequal } from 'dequal';
-import upperFirst from 'lodash/upperFirst';
-import camelCase from 'lodash/camelCase';
 import React, { useCallback, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { Button, Image } from 'semantic-ui-react';
 import { FilePicker } from '../../lib/custom-ui';
 
 import ProjectBackgroundGradients from '../../constants/ProjectBackgroundGradients';
 import { ProjectBackgroundTypes } from '../../constants/Enums';
+import ColorPicker from '../ColorPicker';
 
 import styles from './BackgroundPane.module.scss';
-import globalStyles from '../../styles.module.scss';
 
 const BackgroundPane = React.memo(
   ({ item, imageCoverUrl, isImageUpdating, onUpdate, onImageUpdate, onImageDelete }) => {
@@ -68,23 +65,11 @@ const BackgroundPane = React.memo(
     return (
       <>
         <div className={styles.gradientButtons}>
-          {ProjectBackgroundGradients.map((gradient) => (
-            <Button
-              key={gradient}
-              type="button"
-              name="gradient"
-              value={gradient}
-              className={classNames(
-                styles.gradientButton,
-                item &&
-                  item.type === ProjectBackgroundTypes.GRADIENT &&
-                  gradient === item.name &&
-                  styles.gradientButtonActive,
-                globalStyles[`background${upperFirst(camelCase(gradient))}`],
-              )}
-              onClick={handleGradientClick}
+          <ColorPicker
+            colors={ProjectBackgroundGradients}
+            current={item?.name}
+            onChange={handleGradientClick}
           />
-          ))}
         </div>
         {imageCoverUrl && (
           // TODO: wrap in button

client/src/constants/ListColors.js

@@ -0,0 +1,12 @@
+export default [
+  'berry-red',
+  'pumpkin-orange',
+  'lagoon-blue',
+  'pink-tulip',
+  'light-mud',
+  'orange-peel',
+  'bright-moss',
+  'antique-blue',
+  'dark-granite',
+  'lagune-blue',
+];

client/src/containers/ListContainer.js

@@ -11,7 +11,7 @@ const makeMapStateToProps = () => {
   const selectCardIdsByListId = selectors.makeSelectCardIdsByListId();
 
   return (state, { id, index }) => {
-    const { name, isPersisted } = selectListById(state, id);
+    const { name, color, isPersisted } = selectListById(state, id);
     const cardIds = selectCardIdsByListId(state, id);
     const currentUserMembership = selectors.selectCurrentUserMembershipForCurrentBoard(state);
 
@@ -22,6 +22,7 @@ const makeMapStateToProps = () => {
       id,
       index,
       name,
+      color,
       isPersisted,
       cardIds,
       canEdit: isCurrentUserEditor,

client/src/locales/de-DE/core.js

@@ -183,6 +183,7 @@ export default {
       deleteCard: 'Karte löschen',
       deleteCard_title: 'Karte löschen',
       deleteComment: 'Kommentar löschen',
+      deleteColor: 'Farbe löschen',
       deleteImage: 'Bild löschen',
       deleteLabel: 'Label löschen',
       deleteList: 'Liste löschen',
@@ -196,6 +197,7 @@ export default {
       duplicate: 'Kopieren',
       duplicateCard_title: 'Karte kopieren',
       edit: 'Bearbeiten',
+      editColor_title: 'Farbe ändern',
       editDueDate_title: 'Fälligkeitsdatum bearbeiten',
       editDescription_title: 'Beschreibung ändern',
       editEmail_title: 'E-Mail-Adresse bearbeiten',

client/src/locales/en-GB/core.js

@@ -201,6 +201,7 @@ export default {
       deleteCard: 'Delete card',
       deleteCard_title: 'Delete Card',
       deleteComment: 'Delete comment',
+      deleteColor: 'Delete color',
       deleteImage: 'Delete image',
       deleteLabel: 'Delete label',
       deleteList: 'Delete list',
@@ -214,6 +215,7 @@ export default {
       duplicate: 'Duplicate',
       duplicateCard_title: 'Duplicate Card',
       edit: 'Edit',
+      editColor_title: 'Edit Color',
       editDueDate_title: 'Edit Due Date',
       editDescription_title: 'Edit Description',
       editEmail_title: 'Edit E-mail',

client/src/locales/en-US/core.js

@@ -197,6 +197,7 @@ export default {
       deleteCard: 'Delete card',
       deleteCard_title: 'Delete Card',
       deleteComment: 'Delete comment',
+      deleteColor: 'Delete color',
       deleteImage: 'Delete image',
       deleteLabel: 'Delete label',
       deleteList: 'Delete list',
@@ -210,6 +211,7 @@ export default {
       duplicate: 'Duplicate',
       duplicateCard_title: 'Duplicate Card',
       edit: 'Edit',
+      editColor_title: 'Edit Color',
       editDueDate_title: 'Edit Due Date',
       editDescription_title: 'Edit Description',
       editEmail_title: 'Edit E-mail',

client/src/models/List.js

@@ -11,6 +11,7 @@ export default class extends BaseModel {
     id: attr(),
     position: attr(),
     name: attr(),
+    color: attr(),
     boardId: fk({
       to: 'Board',
       as: 'board',

server/api/controllers/lists/update.js

@@ -21,6 +21,10 @@ module.exports = {
       type: 'string',
       isNotEmptyString: true,
     },
+    color: {
+      type: 'string',
+      allowNull: true,
+    },
   },
 
   exits: {
@@ -55,7 +59,7 @@ module.exports = {
       throw Errors.NOT_ENOUGH_RIGHTS;
     }
 
-    const values = _.pick(inputs, ['position', 'name']);
+    const values = _.pick(inputs, ['position', 'name', 'color']);
 
     list = await sails.helpers.lists.updateOne.with({
       values,

server/api/models/List.js

@@ -12,6 +12,19 @@ const SortTypes = {
   CREATED_AT_DESC: 'createdAt_desc',
 };
 
+const COLORS = [
+  'berry-red',
+  'pumpkin-orange',
+  'lagoon-blue',
+  'pink-tulip',
+  'light-mud',
+  'orange-peel',
+  'bright-moss',
+  'antique-blue',
+  'dark-granite',
+  'lagune-blue',
+];
+
 module.exports = {
   SortTypes,
 
@@ -28,6 +41,11 @@ module.exports = {
       type: 'string',
       required: true,
     },
+    color: {
+      type: 'string',
+      allowNull: true,
+      isIn: COLORS,
+    },
 
     //  ╔═╗╔╦╗╔╗ ╔═╗╔╦╗╔═╗
     //  ║╣ ║║║╠╩╗║╣  ║║╚═╗

server/db/migrations/20250131202710_add_list_color.js

@@ -0,0 +1,17 @@
+/**
+ * @param { import("knex").Knex } knex
+ * @returns { Promise<void> }
+ */
+exports.up = (knex) =>
+  knex.schema.alterTable('list', (table) => {
+    table.text('color');
+  });
+
+/**
+ * @param { import("knex").Knex } knex
+ * @returns { Promise<void> }
+ */
+exports.down = (knex) =>
+  knex.schema.alterTable('list', (table) => {
+    table.dropColumn('color');
+  });