test

src/js/macros.js

@@ -18,6 +18,16 @@ module.exports = {
         "gcode-viewer": require("./gcode-viewer")
     },
     computed:{
+        mach_state: function() {
+            const cycle = this.state.cycle;
+            const state = this.state.xx;
+
+            if (state != "ESTOPPED" && (cycle == "jogging" || cycle == "homing")) {
+                return cycle.toUpperCase();
+            }
+
+            return state || "";
+        },
         is_ready: function() {
             console.log("is_ready: ",this.mach_state);
             return this.mach_state == "READY";

src/pug/templates/macros.pug

@@ -1,16 +1,20 @@
 script#macros-template(type="text/x-template")
   #macros
     h1 Macros Configuration
-        .macros-form
+    .macros-form
-          h3 Name
+      .input-field
-          input.input-name(type="text",id="macros-name",value="e.g Macros 1 ")
+        h4 Enter Macros Name
-        .macros-form
+        input.input-name(type="text",id="macros-name",value="e.g Macros 1 ")
-          h3 Select/Upload G-Code
+      .input-field
-          button.pure-button(title="Upload a new GCode program.", @click="open",
+        h4 Select Your Macros Color
-                    :disabled="!is_ready",style="height:100px;width:100px;font-weight:normal")
+        input.input-color(type="color",id="macros-color",value="#ffffff") 
-                    .fa.fa-folder-open
+      .input-field
-          select(title="Select previously uploaded GCode programs.",
+      h3 Select/Upload G-Code
-                    v-model="state.selected", @change="load", :disabled="!is_ready",
+      button.pure-button(title="Upload a new GCode program.", @click="open",
-                    style="max-width:100%")
+                :disabled="!is_ready",style="height:100px;width:100px;font-weight:normal")
-                    option(v-for="file in state.files", :value="file") {{file}}
+                .fa.fa-folder-open
-          gcode-viewer
+      select(title="Select previously uploaded GCode programs.",
+                v-model="state.selected", @change="load", :disabled="!is_ready",
+                style="max-width:100%")
+                option(v-for="file in state.files", :value="file") {{file}}
+    gcode-viewer

src/stylus/style.styl

@@ -1034,13 +1034,13 @@ tt.save
 .pure-form-aligned .pure-control-group label.extra
     width 8em
 
-.macros
+#macros
   padding 30px
 
   .macros-form
-    padding 10px
+    padding 50px
   
-  .input-name
+  input.input-name
     width 300px
     height 40px
     border-radius 8px
@@ -1048,9 +1048,17 @@ tt.save
     border-color #434242
     padding-left 10px
   
+  input.input-color
+    height 40px
+    width 40px
+    border-radius 2px
+  
   button
     border-radius 8px
     border-width 1px
     border-color #434242
     padding-left 10px
 
+  .input-field
+    margin-top 10px
+