Hide outlines on click

src/renderer/App.css

@@ -11,6 +11,10 @@ body {
   font-family: 'Roboto', sans-serif;
 }
 
+.hideOutlines *:focus {
+  outline: none;
+}
+
 .routerView {
   margin-left: 200px;
   margin-top: 80px;

src/renderer/App.js

@@ -27,6 +27,11 @@ export default Vue.extend({
     FtToast,
     FtProgressBar
   },
+  data: function () {
+    return {
+      hideOutlines: true
+    }
+  },
   computed: {
     isOpen: function () {
       return this.$store.getters.getIsSideNavOpen
@@ -48,13 +53,6 @@ export default Vue.extend({
       this.activateKeyboardShortcuts()
       this.openAllLinksExternally()
     }
-
-    // try {
-    //   const doc = yaml.safeLoad(fs.readFileSync('./static/locales/en-US.yaml'))
-    //   console.log(doc)
-    // } catch (e) {
-    //   console.log(e)
-    // }
   },
   methods: {
     checkLocale: function () {
@@ -106,6 +104,9 @@ export default Vue.extend({
 
     activateKeyboardShortcuts: function () {
       $(document).on('keydown', this.handleKeyboardShortcuts)
+      $(document).on('mousedown', () => {
+        this.hideOutlines = true
+      })
     },
 
     handleKeyboardShortcuts: function (event) {
@@ -119,6 +120,11 @@ export default Vue.extend({
             break
         }
       }
+      switch (event.code) {
+        case 'Tab':
+          this.hideOutlines = false
+          break
+      }
     },
 
     openAllLinksExternally: function () {

src/renderer/App.vue

@@ -1,5 +1,10 @@
 <template>
-  <div id="app">
+  <div
+    id="app"
+    :class="{
+      hideOutlines: hideOutlines
+    }"
+  >
     <top-nav ref="topNav" />
     <side-nav ref="sideNav" />
     <Transition
@@ -25,4 +30,4 @@
 
 <style src="./themes.css" />
 <style src="./videoJS.css" />
-<style scoped src="./App.css" />
+<style src="./App.css" />