From dd34b1e98811882606bf52b308c5fad96d27a873 Mon Sep 17 00:00:00 2001
From: David Carley <dacarley@gmail.com>
Date: Mon, 11 Jul 2022 17:26:18 -0700
Subject: [PATCH] Added color to the "distance" controls.

---
 .gitignore                         | 1 +
 src/js/control-view.js             | 7 ++++---
 src/pug/templates/control-view.pug | 8 ++++----
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/.gitignore b/.gitignore
index 81f1565..e344105 100644
--- a/.gitignore
+++ b/.gitignore
@@ -25,3 +25,4 @@ __pycache__
 .vscode
 *.elf
 *.hex
+null.d
diff --git a/src/js/control-view.js b/src/js/control-view.js
index f2b41ac..856a263 100644
--- a/src/js/control-view.js
+++ b/src/js/control-view.js
@@ -273,10 +273,11 @@ module.exports = {
       this.send('G90\nG0' + xcmd + ycmd + zcmd + acmd + '\n');
     },
 
-    getJogIncrFontWeight(value) {
-      const weight = this.jog_incr === value ? 'bold' : 'normal';
+    getJogIncrStyle(value) {
+      const weight = `font-weight:${this.jog_incr === value ? 'bold' : 'normal'}`;
+      const color = this.jog_incr === value ? "color:#0078e7" : "";
 
-      return `font-weight:${weight}`;
+      return [weight, color].join(';');
     },
 
     jog_fn: function (x_jog, y_jog, z_jog, a_jog) {
diff --git a/src/pug/templates/control-view.pug b/src/pug/templates/control-view.pug
index 4184025..b19d700 100644
--- a/src/pug/templates/control-view.pug
+++ b/src/pug/templates/control-view.pug
@@ -79,16 +79,16 @@ script#control-view-template(type="text/x-template")
                 button(@click="jog_fn(0,0,-1,0)") Z-
             tr
               td(style="height:100px",align="center")
-                button(:style="getJogIncrFontWeight('fine')", @click="jog_incr = 'fine'")
+                button(:style="getJogIncrStyle('fine')", @click="jog_incr = 'fine'")
                   span {{jog_incr_amounts[display_units].fine}}#[span.jog-units {{metric ? 'mm' : 'in'}}]
               td(style="height:100px",align="center")
-                button(:style="getJogIncrFontWeight('small')", @click="jog_incr = 'small'")
+                button(:style="getJogIncrStyle('small')", @click="jog_incr = 'small'")
                   span {{jog_incr_amounts[display_units].small}}#[span.jog-units {{metric ? 'mm' : 'in'}}]
               td(style="height:100px",align="center")
-                button(:style="getJogIncrFontWeight('medium')", @click="jog_incr = 'medium'")
+                button(:style="getJogIncrStyle('medium')", @click="jog_incr = 'medium'")
                   span {{jog_incr_amounts[display_units].medium}}#[span.jog-units {{metric ? 'mm' : 'in'}}]
               td(style="height:100px",align="center")
-                button(:style="getJogIncrFontWeight('large')", @click="jog_incr = 'large'")
+                button(:style="getJogIncrStyle('large')", @click="jog_incr = 'large'")
                   span {{jog_incr_amounts[display_units].large}}#[span.jog-units {{metric ? 'mm' : 'in'}}]
             tr
               td(style="height:100px", align="center", colspan="2")