Style transparent (not opaque) events

Fixes #3192
Alinto · Apr 22, 2016 · 7ea3608 · 7ea3608
1 parent 09d0498
commit 7ea3608
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 23 deletions.
diff --git a/NEWS b/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)

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

diff --git a/UI/Scheduler/UIxCalListingActions.m b/UI/Scheduler/UIxCalListingActions.m
@@ -77,7 +77,7 @@ + (void) initialize
   {
     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,13 +747,15 @@ - (void) saveSortValue: (NSString *) submodule
  * @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
  * @apiSuccess (Success 200) {String} events.c_location          Event's location
  * @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

diff --git a/UI/WebServerResources/js/Scheduler/sgCalendarDayBlock.directive.js b/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');
         }
 
       }

diff --git a/UI/WebServerResources/js/Scheduler/sgCalendarMonthEvent.directive.js b/UI/WebServerResources/js/Scheduler/sgCalendarMonthEvent.directive.js
@@ -61,10 +61,15 @@
         if (scope.block.userState)
           iElement.addClass('sg-event--' + scope.block.userState);
 
-        // Set background color
-        if (scope.block.component)
+        if (scope.block.component) {
+          // Set background color
           iElement.addClass('bg-folder' + scope.block.component.pid);
 
+          // Add class for transparency
+          if (scope.block.component.c_isopaque === 0)
+            iElement.addClass('sg-event--transparent');
+        }
+
       }
     }
   }

diff --git a/UI/WebServerResources/scss/views/SchedulerUI.scss b/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;
     }