Make all other elements in the team planner transparent when dragging either an internal or an external event from the addExisitingPane. Thus the currently dragged element gains more importance and is better visible for the user.

frontend/src/app/features/team-planner/team-planner/calendar-drag-drop.service.ts

@@ -18,6 +18,8 @@ export class CalendarDragDropService {
 
   draggableWorkPackages$ = new BehaviorSubject<WorkPackageResource[]>([]);
 
+  isDragging$ = new BehaviorSubject<string|undefined>(undefined);
+
   text = {
     draggingDisabled: {
       permissionDenied: this.I18n.t('js.team_planner.modify.errors.permission_denied'),
@@ -47,6 +49,11 @@ export class CalendarDragDropService {
 
     this.drake.on('drag', (el:HTMLElement) => {
       el.classList.add('gu-transit');
+      this.isDragging$.next(el.dataset.dragHelperId);
+    });
+
+    this.drake.on('dragend', () => {
+      this.isDragging$.next(undefined);
     });
 
     // eslint-disable-next-line no-new

frontend/src/app/features/team-planner/team-planner/planner/team-planner.component.html

@@ -95,25 +95,26 @@
     </ng-template>
 
     <ng-template #eventContent let-event="event">
-  
-      <op-wp-loading-skeleton 
+
+      <op-wp-loading-skeleton
         [viewBox]="event.extendedProps.viewBox"
         class="op-team-planner--wp-loading-skeleton"
         *ngIf="event.source && event.source.id === 'skeleton'"
       ></op-wp-loading-skeleton>
 
       <wp-single-card
-        *ngIf="!event.source || event.source.id === 'work_packages'"
-        [workPackage]="event.extendedProps.workPackage"
+        *ngIf="(!event.source || event.source.id === 'work_packages') && event.extendedProps.workPackage as wp"
+        [workPackage]="wp"
         [selectedWhenOpen]="true"
         [orientation]="'horizontal'"
         [highlightingMode]="'type'"
         [showInfoButton]="true"
-        [disabledInfo]="showDisabledText(event.extendedProps.workPackage)"
-        [isClosed]="isStatusClosed(event.extendedProps.workPackage)"
+        [disabledInfo]="showDisabledText(wp)"
+        [isClosed]="isStatusClosed(wp)"
+        [showAsGhost]="shouldShowAsGhost(wp.id, (globalDraggingItem$ | async))"
         [showAsInlineCard]="true"
-        [showStartDate]="!isWpStartDateInCurrentView(event.extendedProps.workPackage)"
-        [showEndDate]="!isWpEndDateInCurrentView(event.extendedProps.workPackage)"
+        [showStartDate]="!isWpStartDateInCurrentView(wp)"
+        [showEndDate]="!isWpEndDateInCurrentView(wp)"
         (stateLinkClicked)="openStateLink($event)"
         (cardClicked)="calendar.onCardClicked($event)"
         (cardContextMenu)="calendar.showEventContextMenu($event)"

frontend/src/app/features/team-planner/team-planner/planner/team-planner.component.ts

@@ -117,6 +117,23 @@ export class TeamPlannerComponent extends UntilDestroyedMixin implements OnInit,
 
   draggingItem$ = new BehaviorSubject<EventDragStartArg|undefined>(undefined);
 
+  globalDraggingItem$ = combineLatest([
+    this.draggingItem$,
+    this.calendarDrag.isDragging$,
+  ]).pipe(
+    map(([draggingItem, externalDrag]) => {
+      if (externalDrag !== undefined) {
+        return externalDrag;
+      }
+
+      if (draggingItem !== undefined) {
+        return (draggingItem.event.extendedProps.workPackage as WorkPackageResource).id as string;
+      }
+
+      return undefined;
+    }),
+  );
+
   dropzoneHovered$ = new BehaviorSubject<boolean>(false);
 
   dropzoneAllowed$ = this
@@ -736,6 +753,15 @@ export class TeamPlannerComponent extends UntilDestroyedMixin implements OnInit,
     }
   }
 
+  shouldShowAsGhost(id:string, globalDraggingId:string|undefined):boolean {
+    if (globalDraggingId === undefined) {
+      return false;
+    }
+
+    // Everything else except the currently dragged element should be shown as ghost.
+    return id !== globalDraggingId;
+  }
+
   private async updateEvent(info:EventResizeDoneArg|EventDropArg|EventReceiveArg):Promise<void> {
     const changeset = this.calendar.updateDates(info);
 

frontend/src/app/features/work-packages/components/wp-card-view/wp-single-card/wp-single-card.component.sass

@@ -24,6 +24,9 @@
   &_new
     padding-right: 25px
 
+  &_ghosted
+    opacity: 0.5
+
   &_selected
     background-color: $spot-color-main-light
     .op-icon--wrapper

frontend/src/app/features/work-packages/components/wp-card-view/wp-single-card/wp-single-card.component.ts

@@ -64,6 +64,8 @@ export class WorkPackageSingleCardComponent extends UntilDestroyedMixin implemen
 
   @Input() public isClosed = false;
 
+  @Input() public showAsGhost = false;
+
   @Output() onRemove = new EventEmitter<WorkPackageResource>();
 
   @Output() stateLinkClicked = new EventEmitter<{ workPackageId:string, requestedState:string }>();
@@ -158,6 +160,7 @@ export class WorkPackageSingleCardComponent extends UntilDestroyedMixin implemen
       [`${base}_shrink`]: this.shrinkOnMobile,
       [`${base}_inline`]: this.showAsInlineCard,
       [`${base}_closed`]: this.isClosed,
+      [`${base}_ghosted`]: this.showAsGhost,
       // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
       [`${base}-${this.workPackage.id}`]: !!this.workPackage.id,
       [`${base}_${this.orientation}`]: true,

frontend/src/global_styles/content/modules/_team_planner.sass

@@ -28,9 +28,11 @@
       margin-left: -136px
 
   .fc-event-dragging
+    opacity: 1 !important
+
     .op-wp-single-card--content-inline-date
       visibility: hidden
 
   .op-team-planner--wp-loading-skeleton
     svg
-      height: 80px
+      height: 80px