(html) Colorize event/task categories chips

NEWS

@@ -20,6 +20,7 @@ Enhancements
  - [web] list search now displays a warning regarding the minlength constraint
  - [web] loading an LDAP-based addressbook is now instantaneous when listRequiresDot is disabled (#438, #3464)
  - [web] improve display of messages with many recipients
+ - [web] colorize categories chips in event and task viewers
  - [web] initial stylesheet for printing
  - [eas] now support EAS MIME truncation
 

UI/Templates/SchedulerUI/UIxAppointmentViewTemplate.wox

@@ -41,6 +41,9 @@
         <md-list-item ng-show="editor.component.categories.length > 0">
           <md-chips class="sg-readonly" ng-model="::editor.component.categories" readonly="true">
             <md-chip-template>
+              <span class="sg-chip-color" style="z-index: 1">
+                <span ng-style="{ 'background-color': editor.service.$categories[$chip] }"><!-- color --></span>
+              </span>
               <span>{{$chip}}</span>
             </md-chip-template>
           </md-chips>

UI/Templates/SchedulerUI/UIxTaskViewTemplate.wox

@@ -41,6 +41,9 @@
         <md-list-item ng-show="editor.component.categories.length > 0">
           <md-chips class="sg-readonly" ng-model="::editor.component.categories" readonly="true">
             <md-chip-template>
+              <span class="sg-chip-color" style="z-index: 1">
+                <span ng-style="{ 'background-color': editor.service.$categories[$chip] }"><!-- color --></span>
+              </span>
               <span>{{$chip}}</span>
             </md-chip-template>
           </md-chips>

UI/WebServerResources/js/Scheduler/ComponentController.js

@@ -6,10 +6,11 @@
   /**
    * @ngInject
    */
-  ComponentController.$inject = ['$rootScope', '$mdDialog', 'Calendar', 'AddressBook', 'Alarm', 'stateComponent'];
-  function ComponentController($rootScope, $mdDialog, Calendar, AddressBook, Alarm, stateComponent) {
+  ComponentController.$inject = ['$rootScope', '$mdDialog', 'Calendar', 'Component', 'AddressBook', 'Alarm', 'stateComponent'];
+  function ComponentController($rootScope, $mdDialog, Calendar, Component, AddressBook, Alarm, stateComponent) {
     var vm = this, component;
 
+    vm.service = Component;
     vm.component = stateComponent;
     vm.close = close;
     vm.cardFilter = cardFilter;