replace jquery-minicolors with coloris

.dockerignore

@@ -78,7 +78,6 @@ cpu.out
 /public/assets/css
 /public/assets/fonts
 /public/assets/img/avatar
-/public/assets/img/webpack
 /vendor
 /web_src/fomantic/node_modules
 /web_src/fomantic/build/*

.gitignore

@@ -77,7 +77,6 @@ cpu.out
 /public/assets/css
 /public/assets/fonts
 /public/assets/licenses.txt
-/public/assets/img/webpack
 /vendor
 /web_src/fomantic/node_modules
 /web_src/fomantic/build/*

Makefile

@@ -119,7 +119,7 @@ FOMANTIC_WORK_DIR := web_src/fomantic
 WEBPACK_SOURCES := $(shell find web_src/js web_src/css -type f)
 WEBPACK_CONFIGS := webpack.config.js tailwind.config.js
 WEBPACK_DEST := public/assets/js/index.js public/assets/css/index.css
-WEBPACK_DEST_ENTRIES := public/assets/js public/assets/css public/assets/fonts public/assets/img/webpack
+WEBPACK_DEST_ENTRIES := public/assets/js public/assets/css public/assets/fonts
 
 BINDATA_DEST := modules/public/bindata.go modules/options/bindata.go modules/templates/bindata.go
 BINDATA_HASH := $(addsuffix .hash,$(BINDATA_DEST))

package.json

@@ -8,11 +8,11 @@
     "@citation-js/plugin-bibtex": "0.7.9",
     "@citation-js/plugin-csl": "0.7.9",
     "@citation-js/plugin-software-formats": "0.6.1",
-    "@claviska/jquery-minicolors": "2.3.6",
     "@github/markdown-toolbar-element": "2.2.3",
     "@github/relative-time-element": "4.4.0",
     "@github/text-expander-element": "2.6.1",
     "@mcaptcha/vanilla-glue": "0.1.0-alpha-3",
+    "@melloware/coloris": "0.23.0",
     "@primer/octicons": "19.9.0",
     "add-asset-webpack-plugin": "2.0.1",
     "ansi_up": "6.0.2",

web_src/css/base.css

@@ -1436,11 +1436,6 @@ table th[data-sortt-desc] .svg {
   vertical-align: -0.15em;
 }
 
-/* for the jquery.minicolors plugin */
-.minicolors-panel {
-  background: var(--color-secondary-dark-1) !important;
-}
-
 .ui.tabular.menu {
   border-color: var(--color-secondary);
 }

web_src/css/features/colorpicker.css

@@ -0,0 +1,159 @@
+/* This is a stripped-down version of coloris's CSS tailored to our needs. It does only include
+   opaqua colors, and if more features like opacity are needed, the CSS needs to be extended
+   based on upstream: https://github.com/mdbassit/Coloris/blob/main/src/coloris.css. */
+
+input.color-picker {
+  padding-top: 8px !important;
+  padding-bottom: 8px !important;
+  padding-left: 32px !important;
+}
+
+.clr-picker {
+  display: none;
+  flex-wrap: wrap;
+  position: absolute;
+  width: 200px;
+  z-index: 1002; /* above .ui.modal which has 1001 */
+  border-radius: var(--border-radius);
+  background-color: var(--color-menu);
+  justify-content: flex-end;
+  direction: ltr;
+  box-shadow: 0 5px 20px var(--color-shadow);
+  user-select: none;
+}
+
+.clr-picker.clr-open {
+  display: flex;
+}
+
+.clr-gradient {
+  position: relative;
+  width: 100%;
+  height: 100px;
+  border-radius: 3px 3px 0 0;
+  background: linear-gradient(rgba(0,0,0,0), #000), linear-gradient(90deg, #fff, currentcolor); /* stylelint-disable-line scale-unlimited/declaration-strict-value */
+  cursor: pointer;
+}
+
+.clr-marker {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  margin: -6px 0 0 -6px;
+  border: 1px solid var(--color-white);
+  border-radius: 50%;
+  background-color: currentcolor;
+  cursor: pointer;
+}
+
+.clr-picker input[type="range"]::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 16px;
+}
+
+.clr-picker input[type="range"]::-webkit-slider-thumb {
+  width: 16px;
+  height: 16px;
+  -webkit-appearance: none;
+}
+
+.clr-picker input[type="range"]::-moz-range-track {
+  width: 100%;
+  height: 16px;
+  border: 0;
+}
+
+.clr-picker input[type="range"]::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  border: 0;
+}
+
+.clr-hue {
+  background: linear-gradient(to right, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); /* stylelint-disable-line scale-unlimited/declaration-strict-value */
+  position: relative;
+  width: calc(100% - 40px);
+  height: 10px;
+  margin: 10px 20px;
+  border-radius: 4px;
+}
+
+.clr-hue input[type="range"] {
+  position: absolute;
+  width: calc(100% + 32px);
+  margin: 0;
+  background-color: transparent;
+  opacity: 0;
+  cursor: pointer;
+  appearance: none;
+}
+
+.clr-hue div {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  left: 0;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  border: 2px solid var(--color-white);
+  border-radius: 50%;
+  background-color: currentcolor;
+  box-shadow: 0 0 1px var(--color-shadow);
+  pointer-events: none;
+}
+
+.clr-field {
+  flex: 1;
+  position: relative;
+  color: transparent;
+}
+
+.clr-field button {
+  position: absolute;
+  aspect-ratio: 1;
+  height: 16px;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  color: inherit;
+  pointer-events: none;
+  border-radius: 2px;
+  background: repeating-linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%, #aaa), repeating-linear-gradient(45deg, #aaa 25%, #fff 25%, #fff 75%, #aaa 75%, #aaa); /* stylelint-disable-line scale-unlimited/declaration-strict-value */
+  background-position: 0 0, 4px 4px;
+  background-size: 8px 8px;
+}
+
+.clr-field button::after {
+  content: "";
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  border-radius: inherit;
+  background-color: currentcolor;
+}
+
+.clr-marker:focus {
+  outline: none;
+}
+
+.clr-keyboard-nav .clr-marker:focus,
+.clr-keyboard-nav .clr-hue input:focus + div,
+.clr-keyboard-nav .clr-alpha input:focus + div {
+  outline: none;
+  box-shadow: 0 0 2px 2px var(--color-white);
+}
+
+.clr-picker .clr-preview,
+.clr-picker .clr-clear,
+.clr-picker .clr-swatches,
+.clr-picker .clr-format,
+.clr-picker .clr-alpha,
+.clr-picker .clr-color {
+  display: none;
+}

