feat: multi column for many inputs in gcode macro (#1153)

src/components/inputs/MacroButton.vue

@@ -10,7 +10,7 @@
             {{ alias ? alias : macro.name.replace(/_/g, ' ') }}
         </v-btn>
         <template v-if="paramArray.length">
-            <v-menu offset-y :close-on-content-click="false">
+            <v-menu v-if="!isMobile" offset-y :close-on-content-click="false">
                 <template #activator="{ on, attrs }">
                     <v-btn
                         :disabled="disabled"
@@ -22,10 +22,10 @@
                         <v-icon>{{ mdiMenuDown }}</v-icon>
                     </v-btn>
                 </template>
-                <v-card max-width="200">
+                <v-card :max-width="paramsOverlayWidth">
                     <v-card-text class="py-2">
-                        <v-row v-for="(name, key) in paramArray" :key="'param_' + key" class="my-2">
-                            <v-col class="py-0">
+                        <v-row class="my-2">
+                            <v-col v-for="(name, key) in paramArray" :key="'param_' + key" :cols="paramCssCols">
                                 <v-text-field
                                     v-model="params[name].value"
                                     :label="name"
@@ -49,6 +49,47 @@
                     </v-card-text>
                 </v-card>
             </v-menu>
+            <template v-else>
+                <v-btn
+                    :disabled="disabled"
+                    :color="color"
+                    class="minwidth-0 px-1 btnMacroMenu"
+                    small
+                    @click="paramsDialog = true">
+                    <v-icon>{{ mdiMenuDown }}</v-icon>
+                </v-btn>
+                <v-dialog v-model="paramsDialog">
+                    <panel :title="macro.name" :card-class="`macro-params-mobile-${macro.name}`" :margin-bottom="0">
+                        <template #buttons>
+                            <v-btn icon tile @click="paramsDialog = false">
+                                <v-icon>{{ mdiCloseThick }}</v-icon>
+                            </v-btn>
+                        </template>
+                        <v-card-text>
+                            <v-row>
+                                <v-col v-for="(name, key) in paramArray" :key="'param_mobile_' + key" :cols="6">
+                                    <v-text-field
+                                        v-model="params[name].value"
+                                        :label="name"
+                                        :placeholder="params[name].default"
+                                        :persistent-placeholder="true"
+                                        hide-details
+                                        outlined
+                                        dense
+                                        clearable
+                                        :clear-icon="mdiRefresh"
+                                        @keyup.enter="sendWithParams"></v-text-field>
+                                </v-col>
+                            </v-row>
+                        </v-card-text>
+                        <v-card-actions class="px-4 pb-4">
+                            <v-btn color="primary" class="text-uppercase" block @click="sendWithParams">
+                                {{ $t('Panels.MacrosPanel.Send') }}
+                            </v-btn>
+                        </v-card-actions>
+                    </panel>
+                </v-dialog>
+            </template>
         </template>
     </v-item-group>
 </template>
@@ -58,7 +99,8 @@ import Component from 'vue-class-component'
 import { Mixins, Prop, Watch } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { GuiMacrosStateMacrogroupMacro } from '@/store/gui/macros/types'
-import { mdiMenuDown, mdiRefresh } from '@mdi/js'
+import { mdiCloseThick, mdiMenuDown, mdiRefresh } from '@mdi/js'
+import Panel from '@/components/ui/Panel.vue'
 
 interface param {
     type: 'int' | 'double' | 'string' | null
@@ -70,16 +112,20 @@ interface params {
     [key: string]: param
 }
 
-@Component
+@Component({
+    components: { Panel },
+})
 export default class MacroButton extends Mixins(BaseMixin) {
     /**
      * Icons
      */
+    mdiCloseThick = mdiCloseThick
     mdiMenuDown = mdiMenuDown
     mdiRefresh = mdiRefresh
 
     private paramArray: string[] = []
     private params: params = {}
+    private paramsDialog = false
 
     @Prop({ required: true })
     declare readonly macro: GuiMacrosStateMacrogroupMacro
@@ -101,6 +147,24 @@ export default class MacroButton extends Mixins(BaseMixin) {
         return this.macro.name.match(/[G|M]\d{1,3}/gm)
     }
 
+    get paramCols() {
+        if (this.isMobile) return 1
+
+        const cols = Math.ceil(this.paramArray.length / 5)
+
+        if (cols > 4) return 4
+
+        return cols
+    }
+
+    get paramCssCols() {
+        return 12 / this.paramCols
+    }
+
+    get paramsOverlayWidth() {
+        return 200 * this.paramCols
+    }
+
     @Watch('klipperMacro')
     klipperMacroChange() {
         this.refreshParams()