[PR #1033] [MERGED] feat: add option to edit the color of a list #1169

New Issue

OVERLORD · 2026-02-04T21:54:43+03:00

OVERLORD commented

2026-02-04 21:54:43 +03:00

📋 Pull Request Information

Original PR: https://github.com/plankanban/planka/pull/1033
Author: @lukascorona
Created: 2/19/2025
Status: ✅ Merged
Merged: 2/25/2025
Merged by: @meltyshev

Base: master ← Head: feat/add_option_to_edit_list_color

📝 Commits (2)

be58e5b feat: add option to edit the color of a list
e67790d fix: Use circle icon to display list color

📊 Changes

19 files changed (+363 additions, -164 deletions)

View changed files

➕ client/src/components/ColorPicker/ColorPicker.jsx (+52 -0)
➕ client/src/components/ColorPicker/ColorPicker.module.scss (+40 -0)
➕ client/src/components/ColorPicker/index.js (+3 -0)
📝 client/src/components/LabelsStep/Editor.jsx (+2 -21)
📝 client/src/components/LabelsStep/Editor.module.scss (+0 -39)
📝 client/src/components/List/ActionsStep.jsx (+116 -78)
📝 client/src/components/List/List.jsx (+34 -3)
📝 client/src/components/List/List.module.scss (+5 -0)
📝 client/src/components/ProjectSettingsModal/BackgroundPane.jsx (+6 -21)
➕ client/src/constants/ListColors.js (+12 -0)
📝 client/src/containers/ListContainer.js (+2 -1)
📝 client/src/locales/de-DE/core.js (+2 -0)
📝 client/src/locales/en-GB/core.js (+2 -0)
📝 client/src/locales/en-US/core.js (+2 -0)
📝 client/src/models/List.js (+1 -0)
📝 client/src/styles.module.scss (+42 -0)
📝 server/api/controllers/lists/update.js (+6 -1)
📝 server/api/models/List.js (+19 -0)
➕ server/db/migrations/20250131202710_add_list_color.js (+17 -0)

📄 Description

Description:

This pull request introduces the functionality to edit the background color of a list as mentioned in https://github.com/plankanban/planka/issues/840. The feature uses the already existing update functionality, has been implemented across both the server and client and includes the necessary database migration.
Since this would be the third time "color buttons" would be used, I refactored it into a standalone ColorPicker component.

Changelog

add a new color column to the list table to store the color. When no color is set this defaults to null.
add a reusable ColorPicker component, which is now also used by the ProjectSettingsModal and the LabelEditor
introduce a new option in the lists action "edit color" see:
Lists can now be set to 10 different colors
When setting a color, list header and the button to add a new card switch to white to make it more readable (similar to the text of the label)

Request for Feedback:

I have tried to stick to the existing structure and design patterns as much as possible. I hope it works for you. The documentation is rather scarce and has no section for this, please provide feedback.

As possible colors, I just went with the first ten color options that labels have. I think Lists won't need that many colors, but I can easily add more. Feedback appreciated :)

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/plankanban/planka/pull/1033 **Author:** [@lukascorona](https://github.com/lukascorona) **Created:** 2/19/2025 **Status:** ✅ Merged **Merged:** 2/25/2025 **Merged by:** [@meltyshev](https://github.com/meltyshev) **Base:** `master` ← **Head:** `feat/add_option_to_edit_list_color` --- ### 📝 Commits (2) - [`be58e5b`](https://github.com/plankanban/planka/commit/be58e5b0bd14b4f5268712f00dd14469ab92ff74) feat: add option to edit the color of a list - [`e67790d`](https://github.com/plankanban/planka/commit/e67790d84fa4e50cccafd8aa2f58eea7b514a588) fix: Use circle icon to display list color ### 📊 Changes **19 files changed** (+363 additions, -164 deletions) <details> <summary>View changed files</summary> ➕ `client/src/components/ColorPicker/ColorPicker.jsx` (+52 -0) ➕ `client/src/components/ColorPicker/ColorPicker.module.scss` (+40 -0) ➕ `client/src/components/ColorPicker/index.js` (+3 -0) 📝 `client/src/components/LabelsStep/Editor.jsx` (+2 -21) 📝 `client/src/components/LabelsStep/Editor.module.scss` (+0 -39) 📝 `client/src/components/List/ActionsStep.jsx` (+116 -78) 📝 `client/src/components/List/List.jsx` (+34 -3) 📝 `client/src/components/List/List.module.scss` (+5 -0) 📝 `client/src/components/ProjectSettingsModal/BackgroundPane.jsx` (+6 -21) ➕ `client/src/constants/ListColors.js` (+12 -0) 📝 `client/src/containers/ListContainer.js` (+2 -1) 📝 `client/src/locales/de-DE/core.js` (+2 -0) 📝 `client/src/locales/en-GB/core.js` (+2 -0) 📝 `client/src/locales/en-US/core.js` (+2 -0) 📝 `client/src/models/List.js` (+1 -0) 📝 `client/src/styles.module.scss` (+42 -0) 📝 `server/api/controllers/lists/update.js` (+6 -1) 📝 `server/api/models/List.js` (+19 -0) ➕ `server/db/migrations/20250131202710_add_list_color.js` (+17 -0) </details> ### 📄 Description ### Description: This pull request introduces the functionality to edit the background color of a list as mentioned in https://github.com/plankanban/planka/issues/840. The feature uses the already existing update functionality, has been implemented across both the server and client and includes the necessary database migration. Since this would be the third time "color buttons" would be used, I refactored it into a standalone `ColorPicker` component. ### Changelog * add a new `color` column to the list table to store the color. When no color is set this defaults to null. * add a reusable `ColorPicker` component, which is now also used by the `ProjectSettingsModal` and the `LabelEditor` * introduce a new option in the lists action "edit color" see: ![image](https://github.com/user-attachments/assets/318a5820-3f37-47fa-b7ee-afe12963c574) * Lists can now be set to 10 different colors * When setting a color, list header and the button to add a new card switch to white to make it more readable (similar to the text of the label) ![image](https://github.com/user-attachments/assets/bcac1868-105a-49d1-a9e4-811f8f8a5ac6) ### Request for Feedback: I have tried to stick to the existing structure and design patterns as much as possible. I hope it works for you. The documentation is rather scarce and has no section for this, please provide feedback. As possible colors, I just went with the first ten color options that labels have. I think Lists won't need that many colors, but I can easily add more. Feedback appreciated :) --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

OVERLORD added the pull-request label 2026-02-04 21:54:43 +03:00

OVERLORD closed this issue

2026-02-04 21:54:45 +03:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/planka#1169