(css,js) Btn to expand toolbar of all-day events

UI/WebServerResources/js/Scheduler/CalendarController.js

@@ -10,6 +10,12 @@
   function CalendarController($scope, $rootScope, $state, $stateParams, Calendar, Component, stateEventsBlocks) {
     var vm = this, deregisterCalendarsList;
 
+    // Make the toolbar state of all-day events persistent
+    if (angular.isUndefined(CalendarController.expandedAllDays))
+      CalendarController.expandedAllDays = false;
+
+    vm.expandedAllDays = CalendarController.expandedAllDays;
+    vm.toggleAllDays = toggleAllDays;
     vm.views = stateEventsBlocks;
     vm.changeDate = changeDate;
     vm.changeView = changeView;
@@ -19,6 +25,12 @@
 
     $scope.$on('$destroy', deregisterCalendarsList);
 
+    // Expand or collapse all-day events
+    function toggleAllDays() {
+      CalendarController.expandedAllDays = !CalendarController.expandedAllDays;
+      vm.expandedAllDays = CalendarController.expandedAllDays;
+    }
+
     function updateView() {
       // See stateEventsBlocks in Scheduler.app.js
       Component.$eventsBlocksForView($stateParams.view, $stateParams.day.asDate()).then(function(data) {

UI/WebServerResources/scss/components/icon/icon.scss

@@ -62,6 +62,9 @@ md-icon {
   &.md-rotate-180 {
     transform: rotate(180deg);
   }
+  &.md-rotate-180-ccw {
+    transform: rotate(-180deg);
+  }
 //   &.icon-add:before {
 //     content: "\e317";
   //   }

UI/WebServerResources/scss/views/SchedulerUI.scss

@@ -62,16 +62,17 @@ $quarter_height: 10px;
 
   // The days labels appear in the toolbar
   md-toolbar {
+    flex-shrink: 0;
     min-height: 0;
     &.daysView, &.monthView {
       background-color: #fff;
       z-index: $z-index-toolbar - 1;
       .days {
-        margin-left: $hours_margin;
         &:not([sg-calendar-scroll-view$="allday"]) {
           overflow-y: scroll;
         }
         &.dayLabels {
+          flex-shrink: 0;
           min-height: 0;
           .day {
             padding-left: 1%;
@@ -82,6 +83,12 @@ $quarter_height: 10px;
         }
       }
     }
+    &.monthView {
+      // Toolbar of month view
+      > div {
+        overflow-y: scroll;
+      }
+    }
     &[sg-view$=dayview] {
       // Toolbar of day view only
       .dayLabels {
@@ -91,17 +98,12 @@ $quarter_height: 10px;
         }
       }
     }
-    &.monthView {
-      // Toolbar of month view
-      > div {
-        overflow-y: scroll;
-      }
-    }
   }
 
   // The all-day events appear in the shrinkable toolbar, bellow the days labels
   .allDaysView {
     border-bottom: 1px solid sg-color($sogoPaper, 300);
+    flex-shrink: 0;
     max-height: $sg-font-size-4 * 6;
     min-height: 0;
     overflow: hidden;
@@ -147,6 +149,23 @@ $quarter_height: 10px;
     }
   }
 
+  // Toolbar of all-day events when expanded to display all events
+  .allDaysView__expanded {
+    max-height: none;
+    min-height: 0;
+  }
+
+  // Side column on the left of the days labels and all-day events;
+  // Contains the toggle button to collapse/expand the toolbar
+  .allDaysView--sidenav {
+    border-bottom: 1px solid sg-color($sogoPaper, 300);
+    width: $hours_margin;
+    .md-icon-button {
+      position: absolute;
+      bottom: 0;
+    }
+  }
+
   md-card {
     // All views wrap a md-card
     position: absolute;