From 3d6e164126fb387ea942f4dec75fc06c78a81301 Mon Sep 17 00:00:00 2001
From: DingChil <xu.dingchao@gmail.com>
Date: Thu, 26 Oct 2023 16:06:22 +0800
Subject: [PATCH] fix: sample image updates following the selected value in
 settings page

Signed-off-by: DingChil <xu.dingchao@gmail.com>
---
 ...ctText.vue => ImageSelectTextWithIcon.vue} | 22 +++++++++----------
 .../image/ImageSelectTextWithoutIcon.vue      | 14 ++++++++++++
 src/config.ts                                 |  2 +-
 src/csui/Index/TheEntry.vue                   |  1 +
 src/options/components/SwitchButton.vue       |  2 +-
 src/options/views/ExtensionView.vue           |  8 +++----
 src/tabs/components/StepThree.vue             |  6 +++--
 7 files changed, 36 insertions(+), 19 deletions(-)
 rename src/components/image/{ImageSelectText.vue => ImageSelectTextWithIcon.vue} (79%)
 create mode 100644 src/components/image/ImageSelectTextWithoutIcon.vue

diff --git a/src/components/image/ImageSelectText.vue b/src/components/image/ImageSelectTextWithIcon.vue
similarity index 79%
rename from src/components/image/ImageSelectText.vue
rename to src/components/image/ImageSelectTextWithIcon.vue
index f6a118f..ea19b84 100644
--- a/src/components/image/ImageSelectText.vue
+++ b/src/components/image/ImageSelectTextWithIcon.vue
@@ -10,20 +10,20 @@
       d="M1 11C1 5.47715 5.47715 1 11 1H174C179.523 1 184 5.47715 184 11V20H1V11Z"
       fill="#EDEFF2"
     />
-    <g filter="url(#filter0_dd_4854_27839)">
+    <g filter="url(#filter0_dd_4854_23104)">
       <rect fill="white" height="22" rx="5" width="22" x="97" y="39" />
     </g>
     <path
-      d="M111.444 50.0005L109.602 51.8427C108.717 52.7275 107.283 52.7275 106.398 51.8427L104.556 50.0005C103.359 48.8028 102.763 47.1299 102.936 45.4453L102.983 44.9834L101.438 46.5283C99.5205 48.4462 99.5205 51.5547 101.438 53.4718L104.528 56.5617C106.446 58.4795 109.555 58.4795 111.472 56.5617L113.017 55.0168L113.064 54.5548C113.237 52.871 112.642 51.1982 111.444 50.0005Z"
-      fill="url(#paint0_linear_4854_27839)"
+      d="M111.444 50.0004L109.602 51.8426C108.717 52.7274 107.283 52.7274 106.398 51.8426L104.556 50.0004C103.359 48.8027 102.763 47.1298 102.936 45.4453L102.983 44.9833L101.438 46.5283C99.5205 48.4461 99.5205 51.5547 101.438 53.4718L104.528 56.5616C106.446 58.4795 109.555 58.4795 111.472 56.5616L113.017 55.0167L113.064 54.5548C113.237 52.871 112.642 51.1981 111.444 50.0004Z"
+      fill="url(#paint0_linear_4854_23104)"
     />
     <path
       d="M104.556 50.0004L106.398 48.1582C107.283 47.2734 108.717 47.2734 109.602 48.1582L111.397 49.9528C112.624 51.1801 113.234 52.8952 113.057 54.6219L113.017 55.0167L114.562 53.4718C116.479 51.5539 116.479 48.4453 114.562 46.5282L111.472 43.4384C109.554 41.5205 106.445 41.5205 104.528 43.4384L103.018 44.9482C102.996 44.9708 102.981 45.0013 102.978 45.0333L102.936 45.4452C102.763 47.1298 103.359 48.8027 104.556 50.0004Z"
-      fill="url(#paint1_linear_4854_27839)"
+      fill="url(#paint1_linear_4854_23104)"
     />
     <defs>
       <filter
-        id="filter0_dd_4854_27839"
+        id="filter0_dd_4854_23104"
         color-interpolation-filters="sRGB"
         filterUnits="userSpaceOnUse"
         height="52"
@@ -41,7 +41,7 @@
         <feOffset dy="5" />
         <feGaussianBlur stdDeviation="7.5" />
         <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0794837 0" />
-        <feBlend in2="BackgroundImageFix" mode="normal" result="effect1_dropShadow_4854_27839" />
+        <feBlend in2="BackgroundImageFix" mode="normal" result="effect1_dropShadow_4854_23104" />
         <feColorMatrix
           in="SourceAlpha"
           result="hardAlpha"
@@ -52,19 +52,19 @@
         <feGaussianBlur stdDeviation="2" />
         <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.109969 0" />
         <feBlend
-          in2="effect1_dropShadow_4854_27839"
+          in2="effect1_dropShadow_4854_23104"
           mode="normal"
-          result="effect2_dropShadow_4854_27839"
+          result="effect2_dropShadow_4854_23104"
         />
         <feBlend
           in="SourceGraphic"
-          in2="effect2_dropShadow_4854_27839"
+          in2="effect2_dropShadow_4854_23104"
           mode="normal"
           result="shape"
         />
       </filter>
       <linearGradient
-        id="paint0_linear_4854_27839"
+        id="paint0_linear_4854_23104"
         gradientUnits="userSpaceOnUse"
         x1="111.517"
         x2="103.553"
@@ -76,7 +76,7 @@
         <stop offset="0.9991" stop-color="#6A8BFF" />
       </linearGradient>
       <linearGradient
-        id="paint1_linear_4854_27839"
+        id="paint1_linear_4854_23104"
         gradientUnits="userSpaceOnUse"
         x1="104.694"
         x2="111.837"
