fix: update project-column-issue-count’s color rather than the whole column

when edit color && fix bugs caused by eb14787

Author: BaiZe1998

templates/projects/view.tmpl

@@ -64,13 +64,15 @@
 <div id="project-board">
 	<div class="board {{if .CanWriteProjects}}sortable{{end}}">
 		{{range .Columns}}
-			<div class="ui segment project-column" style="background: {{.Color}} !important;" data-id="{{.ID}}" data-sorting="{{.Sorting}}" data-url="{{$.Link}}/{{.ID}}">
+			<div class="ui segment project-column" data-id="{{.ID}}" data-sorting="{{.Sorting}}" data-url="{{$.Link}}/{{.ID}}">
 				<div class="project-column-header">
 					<div class="ui large label project-column-title gt-py-2">
-						<div class="ui small circular grey label project-column-issue-count">
+						<div class="ui small circular grey label project-column-issue-count" style="background: {{.Color}} !important;">
 							{{.NumIssues ctx}}
 						</div>
-						{{.Title}}
+						<div class="ui project-column-issue-title">
+							{{.Title}}
+						</div>
 					</div>
 					{{if and $canWriteProject (ne .ID 0)}}
 						<div class="ui dropdown jump item">

web_src/css/themes/theme-gitea-light.css

@@ -204,7 +204,7 @@
   --color-hover: #00000014;
   --color-active: #0000001b;
   --color-menu: #fafafa;
-  --color-card: #fafafa;
+  --color-card: #ffffff;
   --color-markup-table-row: #00000008;
   --color-markup-code-block: #00000010;
   --color-button: #fafafa;

web_src/js/features/repo-projects.js

@@ -1,6 +1,4 @@
 import $ from 'jquery';
-import {useLightTextOnBackground} from '../utils/color.js';
-import tinycolor from 'tinycolor2';
 import {createSortable} from '../modules/sortable.js';
 
 const {csrfToken} = window.config;
@@ -109,14 +107,10 @@ export function initRepoProject() {
 
   $('.edit-project-column-modal').each(function () {
     const projectHeader = $(this).closest('.project-column-header');
-    const projectTitleLabel = projectHeader.find('.project-column-title');
+    const projectTitleLabel = projectHeader.find('.project-column-issue-title');
     const projectTitleInput = $(this).find('.project-column-title-input');
     const projectColorInput = $(this).find('#new_project_column_color');
-    const boardColumn = $(this).closest('.project-column');
-
-    if (boardColumn.css('backgroundColor')) {
-      setLabelColor(projectHeader, rgbToHex(boardColumn.css('backgroundColor')));
-    }
+    const projectColumnIssueCount = $(this).closest('.project-column').find('.project-column-issue-count');
 
     $(this).find('.edit-project-column-button').on('click', function (e) {
       e.preventDefault();
@@ -132,10 +126,7 @@ export function initRepoProject() {
       }).done(() => {
         projectTitleLabel.text(projectTitleInput.val());
         projectTitleInput.closest('form').removeClass('dirty');
-        if (projectColorInput.val()) {
-          setLabelColor(projectHeader, projectColorInput.val());
-        }
-        boardColumn.attr('style', `background: ${projectColorInput.val()}!important`);
+        projectColumnIssueCount.attr('style', `background: ${projectColorInput.val()}!important`);
         $('.ui.modal').modal('hide');
       });
     });
@@ -209,15 +200,6 @@ export function initRepoProject() {
   });
 }
 
-function setLabelColor(label, color) {
-  const {r, g, b} = tinycolor(color).toRgb();
-  if (useLightTextOnBackground(r, g, b)) {
-    label.removeClass('dark-label').addClass('light-label');
-  } else {
-    label.removeClass('light-label').addClass('dark-label');
-  }
-}
-
 function rgbToHex(rgb) {
   rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+).*\)$/);
   return `#${hex(rgb[1])}${hex(rgb[2])}${hex(rgb[3])}`;