From 3f12ac5d633cf138ad9fa025f73a502664580788 Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 25 Mar 2024 00:08:51 +0100 Subject: [PATCH 01/12] replace jquery-minicolors with coloris --- package-lock.json | 15 +- package.json | 2 +- web_src/css/base.css | 5 - web_src/css/features/colorpicker.css | 229 ++++++++++++++++++++++++ web_src/css/features/projects.css | 18 -- web_src/css/repo.css | 13 -- web_src/js/features/colorpicker.js | 35 +++- web_src/js/features/common-global.js | 6 +- web_src/js/features/comp/ColorPicker.js | 16 -- web_src/js/features/comp/LabelEdit.js | 16 +- web_src/js/index.js | 2 + 11 files changed, 279 insertions(+), 78 deletions(-) create mode 100644 web_src/css/features/colorpicker.css delete mode 100644 web_src/js/features/comp/ColorPicker.js diff --git a/package-lock.json b/package-lock.json index ef1164cac3def..f5ed0e3d0a083 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,11 +9,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", @@ -394,14 +394,6 @@ "node": ">=14.0.0" } }, - "node_modules/@claviska/jquery-minicolors": { - "version": "2.3.6", - "resolved": "https://registry.npmjs.org/@claviska/jquery-minicolors/-/jquery-minicolors-2.3.6.tgz", - "integrity": "sha512-8Ro6D4GCrmOl41+6w4NFhEOpx8vjxwVRI69bulXsFDt49uVRKhLU5TnzEV7AmOJrylkVq+ugnYNMiGHBieeKUQ==", - "peerDependencies": { - "jquery": ">= 1.7.x" - } - }, "node_modules/@csstools/css-parser-algorithms": { "version": "2.6.1", "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.6.1.tgz", @@ -1287,6 +1279,11 @@ "@mcaptcha/core-glue": "^0.1.0-alpha-5" } }, + "node_modules/@melloware/coloris": { + "version": "0.23.0", + "resolved": "https://registry.npmjs.org/@melloware/coloris/-/coloris-0.23.0.tgz", + "integrity": "sha512-VGIjI9+IQwg6BHjIE10yl0K2ARYz5bsjn6BgFEs1y1ErPAQymgdoxwVcSVL4Ai5t9OVs8xaCB7JKHqFu2N96Ow==" + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", diff --git a/package.json b/package.json index ced10f9c997c8..198590d1e5bff 100644 --- a/package.json +++ b/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", diff --git a/web_src/css/base.css b/web_src/css/base.css index 3f46e4cd1aed8..bde269c43d500 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -1702,11 +1702,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); } diff --git a/web_src/css/features/colorpicker.css b/web_src/css/features/colorpicker.css new file mode 100644 index 0000000000000..3f074b1fc82b6 --- /dev/null +++ b/web_src/css/features/colorpicker.css @@ -0,0 +1,229 @@ +/* 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; + 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-format { + display: none; + order: 1; + width: calc(100% - 40px); + margin: 0 20px 20px; +} + +input.clr-color { + order: 1; + width: calc(100% - 80px); + height: 32px; + margin: 15px 20px 20px auto; + padding: 0 10px; + border: 1px solid var(--color-secondary); + border-radius: 16px; + color: var(--color-text); + background-color: var(--color-input-background); + font-family: sans-serif; + font-size: 14px; + text-align: center; + box-shadow: none; +} + +input.clr-color:focus { + outline: none; + border: 1px solid var(--color-primary); +} + +.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-color-value { + display: none; +} diff --git a/web_src/css/features/projects.css b/web_src/css/features/projects.css index f85430a2a80ed..0e761fa1b4fd3 100644 --- a/web_src/css/features/projects.css +++ b/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; -} diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 2014dfc3708c3..0c3c068a39e31 100644 --- a/web_src/css/repo.css +++ b/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; diff --git a/web_src/js/features/colorpicker.js b/web_src/js/features/colorpicker.js index df0353376d756..942776178a4be 100644 --- a/web_src/js/features/colorpicker.js +++ b/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})); + }); + } + } } diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js index e2ce01eb49d6e..5cc76ef05a786 100644 --- a/web_src/js/features/common-global.js +++ b/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, diff --git a/web_src/js/features/comp/ColorPicker.js b/web_src/js/features/comp/ColorPicker.js deleted file mode 100644 index d7e703880377a..0000000000000 --- a/web_src/js/features/comp/ColorPicker.js +++ /dev/null @@ -1,16 +0,0 @@ -import $ from 'jquery'; -import {createColorPicker} from '../colorpicker.js'; - -export function initCompColorPicker() { - (async () => { - await createColorPicker(document.querySelectorAll('.color-picker')); - - for (const el of document.querySelectorAll('.precolors .color')) { - el.addEventListener('click', (e) => { - const color = e.target.getAttribute('data-color-hex'); - const parent = e.target.closest('.color.picker'); - $(parent.querySelector('.color-picker')).minicolors('value', color); - }); - } - })(); -} diff --git a/web_src/js/features/comp/LabelEdit.js b/web_src/js/features/comp/LabelEdit.js index c5992fa355ca1..75c611f1b9ec5 100644 --- a/web_src/js/features/comp/LabelEdit.js +++ b/web_src/js/features/comp/LabelEdit.js @@ -1,5 +1,4 @@ import $ from 'jquery'; -import {initCompColorPicker} from './ColorPicker.js'; function isExclusiveScopeName(name) { return /.*[^/]\/[^/].*/.test(name); @@ -28,13 +27,17 @@ function updateExclusiveLabelEdit(form) { export function initCompLabelEdit(selector) { if (!$(selector).length) return; - initCompColorPicker(); // Create label $('.new-label.button').on('click', () => { updateExclusiveLabelEdit('.new-label'); $('.new-label.modal').modal({ onApprove() { + const form = document.querySelector('.new-label.form'); + if (!form.checkValidity()) { + form.reportValidity(); + return false; + } $('.new-label.form').trigger('submit'); }, }).modal('show'); @@ -60,10 +63,17 @@ export function initCompLabelEdit(selector) { updateExclusiveLabelEdit('.edit-label'); $('.edit-label .label-desc-input').val(this.getAttribute('data-description')); - $('.edit-label .color-picker').minicolors('value', this.getAttribute('data-color')); + + $('.edit-label .color-picker')[0].value = this.getAttribute('data-color'); + $('.edit-label .color-picker')[0].dispatchEvent(new Event('input', {bubbles: true})); $('.edit-label.modal').modal({ onApprove() { + const form = document.querySelector('.edit-label.form'); + if (!form.checkValidity()) { + form.reportValidity(); + return false; + } $('.edit-label.form').trigger('submit'); }, }).modal('show'); diff --git a/web_src/js/index.js b/web_src/js/index.js index abf0d469d18ed..fb29de0368c7e 100644 --- a/web_src/js/index.js +++ b/web_src/js/index.js @@ -85,6 +85,7 @@ import {initRepoRecentCommits} from './features/recent-commits.js'; import {initRepoDiffCommitBranchesAndTags} from './features/repo-diff-commit.js'; import {initDirAuto} from './modules/dirauto.js'; import {initRepositorySearch} from './features/repo-search.js'; +import {initColorPickers} from './features/colorpicker.js'; // Init Gitea's Fomantic settings initGiteaFomantic(); @@ -186,4 +187,5 @@ onDomReady(() => { initRepoDiffView(); initPdfViewer(); initScopedAccessTokenCategories(); + initColorPickers(); }); From 52d805f727234b4b4aef710b069cd691029ab92b Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 25 Mar 2024 00:33:10 +0100 Subject: [PATCH 02/12] css cleanup --- web_src/css/features/colorpicker.css | 31 ++-------------------------- 1 file changed, 2 insertions(+), 29 deletions(-) diff --git a/web_src/css/features/colorpicker.css b/web_src/css/features/colorpicker.css index 3f074b1fc82b6..9cdee5ffc221b 100644 --- a/web_src/css/features/colorpicker.css +++ b/web_src/css/features/colorpicker.css @@ -134,34 +134,6 @@ input.color-picker { background-color: currentColor; } -.clr-format { - display: none; - order: 1; - width: calc(100% - 40px); - margin: 0 20px 20px; -} - -input.clr-color { - order: 1; - width: calc(100% - 80px); - height: 32px; - margin: 15px 20px 20px auto; - padding: 0 10px; - border: 1px solid var(--color-secondary); - border-radius: 16px; - color: var(--color-text); - background-color: var(--color-input-background); - font-family: sans-serif; - font-size: 14px; - text-align: center; - box-shadow: none; -} - -input.clr-color:focus { - outline: none; - border: 1px solid var(--color-primary); -} - .clr-field { flex: 1; position: relative; @@ -224,6 +196,7 @@ input.clr-color:focus { .clr-picker .clr-preview, .clr-picker .clr-clear, .clr-picker .clr-swatches, -.clr-picker #clr-color-value { +.clr-picker .clr-format, +.clr-picker .clr-color { display: none; } From c4ee30cde2b425e7da3901a68069bee677020ed1 Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 25 Mar 2024 00:57:21 +0100 Subject: [PATCH 03/12] Update web_src/css/features/colorpicker.css --- web_src/css/features/colorpicker.css | 1 + 1 file changed, 1 insertion(+) diff --git a/web_src/css/features/colorpicker.css b/web_src/css/features/colorpicker.css index 9cdee5ffc221b..2dc3f886e29ce 100644 --- a/web_src/css/features/colorpicker.css +++ b/web_src/css/features/colorpicker.css @@ -1,4 +1,5 @@ /* stylelint-disable scale-unlimited/declaration-strict-value */ + input.color-picker { padding-top: 8px !important; padding-bottom: 8px !important; From 98014d3aa5e7bfdaf017ab061a88cc1a6e874858 Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 25 Mar 2024 01:07:12 +0100 Subject: [PATCH 04/12] lowercase --- web_src/css/features/colorpicker.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/web_src/css/features/colorpicker.css b/web_src/css/features/colorpicker.css index 2dc3f886e29ce..7fff0a42aba82 100644 --- a/web_src/css/features/colorpicker.css +++ b/web_src/css/features/colorpicker.css @@ -34,7 +34,7 @@ input.color-picker { 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); + background-image: linear-gradient(rgba(0,0,0,0), #000), linear-gradient(90deg, #fff, currentcolor); cursor: pointer; } @@ -45,7 +45,7 @@ input.color-picker { margin: -6px 0 0 -6px; border: 1px solid var(--color-white); border-radius: 50%; - background-color: currentColor; + background-color: currentcolor; cursor: pointer; } @@ -90,7 +90,7 @@ input.color-picker { height: 100%; width: 100%; border-radius: inherit; - background-image: linear-gradient(90deg, rgba(0,0,0,0), currentColor); + background-image: linear-gradient(90deg, rgba(0,0,0,0), currentcolor); } .clr-hue input[type="range"], @@ -119,7 +119,7 @@ input.color-picker { transform: translateY(-50%); border: 2px solid var(--color-white); border-radius: 50%; - background-color: currentColor; + background-color: currentcolor; box-shadow: 0 0 1px var(--color-shadow); pointer-events: none; } @@ -132,7 +132,7 @@ input.color-picker { left: 0; top: 0; border-radius: 50%; - background-color: currentColor; + background-color: currentcolor; } .clr-field { @@ -168,7 +168,7 @@ input.color-picker { left: 0; top: 0; border-radius: inherit; - background-color: currentColor; + background-color: currentcolor; } .clr-alpha, From 0e28fa212c3d051d547f595a675eb7a991adb746 Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 25 Mar 2024 01:08:38 +0100 Subject: [PATCH 05/12] comment z-index --- web_src/css/features/colorpicker.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/css/features/colorpicker.css b/web_src/css/features/colorpicker.css index 7fff0a42aba82..ca77359e96fc0 100644 --- a/web_src/css/features/colorpicker.css +++ b/web_src/css/features/colorpicker.css @@ -11,7 +11,7 @@ input.color-picker { flex-wrap: wrap; position: absolute; width: 200px; - z-index: 1002; + z-index: 1002; /* above .ui.modal which has 1001 */ border-radius: var(--border-radius); background-color: var(--color-menu); justify-content: flex-end; From 22f7b91be1dba8a98da3e0b118752124ea3dccf2 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 26 Mar 2024 20:52:36 +0100 Subject: [PATCH 06/12] Update web_src/js/features/colorpicker.js --- web_src/js/features/colorpicker.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/features/colorpicker.js b/web_src/js/features/colorpicker.js index 942776178a4be..9794dac0f6e55 100644 --- a/web_src/js/features/colorpicker.js +++ b/web_src/js/features/colorpicker.js @@ -19,7 +19,7 @@ export async function initColorPickers(selector = 'input.color-picker', opts = { for (const inputEl of inputEls) { const parent = inputEl.closest('.color.picker'); // prevent tabbing on color "button" - parent.querySelector('button').tabIndex = '-1'; + parent.querySelector('button').tabIndex = -1; // init precolors for (const el of parent.querySelectorAll('.precolors .color')) { el.addEventListener('click', (e) => { From 28dcdca4a7dd9cd2937ed8b045a8898b2158e8e7 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 26 Mar 2024 21:10:42 +0100 Subject: [PATCH 07/12] strip down css to essentials, add comment --- web_src/css/features/colorpicker.css | 46 ++++++---------------------- 1 file changed, 9 insertions(+), 37 deletions(-) diff --git a/web_src/css/features/colorpicker.css b/web_src/css/features/colorpicker.css index ca77359e96fc0..e0822730be762 100644 --- a/web_src/css/features/colorpicker.css +++ b/web_src/css/features/colorpicker.css @@ -1,3 +1,7 @@ +/* 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. + /* stylelint-disable scale-unlimited/declaration-strict-value */ input.color-picker { @@ -20,15 +24,10 @@ input.color-picker { user-select: none; } -.clr-picker.clr-open, -.clr-picker[data-inline="true"] { +.clr-picker.clr-open { display: flex; } -.clr-picker[data-inline="true"] { - position: relative; -} - .clr-gradient { position: relative; width: 100%; @@ -76,8 +75,7 @@ input.color-picker { 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 { +.clr-hue { position: relative; width: calc(100% - 40px); height: 10px; @@ -85,16 +83,7 @@ input.color-picker { 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"] { +.clr-hue input[type="range"] { position: absolute; width: calc(100% + 32px); height: 16px; @@ -108,8 +97,7 @@ input.color-picker { -webkit-appearance: none; } -.clr-hue div, -.clr-alpha div { +.clr-hue div { position: absolute; width: 16px; height: 16px; @@ -124,17 +112,6 @@ input.color-picker { 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; @@ -171,8 +148,6 @@ input.color-picker { 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; @@ -190,14 +165,11 @@ input.color-picker { 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-alpha, .clr-picker .clr-color { display: none; } From 46ba737b1d08066d7e410868890c19c4270c4910 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 26 Mar 2024 21:15:38 +0100 Subject: [PATCH 08/12] tweak comment --- web_src/js/features/colorpicker.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/features/colorpicker.js b/web_src/js/features/colorpicker.js index 9794dac0f6e55..b93e584dbc0b1 100644 --- a/web_src/js/features/colorpicker.js +++ b/web_src/js/features/colorpicker.js @@ -18,7 +18,7 @@ export async function initColorPickers(selector = 'input.color-picker', opts = { for (const inputEl of inputEls) { const parent = inputEl.closest('.color.picker'); - // prevent tabbing on color "button" + // 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')) { From 0e2d09efb3e33ced0af262a379624ba3ebe21a79 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 26 Mar 2024 21:17:44 +0100 Subject: [PATCH 09/12] remove public/assets/img/webpack --- .dockerignore | 1 - .gitignore | 1 - Makefile | 2 +- webpack.config.js | 7 ------- 4 files changed, 1 insertion(+), 10 deletions(-) diff --git a/.dockerignore b/.dockerignore index 5cec84c9a3ac0..71315360824d2 100644 --- a/.dockerignore +++ b/.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/* diff --git a/.gitignore b/.gitignore index abf9565cff3b8..501fef7dcf888 100644 --- a/.gitignore +++ b/.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/* diff --git a/Makefile b/Makefile index a7e175e76b479..3af1592da71dd 100644 --- a/Makefile +++ b/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)) diff --git a/webpack.config.js b/webpack.config.js index 0b0e7403e87ab..fdf80a5313f82 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -192,13 +192,6 @@ export default { filename: 'fonts/[name].[contenthash:8][ext]', }, }, - { - test: /\.png$/i, - type: 'asset/resource', - generator: { - filename: 'img/webpack/[name].[contenthash:8][ext]', - }, - }, ], }, plugins: [ From b0a58d7048a2aa10e795fe2184784d1cf8ca8d06 Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 27 Mar 2024 00:53:46 +0100 Subject: [PATCH 10/12] fix lint --- web_src/css/features/colorpicker.css | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/web_src/css/features/colorpicker.css b/web_src/css/features/colorpicker.css index e0822730be762..18da43e87f5d7 100644 --- a/web_src/css/features/colorpicker.css +++ b/web_src/css/features/colorpicker.css @@ -73,9 +73,6 @@ input.color-picker { .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 { position: relative; width: calc(100% - 40px); height: 10px; @@ -134,6 +131,9 @@ input.color-picker { overflow: hidden; pointer-events: none; border-radius: 2px; + 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-field button::after { @@ -148,12 +148,6 @@ input.color-picker { background-color: currentcolor; } -.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; } From 015f2be559f053dbda6513232c54c6c376411a59 Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 27 Mar 2024 01:03:27 +0100 Subject: [PATCH 11/12] more css cleanup, remove negative margins --- web_src/css/features/colorpicker.css | 20 +++++--------------- 1 file changed, 5 insertions(+), 15 deletions(-) diff --git a/web_src/css/features/colorpicker.css b/web_src/css/features/colorpicker.css index 18da43e87f5d7..de21cb04836c5 100644 --- a/web_src/css/features/colorpicker.css +++ b/web_src/css/features/colorpicker.css @@ -1,8 +1,6 @@ /* 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. - -/* stylelint-disable scale-unlimited/declaration-strict-value */ + based on upstream: https://github.com/mdbassit/Coloris/blob/main/src/coloris.css. */ input.color-picker { padding-top: 8px !important; @@ -33,7 +31,7 @@ input.color-picker { 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); + background: linear-gradient(rgba(0,0,0,0), #000), linear-gradient(90deg, #fff, currentcolor); /* stylelint-disable-line scale-unlimited/declaration-strict-value */ cursor: pointer; } @@ -72,7 +70,7 @@ input.color-picker { } .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%); + 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; @@ -83,15 +81,11 @@ input.color-picker { .clr-hue 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 { @@ -100,8 +94,7 @@ input.color-picker { height: 16px; left: 0; top: 50%; - margin-left: -8px; - transform: translateY(-50%); + transform: translate(-50%, -50%); border: 2px solid var(--color-white); border-radius: 50%; background-color: currentcolor; @@ -126,12 +119,9 @@ input.color-picker { padding: 0; border: 0; color: inherit; - text-indent: -1000px; - white-space: nowrap; - overflow: hidden; pointer-events: none; border-radius: 2px; - 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: 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; } From 48a1845f334582ab4d1017bb0bbdba8ad6cc3d68 Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 28 Mar 2024 22:54:17 +0100 Subject: [PATCH 12/12] add js-color-picker-input class, many cleanups --- templates/projects/view.tmpl | 8 ++++---- templates/repo/issue/labels/edit_delete_label.tmpl | 4 ++-- templates/repo/issue/labels/label_new.tmpl | 4 ++-- web_src/css/features/colorpicker.css | 7 ++++++- web_src/css/features/projects.css | 5 ----- web_src/css/repo.css | 5 ----- web_src/js/features/colorpicker.js | 4 ++-- web_src/js/features/comp/LabelEdit.js | 5 +++-- 8 files changed, 19 insertions(+), 23 deletions(-) diff --git a/templates/projects/view.tmpl b/templates/projects/view.tmpl index b45174b086a7c..33dd758c79ee1 100644 --- a/templates/projects/view.tmpl +++ b/templates/projects/view.tmpl @@ -42,8 +42,8 @@
-
- +
+ {{template "repo/issue/label_precolors"}}
@@ -114,8 +114,8 @@
-
- +
+ {{template "repo/issue/label_precolors"}}
diff --git a/templates/repo/issue/labels/edit_delete_label.tmpl b/templates/repo/issue/labels/edit_delete_label.tmpl index 98e0f47020325..fcf69217ea7e9 100644 --- a/templates/repo/issue/labels/edit_delete_label.tmpl +++ b/templates/repo/issue/labels/edit_delete_label.tmpl @@ -52,8 +52,8 @@
-
- +
+ {{template "repo/issue/label_precolors"}}
diff --git a/templates/repo/issue/labels/label_new.tmpl b/templates/repo/issue/labels/label_new.tmpl index 2b2b2336c4338..32fd8e76d7cc5 100644 --- a/templates/repo/issue/labels/label_new.tmpl +++ b/templates/repo/issue/labels/label_new.tmpl @@ -27,8 +27,8 @@
-
- +
+ {{template "repo/issue/label_precolors"}}
diff --git a/web_src/css/features/colorpicker.css b/web_src/css/features/colorpicker.css index de21cb04836c5..0c651cfeb3b3e 100644 --- a/web_src/css/features/colorpicker.css +++ b/web_src/css/features/colorpicker.css @@ -2,7 +2,12 @@ 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 { +.js-color-picker-input { + display: flex; + flex-wrap: wrap; +} + +.js-color-picker-input input { padding-top: 8px !important; padding-bottom: 8px !important; padding-left: 32px !important; diff --git a/web_src/css/features/projects.css b/web_src/css/features/projects.css index a2d7661782c58..cec5e6fc6433e 100644 --- a/web_src/css/features/projects.css +++ b/web_src/css/features/projects.css @@ -102,8 +102,3 @@ .card-ghost * { opacity: 0; } - -.edit-project-column-modal .color.picker.column, -.new-project-column-modal .color.picker.column { - display: flex; -} diff --git a/web_src/css/repo.css b/web_src/css/repo.css index c181c4f7bfbc7..780093fb7fc55 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -2260,11 +2260,6 @@ padding-top: 15px; } -.edit-label.modal .form .color.picker.column, -.new-label.modal .form .color.picker.column { - display: flex; -} - .tab-size-1 { tab-size: 1 !important; -moz-tab-size: 1 !important; diff --git a/web_src/js/features/colorpicker.js b/web_src/js/features/colorpicker.js index b93e584dbc0b1..f342598e664a5 100644 --- a/web_src/js/features/colorpicker.js +++ b/web_src/js/features/colorpicker.js @@ -1,4 +1,4 @@ -export async function initColorPickers(selector = 'input.color-picker', opts = {}) { +export async function initColorPickers(selector = '.js-color-picker-input input', opts = {}) { const inputEls = document.querySelectorAll(selector); if (!inputEls.length) return; @@ -17,7 +17,7 @@ export async function initColorPickers(selector = 'input.color-picker', opts = { }); for (const inputEl of inputEls) { - const parent = inputEl.closest('.color.picker'); + const parent = inputEl.closest('.js-color-picker-input'); // prevent tabbing on the color preview `button` inside the input parent.querySelector('button').tabIndex = -1; // init precolors diff --git a/web_src/js/features/comp/LabelEdit.js b/web_src/js/features/comp/LabelEdit.js index 0ba0ccc968ea8..2cc75cc6b0831 100644 --- a/web_src/js/features/comp/LabelEdit.js +++ b/web_src/js/features/comp/LabelEdit.js @@ -64,8 +64,9 @@ export function initCompLabelEdit(selector) { $('.edit-label .label-desc-input').val(this.getAttribute('data-description')); - $('.edit-label .color-picker')[0].value = this.getAttribute('data-color'); - $('.edit-label .color-picker')[0].dispatchEvent(new Event('input', {bubbles: true})); + const colorInput = document.querySelector('.edit-label .js-color-picker-input input'); + colorInput.value = this.getAttribute('data-color'); + colorInput.dispatchEvent(new Event('input', {bubbles: true})); $('.edit-label.modal').modal({ onApprove() {