style: use icon button on macro params field

Signed-off-by: Pedro Lamas <[email protected]>

Author: pedrolamas

src/components/widgets/macros/MacroBtn.vue

@@ -9,7 +9,7 @@
       <slot />
     </app-btn>
     <v-menu
-      v-if="paramList.length > 0"
+      v-if="hasParams"
       left
       offset-y
       transition="slide-y-transition"
@@ -34,40 +34,28 @@
       <v-form @submit.prevent="$emit('click', runCommand)">
         <v-card>
           <v-card-text class="pb-3 px-3">
-            <v-layout
-              wrap
+            <v-row
+              v-for="(param, key) in params"
+              :key="key"
               style="max-width: 150px;"
             >
-              <v-text-field
-                v-for="(param, i) in paramList"
-                :key="param"
-                v-model="params[param].value"
-                :type="isBasicGcodeCommand && !paramNameForRawGcodeCommand ? 'number' : undefined"
-                :label="param"
-                persistent-placeholder
-                outlined
-                dense
-                hide-details="auto"
-                spellcheck="false"
-                class="console-command"
-                :class="{ 'mb-3': (i < paramList.length - 1) }"
-                @focus="$event.target.select()"
-              >
-                <template #append>
-                  <app-btn
-                    v-if="params[param].value !== params[param].reset"
-                    style="margin-top: -4px; margin-right: -6px;"
-                    icon
-                    small
-                    @click="params[param].value = params[param].reset"
-                  >
-                    <v-icon small>
-                      $reset
-                    </v-icon>
-                  </app-btn>
-                </template>
-              </v-text-field>
-            </v-layout>
+              <v-col>
+                <v-text-field
+                  v-model="param.value"
+                  :type="isBasicGcodeCommand && !paramNameForRawGcodeCommand ? 'number' : undefined"
+                  :label="key"
+                  persistent-placeholder
+                  outlined
+                  dense
+                  hide-details="auto"
+                  spellcheck="false"
+                  class="console-command"
+                  :append-icon="param.value !== param.reset ? '$reset' : undefined"
+                  @click:append="param.value = param.reset"
+                  @focus="$event.target.select()"
+                />
+              </v-col>
+            </v-row>
           </v-card-text>
           <v-divider />
           <v-card-actions class="px-3 py-3">
@@ -104,6 +92,10 @@ export default class MacroBtn extends Mixins(StateMixin) {
 
   params: Record<string, MacroParameter> = {}
 
+  get hasParams () {
+    return Object.keys(this.params).length > 0
+  }
+
   get macroName () {
     return this.macro.name.toUpperCase()
   }
@@ -123,10 +115,6 @@ export default class MacroBtn extends Mixins(StateMixin) {
     return listeners
   }
 
-  get paramList () {
-    return Object.keys(this.params)
-  }
-
   /**
    * The formatted run command for a macro.
    */

src/scss/inputs.scss

@@ -15,20 +15,28 @@
   width: 180px;
 }
 
-.v-input--x-dense .v-input__slot {
-  min-height: 25px !important;
-}
+.v-input--x-dense {
+  .v-input__slot {
+    min-height: 25px !important;
+  }
 
-.v-input--dense .v-input__slot {
-  min-height: 36px !important;
-}
+  .v-select__selections {
+    padding: 2px 0 !important;
+  }
 
-.v-input--x-dense .v-select__selections {
-  padding: 2px 0 !important;
+  .v-input__append-inner {
+    margin-top: 6px !important;
+  }
 }
 
-.v-input--x-dense .v-input__append-inner {
-  margin-top: 6px !important;
+.v-input--dense {
+  .v-input__slot {
+    min-height: 36px !important;
+  }
+
+  .v-input__append-inner {
+    margin-top: 6px !important;
+  }
 }
 
 .v-text-field.v-text-field--solo .v-input__control{