refactor(MachineSettingsPanel.vue): tweak visual appearance (#784)

This commit is contained in:
th33xitus 2022-05-09 15:19:32 +02:00 committed by GitHub
parent eb19afbfdf
commit 014a791c12
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 98 additions and 85 deletions

View File

@ -1,5 +1,5 @@
<template> <template>
<v-card-text> <v-container>
<v-row> <v-row>
<v-col class="col-12 col-md-6"> <v-col class="col-12 col-md-6">
<number-input <number-input
@ -70,7 +70,7 @@
@submit="sendCmd"></number-input> @submit="sendCmd"></number-input>
</v-col> </v-col>
</v-row> </v-row>
</v-card-text> </v-container>
</template> </template>
<script lang="ts"> <script lang="ts">

View File

@ -6,17 +6,21 @@
:collapsible="true" :collapsible="true"
card-class="machine-settings-panel"> card-class="machine-settings-panel">
<div> <div>
<template v-if="existsFirmwareRetraction">
<sub-panel <sub-panel
:title="$t('Panels.MachineSettingsPanel.MotionSettings.Motion').toString()" :title="$t('Panels.MachineSettingsPanel.MotionSettings.Motion').toString()"
sub-panel-class="motion-settings-subpanel"> sub-panel-class="motion-settings-subpanel"
<motion-settings></motion-settings> class="py-3">
<motion-settings class="pb-0"></motion-settings>
</sub-panel> </sub-panel>
<sub-panel <sub-panel
v-if="existsFirmwareRetraction"
:title="$t('Panels.MachineSettingsPanel.FirmwareRetractionSettings.FirmwareRetraction').toString()" :title="$t('Panels.MachineSettingsPanel.FirmwareRetractionSettings.FirmwareRetraction').toString()"
sub-panel-class="firmware-retraction-settings-subpanel"> sub-panel-class="firmware-retraction-settings-subpanel"
<firmware-retraction-settings></firmware-retraction-settings> class="pb-3">
<firmware-retraction-settings class="pb-0"></firmware-retraction-settings>
</sub-panel> </sub-panel>
</template>
<motion-settings v-else></motion-settings>
</div> </div>
</panel> </panel>
</template> </template>

View File

@ -1,7 +1,13 @@
<template> <template>
<v-card-text> <v-container>
<responsive
:breakpoints="{
small: (el) => el.width < 375,
medium: (el) => el.width >= 375,
}">
<template #default="{ el }">
<v-row> <v-row>
<v-col class="col-12 col-md-6"> <v-col :class="{ 'col-12': el.is.small, 'col-6': el.is.medium }">
<number-input <number-input
:label="$t('Panels.MachineSettingsPanel.MotionSettings.Velocity').toString()" :label="$t('Panels.MachineSettingsPanel.MotionSettings.Velocity').toString()"
param="VELOCITY" param="VELOCITY"
@ -17,7 +23,7 @@
unit="mm/s" unit="mm/s"
@submit="sendCmd"></number-input> @submit="sendCmd"></number-input>
</v-col> </v-col>
<v-col class="col-12 col-md-6"> <v-col :class="{ 'col-12': el.is.small, 'col-6': el.is.medium }">
<number-input <number-input
:label="$t('Panels.MachineSettingsPanel.MotionSettings.SquareCornerVelocity').toString()" :label="$t('Panels.MachineSettingsPanel.MotionSettings.SquareCornerVelocity').toString()"
param="SQUARE_CORNER_VELOCITY" param="SQUARE_CORNER_VELOCITY"
@ -34,7 +40,7 @@
</v-col> </v-col>
</v-row> </v-row>
<v-row> <v-row>
<v-col class="col-12 col-md-6"> <v-col :class="{ 'col-12': el.is.small, 'col-6': el.is.medium }">
<number-input <number-input
:label="$t('Panels.MachineSettingsPanel.MotionSettings.Acceleration').toString()" :label="$t('Panels.MachineSettingsPanel.MotionSettings.Acceleration').toString()"
param="ACCEL" param="ACCEL"
@ -50,7 +56,7 @@
unit="mm/s²" unit="mm/s²"
@submit="sendCmd"></number-input> @submit="sendCmd"></number-input>
</v-col> </v-col>
<v-col class="col-12 col-md-6"> <v-col :class="{ 'col-12': el.is.small, 'col-6': el.is.medium }">
<number-input <number-input
:label="$t('Panels.MachineSettingsPanel.MotionSettings.MaxAccelToDecel').toString()" :label="$t('Panels.MachineSettingsPanel.MotionSettings.MaxAccelToDecel').toString()"
param="ACCEL_TO_DECEL" param="ACCEL_TO_DECEL"
@ -67,7 +73,9 @@
@submit="sendCmd"></number-input> @submit="sendCmd"></number-input>
</v-col> </v-col>
</v-row> </v-row>
</v-card-text> </template>
</responsive>
</v-container>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -76,9 +84,10 @@ import { Debounce } from 'vue-debounce-decorator'
import BaseMixin from '@/components/mixins/base' import BaseMixin from '@/components/mixins/base'
import Panel from '@/components/ui/Panel.vue' import Panel from '@/components/ui/Panel.vue'
import NumberInput from '@/components/inputs/NumberInput.vue' import NumberInput from '@/components/inputs/NumberInput.vue'
import Responsive from '@/components/ui/Responsive.vue'
@Component({ @Component({
components: { Panel, NumberInput }, components: { Panel, NumberInput, Responsive },
}) })
export default class MotionSettings extends Mixins(BaseMixin) { export default class MotionSettings extends Mixins(BaseMixin) {
get velocity(): number { get velocity(): number {

View File

@ -471,7 +471,7 @@
"UnretractExtraLength": "Zusätzliche Ausfahrlänge", "UnretractExtraLength": "Zusätzliche Ausfahrlänge",
"UnretractSpeed": "Ausfahrgeschwindigkeit" "UnretractSpeed": "Ausfahrgeschwindigkeit"
}, },
"Headline": "Maschinen Einstellungen", "Headline": "Maschine",
"MotionSettings": { "MotionSettings": {
"Acceleration": "Beschleunigung", "Acceleration": "Beschleunigung",
"MaxAccelToDecel": "Max. Beschl. zu Verz.", "MaxAccelToDecel": "Max. Beschl. zu Verz.",

View File

@ -490,7 +490,7 @@
"UnretractExtraLength": "Unretract Extra Length", "UnretractExtraLength": "Unretract Extra Length",
"UnretractSpeed": "Unretract Speed" "UnretractSpeed": "Unretract Speed"
}, },
"Headline": "Machine Settings", "Headline": "Machine",
"MotionSettings": { "MotionSettings": {
"Acceleration": "Acceleration", "Acceleration": "Acceleration",
"MaxAccelToDecel": "Max Accel. to Decel.", "MaxAccelToDecel": "Max Accel. to Decel.",