From e67790d84fa4e50cccafd8aa2f58eea7b514a588 Mon Sep 17 00:00:00 2001 From: Maksim Eltyshev Date: Tue, 25 Feb 2025 15:48:40 +0100 Subject: [PATCH] fix: Use circle icon to display list color --- .../components/ColorPicker/ColorPicker.jsx | 4 +- client/src/components/List/ActionsStep.jsx | 16 ++++--- client/src/components/List/List.jsx | 35 +++++++++------- client/src/components/List/List.module.scss | 6 +-- client/src/locales/de-DE/core.js | 2 +- client/src/locales/en-GB/core.js | 2 +- client/src/locales/en-US/core.js | 2 +- client/src/styles.module.scss | 42 +++++++++++++++++++ server/api/controllers/lists/update.js | 1 + server/api/models/List.js | 3 +- 10 files changed, 82 insertions(+), 31 deletions(-) diff --git a/client/src/components/ColorPicker/ColorPicker.jsx b/client/src/components/ColorPicker/ColorPicker.jsx index a824b2da..58a12710 100644 --- a/client/src/components/ColorPicker/ColorPicker.jsx +++ b/client/src/components/ColorPicker/ColorPicker.jsx @@ -29,8 +29,8 @@ const ColorPicker = React.memo(({ current, onChange, colors, allowDeletion }) => /> ))} - {allowDeletion && ( - @@ -188,7 +187,7 @@ List.propTypes = { id: PropTypes.string.isRequired, index: PropTypes.number.isRequired, name: PropTypes.string.isRequired, - color: PropTypes.string.isRequired, + color: PropTypes.string, isPersisted: PropTypes.bool.isRequired, cardIds: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types canEdit: PropTypes.bool.isRequired, @@ -198,4 +197,8 @@ List.propTypes = { onCardCreate: PropTypes.func.isRequired, }; +List.defaultProps = { + color: undefined, +}; + export default List; diff --git a/client/src/components/List/List.module.scss b/client/src/components/List/List.module.scss index f0ebda39..5e57679b 100644 --- a/client/src/components/List/List.module.scss +++ b/client/src/components/List/List.module.scss @@ -127,9 +127,9 @@ word-break: break-word; } - .whiteText { - color: #ffffff; - fill: #ffffff; + .headerNameColor { + line-height: 1; + margin-right: 6px; } .innerWrapper { diff --git a/client/src/locales/de-DE/core.js b/client/src/locales/de-DE/core.js index 8a20f94a..4d63ab99 100644 --- a/client/src/locales/de-DE/core.js +++ b/client/src/locales/de-DE/core.js @@ -183,7 +183,6 @@ 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', @@ -214,6 +213,7 @@ export default { moveCard_title: 'Karte bewegen', remove: 'Löschen', removeBackground: 'Hintergrund löschen', + removeColor: 'Farbe löschen', removeCover_title: 'Vorschau löschen', removeFromBoard: 'Vom Board entfernen', removeFromProject: 'Vom Projekt entfernen', diff --git a/client/src/locales/en-GB/core.js b/client/src/locales/en-GB/core.js index 1530c561..4de1987c 100644 --- a/client/src/locales/en-GB/core.js +++ b/client/src/locales/en-GB/core.js @@ -201,7 +201,6 @@ export default { deleteCard: 'Delete card', deleteCard_title: 'Delete Card', deleteComment: 'Delete comment', - deleteColor: 'Delete color', deleteImage: 'Delete image', deleteLabel: 'Delete label', deleteList: 'Delete list', @@ -235,6 +234,7 @@ export default { moveCard_title: 'Move Card', remove: 'Remove', removeBackground: 'Remove background', + removeColor: 'Remove color', removeCover_title: 'Remove Cover', removeFromBoard: 'Remove from board', removeFromProject: 'Remove from project', diff --git a/client/src/locales/en-US/core.js b/client/src/locales/en-US/core.js index 35a74e3d..21d98cb9 100644 --- a/client/src/locales/en-US/core.js +++ b/client/src/locales/en-US/core.js @@ -197,7 +197,6 @@ export default { deleteCard: 'Delete card', deleteCard_title: 'Delete Card', deleteComment: 'Delete comment', - deleteColor: 'Delete color', deleteImage: 'Delete image', deleteLabel: 'Delete label', deleteList: 'Delete list', @@ -231,6 +230,7 @@ export default { moveCard_title: 'Move Card', remove: 'Remove', removeBackground: 'Remove background', + removeColor: 'Remove color', removeCover_title: 'Remove Cover', removeFromBoard: 'Remove from board', removeFromProject: 'Remove from project', diff --git a/client/src/styles.module.scss b/client/src/styles.module.scss index bfdfb2d9..a25339c5 100644 --- a/client/src/styles.module.scss +++ b/client/src/styles.module.scss @@ -384,4 +384,46 @@ .backgroundRedCurtain { background: radial-gradient(circle 371px at 2.9% 14.3%, rgba(255, 0, 102, 1) 0%, rgba(80, 5, 35, 1) 100.7%) !important; } + + /* Colors */ + + .colorBerryRed { + color: #e04556 !important; + } + + .colorPumpkinOrange { + color: #f0982d !important; + } + + .colorLagoonBlue { + color: #109dc0 !important; + } + + .colorPinkTulip { + color: #f97394 !important; + } + + .colorLightMud { + color: #c7a57b !important; + } + + .colorOrangePeel { + color: #fab623 !important; + } + + .colorBrightMoss { + color: #a5c261 !important; + } + + .colorAntiqueBlue { + color: #6c99bb !important; + } + + .colorDarkGranite { + color: #8b8680 !important; + } + + .colorLaguneBlue { + color: #00b4b1 !important; + } } diff --git a/server/api/controllers/lists/update.js b/server/api/controllers/lists/update.js index c96f8d74..0e43f400 100755 --- a/server/api/controllers/lists/update.js +++ b/server/api/controllers/lists/update.js @@ -23,6 +23,7 @@ module.exports = { }, color: { type: 'string', + isIn: List.COLORS, allowNull: true, }, }, diff --git a/server/api/models/List.js b/server/api/models/List.js index ab4f18ef..24a370ba 100755 --- a/server/api/models/List.js +++ b/server/api/models/List.js @@ -27,6 +27,7 @@ const COLORS = [ module.exports = { SortTypes, + COLORS, attributes: { // ╔═╗╦═╗╦╔╦╗╦╔╦╗╦╦ ╦╔═╗╔═╗ @@ -43,8 +44,8 @@ module.exports = { }, color: { type: 'string', - allowNull: true, isIn: COLORS, + allowNull: true, }, // ╔═╗╔╦╗╔╗ ╔═╗╔╦╗╔═╗