Tag colors (client)

docs-core/src/main/resources/db/update/dbupdate-002-0.sql

@@ -1,3 +1,3 @@
-alter table T_TAG add column TAG_COLOR_C varchar(6) not null;
-update T_TAG set TAG_COLOR_C = '3a87ad';
+alter table T_TAG add column TAG_COLOR_C varchar(7) not null;
+update T_TAG set TAG_COLOR_C = '#3a87ad';
 update T_CONFIG set CFG_VALUE_C='2' where CFG_ID_C='DB_VERSION';

docs-parent/TODO

@@ -1,2 +1 @@
 - Users administration (client)
-- Tag color (client)

docs-web-common/src/main/java/com/sismics/rest/util/ValidationUtil.java

@@ -63,7 +63,7 @@ public class ValidationUtil {
             throw new ClientException("ValidationError", MessageFormat.format("{0} must be more than {1} characters", name, lengthMin));
         }
         if (lengthMax != null && s.length() > lengthMax) {
-            throw new ClientException("ValidationError", MessageFormat.format("{0} must be more than {1} characters", name, lengthMax));
+            throw new ClientException("ValidationError", MessageFormat.format("{0} must be less than {1} characters", name, lengthMax));
         }
         return s;
     }
@@ -94,6 +94,19 @@ public class ValidationUtil {
         return validateLength(s, name, 1, null, false);
     }
     
+    /**
+     * Checks if the string is a hexadecimal color.
+     * 
+     * @param s String to validate
+     * @param name Name of the parameter
+     * @param nullable True if the string can be empty or null
+     * @throws JSONException
+     */
+    public static void validateHexColor(String s, String name, boolean nullable) throws JSONException {
+        // TODO Do a real check
+        ValidationUtil.validateLength(s, "name", 7, 7, nullable);
+    }
+    
     /**
      * Checks if the string is an email.
      * 

docs-web/src/main/java/com/sismics/docs/rest/resource/TagResource.java

@@ -110,7 +110,7 @@ public class TagResource extends BaseResource {
         
         // Validate input data
         name = ValidationUtil.validateLength(name, "name", 1, 36, false);
-        color = ValidationUtil.validateLength(color, "color", 6, 6, false);
+        ValidationUtil.validateHexColor(color, "color", true);
         
         // Get the tag
         TagDao tagDao = new TagDao();
@@ -151,7 +151,7 @@ public class TagResource extends BaseResource {
         
         // Validate input data
         name = ValidationUtil.validateLength(name, "name", 1, 36, true);
-        color = ValidationUtil.validateLength(color, "color", 6, 6, true);
+        ValidationUtil.validateHexColor(color, "color", true);
         
         // Get the tag
         TagDao tagDao = new TagDao();

docs-web/src/main/webapp/index.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="shortcut icon" href="favicon.png" />
     <link rel="stylesheet" href="style/bootstrap.css" type="text/css" />
+    <link rel="stylesheet" href="style/colorpicker.css" type="text/css" />
     <link rel="stylesheet/less" href="style/main.less" type="text/css" />
     <script>
       less = {
@@ -20,6 +21,7 @@
     <script src="lib/jquery.ui.js" type="text/javascript"></script>
     <script src="lib/less.js" type="text/javascript"></script>
     <script src="lib/underscore.js" type="text/javascript"></script>
+    <script src="lib/colorpicker.js" type="text/javascript"></script>
     <script src="lib/angular/angular.js" type="text/javascript"></script>
     <script src="lib/angular/angular-sanitize.js" type="text/javascript"></script>
     <script src="lib/angular.ui-router.js" type="text/javascript"></script>
@@ -27,6 +29,7 @@
     <script src="lib/angular.ui-utils.js" type="text/javascript"></script>
     <script src="lib/angular.ui-sortable.js" type="text/javascript"></script>
     <script src="lib/angular.restangular.js" type="text/javascript"></script>
+    <script src="lib/angular.colorpicker.js" type="text/javascript"></script>
     <script src="js/app.js" type="text/javascript"></script>
     <script src="js/controller/Main.js" type="text/javascript"></script>
     <script src="js/controller/Document.js" type="text/javascript"></script>

docs-web/src/main/webapp/js/app.js

@@ -3,7 +3,7 @@
 /**
  * Trackino application.
  */
