From a0870cf25cfd254b9c3db0c86e4e6141b31ac17c Mon Sep 17 00:00:00 2001
From: Siklos <siklos@tuta.io>
Date: Tue, 9 Aug 2022 12:05:47 +0200
Subject: [PATCH] Implement drag-drop feedback

---
 .../ElementsSidebar/ElementsSidebar.tsx       | 48 +++++++++++++++++--
 1 file changed, 45 insertions(+), 3 deletions(-)

diff --git a/src/Components/ElementsSidebar/ElementsSidebar.tsx b/src/Components/ElementsSidebar/ElementsSidebar.tsx
index 47a2379..0159b4d 100644
--- a/src/Components/ElementsSidebar/ElementsSidebar.tsx
+++ b/src/Components/ElementsSidebar/ElementsSidebar.tsx
@@ -87,12 +87,41 @@ export class ElementsSidebar extends React.PureComponent<IElementsSidebarProps>
 
   public handleDragOver(event: React.DragEvent): void {
     event.preventDefault();
+    const target: HTMLButtonElement = event.target as HTMLButtonElement;
+    const rect = target.getBoundingClientRect();
+    const y = event.clientY - rect.top; // y position within the element.
+
+    if (this.props.MainContainer === null) {
+      throw new Error('[handleOnDrop] Tried to drop into the tree without a required MainContainer!');
+    }
+
+    if (target.id === this.props.MainContainer.properties.id) {
+      target.classList.add('border-8');
+      target.classList.remove('border-t-8');
+      target.classList.remove('border-b-8');
+      return;
+    }
+
+    if (y < 12) {
+      target.classList.add('border-t-8');
+      target.classList.remove('border-b-8');
+      target.classList.remove('border-8');
+    } else if (y < 24) {
+      target.classList.add('border-8');
+      target.classList.remove('border-t-8');
+      target.classList.remove('border-b-8');
+    } else {
+      target.classList.add('border-b-8');
+      target.classList.remove('border-8');
+      target.classList.remove('border-t-8');
+    }
   }
 
   public handleOnDrop(event: React.DragEvent): void {
     event.preventDefault();
     const type = event.dataTransfer.getData('type');
     const target: HTMLButtonElement = event.target as HTMLButtonElement;
+    removeBorderClasses(target);
 
     if (this.props.MainContainer === null) {
       throw new Error('[handleOnDrop] Tried to drop into the tree without a required MainContainer!');
@@ -174,7 +203,7 @@ export class ElementsSidebar extends React.PureComponent<IElementsSidebarProps>
       const selectedClass: string = this.props.SelectedContainer !== undefined &&
         this.props.SelectedContainer !== null &&
         this.props.SelectedContainer.properties.id === container.properties.id
-        ? 'border-l-4 border-blue-500 bg-slate-400/60 hover:bg-slate-400'
+        ? 'border-l-4 bg-slate-400/60 hover:bg-slate-400'
         : 'bg-slate-300/60 hover:bg-slate-300';
       containerRows.push(
         <motion.button
@@ -186,14 +215,16 @@ export class ElementsSidebar extends React.PureComponent<IElementsSidebarProps>
             duration: 0.150
           }}
           className={
-            `w-full elements-sidebar-row whitespace-pre
+            `w-full border-blue-500 elements-sidebar-row whitespace-pre
           text-left text-sm font-medium transition-all ${selectedClass}`
           }
           id={key}
           key={key}
           onDrop={(event) => this.handleOnDrop(event)}
           onDragOver={(event) => this.handleDragOver(event)}
-          onClick={() => this.props.SelectContainer(container)}>
+          onDragLeave={(event) => handleDragLeave(event)}
+          onClick={() => this.props.SelectContainer(container)}
+        >
           { text }
         </motion.button>
       );
@@ -220,3 +251,14 @@ export class ElementsSidebar extends React.PureComponent<IElementsSidebarProps>
     );
   }
 }
+
+function removeBorderClasses(target: HTMLButtonElement): void {
+  target.classList.remove('border-t-8');
+  target.classList.remove('border-8');
+  target.classList.remove('border-b-8');
+}
+
+function handleDragLeave(event: React.DragEvent): void {
+  const target: HTMLButtonElement = event.target as HTMLButtonElement;
+  removeBorderClasses(target);
+}