Merge pull request #1305 from MetRonnie/vue3-font-size

Fix font size setting post Vue 3

Author: oliver-sanders

src/components/cylc/tree/TreeItem.vue

@@ -41,7 +41,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <!-- the node value -->
       <!-- TODO: revisit these values that can be replaced by constants later (and in other components too). -->
       <slot name="cyclepoint" v-if="node.type === 'cycle'">
-        <div :class="getNodeDataClass()" @click="nodeClicked">
+        <div :class="nodeDataClass" @click="nodeClicked">
           <!-- NOTE: cycle point nodes don't have any data associated with them
             at present so we must use the root family node for the task icon.
             We don't use this for the v-cylc-object as that would set the node
@@ -56,7 +56,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
       </slot>
       <slot name="family-proxy" v-else-if="node.type === 'family'">
-        <div :class="getNodeDataClass()" @click="nodeClicked">
+        <div :class="nodeDataClass" @click="nodeClicked">
           <Task
             v-cylc-object="node"
             :key="node.id"
@@ -66,7 +66,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
       </slot>
       <slot name="task-proxy" v-else-if="node.type === 'task'">
-        <div :class="getNodeDataClass()" @click="nodeClicked">
+        <div :class="nodeDataClass" @click="nodeClicked">
           <!-- Task summary -->
           <Task
             v-cylc-object="node"
@@ -89,7 +89,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
       </slot>
       <slot name="job" v-else-if="node.type === 'job'">
-        <div :class="getNodeDataClass()" @click="nodeClicked">
+        <div :class="nodeDataClass" @click="nodeClicked">
           <Job
             v-cylc-object="node"
             :key="node.id"
@@ -184,7 +184,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         name="node"
         v-else
       >
-        <div :class="getNodeDataClass()">
+        <div :class="nodeDataClass">
           <span
             v-if="node && node.node"
             @click="nodeClicked"
@@ -263,6 +263,9 @@ const passthroughEvents = [
   'tree-item-clicked'
 ]
 
+/** Margin between expand/collapse btn & node content */
+const nodeContentPad = 6 // px
+
 export default {
   name: 'TreeItem',
 
@@ -383,10 +386,14 @@ export default {
         expanded: this.isExpanded
       }
     },
+    nodeDataClass () {
+      return ['node-data', `node-data-${this.node.type}`]
+    },
     expandCollapseBtnStyle () {
       return {
         // set visibility 'hidden' to ensure element takes up space
-        visibility: this.hasChildren ? null : 'hidden'
+        visibility: this.hasChildren ? null : 'hidden',
+        marginRight: `${nodeContentPad}px`,
       }
     },
     /**
@@ -402,7 +409,7 @@ export default {
     /** Make the job details triangle point to the job icon */
     leafTriangleStyle () {
       return {
-        'margin-left': `${this.nodeIndentation}px`
+        'margin-left': `${this.nodeIndentation + nodeContentPad}px`
       }
     },
     jobMessageOutputs () {
@@ -453,12 +460,6 @@ export default {
     nodeClicked (e) {
       this.$emit('tree-item-clicked', this)
     },
-    getNodeDataClass () {
-      const classes = {}
-      classes['node-data'] = true
-      classes[`node-data-${this.node.type}`] = true
-      return classes
-    },
     latestJob
   }
 }

src/styles/cylc/_tree.scss

@@ -31,6 +31,9 @@ $line-height: 1.8em;
  */
 $visible-outputs: 5;
 
