Add color wheel for picking label colors #2224

We could use the native color picker: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color

Sure, that'd suit my needs perfectly!

If you have Tampermonkey installed, I have a userscript that'll do this - https://github.com/Mottie/GitHub-userscripts/wiki/GitHub-label-color-picker

This is extremely easy:

for (const field of select.all('.js-new-label-color-input')) {
    field.type = 'color';
}

Anyone who wants it, just needs to create a feature called label-color-picker and add documentation for it. Follow contribute.md

I really like @fregante's solution mentioned above, it's quick and neat.

But with that you are still restricted on how your browser/OS handles color inputs, and on limitations of text preview for the color being selected, which is solved using @Mottie's script.

If we do not need preview (which is very unlikely IMHO), we can easily go with @fregante's solution. But as I see it, I prefer the text input over the native color input mainly because of the aforementioned reasons (no real-time preview of color).

I chose to use a third party color picker because it saved color swatches, which makes it easier to duplicate label colors across repositories. I haven't tried lately, but I don't think GitHub supports this sort of label duplication.

I guess the alternative is to duplicate the field and bind them together (text field updates color field and viceversa). Something like:

for (const field of select.all('.js-new-label-color-input')) {
    field.after(<input type="color" className={field.className} style={{width:'2em'}} />);
}
delegate('.js-new-label-color-input', 'input', event => {
    event.delegateTarget.nextElementSibling.value = event.delegateTarget.value;
});
delegate('.js-new-label-color-input + input', 'input', event => {
    event.delegateTarget.previousElementSibling.value = event.delegateTarget.value;
});

However it would look like:

<img width="193" alt="Screenshot 2019-09-14 at 22 45 38" src="https://user-images.githubusercontent.com/1402241/64910511-65117600-d741-11e9-9e57-47f7e79f8097.png">

I've started work on this!

You can view my code on my label-color-picker branch.

@jerone has funded $5.00 to this issue.

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.

I've made a PR here #2591 with the enhancement. But I closed it by accident, since it is my first PR on a big project and didn't know what is the workflow to submit a PR. I will appreciate some help on reopenning the PR, apparently I don't have the necesary privileges. Or maybe I'll have to upload another branch, I don't know.

The feature I've built has some little bugs that are commented on the file with FIXME tags: The most important is that if you press the "save button" to save the new color for your label, if you press the edit button again on the same label, the color palette will disappear. You will have to refresh the whole page again to see the color palette if you will like to edit the same label color again.

The PR can’t be reopened because the branch was deleted. Maybe try to restore the branch and then reopen.

Also include a screenshot in your PR discussion to see how it looks first

Thanks, I'll take a look

I think the userscript will have to do, we don't have to include every feature.

@sindresorhus has cancelled @jerone's funding for this issue.(Cancelled amount: $5.00) See it on IssueHunt