From 4685c0ff2a79bf8f9d25c32b455d73af9d113567 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Sat, 14 Nov 2015 14:29:21 -0500
Subject: [PATCH] (js) Show events categories as color bands

---
 UI/Templates/SchedulerUI/UIxCalMainView.wox   | 41 ++++---------------
 .../js/Common/sgFolderStylesheet.directive.js | 36 ++++++++--------
 .../js/Scheduler/Component.service.js         |  1 +
 .../js/Scheduler/Scheduler.app.js             |  2 +-
 .../Scheduler/sgCalendarDayBlock.directive.js |  9 +++-
 .../sgCalendarDayBlockGhost.directive.js      | 12 +++++-
 .../scss/views/SchedulerUI.scss               | 12 ++++++
 7 files changed, 61 insertions(+), 52 deletions(-)

diff --git a/UI/Templates/SchedulerUI/UIxCalMainView.wox b/UI/Templates/SchedulerUI/UIxCalMainView.wox
index 9a41c7ca6..7d7923b22 100644
--- a/UI/Templates/SchedulerUI/UIxCalMainView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalMainView.wox
@@ -106,45 +106,20 @@
       <p><span class="label"><var:string label:value="Created by" /></span> <span>!- space -</span></p>
       <p class="description">!- space -</p>
     </div>
-  </div>
-
-  <div id="uploadDialog" style="display: none" class="dialog left">
-    <div>
-      <h3><var:string label:value="Import Events"/></h3>
-      <p class="prompt"><var:string label:value="Select an iCalendar file (.ics)."/></p>
-      <form const:href="" name="uploadForm" id="uploadForm" method="post"
-        enctype="multipart/form-data"
-        onsubmit="return AIM.submit(this, {'onStart' : validateUploadForm, 
-        'onComplete' : uploadCompleted})">
-        <p class="prompt"><input type="file" name="calendarFile" class="textField" id="calendarFile" />
-        <a href="#" class="button actionButton" id="uploadSubmit"
-            onclick="if($('uploadForm').onsubmit()) $('uploadForm').submit()">
-            <span><var:string label:value="Upload" /></span></a>
-        <a href="#" class="button" const:id="uploadCancel">
-            <span><var:string label:value="Cancel" /></span></a>
-      </p></form>
-      <hr/>
     </div>
-  </div>
-
-  <div id="uploadResults" style="display: none" class="dialog left">
-    <div>
-      <h3><var:string label:value="Import Events"/></h3>
-      <p><span id="uploadResultsContent">!- empty -</span>
-      <a href="#" class="button" const:id="uploadOK">
-          <span><var:string label:value="Done" /></span></a></p>
-      <hr/>
-    </div>
-    </div>
-    -->
+  -->
 
   <main class="view layout-fill" ui-view="calendars" layout="row" ng-controller="navController"><!-- calendars list --></main>
 
-  <script type = "text/ng-template" id="UIxCalMainFrame">
+  <script type="text/ng-template" id="UIxCalMainView">
     <!-- calendars colors -->
-    <div sg-folder-stylesheet="true"
+    <sg-folder-stylesheet
          ng-repeat="calendar in app.service.$findAll()"
-         ng-model="calendar"><!-- stylesheet --></div>
+         ng-model="calendar"><!-- stylesheet --></sg-folder-stylesheet>
+    <!-- calendars colors -->
+    <sg-category-stylesheet
+         ng-repeat="category in app.categories"
+         ng-model="category"><!-- stylesheet --></sg-category-stylesheet>
     <!-- Sidenav -->
     <md-sidenav id="left-sidenav" class="md-sidenav-left md-whiteframe-z1" md-component-id="left" md-is-locked-open="isGtMedium" layout="column">
       <var:component className="UIxSidenavToolbarTemplate" />
diff --git a/UI/WebServerResources/js/Common/sgFolderStylesheet.directive.js b/UI/WebServerResources/js/Common/sgFolderStylesheet.directive.js
index f4a30a887..cbf9f798a 100644
--- a/UI/WebServerResources/js/Common/sgFolderStylesheet.directive.js
+++ b/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';
diff --git a/UI/WebServerResources/js/Scheduler/Component.service.js b/UI/WebServerResources/js/Scheduler/Component.service.js
index d13a4166b..a5a931585 100644
--- a/UI/WebServerResources/js/Scheduler/Component.service.js
+++ b/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;
diff --git a/UI/WebServerResources/js/Scheduler/Scheduler.app.js b/UI/WebServerResources/js/Scheduler/Scheduler.app.js
index 2931f7f5e..71b332830 100644
--- a/UI/WebServerResources/js/Scheduler/Scheduler.app.js
+++ b/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'
           }
diff --git a/UI/WebServerResources/js/Scheduler/sgCalendarDayBlock.directive.js b/UI/WebServerResources/js/Scheduler/sgCalendarDayBlock.directive.js
index 2702d4757..76367d6c0 100644
--- a/UI/WebServerResources/js/Scheduler/sgCalendarDayBlock.directive.js
+++ b/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>'
diff --git a/UI/WebServerResources/js/Scheduler/sgCalendarDayBlockGhost.directive.js b/UI/WebServerResources/js/Scheduler/sgCalendarDayBlockGhost.directive.js
index e166e0413..5ae78bb09 100644
--- a/UI/WebServerResources/js/Scheduler/sgCalendarDayBlockGhost.directive.js
+++ b/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>',
diff --git a/UI/WebServerResources/scss/views/SchedulerUI.scss b/UI/WebServerResources/scss/views/SchedulerUI.scss
index 98492231c..547a9e79f 100644
--- a/UI/WebServerResources/scss/views/SchedulerUI.scss
+++ b/UI/WebServerResources/scss/views/SchedulerUI.scss
@@ -209,6 +209,7 @@ $block_margin: 2%; // See sgCalendarDayBlock.directive.js
   // The outer event container
   .sg-event {
     font-size: $sg-font-size-2;
+    font-weight: $sg-font-medium;
     border-radius: 3px;
     position: absolute;
     left: 0;
@@ -250,10 +251,21 @@ $block_margin: 2%; // See sgCalendarDayBlock.directive.js
      font-size: $sg-font-size-2;
     }
 
+    .icons md-icon {
+      float: right;
+    }
+
     .secondary { // location in days view, hours in month view
       font-weight: $sg-font-light;
     }
 
+    .category {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 10%;
+    }
+
     // Event DnD drag grips
 
     &:hover {