Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

replace jquery-minicolors with coloris #30055

Merged
merged 16 commits into from
Mar 29, 2024
Merged
Show file tree
Hide file tree
Changes from 13 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion .dockerignore
Original file line number Diff line number Diff line change
Expand Up @@ -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/*
Expand Down
1 change: 0 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -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/*
Expand Down
2 changes: 1 addition & 1 deletion Makefile
Original file line number Diff line number Diff line change
Expand Up @@ -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))
Expand Down
15 changes: 6 additions & 9 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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.9.0",
"add-asset-webpack-plugin": "2.0.1",
"ansi_up": "6.0.2",
Expand Down
5 changes: 0 additions & 5 deletions web_src/css/base.css
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down
159 changes: 159 additions & 0 deletions web_src/css/features/colorpicker.css
Original file line number Diff line number Diff line change
@@ -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. */
delvh marked this conversation as resolved.
Show resolved Hide resolved

input.color-picker {
silverwind marked this conversation as resolved.
Show resolved Hide resolved
padding-top: 8px !important;
padding-bottom: 8px !important;
padding-left: 32px !important;
}

.clr-picker {
wxiaoguang marked this conversation as resolved.
Show resolved Hide resolved
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;
}
18 changes: 0 additions & 18 deletions web_src/css/features/projects.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
13 changes: 0 additions & 13 deletions web_src/css/repo.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
35 changes: 27 additions & 8 deletions web_src/js/features/colorpicker.js
Original file line number Diff line number Diff line change
@@ -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
delvh marked this conversation as resolved.
Show resolved Hide resolved
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}));
});
}
}
}
6 changes: 1 addition & 5 deletions web_src/js/features/common-global.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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,
Expand Down
16 changes: 0 additions & 16 deletions web_src/js/features/comp/ColorPicker.js

This file was deleted.

Loading
Loading