Kanban colored boards (#16647)

Add a column Color in ProjectBoard and color picker in new / edit project board form.

models/migrations/migrations.go

@@ -344,6 +344,8 @@ var migrations = []Migration{
 	NewMigration("Add Branch Protection Unprotected Files Column", addBranchProtectionUnprotectedFilesColumn),
 	// v195 -> v196
 	NewMigration("Add table commit_status_index", addTableCommitStatusIndex),
+	// v196 -> v197
+	NewMigration("Add Color to ProjectBoard table", addColorColToProjectBoard),
 }
 
 // GetCurrentDBVersion returns the current db version

models/migrations/v196.go

@@ -0,0 +1,22 @@
+// Copyright 2021 The Gitea Authors. All rights reserved.
+// Use of this source code is governed by a MIT-style
+// license that can be found in the LICENSE file.
+
+package migrations
+
+import (
+	"fmt"
+
+	"xorm.io/xorm"
+)
+
+func addColorColToProjectBoard(x *xorm.Engine) error {
+	type ProjectBoard struct {
+		Color string `xorm:"VARCHAR(7)"`
+	}
+
+	if err := x.Sync2(new(ProjectBoard)); err != nil {
+		return fmt.Errorf("Sync2: %v", err)
+	}
+	return nil
+}

models/project_board.go

@@ -5,6 +5,9 @@
 package models
 
 import (
+	"fmt"
+	"regexp"
+
 	"code.gitea.io/gitea/models/db"
 	"code.gitea.io/gitea/modules/setting"
 	"code.gitea.io/gitea/modules/timeutil"
@@ -32,12 +35,16 @@ const (
 	ProjectBoardTypeBugTriage
 )
 
+// BoardColorPattern is a regexp witch can validate BoardColor
+var BoardColorPattern = regexp.MustCompile("^#[0-9a-fA-F]{6}$")
+
 // ProjectBoard is used to represent boards on a project
 type ProjectBoard struct {
 	ID      int64 `xorm:"pk autoincr"`
 	Title   string
 	Default bool   `xorm:"NOT NULL DEFAULT false"` // issues not assigned to a specific board will be assigned to this board
 	Sorting int8   `xorm:"NOT NULL DEFAULT 0"`
+	Color   string `xorm:"VARCHAR(7)"`
 
 	ProjectID int64 `xorm:"INDEX NOT NULL"`
 	CreatorID int64 `xorm:"NOT NULL"`
@@ -100,6 +107,10 @@ func createBoardsForProjectsType(sess *xorm.Session, project *Project) error {
 
 // NewProjectBoard adds a new project board to a given project
 func NewProjectBoard(board *ProjectBoard) error {
+	if len(board.Color) != 0 && !BoardColorPattern.MatchString(board.Color) {
+		return fmt.Errorf("bad color code: %s", board.Color)
+	}
+
 	_, err := db.GetEngine(db.DefaultContext).Insert(board)
 	return err
 }
@@ -178,6 +189,11 @@ func updateProjectBoard(e db.Engine, board *ProjectBoard) error {
 		fieldToUpdate = append(fieldToUpdate, "title")
 	}
 
+	if len(board.Color) != 0 && !BoardColorPattern.MatchString(board.Color) {
+		return fmt.Errorf("bad color code: %s", board.Color)
+	}
+	fieldToUpdate = append(fieldToUpdate, "color")
+
 	_, err := e.ID(board.ID).Cols(fieldToUpdate...).Update(board)
 
 	return err

options/locale/locale_en-US.ini

@@ -96,6 +96,7 @@ error = Error
 error404 = The page you are trying to reach either <strong>does not exist</strong> or <strong>you are not authorized</strong> to view it.
 
 never = Never
+color = Color
 
 [error]
 occurred = An error has occurred
@@ -977,7 +978,6 @@ commit_graph = Commit Graph
 commit_graph.select = Select branches
 commit_graph.hide_pr_refs = Hide Pull Requests
 commit_graph.monochrome = Mono
-commit_graph.color = Color
 blame = Blame
 normal_view = Normal View
 line = line
@@ -1793,7 +1793,6 @@ settings.slack_username = Username
 settings.slack_icon_url = Icon URL
 settings.discord_username = Username
 settings.discord_icon_url = Icon URL
-settings.slack_color = Color
 settings.event_desc = Trigger On:
 settings.event_push_only = Push Events
 settings.event_send_everything = All Events

routers/web/repo/projects.go

@@ -444,6 +444,7 @@ func AddBoardToProjectPost(ctx *context.Context) {
 	if err := models.NewProjectBoard(&models.ProjectBoard{
 		ProjectID: project.ID,
 		Title:     form.Title,
+		Color:     form.Color,
 		CreatorID: ctx.User.ID,
 	}); err != nil {
 		ctx.ServerError("NewProjectBoard", err)
@@ -513,6 +514,8 @@ func EditProjectBoard(ctx *context.Context) {
 		board.Title = form.Title
 	}
 
+	board.Color = form.Color
+
 	if form.Sorting != 0 {
 		board.Sorting = form.Sorting
 	}

services/forms/repo_form.go

@@ -499,6 +499,7 @@ type UserCreateProjectForm struct {
 type EditProjectBoardForm struct {
 	Title   string `binding:"Required;MaxSize(100)"`
 	Sorting int8
+	Color   string `binding:"MaxSize(7)"`
 }
 
 //    _____  .__.__                   __

templates/repo/graph.tmpl

@@ -47,7 +47,7 @@
 						</div>
 					</div>
 					<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>
-					<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>
+					<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>
 				</div>
 			</h2>
 			<div class="ui dividing"></div>

templates/repo/projects/view.tmpl

@@ -11,7 +11,7 @@
 					<a class="ui green button show-modal item" href="{{$.RepoLink}}/issues/new?project={{$.Project.ID}}">{{.i18n.Tr "repo.issues.new"}}</a>
 					<a class="ui green button show-modal item" data-modal="#new-board-item">{{.i18n.Tr "new_project_board"}}</a>
 				{{end}}
-				<div class="ui small modal" id="new-board-item">
+				<div class="ui small modal new-board-modal" id="new-board-item">
 					<div class="header">
 						{{$.i18n.Tr "repo.projects.board.new"}}
 					</div>
@@ -22,6 +22,16 @@
 								<input class="new-board" id="new_board" name="title" required>
 							</div>
 
+							<div class="field color-field">
+								<label for="new_board_color">{{$.i18n.Tr "color"}}</label>
+								<div class="color picker column">
+									<input class="color-picker" maxlength="7" placeholder="#c320f6" id="new_board_color_picker" name="color">
+									<div class="column precolors">
+										{{template "repo/issue/label_precolors"}}
+									</div>
+								</div>
+							</div>
+
 							<div class="text right actions">
 								<div class="ui cancel button">{{$.i18n.Tr "settings.cancel"}}</div>
 								<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 @@
 		<div class="board">
 			{{ range $board := .Boards }}
 
-			<div class="ui segment board-column" data-id="{{.ID}}" data-sorting="{{.Sorting}}" data-url="{{$.RepoLink}}/projects/{{$.Project.ID}}/{{.ID}}">
+			<div class="ui segment board-column" style="background: {{.Color}}!important;" data-id="{{.ID}}" data-sorting="{{.Sorting}}" data-url="{{$.RepoLink}}/projects/{{$.Project.ID}}/{{.ID}}">
 				<div class="board-column-header df ac sb">
 					<div class="ui large label board-label py-2">{{.Title}}</div>
 					{{if and $.CanWriteProjects (not $.Repository.IsArchived) $.PageIsProjects (ne .ID 0)}}
@@ -105,6 +115,16 @@
 												<input class="project-board-title" id="new_board_title" name="title" value="{{.Title}}" required>
 											</div>
 
+											<div class="field color-field">
+												<label for="new_board_color">{{$.i18n.Tr "color"}}</label>
+												<div class="color picker column">
+													<input class="color-picker" maxlength="7" placeholder="#c320f6" id="new_board_color" name="color" value="{{.Color}}">
+													<div class="column precolors">
+														{{template "repo/issue/label_precolors"}}
+													</div>
+												</div>
+											</div>
+
 											<div class="text right actions">
 												<div class="ui cancel button">{{$.i18n.Tr "settings.cancel"}}</div>
 												<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

@@ -20,7 +20,7 @@
 			<input id="icon_url" name="icon_url" value="{{.SlackHook.IconURL}}" placeholder="e.g. https://example.com/img/favicon.png">
 		</div>
 		<div class="field">
-			<label for="color">{{.i18n.Tr "repo.settings.slack_color"}}</label>
+			<label for="color">{{.i18n.Tr "color"}}</label>
 			<input id="color" name="color" value="{{.SlackHook.Color}}" placeholder="e.g. #dd4b39, good, warning, danger">
 		</div>
 		{{template "repo/settings/webhook/settings" .}}

web_src/js/features/projects.js

@@ -23,7 +23,7 @@ export default async function initProject() {
           if (parseInt($(column).data('sorting')) !== i) {
             $.ajax({
               url: $(column).data('url'),
-              data: JSON.stringify({sorting: i}),
+              data: JSON.stringify({sorting: i, color: rgbToHex($(column).css('backgroundColor'))}),
               headers: {
                 'X-Csrf-Token': csrf,
                 'X-Remote': true,
@@ -62,10 +62,17 @@ export default async function initProject() {
   }
 
   $('.edit-project-board').each(function () {
-    const projectTitleLabel = $(this).closest('.board-column-header').find('.board-label');
+    const projectHeader = $(this).closest('.board-column-header');
+    const projectTitleLabel = projectHeader.find('.board-label');
     const projectTitleInput = $(this).find(
       '.content > .form > .field > .project-board-title',
     );
+    const projectColorInput = $(this).find('.content > .form > .field  #new_board_color');
+    const boardColumn = $(this).closest('.board-column');
+
+    if (boardColumn.css('backgroundColor')) {
+      setLabelColor(projectHeader, rgbToHex(boardColumn.css('backgroundColor')));
+    }
 
     $(this)
       .find('.content > .form > .actions > .red')
@@ -74,7 +81,7 @@ export default async function initProject() {
 
         $.ajax({
           url: $(this).data('url'),
-          data: JSON.stringify({title: projectTitleInput.val()}),
+          data: JSON.stringify({title: projectTitleInput.val(), color: projectColorInput.val()}),
           headers: {
             'X-Csrf-Token': csrf,
             'X-Remote': true,
@@ -84,6 +91,10 @@ export default async function initProject() {
         }).done(() => {
           projectTitleLabel.text(projectTitleInput.val());
           projectTitleInput.closest('form').removeClass('dirty');
+          if (projectColorInput.val()) {
+            setLabelColor(projectHeader, projectColorInput.val());
+          }
+          boardColumn.attr('style', `background: ${projectColorInput.val()}!important`);
           $('.ui.modal').modal('hide');
         });
       });
@@ -127,10 +138,11 @@ export default async function initProject() {
     e.preventDefault();
 
     const boardTitle = $('#new_board');
+    const projectColorInput = $('#new_board_color_picker');
 
     $.ajax({
       url: $(this).data('url'),
-      data: JSON.stringify({title: boardTitle.val()}),
+      data: JSON.stringify({title: boardTitle.val(), color: projectColorInput.val()}),
       headers: {
         'X-Csrf-Token': csrf,
         'X-Remote': true,
@@ -143,3 +155,34 @@ export default async function initProject() {
     });
   });
 }
+
+function setLabelColor(label, color) {
+  const red = getRelativeColor(parseInt(color.substr(1, 2), 16));
+  const green = getRelativeColor(parseInt(color.substr(3, 2), 16));
+  const blue = getRelativeColor(parseInt(color.substr(5, 2), 16));
+  const luminance = 0.2126 * red + 0.7152 * green + 0.0722 * blue;
+
+  if (luminance > 0.179) {
+    label.removeClass('light-label').addClass('dark-label');
+  } else {
+    label.removeClass('dark-label').addClass('light-label');
+  }
+}
+
+/**
+ * Inspired by W3C recommandation https://www.w3.org/TR/WCAG20/#relativeluminancedef
+ */
+function getRelativeColor(color) {
+  color /= 255;
+  return color <= 0.03928 ? color / 12.92 : ((color + 0.055) / 1.055) ** 2.4;
+}
+
+function rgbToHex(rgb) {
+  rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+  return `#${hex(rgb[1])}${hex(rgb[2])}${hex(rgb[3])}`;
+}
+
+function hex(x) {
+  const hexDigits = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];
+  return Number.isNaN(x) ? '00' : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
+}

web_src/js/index.js

@@ -159,13 +159,8 @@ function initLabelEdit() {
     $newLabelPanel.hide();
   });
 
-  createColorPicker($('.color-picker'));
+  initColorPicker();
 
-  $('.precolors .color').on('click', function () {
-    const color_hex = $(this).data('color-hex');
-    $('.color-picker').val(color_hex);
-    $('.minicolors-swatch-color').css('background-color', color_hex);
-  });
   $('.edit-label-button').on('click', function () {
     $('.edit-label .color-picker').minicolors('value', $(this).data('color'));
     $('#label-modal-id').val($(this).data('id'));
@@ -182,6 +177,16 @@ function initLabelEdit() {
   });
 }
 
+function initColorPicker() {
+  createColorPicker($('.color-picker'));
+
+  $('.precolors .color').on('click', function () {
+    const color_hex = $(this).data('color-hex');
+    $('.color-picker').val(color_hex);
+    $('.minicolors-swatch-color').css('background-color', color_hex);
+  });
+}
+
 function updateIssuesMeta(url, action, issueIds, elementId) {
   return new Promise(((resolve) => {
     $.ajax({
@@ -2753,6 +2758,10 @@ $(document).ready(async () => {
   });
   $('.show-modal.button').on('click', function () {
     $($(this).data('modal')).modal('show');
+    const colorPickers = $($(this).data('modal')).find('.color-picker');
+    if (colorPickers.length > 0) {
+      initColorPicker();
+    }
   });
   $('.delete-post.button').on('click', function () {
     const $this = $(this);

web_src/less/_base.less

@@ -114,6 +114,8 @@
   --color-placeholder-text: #aaa;
   --color-editor-line-highlight: var(--color-primary-light-6);
   --color-project-board-bg: var(--color-secondary-light-4);
+  --color-project-board-dark-label: #555555;
+  --color-project-board-light-label: #a6aab5;
   --color-caret: var(--color-text-dark);
   --color-reaction-bg: #0000000a;
   --color-reaction-active-bg: var(--color-primary-alpha-20);
@@ -2090,3 +2092,16 @@ table th[data-sortt-desc] {
   margin-top: -.5em;
   margin-bottom: -.5em;
 }
+
+.precolors {
+  padding-left: 0;
+  padding-right: 0;
+  margin: 3px 10px auto;
+  width: 120px;
+
+  .color {
+    float: left;
+    width: 15px;
+    height: 15px;
+  }
+}

web_src/less/_repository.less

@@ -2696,19 +2696,6 @@
       width: 15px;
       height: 15px;
     }
-
-    .precolors {
-      padding-left: 0;
-      padding-right: 0;
-      margin: 3px 10px auto;
-      width: 120px;
-
-      .color {
-        float: left;
-        width: 15px;
-        height: 15px;
-      }
-    }
   }
 }
 

web_src/less/features/projects.less

@@ -23,6 +23,21 @@
 .board-column-header {
   display: flex;
   justify-content: space-between;
+
+  &.dark-label {
+    color: var(--color-project-board-dark-label) !important;
+
+    .board-label {
+      color: var(--color-project-board-dark-label) !important;
+    }
+  }
+  &.light-label {
+    color: var(--color-project-board-light-label) !important;
+
+    .board-label {
+      color: var(--color-project-board-light-label) !important;
+    }
+  }
 }
 
 .board-label {
@@ -81,3 +96,27 @@
 .card-ghost * {
   opacity: 0;
 }
+
+.color-field .minicolors.minicolors-theme-default {
+  display: block;
+
+  .minicolors-input {
+    height: 38px;
+    padding-left: 2rem;
+  }
+
+  .minicolors-swatch {
+    top: 10px;
+  }
+}
+
+.edit-project-board,
+.new-board-modal {
+  .color.picker.column {
+    display: flex;
+
+    .minicolors {
+      flex: 1;
+    }
+  }
+}