How to add Colorpicker in Rails Active Admin?

Question

I want to implement this http://www.eyecon.ro/colorpicker/#about or any other color picker in one of the Active Admin form.

Any help is appreaciated.

Thanks, GS

Answer 1

Because you want to use a "raw" library, it will be a little more complicated to do, you should rename the paths of the images that library are using, javascripts and so on... so i will recommend you to use another colorpicker with rails-integration, it will be a lot easier, check this one for example jQuery colorpicker for Rails , to use this follow this steps

first your gemfile

gem 'jquery-minicolors-rails'

second add requiere for js to active_admin and load the minicolors() function

active_admin.js

//= require active_admin/base
//= require jquery
//= require jquery.minicolors
jQuery( function($) {
    $(".colorpicker").minicolors()
});

third add the css to the top of the sass active admin

active_admin.css.scss

/*
*= require jquery.minicolors
*/
// SASS variable overrides must be declared before loading up Active Admin's styles.
//
// To view the variables that Active Admin provides, take a look at
// `app/assets/stylesheets/active_admin/mixins/_variables.css.scss` in the
// Active Admin source.
//
// For example, to change the sidebar width:
// $sidebar-width: 242px;

// Active Admin's got SASS!
@import "active_admin/mixins";
@import "active_admin/base";

// Overriding any non-variable SASS must be done after the fact.
// For example, to change the default status-tag color:
//
//   .status_tag { background: #6090DB; }

and finally in your form something like this

f.input :name, input_html: { class: 'colorpicker' }

you can see that i use the class colopicker to identify the input with the jquery function

you can apply more css to this, but this was enough for me and was the easiest way, regards!

Answer 2

The quickest way to get that working is simply add a class to your input using the input_html options.

f.input :color, input_html: { class: 'colorpicker' }

And then in active_admin.js.coffee , add in the code to turn .colorpicker input fields into color pickers.

If you are going to be making a lot of them, or adding options to them, it might be worth it to make a custom Formtastic input that adds those classes and merges the options that can get picked up by the colorpicker library.

Answer 3

You can use html5 color input. Here is an example:

f.input :color, as: :color

I'm using rails 4.2.0 and ruby 2.2.1 and it works fine for me.