Import functions from util module, and add IDs for html elements

cylc · Apr 21, 2020 · e880338 · e880338
1 parent e8dd7f2
commit e880338
Showing 1 changed file with 25 additions and 41 deletions.
diff --git a/src/views/UserProfile.vue b/src/views/UserProfile.vue
@@ -78,13 +78,25 @@
                 <span>Font size</span>
               </v-flex>
               <v-flex xs9>
-                <v-btn depressed class="mr-2" @click="resetFontSize()">
+                <v-btn
+                  depressed
+                  id="font-size-reset-button"
+                  class="mr-2"
+                  @click="resetFontSize()">
                   Reset
                 </v-btn>
-                <v-btn depressed class="mx-2" @click="decreaseFontSize()">
+                <v-btn
+                  depressed
+                  id="font-size-decrease-button"
+                  class="mx-2"
+                  @click="decreaseFontSize()">
                   <v-icon>mdi-format-font-size-decrease</v-icon>
                 </v-btn>
-                <v-btn depressed class="ml-2" @click="increaseFontSize()">
+                <v-btn
+                  depressed
+                  id="font-size-increase-button"
+                  class="ml-2"
+                  @click="increaseFontSize()">
                   <v-icon>mdi-format-font-size-increase</v-icon>
                 </v-btn>
               </v-flex>
@@ -100,7 +112,12 @@
 <script>
 import { mapState } from 'vuex'
 import { mixin } from '@/mixins'
-import styles from '@/styles/index.scss'
+import {
+  resetFontSize,
+  decreaseFontSize,
+  increaseFontSize,
+  getCurrentFontSize
+} from '@/utils/font-size'
 
 // TODO: update where user preferences are stored after #335
 
@@ -115,43 +132,10 @@ export default {
     }
   },
   methods: {
-    /**
-     * Sets the font-size back to its default value. The default value is imported from Vuetify's scss style
-     * variables (at the time of writing, variable $font-root-size, set by default to 16px).
-     */
-    resetFontSize () {
-      document.getElementsByTagName('html')[0].style.fontSize = styles.fontRootSize
-    },
-    /**
-     * Decrease the HTML element font size by 20%.
-     */
-    decreaseFontSize () {
-      const currentFontSize = this.getCurrentFontSize()
-      const newFontSize = `${currentFontSize * 0.8}px`
-      localStorage.fontSize = newFontSize
-      document.getElementsByTagName('html')[0].style.fontSize = newFontSize
-    },
-    /**
-     * Increase the HTML element font size by 20%.
-     */
-    increaseFontSize () {
-      const currentFontSize = this.getCurrentFontSize()
-      const newFontSize = `${currentFontSize * 1.2}px`
-      localStorage.fontSize = newFontSize
-      document.getElementsByTagName('html')[0].style.fontSize = newFontSize
-    },
-    /**
-     * Get HTML element (computed) font size.
-     * @returns {number} current font size
-     */
-    getCurrentFontSize () {
-      if (localStorage.fontSize) {
-        return parseFloat(localStorage.fontSize)
-      }
-      const html = document.getElementsByTagName('html')[0]
-      const htmlStyle = window.getComputedStyle(html)
-      return parseFloat(htmlStyle.fontSize)
-    }
+    resetFontSize,
+    decreaseFontSize,
+    increaseFontSize,
+    getCurrentFontSize
   }
 }
 </script>