(js) Show events categories as color bands

UI/WebServerResources/js/Common/sgFolderStylesheet.directive.js

@@ -5,24 +5,24 @@
   'use strict';
 
   /*
-   * sgFolderStylesheet - Add CSS stylesheet for folder (addressbook or calendar)
+   * sgFolderStylesheet - Add CSS stylesheet for a folder's color (addressbook or calendar)
    * @memberof SOGo.Common
    * @restrict attribute
    * @param {object} ngModel - the object literal describing the folder (an Addressbook or Calendar instance)
    * @example:
 
-    <div sg-folder-stylesheet="true"
+    <sg-folder-stylesheet
          ng-repeat="calendar in calendars.list"
          ng-model="calendar" />
-   </div>
   */
   function sgFolderStylesheet() {
     return {
-      restrict: 'A',
+      restrict: 'E',
       require: 'ngModel',
       scope: {
         ngModel: '='
       },
+      replace: true,
       bindToController: true,
       controller: sgFolderStylesheetController,
       controllerAs: 'cssCtrl',
@@ -31,11 +31,13 @@
         /* Background color */
         '  .bg-folder{{ cssCtrl.ngModel.id }},',
         '  .bg-folder{{ cssCtrl.ngModel.id }} label,',
-        '  .bg-folder{{ cssCtrl.ngModel.id }} .md-input,',
-        '  .sg-event.bg-folder{{ cssCtrl.ngModel.id }} md-icon {',
+        '  .bg-folder{{ cssCtrl.ngModel.id }} .md-input {',
         '    background-color: {{ cssCtrl.ngModel.color }} !important;',
         '    color: {{ cssCtrl.contrast(cssCtrl.ngModel.color) }} !important;',
         '  }',
+        '  .sg-event.bg-folder{{ cssCtrl.ngModel.id }} md-icon {',
+        '    color: {{ cssCtrl.contrast(cssCtrl.ngModel.color) }} !important;',
+        '  }',
         // Set the contrast color of toolbar icons except the one of the background
         '  md-toolbar.bg-folder{{ cssCtrl.ngModel.id }} md-icon:not(.sg-icon-toolbar-bg) {',
         '    color: {{ cssCtrl.contrast(cssCtrl.ngModel.color) }} !important;',
@@ -81,21 +83,23 @@
       // Respect contrast ratio recommendation from W3C:
       // http://www.w3.org/TR/WCAG20/#contrast-ratiodef
       function contrast(hex) {
-        var color, c, l;
+        var color, c, l = 1;
 
         color = hexToRgb(hex);
-	c = [color.r / 255, color.g / 255, color.b / 255];
+        if (color) {
+	  c = [color.r / 255, color.g / 255, color.b / 255];
 
-	for (var i = 0; i < c.length; ++i) {
-	  if (c[i] <= 0.03928) {
-	    c[i] = c[i] / 12.92;
+	  for (var i = 0; i < c.length; ++i) {
+	    if (c[i] <= 0.03928) {
+	      c[i] = c[i] / 12.92;
+	    }
+            else {
+	      c[i] = Math.pow((c[i] + 0.055) / 1.055, 2.4);
+	    }
 	  }
-          else {
-	    c[i] = Math.pow((c[i] + 0.055) / 1.055, 2.4);
-	  }
-	}
 
-	l = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
+	  l = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
+        }
 
 	if (l > 0.179) {
           return 'black';

UI/WebServerResources/js/Scheduler/Component.service.js

@@ -288,6 +288,7 @@
         var componentData = _.object(this.eventsFields, eventData),
             start = new Date(componentData.c_startdate * 1000);
         componentData.hour = start.getHourString();
+        componentData.categories = _.invoke(componentData.c_category, 'asCSSIdentifier');
         componentData.blocks = [];
         objects.push(new Component(componentData));
         return objects;

UI/WebServerResources/js/Scheduler/Scheduler.app.js

@@ -18,7 +18,7 @@
         url: '/calendar',
         views: {
           calendars: {
-            templateUrl: 'UIxCalMainFrame', // UI/Templates/SchedulerUI/UIxCalMainFrame.wox
+            templateUrl: 'UIxCalMainView', // UI/Templates/SchedulerUI/UIxCalMainView.wox
             controller: 'CalendarsController',
             controllerAs: 'app'
           }

UI/WebServerResources/js/Scheduler/sgCalendarDayBlock.directive.js

@@ -33,6 +33,10 @@
         //    Add a class while dragging
         '     ng-class="{\'sg-event--dragging\': block.dragging}">',
         '  <div class="eventInside" ng-click="clickBlock({clickEvent: $event, clickComponent: block.component})">',
+        //   Categories color stripes
+        '    <div class="category" ng-repeat="category in block.component.categories"',
+        '         ng-class="\'bg-category\' + category"',
+        '         ng-style="{ right: ($index * 10) + \'%\' }"></div>',
         '    <div class="text">{{ block.component.summary }}',
         '      <span class="icons">',
         //       Component is reccurent
@@ -44,7 +48,10 @@
         //       Component is private
         '        <md-icon ng-if="block.component.c_classification == 2" class="material-icons icon-vpn-key"></md-icon>',
         '      </span>',
-        '      <div class="secondary" ng-if="block.component.c_location"><md-icon>place</md-icon> {{block.component.c_location}}</div>',
+        //     Location
+        '      <div class="secondary" ng-if="block.component.c_location">',
+        '        <md-icon>place</md-icon> {{block.component.c_location}}',
+        '      </div>',
         '    </div>',
         '  </div>',
         '</div>'

UI/WebServerResources/js/Scheduler/sgCalendarDayBlockGhost.directive.js

@@ -22,8 +22,14 @@
       template: [
         '<div class="sg-event sg-event--ghost ng-hide">',
         '  <div class="eventInside">',
-        '    <div class="text">{{ block.component.summary }}</span>',
+        //   Categories color stripes
+        '    <div class="category" ng-repeat="category in block.component.categories"',
+        '         ng-class="\'bg-category\' + category"',
+        '         ng-style="{ right: ($index * 10) + \'%\' }"></div>',
+        '    <div class="text">{{ block.component.summary }}',
         '      <span class="icons">',
+        //       Component is reccurent
+        '        <md-icon ng-if="block.component.occurrenceId" class="material-icons icon-repeat"></md-icon>',
         //       Component has an alarm
         '        <md-icon ng-if="block.component.c_nextalarm" class="material-icons icon-alarm"></md-icon>',
         //       Component is confidential
@@ -31,6 +37,10 @@
         //       Component is private
         '        <md-icon ng-if="block.component.c_classification == 2" class="material-icons icon-vpn-key"></md-icon>',
         '      </span>',
+        //     Location
+        '      <div class="secondary" ng-if="block.component.c_location">',
+        '        <md-icon>place</md-icon> {{block.component.c_location}}',
+        '      </div>',
         '    </div>',
         '  </div>',
         '  <div class="ghostStartHour" ng-if="startHour">{{ startHour }}</div>',