+/* Task/job icon size. */
+$icon-size: 1.2em;
+
 @mixin active-state() {
   background-color: $active-color;
   &:hover {
@@ -70,7 +73,6 @@ $visible-outputs: 5;
     }
 
     .node-data {
-      margin-left: 6px;
       display: flex;
       flex-wrap: nowrap;
       .node-summary {
@@ -83,14 +85,14 @@ $visible-outputs: 5;
     .c-task, .c-job {
       display: flex;
       align-items: center;
-      font-size: 1.2em;
+      font-size: $icon-size;
     }
   }
   .type {
     margin-right: 10px;
   }
 
-  $arrow-size: 15px;
+  $arrow-size: calc($icon-size / 2);
   $leaf-background-color: map-get(settings.$grey, 'lighten-3');
 
   .leaf {

src/utils/font-size.js

@@ -17,19 +17,18 @@
 
 // Module for font size functions and constants.
 
-/** Default <html> font size in px */
-const DEFAULT_FONT_SIZE = window.getComputedStyle(document.documentElement).fontSize
-export const INCREMENT = 2 // px
+/** Font size increment in px */
+export const INCREMENT = 2
 
 /**
- * Sets the font-size to a value. The default value is the <html> element's
- * computed font size.
+ * Sets the font-size to a value.
  *
- * @param {string} size in px
+ * @param {?string} size - Value with units given (doesn't matter which unit).
+ * If null then reset to default.
  */
-export function resetFontSize (size = DEFAULT_FONT_SIZE) {
+export function resetFontSize (size = null) {
   localStorage.fontSize = size
-  document.body.style.fontSize = size
+  document.documentElement.style.fontSize = size
 }
 
 export function decreaseFontSize () {
@@ -43,9 +42,9 @@ export function increaseFontSize () {
 /**
  * Get HTML element (computed) font size.
  *
- * @returns {number} current font size
+ * @returns {number} current font size in px
  */
 export function getCurrentFontSize () {
-  const fontSize = localStorage.fontSize ?? window.getComputedStyle(document.body).fontSize
+  const fontSize = window.getComputedStyle(document.documentElement).fontSize // px
   return parseFloat(fontSize)
 }

tests/e2e/specs/userprofile.cy.js

@@ -15,16 +15,18 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import {
-  getCurrentFontSize,
-  resetFontSize,
-  INCREMENT
-} from '@/utils/font-size'
+import { INCREMENT } from '@/utils/font-size'
+
+/** @param {number} expected font size in px */
+function expectFontSize (expected) {
+  cy.get('html')
+    .should('have.css', 'font-size', `${expected}px`)
+}
 
 describe('User Profile', () => {
   const defaultFontSize = 16 // px
   beforeEach(() => {
-    resetFontSize()
+    // resetFontSize()
     cy.visit('/#/user-profile')
   })
 
@@ -35,43 +37,38 @@ describe('User Profile', () => {
   })
 
   it('Increases the font size', () => {
-    expect(getCurrentFontSize()).to.equal(defaultFontSize)
+    expectFontSize(defaultFontSize)
     const clicks = 3
-    cy.get('button#font-size-increase-button').then(($button) => {
-      for (let i = 0; i < clicks; i++) {
-        $button.trigger('click')
-      }
-      const expectedFontSize = defaultFontSize + INCREMENT * clicks
-      expect(getCurrentFontSize()).to.equal(expectedFontSize)
-    })
+    let expectedFontSize = defaultFontSize
+    for (let i = 0; i < clicks; i++) {
+      expectedFontSize += INCREMENT
+      cy.get('button#font-size-increase-button')
+        .click()
+      expectFontSize(expectedFontSize)
+    }
   })
 
   it('Decreases the font size', () => {
-    expect(getCurrentFontSize()).to.equal(defaultFontSize)
+    expectFontSize(defaultFontSize)
     const clicks = 3
-    cy.get('button#font-size-decrease-button').then(($button) => {
-      for (let i = 0; i < clicks; i++) {
-        $button.trigger('click')
-      }
-      const expectedFontSize = defaultFontSize - INCREMENT * clicks
-      expect(getCurrentFontSize()).to.equal(expectedFontSize)
-    })
+    let expectedFontSize = defaultFontSize
+    for (let i = 0; i < clicks; i++) {
+      expectedFontSize -= INCREMENT
+      cy.get('button#font-size-decrease-button')
+        .click()
+      expectFontSize(expectedFontSize)
+    }
   })
 
   it('Resets the font size', () => {
-    expect(getCurrentFontSize()).to.equal(defaultFontSize)
-    const clicks = 3
-    cy.get('button#font-size-decrease-button').then(($button) => {
-      for (let i = 0; i < clicks; i++) {
-        $button.trigger('click')
-      }
-      expect(getCurrentFontSize()).not.to.equal(defaultFontSize)
-      cy.get('button#font-size-reset-button')
+    expectFontSize(defaultFontSize)
+    for (let i = 0; i < 3; i++) {
+      cy.get('button#font-size-decrease-button')
         .click()
-        .then(() => {
-          expect(getCurrentFontSize()).to.equal(defaultFontSize)
-        })
-    })
+    }
+    cy.get('button#font-size-reset-button')
+      .click()
+    expectFontSize(defaultFontSize)
   })
 
   it('Sets the job theme', () => {

tests/unit/utils/font-size.spec.js

@@ -25,26 +25,22 @@ describe('Font Size', () => {
 
   beforeEach(() => {
     delete localStorage.fontSize
-    document.body.style.fontSize = `${initialFontSize}px`
+    document.documentElement.style.fontSize = `${initialFontSize}px`
   })
 
   it('gets the current font size', () => {
     expect(getCurrentFontSize()).to.equal(initialFontSize)
-    const newVal = 27
-    // localStorage value should take precedence
-    localStorage.fontSize = `${newVal}px`
-    expect(getCurrentFontSize()).to.equal(newVal)
   })
 
   it('sets and gets a new font size', () => {
     const newVal = 31
     const newValPx = `${newVal}px`
     expect(localStorage.fontSize).to.not.equal(newValPx)
-    expect(document.body.style.fontSize).to.not.equal(newValPx)
+    expect(document.documentElement.style.fontSize).to.not.equal(newValPx)
     expect(getCurrentFontSize()).to.not.equal(newVal)
     resetFontSize(newValPx)
     expect(localStorage.fontSize).to.equal(newValPx)
-    expect(document.body.style.fontSize).to.equal(newValPx)
+    expect(document.documentElement.style.fontSize).to.equal(newValPx)
     expect(getCurrentFontSize()).to.equal(newVal)
   })