ref #13 Introducido el picker y los valores en el archivo de configuración. Falta que salga el colorpicker

css/jquery.simplecolorpicker-glyphicons.css

@@ -0,0 +1,13 @@
+.simplecolorpicker.glyphicons span.color[data-selected]:after {
+  /* Taken from glyphicon class. */
+  position: relative;
+  top: 1px;
+  font-family: 'Glyphicons Halflings';
+  line-height: .9;
+  -webkit-font-smoothing: antialiased;
+
+  content: '\e013'; /* Ok/check mark */
+
+  margin-right: 1px;
+  margin-left: 1px;
+}

css/jquery.simplecolorpicker.css

@@ -0,0 +1,87 @@
+/*
+ * Very simple jQuery Color Picker
+ * https://github.com/tkrotoff/jquery-simplecolorpicker
+ *
+ * Copyright (C) 2012-2013 Tanguy Krotoff <tkrotoff@gmail.com>
+ *
+ * Licensed under the MIT license
+ */
+
+/**
+ * Inspired by Bootstrap Twitter.
+ * See https://github.com/twbs/bootstrap/blob/master/less/navbar.less
+ * See https://github.com/twbs/bootstrap/blob/master/less/dropdowns.less
+ */
+
+.simplecolorpicker.picker {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1051; /* Above Bootstrap modal (@zindex-modal = 1050) */
+  display: none;
+  float: left;
+
+  min-width: 160px;
+  max-width: 283px; /* @popover-max-width = 276px + 7 */
+
+  padding: 5px 0 0 5px;
+  margin: 2px 0 0;
+  list-style: none;
+  background-color: #fff; /* @dropdown-bg */
+
+  border: 1px solid #ccc; /* @dropdown-fallback-border */
+  border: 1px solid rgba(0, 0, 0, .15); /* @dropdown-border */
+
+  -webkit-border-radius: 4px; /* @border-radius-base */
+     -moz-border-radius: 4px;
+          border-radius: 4px;
+
+  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
+     -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
+          box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
+
+  -webkit-background-clip: padding-box;
+     -moz-background-clip: padding;
+          background-clip: padding-box;
+}
+
+.simplecolorpicker.inline {
+  display: inline-block;
+  padding: 6px 0;
+}
+
+.simplecolorpicker span {
+  margin: 0 5px 5px 0;
+}
+
+.simplecolorpicker.icon,
+.simplecolorpicker span.color {
+  display: inline-block;
+
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+
+.simplecolorpicker.icon:after,
+.simplecolorpicker span.color:after {
+  content: '\00a0\00a0\00a0\00a0'; /* Spaces */
+}
+
+.simplecolorpicker span.color[data-disabled]:hover {
+  cursor: not-allowed;
+  border: 1px solid transparent;
+}
+
+.simplecolorpicker span.color:hover,
+.simplecolorpicker span.color[data-selected],
+.simplecolorpicker span.color[data-selected]:hover {
+  border: 1px solid #222; /* @gray-dark */
+}
+.simplecolorpicker span.color[data-selected]:after {
+  color: #fff;
+}
+
+/* Vertical separator, replaces optgroup. */
+.simplecolorpicker span.vr {
+  border-left: 1px solid #222; /* @gray-dark */
+}

css/jquery.simplecolorpicker.js

@@ -0,0 +1,235 @@
+/*
+ * Very simple jQuery Color Picker
+ * https://github.com/tkrotoff/jquery-simplecolorpicker
+ *
+ * Copyright (C) 2012-2013 Tanguy Krotoff <tkrotoff@gmail.com>
+ *
+ * Licensed under the MIT license
+ */
+
+(function($) {
+  'use strict';
+
+  /**
+   * Constructor.
+   */
+  var SimpleColorPicker = function(select, options) {
+    this.init('simplecolorpicker', select, options);
+  };
+
+  /**
+   * SimpleColorPicker class.
+   */
+  SimpleColorPicker.prototype = {
+    constructor: SimpleColorPicker,
+
+    init: function(type, select, options) {
+      var self = this;
+
+      self.type = type;
+
+      self.$select = $(select);
+      self.$select.hide();
+
+      self.options = $.extend({}, $.fn.simplecolorpicker.defaults, options);
+
+      self.$colorList = null;
+
+      if (self.options.picker === true) {
+        var selectText = self.$select.find('> option:selected').text();
+        self.$icon = $('<span class="simplecolorpicker icon"'
+                     + ' title="' + selectText + '"'
+                     + ' style="background-color: ' + self.$select.val() + ';"'
+                     + ' role="button" tabindex="0">'
+                     + '</span>').insertAfter(self.$select);
+        self.$icon.on('click.' + self.type, $.proxy(self.showPicker, self));
+
+        self.$picker = $('<span class="simplecolorpicker picker ' + self.options.theme + '"></span>').appendTo(document.body);
+        self.$colorList = self.$picker;
+
+        // Hide picker when clicking outside
+        $(document).on('mousedown.' + self.type, $.proxy(self.hidePicker, self));
+        self.$picker.on('mousedown.' + self.type, $.proxy(self.mousedown, self));
+      } else {
+        self.$inline = $('<span class="simplecolorpicker inline ' + self.options.theme + '"></span>').insertAfter(self.$select);
+        self.$colorList = self.$inline;
+      }
+
+      // Build the list of colors
+      // <span class="color selected" title="Green" style="background-color: #7bd148;" role="button"></span>
+      self.$select.find('> option').each(function() {
+        var $option = $(this);
+        var color = $option.val();
+
+        var isSelected = $option.is(':selected');
+        var isDisabled = $option.is(':disabled');
+
+        var selected = '';
+        if (isSelected === true) {
+          selected = ' data-selected';
+        }
+
+        var disabled = '';
+        if (isDisabled === true) {
+          disabled = ' data-disabled';
+        }
+
+        var title = '';
+        if (isDisabled === false) {
+          title = ' title="' + $option.text() + '"';
+        }
+
+        var role = '';
+        if (isDisabled === false) {
+          role = ' role="button" tabindex="0"';
+        }
+
+        var $colorSpan = $('<span class="color"'
+                         + title
+                         + ' style="background-color: ' + color + ';"'
+                         + ' data-color="' + color + '"'
+                         + selected
+                         + disabled
+                         + role + '>'
+                         + '</span>');
+
+        self.$colorList.append($colorSpan);
+        $colorSpan.on('click.' + self.type, $.proxy(self.colorSpanClicked, self));
+
+        var $next = $option.next();
+        if ($next.is('optgroup') === true) {
+          // Vertical break, like hr
+          self.$colorList.append('<span class="vr"></span>');
+        }
+      });
+    },
+
+    /**
+     * Changes the selected color.
+     *
+     * @param color the hexadecimal color to select, ex: '#fbd75b'
+     */
+    selectColor: function(color) {
+      var self = this;
+
+      var $colorSpan = self.$colorList.find('> span.color').filter(function() {
+        return $(this).data('color').toLowerCase() === color.toLowerCase();
+      });
+
+      if ($colorSpan.length > 0) {
+        self.selectColorSpan($colorSpan);
+      } else {
+        console.error("The given color '" + color + "' could not be found");
+      }
+    },
+
+    showPicker: function() {
+      var pos = this.$icon.offset();
+      this.$picker.css({
+        // Remove some pixels to align the picker icon with the icons inside the dropdown
+        left: pos.left - 6,
+        top: pos.top + this.$icon.outerHeight()
+      });
+
+      this.$picker.show(this.options.pickerDelay);
+    },
+
+    hidePicker: function() {
+      this.$picker.hide(this.options.pickerDelay);
+    },
+
+    /**
+     * Selects the given span inside $colorList.
+     *
+     * The given span becomes the selected one.
+     * It also changes the HTML select value, this will emit the 'change' event.
+     */
+    selectColorSpan: function($colorSpan) {
+      var color = $colorSpan.data('color');
+      var title = $colorSpan.prop('title');
+
+      // Mark this span as the selected one
+      $colorSpan.siblings().removeAttr('data-selected');
+      $colorSpan.attr('data-selected', '');
+
+      if (this.options.picker === true) {
+        this.$icon.css('background-color', color);
+        this.$icon.prop('title', title);
+        this.hidePicker();
+      }
+
+      // Change HTML select value
+      this.$select.val(color);
+    },
+
+    /**
+     * The user clicked on a color inside $colorList.
+     */
+    colorSpanClicked: function(e) {
+      // When a color is clicked, make it the new selected one (unless disabled)
+      if ($(e.target).is('[data-disabled]') === false) {
+        this.selectColorSpan($(e.target));
+        this.$select.trigger('change');
+      }
+    },
+
+    /**
+     * Prevents the mousedown event from "eating" the click event.
+     */
+    mousedown: function(e) {
+      e.stopPropagation();
+      e.preventDefault();
+    },
+
+    destroy: function() {
+      if (this.options.picker === true) {
+        this.$icon.off('.' + this.type);
+        this.$icon.remove();
+        $(document).off('.' + this.type);
+      }
+
+      this.$colorList.off('.' + this.type);
+      this.$colorList.remove();
+
+      this.$select.removeData(this.type);
+      this.$select.show();
+    }
+  };
+
+  /**
+   * Plugin definition.
+   * How to use: $('#id').simplecolorpicker()
+   */
+  $.fn.simplecolorpicker = function(option) {
+    var args = $.makeArray(arguments);
+    args.shift();
+
+    // For HTML element passed to the plugin
+    return this.each(function() {
+      var $this = $(this),
+        data = $this.data('simplecolorpicker'),
+        options = typeof option === 'object' && option;
+      if (data === undefined) {
+        $this.data('simplecolorpicker', (data = new SimpleColorPicker(this, options)));
+      }
+      if (typeof option === 'string') {
+        data[option].apply(data, args);
+      }
+    });
+  };
+
+  /**
+   * Default options.
+   */
+  $.fn.simplecolorpicker.defaults = {
+    // No theme by default
+    theme: '',
+
+    // Show the picker or make it inline
+    picker: false,
+
+    // Animation delay in milliseconds
+    pickerDelay: 0
+  };
+
+})(jQuery);