How to include Jira's color picker in an app?

Jira Development Jira Server
#1

Jira Core and Server have a color picker of some kind. It can be seen when editing the look and feel of Jira.
How do I include that color picker in my own Jira app?

#2

Hi, George.

Have you solved your problem? I ran into her and am looking for a solution.

#3

Hi Olek,
nope, never got a useful response or spec about the internal Jira color picker.
Brgds
George

#4

Hi, George.
In case this question is still relevant, I will leave a little information.
I realized that for the design of the only page that has ColorPicker (and this is the “system / Look and feel” page), the dependency “com.atlassian.jira.lookandfeel:edit-look-and-feel” and, accordingly, the file “edit-look-and-feel.js”.

Nonetheless, this file starts something and a Color table is built around my color picker (the same as on the “system / Look and feel” page). I didn’t have the patience to figure out how to display a color picker without a look from Jira.

I decided to use third-party software from here http://jscolor.com/examples/

Time will tell how the decision was right. If this option does not satisfy the conditions, then already I will try to figure out the code from Jira.

I hope I could at least help a little.

#5

Hi Olek,
thanks for the link. Nice one.
I ended up doing something similar but in the end could live without it.
But good to know for future projects.
Brgds
George

#6

Hi, George.
For future projects some additions:

I chose another library: https://bgrins.github.io/spectrum/#why
Unlike the previous library, here you can insert your own values using a script, and these values will immediately be displayed in color.

I added spectrum.css and spectrum.js to my project.

Created markup.
For example we need only input:

<input id="myColor" class="spectrum">

Than i changed input value from jQuery:

var setColor = function (color) {
        $("#myColor").attr("value", color);
};

and drow all inputs like colorPicker:

var drawColorPickers = function () {
	$(".spectrum").spectrum({
		preferredFormat: "hex",
		showInput: true,
	});
};

I hope you or other people need it.