From 3872bc2d67450848075e1ba54e69c29e3324cec6 Mon Sep 17 00:00:00 2001
From: sftblw <ccwpc@hanmail.net>
Date: Wed, 15 Nov 2023 00:18:44 +0900
Subject: [PATCH] add hover indicator

---
 src/components/DragDropIndicator.scss     | 20 ++++++++++++++++++++
 src/components/DragDropIndicator.tsx      | 15 +++++++++++++++
 src/pages/renaming/RenamePatternInput.tsx |  2 +-
 src/pages/renaming/Renamer.tsx            | 12 ++++++++++++
 src/pages/settings/AppInfo.tsx            |  2 +-
 src/variables.scss                        |  1 -
 6 files changed, 49 insertions(+), 3 deletions(-)
 create mode 100644 src/components/DragDropIndicator.scss
 create mode 100644 src/components/DragDropIndicator.tsx

diff --git a/src/components/DragDropIndicator.scss b/src/components/DragDropIndicator.scss
new file mode 100644
index 0000000..1e0fed7
--- /dev/null
+++ b/src/components/DragDropIndicator.scss
@@ -0,0 +1,20 @@
+@import "../variables.scss";
+
+.drag-drop-indicator {
+    pointer-events: none;
+    --uno: fixed w-full h-full left-0 top-0;
+    --uno: border-0 border-solid box-border;
+
+    border-color: transparent;
+    
+    &.hover {
+        --uno: border-12 border-solid box-border;
+        border-color: rgba($theme-primary-3, 0.5);
+    }
+    
+    transition: all 0.05s ease-in-out;
+
+    &.hover {
+        transition: all 0.05s ease-in-out;
+    }
+}
\ No newline at end of file
diff --git a/src/components/DragDropIndicator.tsx b/src/components/DragDropIndicator.tsx
new file mode 100644
index 0000000..6630f93
--- /dev/null
+++ b/src/components/DragDropIndicator.tsx
@@ -0,0 +1,15 @@
+import { JSX, createEffect, createMemo, createSignal, mergeProps, splitProps } from "solid-js";
+import './DragDropIndicator.scss';
+
+interface DragDropIndicatorProps {
+    hover: boolean,
+    [key: string]: any,
+}
+
+
+export default function DragDropIndicator(props: DragDropIndicatorProps): JSX.Element {
+    return (
+        <div class={'drag-drop-indicator ' + (props.class ?? "") + (props.hover ? "hover" : "")}
+        />
+    );
+}
\ No newline at end of file
diff --git a/src/pages/renaming/RenamePatternInput.tsx b/src/pages/renaming/RenamePatternInput.tsx
index 92dd06d..936e15c 100644
--- a/src/pages/renaming/RenamePatternInput.tsx
+++ b/src/pages/renaming/RenamePatternInput.tsx
@@ -37,7 +37,7 @@ function RenamePatternInput(props: RenamePattern): JSX.Element {
                 <ValidatedInput id="rename_pattern" class={input_classes}
                     value={pattern()}
                     onInput={ (value) => setPattern(value) }
-                    validator={(value) => { return true }}
+                    validator={(_value) => { return true }}
                 />
             </li>
         </ul>
diff --git a/src/pages/renaming/Renamer.tsx b/src/pages/renaming/Renamer.tsx
index 5faf30f..9a373aa 100644
--- a/src/pages/renaming/Renamer.tsx
+++ b/src/pages/renaming/Renamer.tsx
@@ -10,8 +10,16 @@ import { PathItem } from "./path_item";
 import { createSettingsSignal } from "../../settings/settings_signal";
 import RenameTarget, { RenameResult } from "./rename_target";
 import RenameTargetView from "./RenameTargetView";
+import DragDropIndicator from "../../components/DragDropIndicator";
 
+enum DragDropState {
+    Hover,
+    Drop,
+    Cancel,
+    None
+}
 
+let [dragDropState, setDragDropState] = createSignal(DragDropState.None);
 let [filesRaw, setFilesRaw] = createSignal([] as string[]);
 let [renameTargets, setRenameTargets] = createSignal([] as RenameTarget[]);
 
@@ -78,14 +86,17 @@ export default function Renamer(): JSX.Element {
             switch (payload.type) {
                 case 'hover': {
                     setFilesRaw(payload.paths);
+                    setDragDropState(DragDropState.Hover);
                 } break;
                 case 'drop': {
                     if (untrack(() => optionsVal.renameWhenDropped)) {
                         renameFiles(true);
                     }
+                    setDragDropState(DragDropState.Drop);
                 } break;
                 case 'cancel': {
                     setFilesRaw([]);
+                    setDragDropState(DragDropState.Cancel);
                 } break;
             }
         });
@@ -166,6 +177,7 @@ export default function Renamer(): JSX.Element {
 
     return (
         <>
+            <DragDropIndicator hover={dragDropState() == DragDropState.Hover} />
             <Show when={errorMsg().length > 0}>
                 <div class="info info-error">{errorMsg()}</div>
             </Show>
diff --git a/src/pages/settings/AppInfo.tsx b/src/pages/settings/AppInfo.tsx
index 1b46af8..0444ee3 100644
--- a/src/pages/settings/AppInfo.tsx
+++ b/src/pages/settings/AppInfo.tsx
@@ -1,4 +1,4 @@
-import { JSX, createResource, lazy } from "solid-js";
+import { JSX, createResource } from "solid-js";
 
 import { getName, getTauriVersion, getVersion } from '@tauri-apps/api/app';
 import './AppInfo.scss';
diff --git a/src/variables.scss b/src/variables.scss
index 0a8fb4a..55f4797 100644
--- a/src/variables.scss
+++ b/src/variables.scss
@@ -14,7 +14,6 @@ $theme-error-1: #e44;
 $theme-error-2: #c22;
 $theme-error-3: #a00;
 
-
 $theme-error-bg-1: #fdd;
 $theme-error-bg-2: #eaa;
 $theme-error-bg-3: #d99;
\ No newline at end of file