feat(popup): add instant capture toggle

crimx · Jun 17, 2018 · 32dcfdc · 32dcfdc
1 parent f974c61
commit 32dcfdc
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 7 deletions.
diff --git a/src/_locales/popup/messages.json b/src/_locales/popup/messages.json
@@ -2,13 +2,23 @@
   "app_active_title": {
     "zh_CN": "启用划词",
     "zh_TW": "啓用滑鼠劃字",
-    "en": "Endable inline translator"
+    "en": "Endable Inline Translator"
   },
   "app_temp_active_title": {
     "zh_CN": "对当前页暂时关闭划词",
     "zh_TW": "對當前網頁暫時關閉滑鼠劃字",
     "en": "Temporary disabled to the page"
   },
+  "instant_capture_title": {
+    "zh_CN": "开启鼠标悬浮取词",
+    "zh_TW": "啓用滑鼠懸浮取詞",
+    "en": "Enable Instant Capture"
+  },
+  "instant_capture_pinned": {
+    "zh_CN": "（钉住）",
+    "zh_TW": "（釘住）",
+    "en": " (pinned) "
+  },
   "qrcode_title": {
     "zh_CN": "当前页面二维码",
     "zh_TW": "當前頁面二維碼",

diff --git a/src/popup/Popup.vue b/src/popup/Popup.vue
@@ -19,6 +19,11 @@
     <input type="checkbox" id="opt-temp-active" class="btn-switch" v-model="tempOff" @click.prevent="changeTempOff">
     <label for="opt-temp-active"></label>
   </div>
+  <div class="active-switch">
+    <span class="switch-title">{{ $t('instant_capture_title') + (insCapMode === 'pinMode' ? $t('instant_capture_pinned') : '') }}</span>
+    <input type="checkbox" id="opt-instant-capture" class="btn-switch" v-model="config[insCapMode].instant.enable" @click.prevent="changeInsCap">
+    <label for="opt-instant-capture"></label>
+  </div>
   <transition name="fade">
     <div class="qrcode-panel" v-if="currentTabUrl" @mouseleave="currentTabUrl = ''">
       <qriously :value="currentTabUrl" :size="250" />
@@ -36,7 +41,7 @@
 <script lang="ts">
 import Vue from 'vue'
 import { message, storage } from '@/_helpers/browser-api'
-import { MsgType, MsgTempDisabledState } from '@/typings/message'
+import { MsgType, MsgTempDisabledState, MsgIsPinned, MsgQueryPanelState } from '@/typings/message'
 import { appConfigFactory, AppConfigMutable } from '@/app-config'
 import { createAppConfigStream, setAppConfig } from '@/_helpers/config-manager'
 
@@ -48,6 +53,7 @@ export default Vue.extend({
       currentTabUrl: '',
       tempOff: false,
       showPageNoResponse: false,
+      insCapMode: 'mode' as 'mode' | 'pinMode',
     }
   },
   watch: {
@@ -90,6 +96,10 @@ export default Vue.extend({
         })
         .catch(() => this.showPageNoResponse = true)
     },
+    changeInsCap () {
+      this.config[this.insCapMode].instant.enable = !this.config[this.insCapMode].instant.enable
+      setAppConfig(this.config)
+    },
     showQRcode () {
       chrome.tabs.query({active: true, currentWindow: true}, tabs => {
         if (tabs.length > 0 && tabs[0].url) {
@@ -106,7 +116,7 @@ export default Vue.extend({
     browser.tabs.query({ active: true, currentWindow: true })
       .then(tabs => {
         if (tabs.length > 0 && tabs[0].id != null) {
-          return message.send<MsgTempDisabledState>(
+          message.send<MsgTempDisabledState>(
             tabs[0].id as number,
             {
               type: MsgType.TempDisabledState,
@@ -115,6 +125,16 @@ export default Vue.extend({
           ).then(flag => {
             this.tempOff = flag
           })
+
+          message.send<MsgQueryPanelState, boolean>(
+            tabs[0].id as number,
+            {
+              type: MsgType.QueryPanelState,
+              path: 'widget.isPinned',
+            },
+          ).then(isPinned => {
+            this.insCapMode = isPinned ? 'pinMode' : 'mode'
+          })
         }
       })
       .catch(err => console.warn('Error when receiving MsgTempDisabled response', err))
@@ -183,7 +203,7 @@ body {
   display: flex;
   align-items: center;
   position: relative;
-  height: 56px;
+  height: 50px;
   padding: 0 20px;
   user-select: none;
 
@@ -193,7 +213,7 @@ body {
 }
 
 .icon-qrcode {
-  width: 23px;
+  width: 20px;
   margin-top: 3px;
 }
 
@@ -205,8 +225,8 @@ body {
   color: #333;
 }
 
-$switch-button-width: 63px;
-$switch-button-height: 37px;
+$switch-button-width: 55px;
+$switch-button-height: 35px;
 .btn-switch {
   // hide input
   position: absolute;