Add output settings

dtinth · Apr 3, 2020 · 37a6d96 · 37a6d96
1 parent e9de482
commit 37a6d96
Show file tree

Hide file tree

Showing 7 changed files with 438 additions and 10 deletions.
diff --git a/options.html b/options.html
@@ -12,10 +12,10 @@ <h1 class="text-8b8685 text-4xl">
         vx options
       </h1>
       <template v-if="true">
-        <div class="max-w-lg">
+        <div class="max-w-xl">
           <h2 class="text-2xl text-bbeeff mt-6 mb-4">Language settings</h2>
 
-          <div class="flex items-center mb-4">
+          <div class="flex items-baseline mb-4">
             <div class="w-1/3">
               <label
                 class="block font-bold md:text-right mb-1 md:mb-0 pr-4"
@@ -26,7 +26,7 @@ <h2 class="text-2xl text-bbeeff mt-6 mb-4">Language settings</h2>
             </div>
             <div class="w-2/3">
               <input
-                class="block appearance-none w-full bg-090807 border border-454443 hover:border-656463 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline placeholder-8b8685"
+                class="block w-full form-input bg-090807 border-454443 hover:border-656463 shadow placeholder-8b8685"
                 id="first_language"
                 type="text"
                 placeholder="Enter second language"
@@ -35,7 +35,7 @@ <h2 class="text-2xl text-bbeeff mt-6 mb-4">Language settings</h2>
             </div>
           </div>
 
-          <div class="flex items-center mb-4">
+          <div class="flex items-baseline mb-4">
             <div class="w-1/3">
               <label
                 class="block font-bold md:text-right mb-1 md:mb-0 pr-4"
@@ -46,7 +46,7 @@ <h2 class="text-2xl text-bbeeff mt-6 mb-4">Language settings</h2>
             </div>
             <div class="w-2/3">
               <input
-                class="block appearance-none w-full bg-090807 border border-454443 hover:border-656463 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline placeholder-8b8685"
+                class="block w-full form-input bg-090807 border-454443 hover:border-656463 shadow placeholder-8b8685"
                 id="second_language"
                 type="text"
                 placeholder="Enter second language"
@@ -56,6 +56,102 @@ <h2 class="text-2xl text-bbeeff mt-6 mb-4">Language settings</h2>
           </div>
 
           <save-button :store="store"></save-button>
+
+          <h2 class="text-2xl text-bbeeff mt-6 mb-4">Keyboard shortcuts</h2>
+
+          <div class="flex items-center mb-4">
+            <div class="w-1/3"></div>
+            <div>
+              <a
+                @click="shortcuts"
+                class="block shadow bg-blue-500 text-white focus:shadow-outline focus:outline-none font-bold py-2 px-4 rounded"
+              >
+                Customize keyboard shortcuts
+              </a>
+            </div>
+          </div>
+
+          <h2 class="text-2xl text-bbeeff mt-6 mb-4">
+            Output settings [DUMMY]
+          </h2>
+
+          <div class="flex items-baseline mb-4">
+            <div class="w-1/3">
+              <h3 class="block font-bold md:text-right mb-1 md:mb-0 pr-4">
+                Overlay / Popup
+              </h3>
+            </div>
+            <div class="w-2/3">
+              <boolean-flag
+                :store="store"
+                setting-key="outputPopup"
+                title="Display an overlay or popup"
+              >
+                When this is turned on, an overlay will be displayed when you
+                activate this extension inside a web page. Otherwise, a pop-up
+                dialog is displayed.
+              </boolean-flag>
+
+              <boolean-flag
+                :store="store"
+                setting-key="outputPopupAutoFocus"
+                title="Auto-focus popup"
+              >
+                If unchecked, the popup window may appear below other windows.
+                Enabling this option ensures that the text being recognized is
+                displayed, but can also be annoying.
+              </boolean-flag>
+            </div>
+          </div>
+
+          <div class="flex items-baseline mb-4">
+            <div class="w-1/3">
+              <h3 class="block font-bold md:text-right mb-1 md:mb-0 pr-4">
+                Sound
+              </h3>
+            </div>
+            <div class="w-2/3">
+              <boolean-flag
+                :store="store"
+                setting-key="outputSound"
+                title="Enable sound"
+              >
+                When this is turned on, a sound will be played when recognition
+                is started, when recognition is stopped, and each time text is
+                copied to the clipboard.
+              </boolean-flag>
+            </div>
+          </div>
+
+          <div class="flex items-baseline mb-4">
+            <div class="w-1/3">
+              <h3 class="block font-bold md:text-right mb-1 md:mb-0 pr-4">
+                Notification
+              </h3>
+            </div>
+            <div class="w-2/3">
+              <boolean-flag
+                :store="store"
+                setting-key="outputNotificationSession"
+                title="Show session notification"
+              >
+                When this is turned on, a single notification will be displayed
+                when a speech recognition session is active. How well this works
+                depends on the OS.
+              </boolean-flag>
+
+              <boolean-flag
+                :store="store"
+                setting-key="outputNotificationTranscript"
+                title="Show transcript notifications"
+              >
+                When this is turned on, a separate notification will be sent
+                each time text is copied to the clipboard.
+              </boolean-flag>
+            </div>
+          </div>
+
+          <save-button :store="store"></save-button>
         </div>
       </template>
     </div>

