From dd145d5f3a1297b81531784f2f4823c50725599c Mon Sep 17 00:00:00 2001
From: DingChil <xu.dingchao@gmail.com>
Date: Mon, 6 Nov 2023 19:17:08 +0800
Subject: [PATCH] feat: add visual feedback for dragging functionality

Signed-off-by: DingChil <xu.dingchao@gmail.com>
---
 src/components/FloatControlButtons.vue |  8 ++++----
 src/components/PromptMenu.vue          |  8 ++++----
 src/csui/Index/TheEntry.vue            | 24 +++++++++++++++++++-----
 src/hooks/useDraggable.ts              |  6 +++++-
 4 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/src/components/FloatControlButtons.vue b/src/components/FloatControlButtons.vue
index 034a584..392bb49 100644
--- a/src/components/FloatControlButtons.vue
+++ b/src/components/FloatControlButtons.vue
@@ -1,7 +1,7 @@
 <template>
   <ul :class="$style.control">
     <li v-show="!showBack" :class="$style.box">
-      <Popper hover offset-distance="14" offset-skid="-4" placement="right">
+      <Popper hover offset-distance="2" offset-skid="-4" placement="right">
         <InteractiveIcon :class="$style.btn" type="close" @click="popupClose" />
         <template #content>
           <span :class="$style.popover">{{ $gettext('Close') }}</span>
@@ -9,7 +9,7 @@
       </Popper>
     </li>
     <li v-show="showBack" :class="$style.box">
-      <Popper hover offset-distance="14" offset-skid="-4" placement="right">
+      <Popper hover offset-distance="2" offset-skid="-4" placement="right">
         <InteractiveIcon :class="$style.btn" type="previous" @click="popupBack" />
         <template #content>
           <span :class="$style.popover">{{ $gettext('Back') }}</span>
@@ -17,7 +17,7 @@
       </Popper>
     </li>
     <li v-show="showSetting" :class="$style.box">
-      <Popper hover offset-distance="14" offset-skid="-4" placement="right">
+      <Popper hover offset-distance="2" offset-skid="-4" placement="right">
         <InteractiveIcon :class="$style.btn" type="setting" @click="openSettingPage" />
         <template #content>
           <span :class="$style.popover">{{ $gettext('Settings') }}</span>
@@ -25,7 +25,7 @@
       </Popper>
     </li>
     <li v-show="showCopy" :class="$style.box">
-      <Popper hover offset-distance="14" offset-skid="-4" placement="right">
+      <Popper hover offset-distance="2" offset-skid="-4" placement="right">
         <InteractiveIcon :class="$style.btn" type="copy" @click="handleCopy" />
         <template #content>
           <span :class="$style.popover">{{ $gettext('Copy') }}</span>
diff --git a/src/components/PromptMenu.vue b/src/components/PromptMenu.vue
index 51733b9..4ebadf1 100644
--- a/src/components/PromptMenu.vue
+++ b/src/components/PromptMenu.vue
@@ -136,9 +136,9 @@ const handleEditPrompt = index => {
     height: 20px;
     margin: 0 6px;
     padding: 0 6px;
-    color: var(--webpilot-theme-main-text-color, #292929);
+    color: var(--webpilot-theme-main-text-color, #292929) !important;
     font-weight: 600;
-    font-size: 12px;
+    font-size: 12px !important;
     line-height: 20px;
     border: 1px solid var(--webpilot-theme-stoke-and-hover-status, #dcdee1);
     border-radius: 10px;
@@ -148,8 +148,8 @@ const handleEditPrompt = index => {
     flex: 1;
     margin: 0;
     padding: 8px 0;
-    color: var(--webpilot-theme-main-text-color, #292929);
-    font-size: 14px;
+    color: var(--webpilot-theme-main-text-color, #292929) !important;
+    font-size: 14px !important;
     line-height: 22px;
     text-align: left;
   }
diff --git a/src/csui/Index/TheEntry.vue b/src/csui/Index/TheEntry.vue
index b491a89..7112d2b 100644
--- a/src/csui/Index/TheEntry.vue
+++ b/src/csui/Index/TheEntry.vue
@@ -24,7 +24,10 @@
     }"
   >
     <ThePopupBox id="webpilot_popup" :is-ask-page="isAskPage" @close-popup="handleClosePopup" />
-    <section ref="refDragHandle" :class="$style.draggingBody" />
+    <section
+      ref="refDragHandle"
+      :class="[$style.draggingBody, {[$style.draggingHand]: isDragging}]"
+    />
   </section>
 </template>
 
@@ -110,7 +113,12 @@ const updateTextAndPosition = textAndPosition => {
 useSelectedText(updateTextAndPosition)
 
 const {offsetY: tailScrollYOffset, resetScroll} = useScroll(refTail, targetElementRef)
-const {offsetX: dragOffsetX, offsetY: dragOffsetY, resetDrag} = useDraggable(refDragHandle)
+const {
+  offsetX: dragOffsetX,
+  offsetY: dragOffsetY,
+  resetDrag,
+  isDragging,
+} = useDraggable(refDragHandle)
 
 // keyboard
 const keys = useMagicKeys()
@@ -279,18 +287,24 @@ const shortcutText = computed(() => {
 
 .draggingBody {
   position: absolute;
-  top: -14px;
+  top: -10px;
   left: 0;
   width: 612px;
-  height: 22px;
+  height: 18px;
   background: var(--webpilot-theme-content-background-color, #fff) center / 14px no-repeat;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
+  cursor: grab;
   user-select: none;
 
+  /* stylelint-disable */
+  &.draggingHand {
+    cursor: grabbing;
+  }
+  /* stylelint-enable */
+
   &:hover {
     background-image: url('data-base64:~src/components/image/IconDraggingLight.svg');
-    cursor: pointer;
   }
 }
 
diff --git a/src/hooks/useDraggable.ts b/src/hooks/useDraggable.ts
index 49b67e4..d2a6671 100644
--- a/src/hooks/useDraggable.ts
+++ b/src/hooks/useDraggable.ts
@@ -5,6 +5,7 @@ export default function useDraggable(element) {
   const lastOffset = {x: 0, y: 0}
   const offsetX = ref(0)
   const offsetY = ref(0)
+  const isDragging = ref(false)
 
   const handleMousemove = e => {
     const {clientX: x, clientY: y} = e
@@ -20,10 +21,12 @@ export default function useDraggable(element) {
     originPosition.y = e.clientY
 
     document.addEventListener('mousemove', handleMousemove)
+    isDragging.value = true
     document.addEventListener('mouseup', () => {
       lastOffset.x = offsetX.value
       lastOffset.y = offsetY.value
       document.removeEventListener('mousemove', handleMousemove)
+      isDragging.value = false
     })
   }
 
@@ -37,6 +40,7 @@ export default function useDraggable(element) {
 
   onUnmounted(() => {
     element.value.removeEventListener('mousedown', startListenMove)
+    isDragging.value = false
   })
 
   const resetDrag = () => {
@@ -48,5 +52,5 @@ export default function useDraggable(element) {
     offsetY.value = 0
   }
 
-  return {offsetX, offsetY, resetDrag}
+  return {offsetX, offsetY, resetDrag, isDragging}
 }