-var App = angular.module('docs', ['ui.state', 'ui.bootstrap', 'ui.route', 'ui.keypress', 'ui.validate', 'ui.sortable', 'restangular', 'ngSanitize'])
+var App = angular.module('docs', ['ui.state', 'ui.bootstrap', 'ui.route', 'ui.keypress', 'ui.validate', 'ui.sortable', 'restangular', 'ngSanitize', 'colorpicker.module'])
 
 /**
  * Configuring modules.

docs-web/src/main/webapp/js/controller/Tag.js

@@ -4,6 +4,8 @@
  * Tag controller.
  */
 App.controller('Tag', function($scope, $dialog, $state, Tag, Restangular) {
+  $scope.tag = { name: '', color: '#3a87ad' };
+  
   // Retrieve tags
   Tag.tags().then(function(data) {
     $scope.tags = data.tags;
@@ -27,11 +29,10 @@ App.controller('Tag', function($scope, $dialog, $state, Tag, Restangular) {
    * Add a tag.
    */
   $scope.addTag = function() {
-    var name = $scope.tag.name;
-    $scope.tag.name = '';
     // TODO Check if the tag don't already exists
-    Restangular.one('tag').put({ name: name }).then(function(data) {
-      $scope.tags.push({ id: data.id, name: name });
+    Restangular.one('tag').put($scope.tag).then(function(data) {
+      $scope.tags.push({ id: data.id, name: $scope.tag.name, color: $scope.tag.color });
+      $scope.tag = { name: '', color: '#3a87ad' };
     });
   };
   
@@ -57,7 +58,7 @@ App.controller('Tag', function($scope, $dialog, $state, Tag, Restangular) {
   };
   
   /**
-   * Update a tag name.
+   * Update a tag.
    */
   $scope.updateTag = function(tag) {
     Restangular.one('tag', tag.id).post('', tag);

docs-web/src/main/webapp/lib/angular.colorpicker.js

@@ -0,0 +1,97 @@
+'use strict';
+
+angular.module('colorpicker.module', [])
+  .factory('helper', function () {
+    return {
+      prepareValues: function(format) {
+        var thisFormat = 'hex';
+        if (format) {
+          thisFormat = format;
+        }
+        return {
+          name: thisFormat,
+          transform: 'to' + (thisFormat === 'hex' ? thisFormat.charAt(0).toUpperCase() + thisFormat.slice(1) : thisFormat.length > 3 ? thisFormat.toUpperCase().slice(0, -1) : thisFormat.toUpperCase())
+        };
+      },
+      updateView: function(element, value) {
+        if (!value) {
+          value = '';
+        }
+        element.val(value);
+        element.data('color', value);
+        element.data('colorpicker').update();
+      }
+    }
+  })
+  .directive('colorpicker', ['helper', function(helper) {
+    return {
+      require: '?ngModel',
+      restrict: 'A',
+      link: function(scope, element, attrs, ngModel) {
+
+        var thisFormat = helper.prepareValues(attrs.colorpicker);
+
+        element.colorpicker({format: thisFormat.name});
+
+        element.on('$destroy', function() {
+          element.data('colorpicker').picker.remove();
+        });
+
+        if(!ngModel) return;
+
+        element.colorpicker().on('changeColor', function(event) {
+          element.val(element.data('colorpicker').format(event.color[thisFormat.transform]()));
+          scope.$apply(ngModel.$setViewValue(element.data('colorpicker').format(event.color[thisFormat.transform]())));
+        });
+        
+        element.colorpicker().on('hide', function(){
+          scope.$apply(attrs.onHide);
+        });
+
+        element.colorpicker().on('show', function(){
+          scope.$apply(attrs.onShow);
+        });
+
+        ngModel.$render = function() {
+          helper.updateView(element, ngModel.$viewValue) ;
+        }
+      }
+    };
+  }])
+  .directive('colorpicker', ['helper', function(helper) {
+    return {
+      require: '?ngModel',
+      restrict: 'E',
+      replace: true,
+      transclude: false,
+      scope: {
+        componentPicker: '=ngModel',
+        inputName: '@inputName',
+        inputClass: '@inputClass',
+        colorFormat: '@colorFormat'
+      },
+      template: '<div class="input-append color" data-color="rgb(0, 0, 0)" data-color-format="">' +
+        '<input type="text" class="{{ inputClass }}" name="{{ inputName }}" ng-model="componentPicker" value="" />' +
+        '<span class="add-on"><i style="background-color: {{componentPicker}}"></i></span>' +
+        '</div>',
+
+      link: function(scope, element, attrs, ngModel) {
+
+        var thisFormat = helper.prepareValues(attrs.colorFormat);
+
+        element.colorpicker();
+        if(!ngModel) return;
+
+        var elementInput = angular.element(element.children()[0]);
+
+        element.colorpicker().on('changeColor', function(event) {
+          elementInput.val(element.data('colorpicker').format(event.color[thisFormat.transform]()));
+          scope.$parent.$apply(ngModel.$setViewValue(element.data('colorpicker').format(event.color[thisFormat.transform]())));
+        });
+
+        ngModel.$render = function() {
+          helper.updateView(element, ngModel.$viewValue) ;
+        }
+      }
+    };
+  }]);

docs-web/src/main/webapp/lib/colorpicker.js

@@ -0,0 +1,543 @@
+/* =========================================================
+ * bootstrap-colorpicker.js 
+ * http://www.eyecon.ro/bootstrap-colorpicker
+ * =========================================================
+ * Copyright 2012 Stefan Petre
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ========================================================= */
+
+!function( $ ) {
+
+  // Color object
+
+  var Color = function(val) {
+    this.value = {
+      h: 1,
+      s: 1,
+      b: 1,
+      a: 1
+    };
+    this.setColor(val);
+  };
+
+  Color.prototype = {
+    constructor: Color,
+
+    //parse a string to HSB
+    setColor: function(val){
+      val = val.toLowerCase();
+      var that = this;
+      $.each( CPGlobal.stringParsers, function( i, parser ) {
+        var match = parser.re.exec( val ),
+          values = match && parser.parse( match ),
+          space = parser.space||'rgba';
+        if ( values ) {
+          if (space === 'hsla') {
+            that.value = CPGlobal.RGBtoHSB.apply(null, CPGlobal.HSLtoRGB.apply(null, values));
+          } else {
+            that.value = CPGlobal.RGBtoHSB.apply(null, values);
+          }
+          return false;
+        }
+      });
+    },
+
+    setHue: function(h) {
+      this.value.h = 1- h;
+    },
+
+    setSaturation: function(s) {
+      this.value.s = s;
+    },
+
+    setLightness: function(b) {
+      this.value.b = 1- b;
+    },
+
+    setAlpha: function(a) {
+      this.value.a = parseInt((1 - a)*100, 10)/100;
+    },
+
+    // HSBtoRGB from RaphaelJS
+    // https://github.com/DmitryBaranovskiy/raphael/
+    toRGB: function(h, s, b, a) {
+      if (!h) {
+        h = this.value.h;
+        s = this.value.s;
+        b = this.value.b;
+      }
+      h *= 360;
+      var R, G, B, X, C;
+      h = (h % 360) / 60;
+      C = b * s;
+      X = C * (1 - Math.abs(h % 2 - 1));
+      R = G = B = b - C;
+
+      h = ~~h;
+      R += [C, X, 0, 0, X, C][h];
+      G += [X, C, C, X, 0, 0][h];
+      B += [0, 0, X, C, C, X][h];
+      return {
+        r: Math.round(R*255),
+        g: Math.round(G*255),
+        b: Math.round(B*255),
+        a: a||this.value.a
+      };
+    },
+
+    toHex: function(h, s, b, a){
+      var rgb = this.toRGB(h, s, b, a);
+      return '#'+((1 << 24) | (parseInt(rgb.r) << 16) | (parseInt(rgb.g) << 8) | parseInt(rgb.b)).toString(16).substr(1);
+    },
+
+    toHSL: function(h, s, b, a){
+      if (!h) {
+        h = this.value.h;
+        s = this.value.s;
+        b = this.value.b;
+      }
+      var H = h,
+        L = (2 - s) * b,
+        S = s * b;
+      if (L > 0 && L <= 1) {
+        S /= L;
+      } else {
+        S /= 2 - L;
+      }
+      L /= 2;
+      if (S > 1) {
+        S = 1;
+      }
+      return {
+        h: H,
+        s: S,
+        l: L,
+        a: a||this.value.a
+      };
+    }
+  };
+
+  // Picker object
+
+  var Colorpicker = function(element, options){
+    this.element = $(element);
+    var format = options.format||this.element.data('color-format')||'hex';
+    this.format = CPGlobal.translateFormats[format];
+    this.isInput = this.element.is('input');
+    this.component = this.element.is('.color') ? this.element.find('.add-on') : false;
+
+    this.picker = $(CPGlobal.template)
+      .appendTo('body')
+      .on('mousedown', $.proxy(this.mousedown, this));
+
+    if (this.isInput) {
+      this.element.on({
+        'focus': $.proxy(this.show, this),
+        'keyup': $.proxy(this.update, this)
+      });
+    } else if (this.component){
+      this.component.on({
+        'click': $.proxy(this.show, this)
+      });
+    } else {
+      this.element.on({
+        'click': $.proxy(this.show, this)
+      });
+    }
+    if (format === 'rgba' || format === 'hsla') {
+      this.picker.addClass('alpha');
+      this.alpha = this.picker.find('.colorpicker-alpha')[0].style;
+    }
+
+    if (this.component){
+      this.picker.find('.colorpicker-color').hide();
+      this.preview = this.element.find('i')[0].style;
+    } else {
+      this.preview = this.picker.find('div:last')[0].style;
+    }
+
+    this.base = this.picker.find('div:first')[0].style;
+    this.update();
+  };
+
+  Colorpicker.prototype = {
+    constructor: Colorpicker,
+
+    show: function(e) {
+      this.update();
+      this.picker.show();
+      this.height = this.component ? this.component.outerHeight() : this.element.outerHeight();
+      this.place();
+      $(window).on('resize', $.proxy(this.place, this));
+      if (!this.isInput) {
+        if (e) {
+          e.stopPropagation();
+          e.preventDefault();
+        }
+      }
+      $(document).on({
+        'mousedown': $.proxy(this.hide, this)
+      });
+
+      this.element.trigger({
+        type: 'show',
+        color: this.color
+      });
+    },
+
+    update: function(){
+      this.color = new Color(this.isInput ? this.element.prop('value') : this.element.data('color'));
+      this.picker.find('i')
+        .eq(0).css({left: this.color.value.s*100, top: 100 - this.color.value.b*100}).end()
+        .eq(1).css('top', 100 * (1 - this.color.value.h)).end()
+        .eq(2).css('top', 100 * (1 - this.color.value.a));
+      this.previewColor();
+    },
+
+    setValue: function(newColor) {
+      this.color = new Color(newColor);
+      this.picker.find('i')
+        .eq(0).css({left: this.color.value.s*100, top: 100 - this.color.value.b*100}).end()
+        .eq(1).css('top', 100 * (1 - this.color.value.h)).end()
+        .eq(2).css('top', 100 * (1 - this.color.value.a));
+      this.previewColor();
+      this.element.trigger({
+        type: 'changeColor',
+        color: this.color
+      });
+    },
+
+    hide: function(){
+      this.picker.hide();
+      $(window).off('resize', this.place);
+      if (!this.isInput) {
+        $(document).off({
+          'mousedown': this.hide
+        });
+        if (this.component){
+          this.element.find('input').prop('value', this.format.call(this));
+        }
+        this.element.data('color', this.format.call(this));
+      } else {
+        this.element.prop('value', this.format.call(this));
+      }
+      this.element.trigger({
+        type: 'hide',
+        color: this.color
+      });
+    },
+
+    place: function(){
+      var offset = this.component ? this.component.offset() : this.element.offset();
+      this.picker.css({
+        top: offset.top + this.height,
+        left: offset.left
+      });
+    },
+
+    //preview color change
+    previewColor: function(){
+      try {
+        this.preview.backgroundColor = this.format.call(this);
+      } catch(e) {
+        this.preview.backgroundColor = this.color.toHex();
+      }
+      //set the color for brightness/saturation slider
+      this.base.backgroundColor = this.color.toHex(this.color.value.h, 1, 1, 1);
+      //set te color for alpha slider
+      if (this.alpha) {
+        this.alpha.backgroundColor = this.color.toHex();
+      }
+    },
+
+    pointer: null,
+
+    slider: null,
+
+    mousedown: function(e){
+      e.stopPropagation();
+      e.preventDefault();
+
+      var target = $(e.target);
+
+      //detect the slider and set the limits and callbacks
+      var zone = target.closest('div');
+      if (!zone.is('.colorpicker')) {
+        if (zone.is('.colorpicker-saturation')) {
+          this.slider = $.extend({}, CPGlobal.sliders.saturation);
+        }
+        else if (zone.is('.colorpicker-hue')) {
+          this.slider = $.extend({}, CPGlobal.sliders.hue);
+        }
+        else if (zone.is('.colorpicker-alpha')) {
+          this.slider = $.extend({}, CPGlobal.sliders.alpha);
+        } else {
+          return false;
+        }
+        var offset = zone.offset();
+        //reference to knob's style
+        this.slider.knob = zone.find('i')[0].style;
+        this.slider.left = e.pageX - offset.left;
+        this.slider.top = e.pageY - offset.top;
+        this.pointer = {
+          left: e.pageX,
+          top: e.pageY
+        };
+        //trigger mousemove to move the knob to the current position
+        $(document).on({
+          mousemove: $.proxy(this.mousemove, this),
+          mouseup: $.proxy(this.mouseup, this)
+        }).trigger('mousemove');
+      }
+      return false;
+    },
+
+    mousemove: function(e){
+      e.stopPropagation();
+      e.preventDefault();
+      var left = Math.max(
+        0,
+        Math.min(
+          this.slider.maxLeft,
+          this.slider.left + ((e.pageX||this.pointer.left) - this.pointer.left)
+        )
+      );
+      var top = Math.max(
+        0,
+        Math.min(
+          this.slider.maxTop,
+          this.slider.top + ((e.pageY||this.pointer.top) - this.pointer.top)
+        )
+      );
+      this.slider.knob.left = left + 'px';
+      this.slider.knob.top = top + 'px';
+      if (this.slider.callLeft) {
+        this.color[this.slider.callLeft].call(this.color, left/100);
+      }
+      if (this.slider.callTop) {
+        this.color[this.slider.callTop].call(this.color, top/100);
+      }
+      this.previewColor();
+      this.element.trigger({
+        type: 'changeColor',
+        color: this.color
+      });
+      return false;
+    },
+
+    mouseup: function(e){
+      e.stopPropagation();
+      e.preventDefault();
+      $(document).off({
+        mousemove: this.mousemove,
+        mouseup: this.mouseup
+      });
+      return false;
+    }
+  }
+
+  $.fn.colorpicker = function ( option, val ) {
+    return this.each(function () {
+      var $this = $(this),
+        data = $this.data('colorpicker'),
+        options = typeof option === 'object' && option;
+      if (!data) {
+        $this.data('colorpicker', (data = new Colorpicker(this, $.extend({}, $.fn.colorpicker.defaults,options))));
+      }
+
+        if (typeof option === 'string') data[option](val);
+    });
+  };
+
+  $.fn.colorpicker.defaults = {
+  };
+
+  $.fn.colorpicker.Constructor = Colorpicker;
+
+  var CPGlobal = {
+
+    // translate a format from Color object to a string
+    translateFormats: {
+      'rgb': function(){
+        var rgb = this.color.toRGB();
+        return 'rgb('+rgb.r+','+rgb.g+','+rgb.b+')';
+      },
+
+      'rgba': function(){
+        var rgb = this.color.toRGB();
+        return 'rgba('+rgb.r+','+rgb.g+','+rgb.b+','+rgb.a+')';
+      },
+
+      'hsl': function(){
+        var hsl = this.color.toHSL();
+        return 'hsl('+Math.round(hsl.h*360)+','+Math.round(hsl.s*100)+'%,'+Math.round(hsl.l*100)+'%)';
+      },
+
+      'hsla': function(){
+        var hsl = this.color.toHSL();
+        return 'hsla('+Math.round(hsl.h*360)+','+Math.round(hsl.s*100)+'%,'+Math.round(hsl.l*100)+'%,'+hsl.a+')';
+      },
+
+      'hex': function(){
+        return  this.color.toHex();
+      }
+    },
+
+    sliders: {
+      saturation: {
+        maxLeft: 100,
+        maxTop: 100,
+        callLeft: 'setSaturation',
+        callTop: 'setLightness'
+      },
+
+      hue: {
+        maxLeft: 0,
+        maxTop: 100,
+        callLeft: false,
+        callTop: 'setHue'
+      },
+
+      alpha: {
+        maxLeft: 0,
+        maxTop: 100,
+        callLeft: false,
+        callTop: 'setAlpha'
+      }
+    },
+
+    // HSBtoRGB from RaphaelJS
+    // https://github.com/DmitryBaranovskiy/raphael/
+    RGBtoHSB: function (r, g, b, a){
+      r /= 255;
+      g /= 255;
+      b /= 255;
+
+      var H, S, V, C;
+      V = Math.max(r, g, b);
+      C = V - Math.min(r, g, b);
+      H = (C === 0 ? null :
+        V == r ? (g - b) / C :
+          V == g ? (b - r) / C + 2 :
+            (r - g) / C + 4
+        );
+      H = ((H + 360) % 6) * 60 / 360;
+      S = C === 0 ? 0 : C / V;
+      return {h: H||1, s: S, b: V, a: a||1};
+    },
+
+    HueToRGB: function (p, q, h) {
+      if (h < 0)
+        h += 1;
+      else if (h > 1)
+        h -= 1;
+
+      if ((h * 6) < 1)
+        return p + (q - p) * h * 6;
+      else if ((h * 2) < 1)
+        return q;
+      else if ((h * 3) < 2)
+        return p + (q - p) * ((2 / 3) - h) * 6;
+      else
+        return p;
+    },
+
+    HSLtoRGB: function (h, s, l, a)
+    {
+      if (s < 0) {
+        s = 0;
+      }
+      var q;
+      if (l <= 0.5) {
+        q = l * (1 + s);
+      } else {
+        q = l + s - (l * s);
+      }
+
+      var p = 2 * l - q;
+
+      var tr = h + (1 / 3);
+      var tg = h;
+      var tb = h - (1 / 3);
+
+      var r = Math.round(CPGlobal.HueToRGB(p, q, tr) * 255);
+      var g = Math.round(CPGlobal.HueToRGB(p, q, tg) * 255);
+      var b = Math.round(CPGlobal.HueToRGB(p, q, tb) * 255);
+      return [r, g, b, a||1];
+    },
+
+    // a set of RE's that can match strings and generate color tuples.
+    // from John Resig color plugin
+    // https://github.com/jquery/jquery-color/
+    stringParsers: [
+      {
+        re: /rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,
+        parse: function( execResult ) {
+          return [
+            execResult[ 1 ],
+            execResult[ 2 ],
+            execResult[ 3 ],
+            execResult[ 4 ]
+          ];
+        }
+      }, {
+        re: /rgba?\(\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,
+        parse: function( execResult ) {
+          return [
+            2.55 * execResult[1],
+            2.55 * execResult[2],
+            2.55 * execResult[3],
+            execResult[ 4 ]
+          ];
+        }
+      }, {
+        re: /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/,
+        parse: function( execResult ) {
+          return [
+            parseInt( execResult[ 1 ], 16 ),
+            parseInt( execResult[ 2 ], 16 ),
+            parseInt( execResult[ 3 ], 16 )
+          ];
+        }
+      }, {
+        re: /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/,
+        parse: function( execResult ) {
+          return [
+            parseInt( execResult[ 1 ] + execResult[ 1 ], 16 ),
+            parseInt( execResult[ 2 ] + execResult[ 2 ], 16 ),
+            parseInt( execResult[ 3 ] + execResult[ 3 ], 16 )
+          ];
+        }
+      }, {
+        re: /hsla?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,
+        space: 'hsla',
+        parse: function( execResult ) {
+          return [
+            execResult[1]/360,
+            execResult[2] / 100,
+            execResult[3] / 100,
+            execResult[4]
+          ];
+        }
+      }
+    ],
+    template: '<div class="colorpicker dropdown-menu">'+
+      '<div class="colorpicker-saturation"><i><b></b></i></div>'+
+      '<div class="colorpicker-hue"><i></i></div>'+
+      '<div class="colorpicker-alpha"><i></i></div>'+
+      '<div class="colorpicker-color"><div /></div>'+
+      '</div>'
+  };
+
+}( window.jQuery )

docs-web/src/main/webapp/partial/directive.selecttag.html

@@ -1,6 +1,6 @@
 <div>
   <ul class="inline">
-    <li ng-repeat="tag in tags"><span class="label label-info">{{ tag.name }} <span class="icon-remove icon-white" ng-click="deleteTag(tag)"></span></span></li>
+    <li ng-repeat="tag in tags"><span class="label label-info" ng-style="{ 'background': tag.color }">{{ tag.name }} <span class="icon-remove icon-white" ng-click="deleteTag(tag)"></span></span></li>
   </ul>
   <input class="span12" type="text" id="{{ ref }}" placeholder="Type a tag" ng-model="input"
     autocomplete="off" typeahead="tag.name for tag in allTags | filter: $viewValue" typeahead-on-select="addTag()" />

docs-web/src/main/webapp/partial/document.html

@@ -50,7 +50,7 @@
             <td>{{ document.create_date | date: 'yyyy-MM-dd' }}</td>
             <td class="hidden-phone cell-tags">
               <div class="tags">
-                <span class="label label-info" ng-repeat="tag in document.tags"><span class="shorten">{{ tag.name | shorten }}</span><span class="full">{{ tag.name }}</span></span>
+                <span class="label label-info" ng-repeat="tag in document.tags" ng-style="{ 'background': tag.color }"><span class="shorten">{{ tag.name | shorten }}</span><span class="full">{{ tag.name }}</span></span>
               </div>
             </td>
           </tr>

docs-web/src/main/webapp/partial/document.view.html

@@ -8,7 +8,7 @@
 <div class="page-header">
   <h1>{{ document.title }} <small>{{ document.create_date | date: 'yyyy-MM-dd' }}</small></h1>
   <ul class="inline">
-    <li ng-repeat="tag in document.tags"><span class="label label-info">{{ tag.name }}</span></li>
+    <li ng-repeat="tag in document.tags"><span class="label label-info" ng-style="{ 'background': tag.color }">{{ tag.name }}</span></li>
   </ul>
 </div>
 

docs-web/src/main/webapp/partial/tag.html

@@ -1,9 +1,8 @@
 <div class="container-fluid">
   <div class="row-fluid">
     <div class="span4 well text-center">
-      
       <div class="input-prepend input-append input-block-level">
-        <span class="add-on"><span class="icon-plus"></span></span>
+        <span colorpicker class="btn" data-color="#3a87ad" ng-model="tag.color" ng-style="{ 'background': tag.color }">&nbsp;</span>
         <input type="text" placeholder="Tag name" ng-model="tag.name" ui-keyup="{'enter':'addTag()'}">
         <button type="submit" class="btn btn-primary" ng-click="addTag()">Add</button>
       </div>
@@ -17,7 +16,8 @@
         <tbody>
           <tr ng-repeat="tag in tags | filter:search">
             <td><inline-edit value="tag.name" on-edit="updateTag(tag)" /></td>
-            <td><button class="btn btn-danger pull-right" ng-click="deleteTag(tag)"><span class="icon-trash icon-white"></span></button></td>
+            <td class="span1"><span colorpicker class="btn" on-hide="updateTag(tag)" data-color="" ng-model="tag.color" ng-style="{ 'background': tag.color }">&nbsp;</span></td>
+            <td class="span1"><button class="btn btn-danger pull-right" ng-click="deleteTag(tag)"><span class="icon-trash icon-white"></span></button></td>
           </tr>
         </tbody>
       </table>
@@ -27,7 +27,7 @@
     <div class="span8 well">
       <h1>{{ tags.length }} <small>tag{{ tags.length > 1 ? 's' : '' }}</small></h1>
       <dl class="dl-horizontal" ng-repeat="stat in stats | orderBy: '-count'">
-        <dt>{{ stat.name }} <span class="badge badge-info">{{ stat.count }}</span></dt>
+        <dt>{{ stat.name }} <span class="badge badge-info" ng-style="{ 'background': stat.color }">{{ stat.count }}</span></dt>
         <dd><progress percent="stat.count / getStatCount() * 100" class="progress-info"></progress></dd>
       </dl>
     </div>

docs-web/src/main/webapp/style/main.less

@@ -43,6 +43,13 @@
 	}
 }
 
+// Tags list
+.table-tags {
+	tbody td {
+    vertical-align: middle;
+	}
+}
+
 // Logs list
 .table-logs {
 	tbody tr td {

docs-web/src/test/java/com/sismics/docs/rest/TestDocumentResource.java

@@ -38,7 +38,7 @@ public class TestDocumentResource extends BaseJerseyTest {
         tagResource.addFilter(new CookieAuthenticationFilter(document1Token));
         MultivaluedMapImpl postParams = new MultivaluedMapImpl();
         postParams.add("name", "Super tag");
-        postParams.add("color", "ffff00");
+        postParams.add("color", "#ffff00");
         ClientResponse response = tagResource.put(ClientResponse.class, postParams);
         Assert.assertEquals(Status.OK, Status.fromStatusCode(response.getStatus()));
         JSONObject json = response.getEntity(JSONObject.class);
@@ -76,7 +76,7 @@ public class TestDocumentResource extends BaseJerseyTest {
         Assert.assertEquals(1, tags.length());
         Assert.assertEquals(tag1Id, tags.getJSONObject(0).getString("id"));
         Assert.assertEquals("Super tag", tags.getJSONObject(0).getString("name"));
-        Assert.assertEquals("ffff00", tags.getJSONObject(0).getString("color"));
+        Assert.assertEquals("#ffff00", tags.getJSONObject(0).getString("color"));
         
         // Search documents by query
         documentResource = resource().path("/document/list");
@@ -143,7 +143,7 @@ public class TestDocumentResource extends BaseJerseyTest {
         tagResource.addFilter(new CookieAuthenticationFilter(document1Token));
         postParams = new MultivaluedMapImpl();
         postParams.add("name", "Super tag 2");
-        postParams.add("color", "00ffff");
+        postParams.add("color", "#00ffff");
         response = tagResource.put(ClientResponse.class, postParams);
         Assert.assertEquals(Status.OK, Status.fromStatusCode(response.getStatus()));
         json = response.getEntity(JSONObject.class);

docs-web/src/test/java/com/sismics/docs/rest/TestTagResource.java

@@ -35,7 +35,7 @@ public class TestTagResource extends BaseJerseyTest {
         tagResource.addFilter(new CookieAuthenticationFilter(tag1Token));
         MultivaluedMapImpl postParams = new MultivaluedMapImpl();
         postParams.add("name", "Tag 3");
-        postParams.add("color", "ff0000");
+        postParams.add("color", "#ff0000");
         ClientResponse response = tagResource.put(ClientResponse.class, postParams);
         Assert.assertEquals(Status.OK, Status.fromStatusCode(response.getStatus()));
         JSONObject json = response.getEntity(JSONObject.class);
@@ -47,7 +47,7 @@ public class TestTagResource extends BaseJerseyTest {
         tagResource.addFilter(new CookieAuthenticationFilter(tag1Token));
         postParams = new MultivaluedMapImpl();
         postParams.add("name", "Tag 4");
-        postParams.add("color", "00ff00");
+        postParams.add("color", "#00ff00");
         response = tagResource.put(ClientResponse.class, postParams);
         Assert.assertEquals(Status.OK, Status.fromStatusCode(response.getStatus()));
         json = response.getEntity(JSONObject.class);
@@ -94,14 +94,14 @@ public class TestTagResource extends BaseJerseyTest {
         JSONArray tags = json.getJSONArray("tags");
         Assert.assertTrue(tags.length() > 0);
         Assert.assertEquals("Tag 4", tags.getJSONObject(1).getString("name"));
-        Assert.assertEquals("00ff00", tags.getJSONObject(1).getString("color"));
+        Assert.assertEquals("#00ff00", tags.getJSONObject(1).getString("color"));
         
         // Update a tag
         tagResource = resource().path("/tag/" + tag4Id);
         tagResource.addFilter(new CookieAuthenticationFilter(tag1Token));
         postParams = new MultivaluedMapImpl();
         postParams.add("name", "Updated name");
-        postParams.add("color", "0000ff");
+        postParams.add("color", "#0000ff");
         response = tagResource.post(ClientResponse.class, postParams);
         Assert.assertEquals(Status.OK, Status.fromStatusCode(response.getStatus()));
         json = response.getEntity(JSONObject.class);
@@ -116,7 +116,7 @@ public class TestTagResource extends BaseJerseyTest {
         tags = json.getJSONArray("tags");
         Assert.assertTrue(tags.length() > 0);
         Assert.assertEquals("Updated name", tags.getJSONObject(1).getString("name"));
-        Assert.assertEquals("0000ff", tags.getJSONObject(1).getString("color"));
+        Assert.assertEquals("#0000ff", tags.getJSONObject(1).getString("color"));
         
         // Deletes a tag
         tagResource = resource().path("/tag/" + tag4Id);