chore: Add animations and move-cursor in "Reorder models" component

This makes the usage feel more smoothly.
DSD-DBS · Dec 11, 2023 · de564a6 · de564a6
1 parent eeb96e5
commit de564a6
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/.../project-detail/model-overview/reorder-models-dialog/reorder-models-dialog.component.html b/.../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/...ts/project-detail/model-overview/reorder-models-dialog/reorder-models-dialog.component.ts b/...ts/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(