go-gitea#11160 Add color input in edit project board form

romdum · Aug 6, 2021 · b2c13e0 · b2c13e0
1 parent d7ba3cf
commit b2c13e0
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/templates/repo/projects/view.tmpl b/templates/repo/projects/view.tmpl
@@ -69,7 +69,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 +104,11 @@
 												<input class="project-board-title" id="new_board_title" name="title" value="{{.Title}}" required>
 											</div>
 
+											<div class="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>

diff --git a/web_src/js/features/projects.js b/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');
         });
       });