Style transparent (not opaque) events

Fixes #3192

NEWS

@@ -13,8 +13,9 @@ Enhancements
  - [web] new SOGoHelpURL preference to set a custom URL for SOGo help (#2768)
  - [web] now able to copy/move events and also duplicate them (#3196)
  - [web] improve preferences validation and check for unsaved changes
- - [web] display events and tasks priorities in list and day/week views
+ - [web] display events and tasks priorities in list and day/week views (#3162)
  - [web] style events depending on the user participation state
+ - [web] style transparent events (show time as free) (#3192)
 
 Bug fixes
  - [web] fixed missing columns in SELECT statements (PostgreSQL)

UI/Scheduler/NSArray+Scheduler.h

@@ -27,24 +27,25 @@
 #define eventFolderIndex            1
 #define eventCalendarNameIndex      2
 #define eventStatusIndex            3
-#define eventTitleIndex             4
+#define eventIsOpaqueIndex          4
-#define eventStartDateIndex         5
+#define eventTitleIndex             5
-#define eventEndDateIndex           6
+#define eventStartDateIndex         6
-#define eventLocationIndex          7
+#define eventEndDateIndex           7
-#define eventIsAllDayIndex          8
+#define eventLocationIndex          8
-#define eventClassificationIndex    9
+#define eventIsAllDayIndex          9
-#define eventCategoryIndex         10
+#define eventClassificationIndex   10
-#define eventPriorityIndex         11
+#define eventCategoryIndex         11
-#define eventPartMailsIndex        12
+#define eventPriorityIndex         12
-#define eventPartStatesIndex       13
+#define eventPartMailsIndex        13
-#define eventOwnerIndex            14
+#define eventPartStatesIndex       14
-#define eventIsCycleIndex          15
+#define eventOwnerIndex            15
-#define eventNextAlarmIndex        16
+#define eventIsCycleIndex          16
-#define eventRecurrenceIdIndex     17
+#define eventNextAlarmIndex        17
-#define eventIsExceptionIndex      18
+#define eventRecurrenceIdIndex     18
-#define eventEditableIndex         19
+#define eventIsExceptionIndex      19
-#define eventErasableIndex         20
+#define eventEditableIndex         20
-#define eventOwnerIsOrganizerIndex 21
+#define eventErasableIndex         21
+#define eventOwnerIsOrganizerIndex 22
 
 // See [UIxCalListingActions initialize]
 #define taskNameIndex               0

UI/Scheduler/UIxCalListingActions.m

@@ -77,7 +77,7 @@ static NSArray *tasksFields = nil;
   {
     eventsFields = [NSArray arrayWithObjects: @"c_name", @"c_folder",
                     @"calendarName",
-                    @"c_status", @"c_title", @"c_startdate",
+                    @"c_status", @"c_isopaque", @"c_title", @"c_startdate",
                     @"c_enddate", @"c_location", @"c_isallday",
                     @"c_classification", @"c_category", @"c_priority",
                     @"c_partmails", @"c_partstates", @"c_owner",
@@ -747,6 +747,7 @@ static NSArray *tasksFields = nil;
  * @apiSuccess (Success 200) {String} events.c_folder            Calendar ID
  * @apiSuccess (Success 200) {String} events.calendarName        Human readable name of calendar
  * @apiSuccess (Success 200) {Number} events.c_status            0: Cancelled, 1: Normal, 2: Tentative
+ * @apiSuccess (Success 200) {Number} events.c_isopaque          1 if event is opaque (not transparent)
  * @apiSuccess (Success 200) {String} events.c_title             Title
  * @apiSuccess (Success 200) {String} events.c_startdate         Epoch time of start date
  * @apiSuccess (Success 200) {String} events.c_enddate           Epoch time of end date
@@ -754,6 +755,7 @@ static NSArray *tasksFields = nil;
  * @apiSuccess (Success 200) {Number} events.c_isallday          1 if event lasts all day
  * @apiSuccess (Success 200) {Number} events.c_classification    0: Public, 1: Private, 2: Confidential
  * @apiSuccess (Success 200) {String} events.c_category          Category
+ * @apiSuccess (Success 200) {Number} events.c_priority          Priority (0 to 9)
  * @apiSuccess (Success 200) {String[]} events.c_partmails       Participants email addresses
  * @apiSuccess (Success 200) {String[]} events.c_partstates      Participants states
  * @apiSuccess (Success 200) {String} events.c_owner             Event's owner

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

@@ -106,10 +106,14 @@
         if (scope.block.userState)
           iElement.addClass('sg-event--' + scope.block.userState);
 
-        // Set background color
         if (scope.block.component) {
+          // Set background color
           iElement.addClass('bg-folder' + scope.block.component.pid);
           iElement.addClass('contrast-bdr-folder' + scope.block.component.pid);
+
+          // Add class for transparency
+          if (scope.block.component.c_isopaque === 0)
+            iElement.addClass('sg-event--transparent');
         }
 
       }

UI/WebServerResources/js/Scheduler/sgCalendarMonthEvent.directive.js

@@ -61,10 +61,15 @@
         if (scope.block.userState)
           iElement.addClass('sg-event--' + scope.block.userState);
 
+        if (scope.block.component) {
           // Set background color
-        if (scope.block.component)
           iElement.addClass('bg-folder' + scope.block.component.pid);
 
+          // Add class for transparency
+          if (scope.block.component.c_isopaque === 0)
+            iElement.addClass('sg-event--transparent');
+        }
+
       }
     }
   }

UI/WebServerResources/scss/views/SchedulerUI.scss

@@ -308,6 +308,29 @@ $quarter_height: 10px;
       opacity: 0.4;
     }
 
+    // Event is transparent (not opaque)
+    &--transparent {
+      &:before {
+        content: "";
+        display: block;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        border-bottom: 0;
+        background-origin: border-box;
+        background-image: linear-gradient(
+            to right bottom,
+            rgba(255, 255, 255, 0),
+            rgba(255, 255, 255, .15) 50%,
+            rgba(255, 255, 255, 0) 50%,
+            rgba(255, 255, 255, 0)
+          );
+      }
+    }
+
     .eventInside {
       overflow: hidden;
     }