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.

pull/10532/head
Henriette Darge 3 years ago
parent 88549d3288
commit d4ec274a20
  1. 7
      frontend/src/app/features/team-planner/team-planner/calendar-drag-drop.service.ts
  2. 17
      frontend/src/app/features/team-planner/team-planner/planner/team-planner.component.html
  3. 26
      frontend/src/app/features/team-planner/team-planner/planner/team-planner.component.ts
  4. 3
      frontend/src/app/features/work-packages/components/wp-card-view/wp-single-card/wp-single-card.component.sass
  5. 3
      frontend/src/app/features/work-packages/components/wp-card-view/wp-single-card/wp-single-card.component.ts
  6. 4
      frontend/src/global_styles/content/modules/_team_planner.sass

@ -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

@ -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)"

@ -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);

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

@ -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,

@ -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

Loading…
Cancel
Save