Tree view: Fix misalignment of job details triangle at larger font sizes

Author: MetRonnie

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 {