Kanban colored boards

models/migrations/migrations.go

@@ -331,6 +331,8 @@ var migrations = []Migration{
 	NewMigration("Unwrap ldap.Sources", unwrapLDAPSourceCfg),
 	// v190 -> v191
 	NewMigration("Add agit flow pull request support", addAgitFlowPullRequest),
+	// v191 -> v192
+	NewMigration("Add Color to ProjectBoard table", addColorColToProjectBoard),
 }
 
 // GetCurrentDBVersion returns the current db version

models/migrations/v191.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
+	}
+
+	if err := x.Sync2(new(ProjectBoard)); err != nil {
+		return fmt.Errorf("Sync2: %v", err)
+	}
+	return nil
+}

models/project_board.go

@@ -37,6 +37,7 @@ type ProjectBoard struct {
 	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
 
 	ProjectID int64 `xorm:"INDEX NOT NULL"`
 	CreatorID int64 `xorm:"NOT NULL"`
@@ -173,6 +174,10 @@ func updateProjectBoard(e Engine, board *ProjectBoard) error {
 		fieldToUpdate = append(fieldToUpdate, "title")
 	}
 
+	if board.Color != "" {
+		fieldToUpdate = append(fieldToUpdate, "color")
+	}
+
 	_, err := e.ID(board.ID).Cols(fieldToUpdate...).Update(board)
 
 	return err

options/locale/locale_en-US.ini

@@ -1089,6 +1089,7 @@ projects.board.set_default = "Set Default"
 projects.board.set_default_desc = "Set this board as default for uncategorized issues and pulls"
 projects.board.delete = "Delete Board"
 projects.board.deletion_desc = "Deleting a project board moves all related issues to 'Uncategorized'. Continue?"
+projects.board.edit_color = "Color"
 projects.open = Open
 projects.close = Close
 

routers/web/repo/projects.go

@@ -442,6 +442,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)
@@ -511,6 +512,10 @@ func EditProjectBoard(ctx *context.Context) {
 		board.Title = form.Title
 	}
 
+	if form.Color != "" {
+		board.Color = form.Color
+	}
+
 	if form.Sorting != 0 {
 		board.Sorting = form.Sorting
 	}

services/forms/repo_form.go

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

templates/repo/projects/view.tmpl

@@ -21,6 +21,11 @@
 								<input class="new-board" id="new_board" name="title" required>
 							</div>
 
+							<div class="field color-field">
+								<label for="new_board_color">{{$.i18n.Tr "repo.projects.board.edit_color"}}</label>
+								<input class="color-picker" maxlength="7" placeholder="#c320f6" id="new_board_color_picker" name="color">
+							</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>
@@ -69,7 +74,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)}}
@@ -104,6 +109,11 @@
 												<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 "repo.projects.board.edit_color"}}</label>
+												<input class="color-picker" maxlength="7" placeholder="#c320f6" id="new_board_color" name="color" value="{{.Color}}">
+											</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>

web_src/js/features/projects.js

@@ -66,6 +66,8 @@ export default async function initProject() {
     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');
 
     $(this)
       .find('.content > .form > .actions > .red')
@@ -74,7 +76,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 +86,7 @@ export default async function initProject() {
         }).done(() => {
           projectTitleLabel.text(projectTitleInput.val());
           projectTitleInput.closest('form').removeClass('dirty');
+          boardColumn.attr('style', `background: ${projectColorInput.val()}!important`);
           $('.ui.modal').modal('hide');
         });
       });
@@ -127,10 +130,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,

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({
@@ -2729,6 +2734,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/features/projects.less

@@ -81,3 +81,16 @@
 .card-ghost * {
   opacity: 0;
 }
+
+.color-field .minicolors.minicolors-theme-default {
+  display: block;
+
+  .minicolors-input {
+    height: 38px;
+    padding-left: 2rem;
+  }
+
+  .minicolors-swatch {
+    top: 10px;
+  }
+}