fix(resizable): prevent resizing of elements when not on top stack

Fixes #662

Author: mattlewis92

src/modules/day/calendar-day-view.component.ts

@@ -115,7 +115,6 @@ export interface DayViewEventResize {
             [class.cal-ends-within-day]="!dayEvent.endsAfterDay"
             [ngClass]="dayEvent.event.cssClass"
             mwlResizable
-            [resizeEdges]="{top: dayEvent.event?.resizable?.beforeStart, bottom: dayEvent.event?.resizable?.afterEnd}"
             [resizeSnapGrid]="{top: eventSnapSize || hourSegmentHeight, bottom: eventSnapSize || hourSegmentHeight}"
             [validateResize]="validateResize"
             (resizeStart)="resizeStarted(dayEvent, $event, dayEventsContainer)"
@@ -133,6 +132,12 @@ export interface DayViewEventResize {
             [style.height.px]="dayEvent.height"
             [style.marginLeft.px]="dayEvent.left + 70"
             [style.width.px]="dayEvent.width - 1">
+            <div
+              class="cal-resize-handle cal-resize-handle-before-start"
+              *ngIf="dayEvent.event?.resizable?.beforeStart && !dayEvent.startsBeforeDay"
+              mwlResizeHandle
+              [resizeEdges]="{ top: true }">
+            </div>
             <mwl-calendar-day-view-event
               [dayEvent]="dayEvent"
               [tooltipPlacement]="tooltipPlacement"
@@ -143,6 +148,12 @@ export interface DayViewEventResize {
               [eventActionsTemplate]="eventActionsTemplate"
               (eventClicked)="eventClicked.emit({event: dayEvent.event})">
             </mwl-calendar-day-view-event>
+            <div
+              class="cal-resize-handle cal-resize-handle-after-end"
+              *ngIf="dayEvent.event?.resizable?.afterEnd && !dayEvent.endsAfterDay"
+              mwlResizeHandle
+              [resizeEdges]="{ bottom: true }">
+            </div>
           </div>
         </div>
         <div class="cal-hour" *ngFor="let hour of hours; trackBy:trackByHour" [style.minWidth.px]="view?.width + 70">

src/modules/day/calendar-day-view.scss

@@ -64,9 +64,6 @@
     border: 1px solid #1e90ff;
     color: #1e90ff;
     box-sizing: border-box;
-  }
-
-  .cal-event {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -98,4 +95,15 @@
       pointer-events: none;
     }
   }
+
+  .cal-resize-handle {
+    width: 100%;
+    height: 4px;
+    cursor: row-resize;
+    position: absolute;
+
+    &.cal-resize-handle-after-end {
+      bottom: 0;
+    }
+  }
 }

src/modules/week/calendar-week-view.component.ts

@@ -120,10 +120,6 @@ export interface CalendarWeekViewBeforeRenderEvent extends WeekView {
             [style.width]="((100 / days.length) * allDayEvent.span) + '%'"
             [style.marginLeft]="((100 / days.length) * allDayEvent.offset) + '%'"
             mwlResizable
-            [resizeEdges]="{
-              left: allDayEvent.event?.resizable?.beforeStart, 
-              right: allDayEvent.event?.resizable?.afterEnd
-            }"
             [resizeSnapGrid]="{left: dayColumnWidth, right: dayColumnWidth}"
             [validateResize]="validateResize"
             (resizeStart)="allDayEventResizeStarted(eventRowContainer, allDayEvent, $event)"
@@ -140,6 +136,12 @@ export interface CalendarWeekViewBeforeRenderEvent extends WeekView {
             [validateDrag]="snapDraggedEvents ? validateDrag : false"
             (dragPointerDown)="dragStarted(eventRowContainer, event)"
             (dragEnd)="dragEnded(allDayEvent, $event, dayColumnWidth)">
+            <div
+              class="cal-resize-handle cal-resize-handle-before-start"
+              *ngIf="allDayEvent.event?.resizable?.beforeStart && !allDayEvent.startsBeforeWeek"
+              mwlResizeHandle
+              [resizeEdges]="{ left: true }">
+            </div>
             <mwl-calendar-week-view-event
               [weekEvent]="allDayEvent"
               [tooltipPlacement]="tooltipPlacement"
@@ -150,6 +152,12 @@ export interface CalendarWeekViewBeforeRenderEvent extends WeekView {
               [eventActionsTemplate]="eventActionsTemplate"
               (eventClicked)="eventClicked.emit({event: allDayEvent.event})">
             </mwl-calendar-week-view-event>
+            <div
+              class="cal-resize-handle cal-resize-handle-after-end"
+              *ngIf="allDayEvent.event?.resizable?.afterEnd && !allDayEvent.endsAfterWeek"
+              mwlResizeHandle
+              [resizeEdges]="{ right: true }">
+            </div>
           </div>
         </div>
       </div>

src/modules/week/calendar-week-view.scss

@@ -102,6 +102,18 @@
       justify-content: center;
       font-size: 14px;
     }
+
+    .cal-resize-handle {
+      width: 6px;
+      height: 100%;
+      cursor: col-resize;
+      position: absolute;
+      top: 0;
+
+      &.cal-resize-handle-after-end {
+        right: 0;
+      }
+    }
   }
 
   .cal-header.cal-today {
@@ -161,6 +173,17 @@
       padding: 0 5px;
       line-height: 25px;
     }
+
+    .cal-resize-handle {
+      width: 100%;
+      height: 4px;
+      cursor: row-resize;
+      position: absolute;
+
+      &.cal-resize-handle-after-end {
+        bottom: 0;
+      }
+    }
   }
 
   .cal-hour-odd {
@@ -187,17 +210,6 @@
     background-color: #ededed;
   }
 
-  .cal-resize-handle {
-    width: 100%;
-    height: 3px;
-    cursor: row-resize;
-    position: absolute;
-
-    &.cal-resize-handle-after-end {
-      margin-top: -3px;
-    }
-  }
-
   /* stylelint-disable-next-line selector-type-no-unknown */
   mwl-calendar-week-view-hour-segment, /* fix for https://github.com/mattlewis92/angular-calendar/issues/260*/
   .cal-hour-segment {