Kanban colored boards (#16647)

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

5 files changed, 116 insertions, 23 deletions

diff --git a/web_src/js/features/projects.js b/web_src/js/features/projects.js
index 0d619cab70..c02b81d1c6 100644
--- a/web_src/js/features/projects.js
+++ b/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];
+}
diff --git a/web_src/js/index.js b/web_src/js/index.js
index a092452e6b..5c1510fb89 100644
--- a/web_src/js/index.js
+++ b/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);
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 4702cb281e..4e2782a4c8 100644
--- a/web_src/less/_base.less
+++ b/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;
+  }
+}
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index b52045dae1..1e572ffa7e 100644
--- a/web_src/less/_repository.less
+++ b/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;
-      }
-    }
   }
 }
 
diff --git a/web_src/less/features/projects.less b/web_src/less/features/projects.less
index f9d97a2086..99722b6cc5 100644
--- a/web_src/less/features/projects.less
+++ b/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;
+    }
+  }
+}