Change font size

CHANGES.md

@@ -50,6 +50,9 @@ protocol is http:
 [#379](https://github.com/cylc/cylc-ui/pull/379) - Add ConnectionStatus
 component.
 
+[#446](https://github.com/cylc/cylc-ui/pull/446) - Allow users to
+increase, decrease, and reset UI font size.
+
 ### Fixes
 
 [#275](https://github.com/cylc/cylc-ui/pull/275) - Fix size of dashboard

package.json

@@ -51,10 +51,10 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@cypress/webpack-preprocessor": "^4.1.3",
+    "@cypress/webpack-preprocessor": "^5.1.2",
     "@mdi/font": "^4.5.95",
     "@vue/cli-plugin-babel": "^3.12.0",
-    "@vue/cli-plugin-e2e-cypress": "^3.12.0",
+    "@vue/cli-plugin-e2e-cypress": "^4.3.1",
     "@vue/cli-plugin-eslint": "^4.2.3",
     "@vue/cli-plugin-unit-mocha": "^4.2.3",
     "@vue/cli-service": "^4.2.2",

src/App.vue

@@ -37,6 +37,11 @@ export default {
       baseUrl = this.baseUrl !== '' ? this.baseUrl : DEFAULT_URL
     }
     this.setBaseUrl(baseUrl)
+  },
+  mounted () {
+    if (localStorage.fontSize) {
+      document.getElementsByTagName('html')[0].style.fontSize = localStorage.fontSize
+    }
   }
 }
 </script>

src/components/core/Alert.vue

@@ -7,7 +7,7 @@
       class="ma-0"
       dismissible
     >
-      {{ alert.getText() }}
+      <p class="body-1">{{ alert.getText() }}</p>
     </v-alert>
   </div>
 </template>

src/styles/cylc/_header.scss

@@ -4,11 +4,11 @@
 
   .layout {
     .c-environment-info {
-      font-size: $font-size-root;
+      font-size: 1rem;
       font-weight: map-get($font-weights, 'regular');
 
       .v-chip {
-        font-size: $font-size-root;
+        font-size: 1rem;
         span {
           background-color: map-get($grey, 'lighten-5');
         }

src/styles/cylc/_toolbar.scss

@@ -10,7 +10,7 @@
   background-color: map-get($grey, 'lighten-4') !important;
 
   .c-toolbar-title, .add-view {
-    font-size: 22px;
+    font-size: 1.4rem;
     color: $font-default-color;
     font-weight: map-get($font-weights, medium);
   }

src/styles/cylc/_workflow.scss

@@ -29,7 +29,7 @@
 
         .p-TabBar-tabLabel {
           font-family: $body-font-family;
-          font-size: $font-size-root;
+          font-size: 1rem;
         }
 
         .p-TabBar-tabCloseIcon {

src/styles/index.scss

@@ -15,3 +15,7 @@
     height: 100vh;
   }
 }
+
+:export {
+  fontRootSize: $font-size-root;
+}

src/utils/font-size.js

@@ -0,0 +1,79 @@
+import styles from '@/styles/index.scss'
+
+// Module for font size functions and constants.
+
+/**
+ * Initial font size, set in the Vuetify framework style.
+ */
+const INITIAL_FONT_SIZE = styles.fontRootSize
+
+/**
+ * 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).
+ *
+ * @param {string} [initialFontSize] initial font size, defaults to the Vuetify value
+ */
+function resetFontSize (initialFontSize = INITIAL_FONT_SIZE) {
+  localStorage.fontSize = initialFontSize
+  document.getElementsByTagName('html')[0].style.fontSize = initialFontSize
+}
+
+/**
+ * Decrease the HTML element font size by 20%.
+ */
+function 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%.
+ */
+function 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
+ */
+function getCurrentFontSize () {
+  if (localStorage.fontSize) {
+    return parseFloat(localStorage.fontSize)
+  }
+  const html = document.getElementsByTagName('html')[0]
+  const htmlStyle = window.getComputedStyle(html)
+  return parseFloat(htmlStyle.fontSize)
+}
+
+/**
+ * Computes the expected font size, for a given number of clicks on the
+ * increase or decrease button. The increase flag tells whether it was on
+ * the increase, or decrease button. Returns the exponential function
+ * initial_value * ratio ^ n, where n is the number of clicks. Intended
+ * for testing.
+ *
+ * @param {boolean} increase true means increase, false decrease
+ * @param {number} clicks number of times a button was clicked
+ * @param {number} [initialFontSize] initial font size, defaults to the Vuetify value
+ * @returns {number}
+ */
+function expectedFontSize (increase, clicks, initialFontSize = parseFloat(INITIAL_FONT_SIZE)) {
+  const ratio = increase ? 1.2 : 0.8
+  return initialFontSize * (Math.pow(ratio, clicks))
+}
+
+export {
+  resetFontSize,
+  decreaseFontSize,
+  increaseFontSize,
+  getCurrentFontSize,
+  expectedFontSize,
+  INITIAL_FONT_SIZE
+}

src/views/UserProfile.vue

@@ -8,64 +8,102 @@
           icon="mdi-settings"
         >
           <h3 class="headline">{{ $t('UserProfile.tableHeader') }}</h3>
-          {{ $t('UserProfile.tableSubHeader') }}
+          <p class="body-1">{{ $t('UserProfile.tableSubHeader') }}</p>
         </v-alert>
         <v-form v-if="user !== null">
           <v-container py-0>
-            <v-layout row wrap>
-              <v-flex xs12 md12>
+            <v-layout row align-center wrap>
+              <v-flex xs3>
+                <span>{{ $t('UserProfile.username') }}</span>
+              </v-flex>
+              <v-flex xs9>
                 <v-text-field
                     :value="user.username"
-                    :label="$t('UserProfile.username')"
                     disabled
                     id="profile-username"
                     aria-disabled="true"
+                    class="body-1"
                 />
               </v-flex>
             </v-layout>
-            <v-layout row wrap>
-              <v-flex xs12 md12>
+            <v-layout row align-center wrap>
+              <v-flex xs3>
+                <span>{{ $t('UserProfile.administrator') }}</span>
+              </v-flex>
+              <v-flex xs9>
                 <v-checkbox
                     v-model="user.admin"
-                    :label="$t('UserProfile.administrator')"
                     disabled
                     id="profile-admin"
                     aria-disabled="true"
+                    class="body-1"
                 />
               </v-flex>
             </v-layout>
-            <v-layout row wrap>
-              <v-flex
-                  xs12
-                  md12
-              >
+            <v-layout row align-center wrap>
+              <v-flex xs3>
+                <span>{{ $t('UserProfile.groups') }}</span>
+              </v-flex>
+              <v-flex xs9>
                 <v-select
                     :items="user.groups"
                     v-model="user.groups"
-                    :label="$t('UserProfile.groups')"
                     attach
-                    chips
                     multiple
                     disabled
                     id="profile-groups"
                     aria-disabled="true"
+                    class="body-1"
                 />
               </v-flex>
             </v-layout>
-            <v-layout row wrap>
-              <v-flex
-                  xs12
-                  md12
-              >
+            <v-layout row align-center wrap>
+              <v-flex xs3>
+                <span>{{ $t('UserProfile.created') }}</span>
+              </v-flex>
+              <v-flex xs9>
                 <v-text-field
                     :value="user.created"
-                    :label="$t('UserProfile.created')"
                     disabled
                     id="profile-created"
                     aria-disabled="true"
+                    class="body-1"
                 />
               </v-flex>
             </v-layout>
+            <v-row mt-4>
+              <v-flex xs12>
+                <p class="title">Preferences</p>
+              </v-flex>
+            </v-row>
+            <v-layout row align-center wrap>
+              <v-flex xs3>
+                <span>Font size</span>
+              </v-flex>
+              <v-flex xs9>
+                <v-btn
+                  depressed
+                  id="font-size-reset-button"
+                  class="mr-2"
+                  @click="resetFontSize()">
+                  Reset
+                </v-btn>
+                <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
+                  id="font-size-increase-button"
+                  class="ml-2"
+                  @click="increaseFontSize()">
+                  <v-icon>mdi-format-font-size-increase</v-icon>
+                </v-btn>
+              </v-flex>
+            </v-layout>
           </v-container>
         </v-form>
         <v-progress-linear v-else :indeterminate="true" />
@@ -76,7 +114,15 @@
 
 <script>
 import { mapState } from 'vuex'
-import { mixin } from '@/mixins/index'
+import { mixin } from '@/mixins'
+import {
+  resetFontSize,
+  decreaseFontSize,
+  increaseFontSize,
+  getCurrentFontSize
+} from '@/utils/font-size'
+
+// TODO: update where user preferences are stored after #335
 
 export default {
   mixins: [mixin],
@@ -87,6 +133,12 @@ export default {
     return {
       title: this.getPageTitle('App.userProfile')
     }
+  },
+  methods: {
+    resetFontSize,
+    decreaseFontSize,
+    increaseFontSize,
+    getCurrentFontSize
   }
 }
 </script>

src/views/WorkflowsTable.vue

@@ -28,7 +28,7 @@
               :value="true"
               color="error"
               icon="warning">
-              No workflows found for the current user
+              <p class="body-1">No workflows found for the current user</p>
             </v-alert>
           </template>
           <template

tests/e2e/plugins/index.js

@@ -1,11 +1,15 @@
 const webpack = require('@cypress/webpack-preprocessor')
 
 module.exports = (on, config) => {
+  const webpackOptions = require('@vue/cli-service/webpack.config')
+  // NOTE: if we do not remove the webpack optimizations, Cypress seems
+  //       to get confused when our JS code imports scss, failing
+  //       silently, and reporting no tests found in Cypress GUI.
+  webpackOptions.optimization = {}
   on('file:preprocessor', webpack({
-    webpackOptions: require('@vue/cli-service/webpack.config'),
+    webpackOptions,
     watchOptions: {}
   }))
-
   return Object.assign({}, config, {
     fixturesFolder: 'tests/e2e/fixtures',
     integrationFolder: 'tests/e2e/specs',