jscolor [suggest]

[jonlepage]

a little more intuitive suggestion to work with colors.
http://jscolor.com/examples/
The native color windows box are hard to work. :)

[bigtimebuddy]

I agree that the native color window boxes are annoying. This is a good suggestion, I'll see what I can do.

[jonlepage]

@bigtimebuddy
if you are also interested.
since you are already using boostrape libs.
using slider can be also nice , maybe?
http://seiyria.com/bootstrap-slider/
provided you find the right limit (range) for each.

[bigtimebuddy]

The problem is getting it to play well with the React-like framework I’m using since it’s not jquery. It’s mostlynusing bootstrap from the css styles

[jonlepage]

if you want use jscolor
it not explain in guide, but for your listener it will be.
hope this can save your time :)

        // listener when color change
        obj.onFineChange = function(){
            refreshYourHtml();
        };

[jonlepage]

i also don't use jquery on my side. (i know nothing about React!)
Only bootstrap

         //attache a new input color module to html tint
        const jsColor = new jscolor(document.getElementById(!light&&"tint"||"color"));
            jsColor.keyName = !light&&"tint"||"color";
            jsColor.zIndex = 9999999;
        Cage_DataEditor.jsColor = jsColor;

also little example for html code , i dont know if this will help you.
this it example of the fallOff slider from pixi-light with bootstrape

                <tr><!--falloff -->
                    <td>
                        <div class="funkyradio funkyradio-success">
                            <input type="checkbox" name="checkbox" id="_falloff"/>
                            <label for="_falloff" style="text-indent:0px;margin-right:0px;">.</label>
                        </div>
                    </td>
                    <td>[0.75,3,20]</td>
                    <td id="_setDark-BoxDisplay" style="display: block;">
                        <font color="#d2bc97">falloff attenuation coefficients controler</font><br><br>
                        <div class="form-control">
                            <b>kc</b> <input value=0.75 data-slider-min=0.01 data-slider-max=2 data-slider-step=0.01 data-slider-value=0.75 data-slider-id="RC" id="kc" data-slider-handle="triangle" type="text" class="span2"  /><br>
                            <b>kl</b> <input value=3 data-slider-min=0.01 data-slider-max=20 data-slider-step=0.01 data-slider-value=3 data-slider-id="GC" id="kl" data-slider-handle="triangle" type="text" class="span2"/><br>
                            <b>kq</b> <input value=20 data-slider-min=0.01 data-slider-max=50 data-slider-step=0.01 data-slider-value=20 data-slider-id="BC" id="kq" data-slider-handle="triangle" type="text" class="span2"/>
                        </div> 
                    </td>

and css, please dont punish me lol, i know i use transition css

#RGB {
	height: 20px;
  background: rgb(128, 128, 128);
}
#RC .slider-selection {
  background: #FF8282;
  border: 1px solid rgb(32, 32, 32);
  transition: all 1s; /* transition when the mouse over */
}
#RC .slider-handle {
	background: red;
}
#GC .slider-selection {
  background: #428041;
  border: 1px solid rgb(32, 32, 32);
  transition: all 1s; /* transition when the mouse over */
}
#GC .slider-handle {
	background: green;
}
#BC .slider-selection {
  background: #8283FF;
  border: 1px solid rgb(32, 32, 32);
  transition: all 1s; /* transition when the mouse over */
}
#BC .slider-handle {
  border-bottom-color: blue;
}
#R, #G, #B {
	width: 300px;
}
#BC {
	transition: all 1s; /* transition when the mouse over */
}
#GC {
	transition: all 1s; /* transition when the mouse over */
}
#RC {
	transition: all 1s; /* transition when the mouse over */
}
#BC:hover { 
  border: 2px solid #8283FF;
  border-radius: 50%;
}
#GC:hover { 
  border: 2px solid #428041;
  border-radius: 50%;
}
#RC:hover { 
  border: 2px solid #FF8282;
  border-radius: 50%;
}

for bootstrap button i also use a another hack
they are superfluous code for design
https://bootsnipp.com/snippets/featured/funky-radio-buttons

[jonlepage]

@bigtimebuddy
still one faith makes you what your want with this idea but I took a minute to give you an idea.
I do not know if you like the concept, but in the eventuality off your want to add the color module or slider.

Add a global options section for your tools for manage sliders and color !?.
One to switch the colors in the mode HVS mode || HSV mode
One to add multiplicator (expodentiel) value step for all sliders example for work with monster value.

[jonlepage]

@bigtimebuddy
After taking the time to try, I definitely do not understand anything about the Mithril .

It's too complicated for me, I'm able to implement the basics, but impossible for me to find a hack way for that portion.

[themoonrat]

Just had this request come through from our artists too! Mainly wishing there was an easy way to just paste in a known hex value and it work, rather than having to use the native ui