diff --git a/src/components/image/ImageSelectTextWithoutIcon.vue b/src/components/image/ImageSelectTextWithoutIcon.vue
new file mode 100644
index 0000000..e324cdf
--- /dev/null
+++ b/src/components/image/ImageSelectTextWithoutIcon.vue
@@ -0,0 +1,14 @@
+<template>
+  <svg fill="none" height="90" viewBox="0 0 185 90" width="185" xmlns="http://www.w3.org/2000/svg">
+    <rect fill="white" height="89" rx="10.5" stroke="#DCDEE1" width="184" x="0.5" y="0.5" />
+    <rect fill="#D9D9D9" height="9" rx="4.5" width="128.4" x="6" y="47" />
+    <rect fill="#D9D9D9" height="9" rx="4.5" width="104" x="6" y="60" />
+    <rect fill="#D9D9D9" height="9" rx="4.5" width="34.8" x="99" y="34" />
+    <rect fill="white" height="9" rx="4.5" width="88.2" x="7" y="34" />
+    <rect fill="#4F5AFF" fill-opacity="0.2" height="9" rx="4.5" width="88.2" x="7" y="34" />
+    <path
+      d="M1 11C1 5.47715 5.47715 1 11 1H174C179.523 1 184 5.47715 184 11V20H1V11Z"
+      fill="#EDEFF2"
+    />
+  </svg>
+</template>
diff --git a/src/config.ts b/src/config.ts
index e8888a4..4216b2a 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -21,7 +21,7 @@ export const defaultConfig = {
   /** If user not set token at welcome page set false */
   isFinishSetup: false,
   /** When select text (by mouse or keyboard) show popup */
-  autoPopup: true,
+  autoPopup: false,
   /** Self host url */
   selfHostUrl: '',
   /** Azure specify ApiVersion */
diff --git a/src/csui/Index/TheEntry.vue b/src/csui/Index/TheEntry.vue
index 82e5c77..224ef58 100644
--- a/src/csui/Index/TheEntry.vue
+++ b/src/csui/Index/TheEntry.vue
@@ -178,6 +178,7 @@ const handleClosePopup = () => {
 }
 
 const handleMouseOverTail = () => {
+  shortcutUsed.value = false
   showWebpilotPopup.value = true
 }
 
diff --git a/src/options/components/SwitchButton.vue b/src/options/components/SwitchButton.vue
index 65395df..a5244a0 100644
--- a/src/options/components/SwitchButton.vue
+++ b/src/options/components/SwitchButton.vue
@@ -75,6 +75,6 @@ function toggleSwitch() {
 }
 
 .off {
-  left: 60%;
+  left: 67%;
 }
 </style>
diff --git a/src/options/views/ExtensionView.vue b/src/options/views/ExtensionView.vue
index 48fca44..2ae7c84 100644
--- a/src/options/views/ExtensionView.vue
+++ b/src/options/views/ExtensionView.vue
@@ -14,7 +14,8 @@
           @on-change="onAutoPopupChange"
         />
       </div>
-      <ImageSelectText />
+      <ImageSelectTextWithIcon v-if="store.config.autoPopup" />
+      <ImageSelectTextWithoutIcon v-else />
       <div :class="$style['shortcut-setting']">
         <span :class="$style['shortcut-setting-label']">Shortcut</span>
         <ShortcutInput v-model="shortcutKeys" @change="onChangeShortcut" />
@@ -23,8 +24,6 @@
   </div>
 </template>
 
-<script lang="ts"></script>
-
 <script lang="ts" setup>
 import {ref} from 'vue'
 import {storeToRefs} from 'pinia'
@@ -32,7 +31,8 @@ import {storeToRefs} from 'pinia'
 import useStore from '@/stores/store'
 
 import ShortcutInput from '@/components/ShortcutInput.vue'
-import ImageSelectText from '@/components/image/ImageSelectText.vue'
+import ImageSelectTextWithIcon from '@/components/image/ImageSelectTextWithIcon.vue'
+import ImageSelectTextWithoutIcon from '@/components/image/ImageSelectTextWithoutIcon.vue'
 
 import WebpilotLogo from '../images/icon-logo.vue'
 import SwitchButton from '../components/SwitchButton.vue'
diff --git a/src/tabs/components/StepThree.vue b/src/tabs/components/StepThree.vue
index 18a0633..277c0c6 100644
--- a/src/tabs/components/StepThree.vue
+++ b/src/tabs/components/StepThree.vue
@@ -26,7 +26,8 @@
       style="margin-top: 16px"
       @change="onAutoPopupChange"
     />
-    <ImageSelectText style="margin-top: 12px" />
+    <ImageSelectTextWithIcon v-if="autoPopup" style="margin-top: 12px" />
+    <ImageSelectTextWithoutIcon v-else style="margin-top: 12px" />
     <WebpilotAlert
       style="margin-top: 6px"
       :tips="$gettext('Webpilot will answer based on the current page if no text is selected')"
@@ -47,7 +48,8 @@ import {$gettext} from '@/utils/i18n'
 import WebpilotCheckbox from '@/components/WebpilotCheckbox.vue'
 import WebpilotAlert from '@/components/WebpilotAlert.vue'
 import WebpilotButton from '@/components/WebpilotButton.vue'
-import ImageSelectText from '@/components/image/ImageSelectText.vue'
+import ImageSelectTextWithIcon from '@/components/image/ImageSelectTextWithIcon.vue'
+import ImageSelectTextWithoutIcon from '@/components/image/ImageSelectTextWithoutIcon.vue'
 import useStore from '@/stores/store'
 
 import ShortcutInput from '@/components/ShortcutInput.vue'