feat: add visual feedback for dragging functionality

Signed-off-by: DingChil <xu.dingchao@gmail.com>
webpilot-ai · Nov 6, 2023 · dd145d5 · dd145d5
1 parent 159e955
commit dd145d5
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 14 deletions.
diff --git a/src/components/FloatControlButtons.vue b/src/components/FloatControlButtons.vue
@@ -1,31 +1,31 @@
 <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>
         </template>
       </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>
         </template>
       </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>
         </template>
       </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
@@ -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
@@ -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
@@ -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}
 }