fix: sample image updates following the selected value in settings page

Signed-off-by: DingChil <[email protected]>
webpilot-ai · Oct 26, 2023 · 3d6e164 · 3d6e164
1 parent ab0f33d
commit 3d6e164
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 19 deletions.
diff --git a/src/components/image/ImageSelectText.vue → ...ponents/image/ImageSelectTextWithIcon.vue b/src/components/image/ImageSelectText.vue → ...ponents/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,16 +24,15 @@
   </div>
 </template>
 
-<script lang="ts"></script>
-
 <script lang="ts" setup>
 import {ref} from 'vue'
 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
@@ -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'