diff --git a/options.js b/options.js
@@ -25,13 +25,65 @@ Vue.config.devtools = false
       </div>
     `,
   })
+
+  Vue.component('boolean-flag', {
+    props: ['store', 'settingKey', 'title'],
+    data() {
+      return {
+        checked: this.getTargetValue(),
+      }
+    },
+    computed: {
+      targetValue() {
+        return this.getTargetValue()
+      },
+    },
+    methods: {
+      getTargetValue() {
+        return this.store.settings[this.settingKey] === 'on'
+      },
+      setTargetValue(flag) {
+        this.store.settings[this.settingKey] = flag ? 'on' : 'off'
+      },
+    },
+    watch: {
+      checked(v) {
+        if (this.getTargetValue() !== v) this.setTargetValue(v)
+      },
+      targetValue(v) {
+        if (v !== this.checked) this.checked = v
+      },
+    },
+    template: html`
+      <article>
+        <label class="flex items-baseline">
+          <input
+            type="checkbox"
+            class="form-checkbox self-center bg-090807 border-656463"
+            v-model="checked"
+          />
+          <span class="ml-2">{{title}}</span>
+        </label>
+        <span class="block ml-6 text-8b8685 italic mb-2">
+          <slot></slot>
+        </span>
+      </article>
+    `,
+  })
 }
 
 var vm = new Vue({
   el: '#app',
   data: {
     store: null,
   },
+  methods: {
+    shortcuts() {
+      chrome.tabs.create({
+        url: 'chrome://extensions/shortcuts',
+      })
+    },
+  },
 })
 
 function main({ defaultSettings, settings }) {

diff --git a/package.json b/package.json
@@ -1,5 +1,6 @@
 {
   "devDependencies": {
+    "@tailwindcss/custom-forms": "^0.2.1",
     "@types/chrome": "^0.0.103",
     "tailwindcss": "^1.2.0"
   },

diff --git a/src/VXDefaultSettings.js b/src/VXDefaultSettings.js
@@ -2,7 +2,10 @@ export const defaultSettings = {
   language1: 'en',
   language2: 'th',
 
-  // outputNotification: 'off',
-  // outputOverlayer: 'off',
-  // outputPopup: 'off',
+  outputNotification: 'off',
+  outputPopup: 'on',
+  outputPopupAutoFocus: 'on',
+  outputSound: 'on',
+  outputNotificationSession: 'off',
+  outputNotificationTranscript: 'on',
 }
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -15,5 +15,5 @@ module.exports = {
     },
   },
   variants: {},
-  plugins: [],
+  plugins: [require('@tailwindcss/custom-forms')],
 }