Skip to content

Commit

Permalink
feat: multi column for many inputs in gcode macro (#1153)
Browse files Browse the repository at this point in the history
  • Loading branch information
meteyou authored Nov 14, 2022
1 parent 2aa181c commit 20adf79
Showing 1 changed file with 70 additions and 6 deletions.
76 changes: 70 additions & 6 deletions src/components/inputs/MacroButton.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand All @@ -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>
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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()
Expand Down

0 comments on commit 20adf79

Please sign in to comment.