(js) New color picker directive

UI/WebServerResources/js/Common/Common.app.js

@@ -15,6 +15,81 @@
       }
     })
 
+    .constant('sgColors', {
+      selection: [
+        '#FFFFFF',
+        '#330033',
+        '#C0C0C0',
+        '#999999',
+        '#666666',
+        '#333333',
+        '#000000',
+        '#FFCCCC',
+        '#FF6666',
+        '#FF0000',
+        '#CC0000',
+        '#990000',
+        '#660000',
+        '#330000',
+        '#FFCC99',
+        '#FF9966',
+        '#FF9900',
+        '#FF6600',
+        '#CC6600',
+        '#993300',
+        '#663300',
+        '#FFFF99',
+        '#FFFF66',
+        '#FFCC66',
+        '#FFCC33',
+        '#CC9933',
+        '#996633',
+        '#663333',
+        '#FFFFCC',
+        '#FFFF33',
+        '#FFFF00',
+        '#FFCC00',
+        '#999900',
+        '#666600',
+        '#333300',
+        '#CCCCCC',
+        '#66FF99',
+        '#33FF33',
+        '#33CC00',
+        '#009900',
+        '#006600',
+        '#003300',
+        '#99FFFF',
+        '#33FFFF',
+        '#66CCCC',
+        '#00CCCC',
+        '#339999',
+        '#336666',
+        '#003333',
+        '#CCFFFF',
+        '#66FFFF',
+        '#33CCFF',
+        '#3366FF',
+        '#3333FF',
+        '#000099',
+        '#000066',
+        '#CCCCFF',
+        '#9999FF',
+        '#6666CC',
+        '#6633FF',
+        '#6600CC',
+        '#333399',
+        '#330099',
+        '#FFCCFF',
+        '#FF99FF',
+        '#CC66CC',
+        '#CC33CC',
+        '#993399',
+        '#663366',
+        '#99FF99'
+      ]
+    })
+
   // md break-points values are hard-coded in angular-material/src/core/util/constant.js
   // $mdMedia has a built-in support for those values but can also evaluate others
   // For some reasons, angular-material's break-points don't match the specs

UI/WebServerResources/js/Common/sgColorPicker.directive.js

@@ -0,0 +1,67 @@
+/* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+
+(function() {
+  /* jshint validthis: true */
+  'use strict';
+
+  /*
+   * sgColorPicker - Color picker widget
+   * @restrict element
+   * @param {function} sgOnSelect - the function to call when clicking on a color.
+   *        One variable is available: color.
+   * @ngInject
+   * @example:
+
+     <sg-color-picker sg-on-select="properties.calendar.color = color"></sg-color-picker>
+  */
+  sgColorPicker.$inject = ['$parse'];
+  function sgColorPicker($parse) {
+    return {
+      restrict: 'E',
+      template: [
+        '<md-menu>',
+        '  <md-button class="sg-icon-button"',
+        '             label:aria-label="Options"',
+        '             ng-click="$mdOpenMenu()"',
+        '             md-menu-origin="md-menu-origin">',
+        '    <md-icon>color_lens</md-icon>',
+        '  </md-button>',
+        '  <md-menu-content class="md-padding" width="3">',
+        '    <md-grid-list class="sg-color-picker" md-cols="7" md-row-height="1:1" md-gutter="0.5em">',
+        '      <md-grid-tile ng-repeat="color in $sgColorPickerController.colors"',
+        '                    ng-style="{ \'background-color\': color }"',
+        '                    ng-click="$sgColorPickerController.select(color)"></md-grid-tile>',
+        '    </md-grid-list>',
+        '  </md-menu-content>',
+        '</md-menu>'
+      ].join(''),
+      replace: true,
+      bindToController: true,
+      controller: sgColorPickerController,
+      controllerAs: '$sgColorPickerController',
+      link: link
+    };
+
+    function link(scope, iElement, iAttr, controller) {
+      // Associate callback to controller
+      controller.doSelect = $parse(iElement.attr('sg-on-select'));
+    }
+  }
+  
+  /**
+   * @ngInject
+   */
+  sgColorPickerController.$inject = ['$scope', 'sgColors'];
+  function sgColorPickerController($scope, sgColors) {
+    var vm = this;
+
+    vm.colors = sgColors.selection;
+    vm.select = function(color) {
+      vm.doSelect($scope, { color: color });
+    };
+  }
+
+  angular
+    .module('SOGo.Common')
+    .directive('sgColorPicker', sgColorPicker);
+})();

UI/WebServerResources/scss/components/gridList/gridList.scss

@@ -1,5 +1,17 @@
 @import "extends";
 
+// Color picker
+.sg-color-picker {
+  md-grid-tile {
+    border-radius: 25%;
+    &:hover,
+    &:active {
+      cursor: pointer;
+      transform: scale(1.5);
+    }
+  }
+}
+
 // See sgToggleGrid directive
 [sg-toggle-grid] {
   md-grid-tile {