Skip to content

Commit ecfac78

Browse files
romdumromdum
authoredSep 29, 2021
Kanban colored boards (#16647)
Add a column Color in ProjectBoard and color picker in new / edit project board form.
·
v1.24.0-devv1.16.0-rc1
1 parent ba1fdbc commit ecfac78

File tree

14 files changed

+187
-31
lines changed

14 files changed

+187
-31
lines changed
 

‎models/migrations/migrations.go

+2
Original file line numberDiff line numberDiff line change
@@ -344,6 +344,8 @@ var migrations = []Migration{
344344
NewMigration("Add Branch Protection Unprotected Files Column", addBranchProtectionUnprotectedFilesColumn),
345345
// v195 -> v196
346346
NewMigration("Add table commit_status_index", addTableCommitStatusIndex),
347+
// v196 -> v197
348+
NewMigration("Add Color to ProjectBoard table", addColorColToProjectBoard),
347349
}
348350

349351
// GetCurrentDBVersion returns the current db version

‎models/migrations/v196.go

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
// Copyright 2021 The Gitea Authors. All rights reserved.
2+
// Use of this source code is governed by a MIT-style
3+
// license that can be found in the LICENSE file.
4+
5+
package migrations
6+
7+
import (
8+
"fmt"
9+
10+
"xorm.io/xorm"
11+
)
12+
13+
func addColorColToProjectBoard(x *xorm.Engine) error {
14+
type ProjectBoard struct {
15+
Color string `xorm:"VARCHAR(7)"`
16+
}
17+
18+
if err := x.Sync2(new(ProjectBoard)); err != nil {
19+
return fmt.Errorf("Sync2: %v", err)
20+
}
21+
return nil
22+
}

‎models/project_board.go

+18-2
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@
55
package models
66

77
import (
8+
"fmt"
9+
"regexp"
10+
811
"code.gitea.io/gitea/models/db"
912
"code.gitea.io/gitea/modules/setting"
1013
"code.gitea.io/gitea/modules/timeutil"
@@ -32,12 +35,16 @@ const (
3235
ProjectBoardTypeBugTriage
3336
)
3437

38+
// BoardColorPattern is a regexp witch can validate BoardColor
39+
var BoardColorPattern = regexp.MustCompile("^#[0-9a-fA-F]{6}$")
40+
3541
// ProjectBoard is used to represent boards on a project
3642
type ProjectBoard struct {
3743
ID int64 `xorm:"pk autoincr"`
3844
Title string
39-
Default bool `xorm:"NOT NULL DEFAULT false"` // issues not assigned to a specific board will be assigned to this board
40-
Sorting int8 `xorm:"NOT NULL DEFAULT 0"`
45+
Default bool `xorm:"NOT NULL DEFAULT false"` // issues not assigned to a specific board will be assigned to this board
46+
Sorting int8 `xorm:"NOT NULL DEFAULT 0"`
47+
Color string `xorm:"VARCHAR(7)"`
4148

4249
ProjectID int64 `xorm:"INDEX NOT NULL"`
4350
CreatorID int64 `xorm:"NOT NULL"`
@@ -100,6 +107,10 @@ func createBoardsForProjectsType(sess *xorm.Session, project *Project) error {
100107

101108
// NewProjectBoard adds a new project board to a given project
102109
func NewProjectBoard(board *ProjectBoard) error {
110+
if len(board.Color) != 0 && !BoardColorPattern.MatchString(board.Color) {
111+
return fmt.Errorf("bad color code: %s", board.Color)
112+
}
113+
103114
_, err := db.GetEngine(db.DefaultContext).Insert(board)
104115
return err
105116
}
@@ -178,6 +189,11 @@ func updateProjectBoard(e db.Engine, board *ProjectBoard) error {
178189
fieldToUpdate = append(fieldToUpdate, "title")
179190
}
180191

192+
if len(board.Color) != 0 && !BoardColorPattern.MatchString(board.Color) {
193+
return fmt.Errorf("bad color code: %s", board.Color)
194+
}
195+
fieldToUpdate = append(fieldToUpdate, "color")
196+
181197
_, err := e.ID(board.ID).Cols(fieldToUpdate...).Update(board)
182198

183199
return err

‎options/locale/locale_en-US.ini

+1-2
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,7 @@ error = Error
9696
error404 = The page you are trying to reach either <strong>does not exist</strong> or <strong>you are not authorized</strong> to view it.
9797

9898
never = Never
99+
color = Color
99100

100101
[error]
101102
occurred = An error has occurred
@@ -977,7 +978,6 @@ commit_graph = Commit Graph
977978
commit_graph.select = Select branches
978979
commit_graph.hide_pr_refs = Hide Pull Requests
979980
commit_graph.monochrome = Mono
980-
commit_graph.color = Color
981981
blame = Blame
982982
normal_view = Normal View
983983
line = line
@@ -1793,7 +1793,6 @@ settings.slack_username = Username
17931793
settings.slack_icon_url = Icon URL
17941794
settings.discord_username = Username
17951795
settings.discord_icon_url = Icon URL
1796-
settings.slack_color = Color
17971796
settings.event_desc = Trigger On:
17981797
settings.event_push_only = Push Events
17991798
settings.event_send_everything = All Events

‎routers/web/repo/projects.go

+3
Original file line numberDiff line numberDiff line change
@@ -444,6 +444,7 @@ func AddBoardToProjectPost(ctx *context.Context) {
444444
if err := models.NewProjectBoard(&models.ProjectBoard{
445445
ProjectID: project.ID,
446446
Title: form.Title,
447+
Color: form.Color,
447448
CreatorID: ctx.User.ID,
448449
}); err != nil {
449450
ctx.ServerError("NewProjectBoard", err)
@@ -513,6 +514,8 @@ func EditProjectBoard(ctx *context.Context) {
513514
board.Title = form.Title
514515
}
515516

517+
board.Color = form.Color
518+
516519
if form.Sorting != 0 {
517520
board.Sorting = form.Sorting
518521
}

‎services/forms/repo_form.go

+1
Original file line numberDiff line numberDiff line change
@@ -499,6 +499,7 @@ type UserCreateProjectForm struct {
499499
type EditProjectBoardForm struct {
500500
Title string `binding:"Required;MaxSize(100)"`
501501
Sorting int8
502+
Color string `binding:"MaxSize(7)"`
502503
}
503504

504505
// _____ .__.__ __

‎templates/repo/graph.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747
</div>
4848
</div>
4949
<button id="flow-color-monochrome" class="ui labelled icon button{{if eq .Mode "monochrome"}} active{{end}}" title="{{.i18n.Tr "repo.commit_graph.monochrome"}}">{{svg "material-invert-colors" 16 "mr-2"}}{{.i18n.Tr "repo.commit_graph.monochrome"}}</button>
50-
<button id="flow-color-colored" class="ui labelled icon button{{if ne .Mode "monochrome"}} active{{end}}" title="{{.i18n.Tr "repo.commit_graph.color"}}">{{svg "material-palette" 16 "mr-2"}}{{.i18n.Tr "repo.commit_graph.color"}}</button>
50+
<button id="flow-color-colored" class="ui labelled icon button{{if ne .Mode "monochrome"}} active{{end}}" title="{{.i18n.Tr "color"}}">{{svg "material-palette" 16 "mr-2"}}{{.i18n.Tr "color"}}</button>
5151
</div>
5252
</h2>
5353
<div class="ui dividing"></div>

‎templates/repo/projects/view.tmpl

+22-2
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<a class="ui green button show-modal item" href="{{$.RepoLink}}/issues/new?project={{$.Project.ID}}">{{.i18n.Tr "repo.issues.new"}}</a>
1212
<a class="ui green button show-modal item" data-modal="#new-board-item">{{.i18n.Tr "new_project_board"}}</a>
1313
{{end}}
14-
<div class="ui small modal" id="new-board-item">
14+
<div class="ui small modal new-board-modal" id="new-board-item">
1515
<div class="header">
1616
{{$.i18n.Tr "repo.projects.board.new"}}
1717
</div>
@@ -22,6 +22,16 @@
2222
<input class="new-board" id="new_board" name="title" required>
2323
</div>
2424

25+
<div class="field color-field">
26+
<label for="new_board_color">{{$.i18n.Tr "color"}}</label>
27+
<div class="color picker column">
28+
<input class="color-picker" maxlength="7" placeholder="#c320f6" id="new_board_color_picker" name="color">
29+
<div class="column precolors">
30+
{{template "repo/issue/label_precolors"}}
31+
</div>
32+
</div>
33+
</div>
34+
2535
<div class="text right actions">
2636
<div class="ui cancel button">{{$.i18n.Tr "settings.cancel"}}</div>
2737
<button data-url="{{$.RepoLink}}/projects/{{$.Project.ID}}" class="ui green button" id="new_board_submit">{{$.i18n.Tr "repo.projects.board.new_submit"}}</button>
@@ -70,7 +80,7 @@
7080
<div class="board">
7181
{{ range $board := .Boards }}
7282

73-
<div class="ui segment board-column" data-id="{{.ID}}" data-sorting="{{.Sorting}}" data-url="{{$.RepoLink}}/projects/{{$.Project.ID}}/{{.ID}}">
83+
<div class="ui segment board-column" style="background: {{.Color}}!important;" data-id="{{.ID}}" data-sorting="{{.Sorting}}" data-url="{{$.RepoLink}}/projects/{{$.Project.ID}}/{{.ID}}">
7484
<div class="board-column-header df ac sb">
7585
<div class="ui large label board-label py-2">{{.Title}}</div>
7686
{{if and $.CanWriteProjects (not $.Repository.IsArchived) $.PageIsProjects (ne .ID 0)}}
@@ -105,6 +115,16 @@
105115
<input class="project-board-title" id="new_board_title" name="title" value="{{.Title}}" required>
106116
</div>
107117

118+
<div class="field color-field">
119+
<label for="new_board_color">{{$.i18n.Tr "color"}}</label>
120+
<div class="color picker column">
121+
<input class="color-picker" maxlength="7" placeholder="#c320f6" id="new_board_color" name="color" value="{{.Color}}">
122+
<div class="column precolors">
123+
{{template "repo/issue/label_precolors"}}
124+
</div>
125+
</div>
126+
</div>
127+
108128
<div class="text right actions">
109129
<div class="ui cancel button">{{$.i18n.Tr "settings.cancel"}}</div>
110130
<button data-url="{{$.RepoLink}}/projects/{{$.Project.ID}}/{{.ID}}" class="ui red button">{{$.i18n.Tr "repo.projects.board.edit"}}</button>

‎templates/repo/settings/webhook/slack.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
<input id="icon_url" name="icon_url" value="{{.SlackHook.IconURL}}" placeholder="e.g. https://example.com/img/favicon.png">
2121
</div>
2222
<div class="field">
23-
<label for="color">{{.i18n.Tr "repo.settings.slack_color"}}</label>
23+
<label for="color">{{.i18n.Tr "color"}}</label>
2424
<input id="color" name="color" value="{{.SlackHook.Color}}" placeholder="e.g. #dd4b39, good, warning, danger">
2525
</div>
2626
{{template "repo/settings/webhook/settings" .}}

‎web_src/js/features/projects.js

+47-4
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export default async function initProject() {
2323
if (parseInt($(column).data('sorting')) !== i) {
2424
$.ajax({
2525
url: $(column).data('url'),
26-
data: JSON.stringify({sorting: i}),
26+
data: JSON.stringify({sorting: i, color: rgbToHex($(column).css('backgroundColor'))}),
2727
headers: {
2828
'X-Csrf-Token': csrf,
2929
'X-Remote': true,
@@ -62,10 +62,17 @@ export default async function initProject() {
6262
}
6363

6464
$('.edit-project-board').each(function () {
65-
const projectTitleLabel = $(this).closest('.board-column-header').find('.board-label');
65+
const projectHeader = $(this).closest('.board-column-header');
66+
const projectTitleLabel = projectHeader.find('.board-label');
6667
const projectTitleInput = $(this).find(
6768
'.content > .form > .field > .project-board-title',
6869
);
70+
const projectColorInput = $(this).find('.content > .form > .field #new_board_color');
71+
const boardColumn = $(this).closest('.board-column');
72+
73+
if (boardColumn.css('backgroundColor')) {
74+
setLabelColor(projectHeader, rgbToHex(boardColumn.css('backgroundColor')));
75+
}
6976

7077
$(this)
7178
.find('.content > .form > .actions > .red')
@@ -74,7 +81,7 @@ export default async function initProject() {
7481

7582
$.ajax({
7683
url: $(this).data('url'),
77-
data: JSON.stringify({title: projectTitleInput.val()}),
84+
data: JSON.stringify({title: projectTitleInput.val(), color: projectColorInput.val()}),
7885
headers: {
7986
'X-Csrf-Token': csrf,
8087
'X-Remote': true,
@@ -84,6 +91,10 @@ export default async function initProject() {
8491
}).done(() => {
8592
projectTitleLabel.text(projectTitleInput.val());
8693
projectTitleInput.closest('form').removeClass('dirty');
94+
if (projectColorInput.val()) {
95+
setLabelColor(projectHeader, projectColorInput.val());
96+
}
97+
boardColumn.attr('style', `background: ${projectColorInput.val()}!important`);
8798
$('.ui.modal').modal('hide');
8899
});
89100
});
@@ -127,10 +138,11 @@ export default async function initProject() {
127138
e.preventDefault();
128139

129140
const boardTitle = $('#new_board');
141+
const projectColorInput = $('#new_board_color_picker');
130142

131143
$.ajax({
132144
url: $(this).data('url'),
133-
data: JSON.stringify({title: boardTitle.val()}),
145+
data: JSON.stringify({title: boardTitle.val(), color: projectColorInput.val()}),
134146
headers: {
135147
'X-Csrf-Token': csrf,
136148
'X-Remote': true,
@@ -143,3 +155,34 @@ export default async function initProject() {
143155
});
144156
});
145157
}
158+
159+
function setLabelColor(label, color) {
160+
const red = getRelativeColor(parseInt(color.substr(1, 2), 16));
161+
const green = getRelativeColor(parseInt(color.substr(3, 2), 16));
162+
const blue = getRelativeColor(parseInt(color.substr(5, 2), 16));
163+
const luminance = 0.2126 * red + 0.7152 * green + 0.0722 * blue;
164+
165+
if (luminance > 0.179) {
166+
label.removeClass('light-label').addClass('dark-label');
167+
} else {
168+
label.removeClass('dark-label').addClass('light-label');
169+
}
170+
}
171+
172+
/**
173+
* Inspired by W3C recommandation https://www.w3.org/TR/WCAG20/#relativeluminancedef
174+
*/
175+
function getRelativeColor(color) {
176+
color /= 255;
177+
return color <= 0.03928 ? color / 12.92 : ((color + 0.055) / 1.055) ** 2.4;
178+
}
179+
180+
function rgbToHex(rgb) {
181+
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
182+
return `#${hex(rgb[1])}${hex(rgb[2])}${hex(rgb[3])}`;
183+
}
184+
185+
function hex(x) {
186+
const hexDigits = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];
187+
return Number.isNaN(x) ? '00' : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
188+
}

‎web_src/js/index.js

+15-6
Original file line numberDiff line numberDiff line change
@@ -159,13 +159,8 @@ function initLabelEdit() {
159159
$newLabelPanel.hide();
160160
});
161161

162-
createColorPicker($('.color-picker'));
162+
initColorPicker();
163163

164-
$('.precolors .color').on('click', function () {
165-
const color_hex = $(this).data('color-hex');
166-
$('.color-picker').val(color_hex);
167-
$('.minicolors-swatch-color').css('background-color', color_hex);
168-
});
169164
$('.edit-label-button').on('click', function () {
170165
$('.edit-label .color-picker').minicolors('value', $(this).data('color'));
171166
$('#label-modal-id').val($(this).data('id'));
@@ -182,6 +177,16 @@ function initLabelEdit() {
182177
});
183178
}
184179

180+
function initColorPicker() {
181+
createColorPicker($('.color-picker'));
182+
183+
$('.precolors .color').on('click', function () {
184+
const color_hex = $(this).data('color-hex');
185+
$('.color-picker').val(color_hex);
186+
$('.minicolors-swatch-color').css('background-color', color_hex);
187+
});
188+
}
189+
185190
function updateIssuesMeta(url, action, issueIds, elementId) {
186191
return new Promise(((resolve) => {
187192
$.ajax({
@@ -2753,6 +2758,10 @@ $(document).ready(async () => {
27532758
});
27542759
$('.show-modal.button').on('click', function () {
27552760
$($(this).data('modal')).modal('show');
2761+
const colorPickers = $($(this).data('modal')).find('.color-picker');
2762+
if (colorPickers.length > 0) {
2763+
initColorPicker();
2764+
}
27562765
});
27572766
$('.delete-post.button').on('click', function () {
27582767
const $this = $(this);

‎web_src/less/_base.less

+15
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,8 @@
114114
--color-placeholder-text: #aaa;
115115
--color-editor-line-highlight: var(--color-primary-light-6);
116116
--color-project-board-bg: var(--color-secondary-light-4);
117+
--color-project-board-dark-label: #555555;
118+
--color-project-board-light-label: #a6aab5;
117119
--color-caret: var(--color-text-dark);
118120
--color-reaction-bg: #0000000a;
119121
--color-reaction-active-bg: var(--color-primary-alpha-20);
@@ -2090,3 +2092,16 @@ table th[data-sortt-desc] {
20902092
margin-top: -.5em;
20912093
margin-bottom: -.5em;
20922094
}
2095+
2096+
.precolors {
2097+
padding-left: 0;
2098+
padding-right: 0;
2099+
margin: 3px 10px auto;
2100+
width: 120px;
2101+
2102+
.color {
2103+
float: left;
2104+
width: 15px;
2105+
height: 15px;
2106+
}
2107+
}

‎web_src/less/_repository.less

-13
Original file line numberDiff line numberDiff line change
@@ -2696,19 +2696,6 @@
26962696
width: 15px;
26972697
height: 15px;
26982698
}
2699-
2700-
.precolors {
2701-
padding-left: 0;
2702-
padding-right: 0;
2703-
margin: 3px 10px auto;
2704-
width: 120px;
2705-
2706-
.color {
2707-
float: left;
2708-
width: 15px;
2709-
height: 15px;
2710-
}
2711-
}
27122699
}
27132700
}
27142701

‎web_src/less/features/projects.less

+39
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,21 @@
2323
.board-column-header {
2424
display: flex;
2525
justify-content: space-between;
26+
27+
&.dark-label {
28+
color: var(--color-project-board-dark-label) !important;
29+
30+
.board-label {
31+
color: var(--color-project-board-dark-label) !important;
32+
}
33+
}
34+
&.light-label {
35+
color: var(--color-project-board-light-label) !important;
36+
37+
.board-label {
38+
color: var(--color-project-board-light-label) !important;
39+
}
40+
}
2641
}
2742

2843
.board-label {
@@ -81,3 +96,27 @@
8196
.card-ghost * {
8297
opacity: 0;
8398
}
99+
100+
.color-field .minicolors.minicolors-theme-default {
101+
display: block;
102+
103+
.minicolors-input {
104+
height: 38px;
105+
padding-left: 2rem;
106+
}
107+
108+
.minicolors-swatch {
109+
top: 10px;
110+
}
111+
}
112+
113+
.edit-project-board,
114+
.new-board-modal {
115+
.color.picker.column {
116+
display: flex;
117+
118+
.minicolors {
119+
flex: 1;
120+
}
121+
}
122+
}

0 commit comments

Comments
 (0)
Please sign in to comment.