Merge pull request #90 from webpilot-ai/dev

Dev to Main
webpilot-ai · Nov 6, 2023 · 64bc001 · 64bc001
2 parents 0874189 + dd145d5
commit 64bc001
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 16 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/PromptEditor.vue b/src/components/PromptEditor.vue
@@ -12,6 +12,7 @@
         ref="textareaRef"
         v-model="command"
         :class="$style.content__textarea"
+        maxlength="2048"
         :placeholder="prompt.command || $gettext('Set a prompt here')"
       />
       <article :class="$style.content__back">

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/components/image/IconDraggingDark.svg b/src/components/image/IconDraggingDark.svg
diff --git a/src/components/image/IconDraggingLight.svg b/src/components/image/IconDraggingLight.svg
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.dragHandle"></section>
+    <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()
@@ -277,13 +285,32 @@ const shortcutText = computed(() => {
   background-color: #fff;
 }
 
-.dragHandle {
+.draggingBody {
   position: absolute;
-  top: 0;
+  top: -10px;
   left: 0;
   width: 612px;
-  height: 8px;
-  cursor: move;
+  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');
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .draggingBody:hover {
+    background-image: url('data-base64:~src/components/image/IconDraggingDark.svg');
+  }
 }
 </style>
diff --git a/src/csui/Index/ThePopupBox/ThePopupBox.vue b/src/csui/Index/ThePopupBox/ThePopupBox.vue
@@ -350,7 +350,7 @@ const handleCommandChange = () => {
 }
 
 const handleInputFocus = () => {
-  if (showPrompts.value && !showResult.value) inputCommand.value = ''
+  // if (showPrompts.value && !showResult.value) inputCommand.value = ''
   if (!showPrompts.value && showResult.value) handleShowMenu()
 }
 

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}
 }