From de564a6aa11a318fe3fec15d2ac8c24996693b5c Mon Sep 17 00:00:00 2001
From: MoritzWeber <kontakt@moritz-weber.net>
Date: Mon, 11 Dec 2023 22:13:02 +0100
Subject: [PATCH] chore: Add animations and move-cursor in "Reorder models"
 component

This makes the usage feel more smoothly.
---
 .../reorder-models-dialog.component.html                     | 5 ++++-
 .../reorder-models-dialog/reorder-models-dialog.component.ts | 4 ++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/projects/project-detail/model-overview/reorder-models-dialog/reorder-models-dialog.component.html b/frontend/src/app/projects/project-detail/model-overview/reorder-models-dialog/reorder-models-dialog.component.html
index 9ebe1ba3e1..b4695605be 100644
--- a/frontend/src/app/projects/project-detail/model-overview/reorder-models-dialog/reorder-models-dialog.component.html
+++ b/frontend/src/app/projects/project-detail/model-overview/reorder-models-dialog/reorder-models-dialog.component.html
@@ -18,7 +18,10 @@ <h2>Reorder models</h2>
     class="my-[15px] rounded border border-solid"
   >
     @for (model of data.models; track model.id) {
-      <div cdkDrag class="flex items-center border-b border-solid">
+      <div
+        cdkDrag
+        class="flex cursor-move items-center border-b border-solid bg-white"
+      >
         <span class="ml-[10px]">
           <mat-icon class="mt-[10px] text-sm">reorder</mat-icon>
         </span>
diff --git a/frontend/src/app/projects/project-detail/model-overview/reorder-models-dialog/reorder-models-dialog.component.ts b/frontend/src/app/projects/project-detail/model-overview/reorder-models-dialog/reorder-models-dialog.component.ts
index ed683c36a9..218f4d266a 100644
--- a/frontend/src/app/projects/project-detail/model-overview/reorder-models-dialog/reorder-models-dialog.component.ts
+++ b/frontend/src/app/projects/project-detail/model-overview/reorder-models-dialog/reorder-models-dialog.component.ts
@@ -15,6 +15,10 @@ import {} from 'src/app/projects/service/project.service';
 @Component({
   selector: 'app-reorder-models',
   templateUrl: './reorder-models-dialog.component.html',
+  styles: [
+    '.cdk-drag-placeholder { opacity: 0; }',
+    '.cdk-drag-animating { transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); }',
+  ],
 })
 export class ReorderModelsDialogComponent {
   constructor(