admin calendar: surround select item by shadow-box

CHANGELOG.md

@@ -9,7 +9,7 @@
 - Configuration of phone number in members registration forms: can be required or optional, depending on `PHONE_REQUIRED` configuration
 - Improved user experience in defining slots in the calendar management
 - Improved notification email to the member when a rolling subscription is taken
-- Calendar management: improved legend style
+- Calendar management: improved legend display and visual behavior
 - Handle Ctrl^C in upgrade scripts
 - Updated moment-timezone
 - Added freeCAD files as default allowed extensions

app/assets/javascripts/controllers/admin/calendar.js.erb

@@ -23,7 +23,6 @@ Application.Controllers.controller('AdminCalendarController', ['$scope', '$state
   /* PRIVATE STATIC CONSTANTS */
 
     // The calendar is divided in slots of 30 minutes
-    let loadingCb;
     const BASE_SLOT = '00:30:00';
 
     // The bookings can be positioned every half hours
@@ -40,6 +39,9 @@ Application.Controllers.controller('AdminCalendarController', ['$scope', '$state
     // currently selected availability
     $scope.availability = null;
 
+    // corresponding fullCalendar item in the DOM
+    $scope.availabilityDom = null;
+
     // bind the availabilities slots with full-Calendar events
     $scope.eventSources = [];
     $scope.eventSources.push({
@@ -62,7 +64,10 @@ Application.Controllers.controller('AdminCalendarController', ['$scope', '$state
         return calendarEventClickCb(event, jsEvent, view);
       },
       eventRender (event, element, view) {
-        return eventRenderCb(event, element);
+        return eventRenderCb(event, element, view);
+      },
+      viewRender(view, element) {
+        return viewRenderCb(view, element);
       },
       loading (isLoading, view) {
         return loadingCb(isLoading, view);
@@ -328,6 +333,12 @@ Application.Controllers.controller('AdminCalendarController', ['$scope', '$state
     var calendarEventClickCb = function (event, jsEvent, view) {
       $scope.availability = event;
 
+      if ($scope.availabilityDom) {
+        $scope.availabilityDom.classList.remove("fc-selected")
+      }
+      $scope.availabilityDom = jsEvent.target.closest('.fc-event');
+      $scope.availabilityDom.classList.add("fc-selected")
+
       // if the user has clicked on the delete event button, delete the event
       if ($(jsEvent.target).hasClass('remove-event')) {
         return $scope.removeSlot();
@@ -360,12 +371,23 @@ Application.Controllers.controller('AdminCalendarController', ['$scope', '$state
      * Triggered when resource fetching starts/stops.
      * @see https://fullcalendar.io/docs/resource_data/loading/
      */
-    return loadingCb = function (isLoading, view) {
+    const loadingCb = function (isLoading, view) {
       if (isLoading) {
-      // we remove existing events when fetching starts to prevent duplicates
-        return uiCalendarConfig.calendars.calendar.fullCalendar('removeEvents');
+        // we remove existing events when fetching starts to prevent duplicates
+        uiCalendarConfig.calendars.calendar.fullCalendar('removeEvents');
+
       }
     };
+
+    /**
+     * Triggered when the view is changed
+     * @see https://fullcalendar.io/docs/v3/viewRender#v2
+     */
+    const viewRenderCb = function(view, element) {
+      // we unselect the current event to keep consistency
+      $scope.availability = null;
+      $scope.availabilityDom = null;
+    };
   }
 
 ]);

app/assets/stylesheets/app.plugins.scss

@@ -1,4 +1,4 @@
-// medium editor placeholder 
+// medium editor placeholder
 .medium-editor-placeholder {
     min-height: 30px; // fix for firefox
 }
@@ -126,6 +126,10 @@
   }
 }
 
+.fc-selected {
+  box-shadow: 0 6px 10px 0 rgba(0,0,0,0.14),0 1px 18px 0 rgba(0,0,0,0.12),0 3px 5px -1px rgba(0,0,0,0.2);
+}
+
 
 
 

app/assets/templates/admin/calendar/calendar.html.erb

@@ -105,7 +105,7 @@
         </button>
       </div>
       <div class="widget-content no-bg auto wrapper" ng-show="availability.available_type == 'event'">
-        <a class="btn btn-default m-t pointer" ui-sref="app.admin.events_edit({id: availability.event_id})">
+        <a class="btn btn-default pointer" ui-sref="app.admin.events_edit({id: availability.event_id})">
           <span>
             <i class="fa fa-edit"></i>
             <span class="m-l-xs" translate>{{ 'admin_calendar.edit_event' }}</span>