web_src/css/features/projects.css

@@ -103,25 +103,7 @@
   opacity: 0;
 }
 
-.color-field .minicolors.minicolors-theme-default {
-  display: block;
-}
-
-.color-field .minicolors.minicolors-theme-default .minicolors-input {
-  height: 38px;
-  padding-left: 2rem;
-}
-
-.color-field .minicolors.minicolors-theme-default .minicolors-swatch {
-  top: 10px;
-}
-
 .edit-project-column-modal .color.picker.column,
 .new-project-column-modal .color.picker.column {
   display: flex;
 }
-
-.edit-project-column-modal .color.picker.column .minicolors,
-.new-project-column-modal .color.picker.column .minicolors {
-  flex: 1;
-}

web_src/css/repo.css

@@ -2265,19 +2265,6 @@
   display: flex;
 }
 
-.edit-label.modal .form .color.picker.column .minicolors,
-.new-label.modal .form .color.picker.column .minicolors {
-  flex: 1;
-}
-
-.edit-label.modal .form .minicolors-swatch.minicolors-sprite,
-.new-label.modal .form .minicolors-swatch.minicolors-sprite {
-  top: 10px;
-  left: 10px;
-  width: 15px;
-  height: 15px;
-}
-
 .tab-size-1 {
   tab-size: 1 !important;
   -moz-tab-size: 1 !important;

web_src/js/features/colorpicker.js

@@ -1,12 +1,31 @@
-import $ from 'jquery';
+export async function initColorPickers(selector = 'input.color-picker', opts = {}) {
+  const inputEls = document.querySelectorAll(selector);
+  if (!inputEls.length) return;
 
-export async function createColorPicker(els) {
-  if (!els.length) return;
-
-  await Promise.all([
-    import(/* webpackChunkName: "minicolors" */'@claviska/jquery-minicolors'),
-    import(/* webpackChunkName: "minicolors" */'@claviska/jquery-minicolors/jquery.minicolors.css'),
+  const [{coloris, init}] = await Promise.all([
+    import(/* webpackChunkName: "colorpicker" */'@melloware/coloris'),
+    import(/* webpackChunkName: "colorpicker" */'../../css/features/colorpicker.css'),
   ]);
 
-  return $(els).minicolors();
+  init();
+  coloris({
+    el: selector,
+    alpha: false,
+    focusInput: true,
+    selectInput: false,
+    ...opts,
+  });
+
+  for (const inputEl of inputEls) {
+    const parent = inputEl.closest('.color.picker');
+    // prevent tabbing on the color preview `button` inside the input
+    parent.querySelector('button').tabIndex = -1;
+    // init precolors
+    for (const el of parent.querySelectorAll('.precolors .color')) {
+      el.addEventListener('click', (e) => {
+        inputEl.value = e.target.getAttribute('data-color-hex');
+        inputEl.dispatchEvent(new Event('input', {bubbles: true}));
+      });
+    }
+  }
 }

web_src/js/features/common-global.js

@@ -2,7 +2,6 @@ import $ from 'jquery';
 import '../vendor/jquery.are-you-sure.js';
 import {clippie} from 'clippie';
 import {createDropzone} from './dropzone.js';
-import {initCompColorPicker} from './comp/ColorPicker.js';
 import {showGlobalErrorMessage} from '../bootstrap.js';
 import {handleGlobalEnterQuickSubmit} from './comp/QuickSubmit.js';
 import {svg} from '../svg.js';
@@ -379,10 +378,7 @@ function initGlobalShowModal() {
         $attrTarget.text(attrib.value); // FIXME: it should be more strict here, only handle div/span/p
       }
     }
-    const $colorPickers = $modal.find('.color-picker');
-    if ($colorPickers.length > 0) {
-      initCompColorPicker(); // FIXME: this might cause duplicate init
-    }
+
     $modal.modal('setting', {
       onApprove: () => {
         // "form-fetch-action" can handle network errors gracefully,