replace jquery-minicolors with coloris

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.3.1",
     "@github/text-expander-element": "2.6.1",
     "@mcaptcha/vanilla-glue": "0.1.0-alpha-3",
+    "@melloware/coloris": "0.23.0",
     "@primer/octicons": "19.8.0",
     "add-asset-webpack-plugin": "2.0.1",
     "ansi_up": "6.0.2",

web_src/css/base.css

@@ -1622,11 +1622,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,203 @@
+/* stylelint-disable scale-unlimited/declaration-strict-value */
+
+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,
+.clr-picker[data-inline="true"] {
+  display: flex;
+}
+
+.clr-picker[data-inline="true"] {
+  position: relative;
+}
+
+.clr-gradient {
+  position: relative;
+  width: 100%;
+  height: 100px;
+  border-radius: 3px 3px 0 0;
+  background-image: linear-gradient(rgba(0,0,0,0), #000), linear-gradient(90deg, #fff, currentcolor);
+  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-image: linear-gradient(to right, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%);
+}
+
+.clr-hue,
+.clr-alpha {
+  position: relative;
+  width: calc(100% - 40px);
+  height: 10px;
+  margin: 10px 20px;
+  border-radius: 4px;
+}
+
+.clr-alpha span {
+  display: block;
+  height: 100%;
+  width: 100%;
+  border-radius: inherit;
+  background-image: linear-gradient(90deg, rgba(0,0,0,0), currentcolor);
+}
+
+.clr-hue input[type="range"],
+.clr-alpha input[type="range"] {
+  position: absolute;
+  width: calc(100% + 32px);
+  height: 16px;
+  left: -16px;
+  top: -4px;
+  margin: 0;
+  background-color: transparent;
+  opacity: 0;
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+.clr-hue div,
+.clr-alpha div {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  left: 0;
+  top: 50%;
+  margin-left: -8px;
+  transform: translateY(-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-alpha div::before {
+  content: "";
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  left: 0;
+  top: 0;
+  border-radius: 50%;
+  background-color: currentcolor;
+}
+
+.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;
+  text-indent: -1000px;
+  white-space: nowrap;
+  overflow: hidden;
+  pointer-events: none;
+  border-radius: 2px;
+}
+
+.clr-field button::after {
+  content: "";
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  border-radius: inherit;
+  background-color: currentcolor;
+}
+
+.clr-alpha,
+.clr-alpha div,
+.clr-field button {
+  background-image: 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);
+  background-position: 0 0, 4px 4px;
+  background-size: 8px 8px;
+}
+
+.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[data-alpha="false"] .clr-alpha {
+  display: none;
+}
+
+.clr-picker .clr-preview,
+.clr-picker .clr-clear,
+.clr-picker .clr-swatches,
+.clr-picker .clr-format,
+.clr-picker .clr-color {
+  display: none;
+}

web_src/css/features/projects.css

@@ -100,25 +100,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 color "button"
+    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,