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

View File

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

View File

@ -1,73 +1,81 @@
<template>
<v-card-text>
<v-row>
<v-col class="col-12 col-md-6">
<number-input
:label="$t('Panels.MachineSettingsPanel.MotionSettings.Velocity').toString()"
param="VELOCITY"
:target="velocity"
:default-value="defaultVelocity"
:output-error-msg="true"
:has-spinner="true"
:spinner-factor="5"
:step="1"
:min="1"
:max="null"
:dec="0"
unit="mm/s"
@submit="sendCmd"></number-input>
</v-col>
<v-col class="col-12 col-md-6">
<number-input
:label="$t('Panels.MachineSettingsPanel.MotionSettings.SquareCornerVelocity').toString()"
param="SQUARE_CORNER_VELOCITY"
:target="squareCornerVelocity"
:default-value="defaultSquareCornerVelocity"
:output-error-msg="true"
:has-spinner="true"
:step="0.1"
:min="0.1"
:max="null"
:dec="1"
unit="mm/s"
@submit="sendCmd"></number-input>
</v-col>
</v-row>
<v-row>
<v-col class="col-12 col-md-6">
<number-input
:label="$t('Panels.MachineSettingsPanel.MotionSettings.Acceleration').toString()"
param="ACCEL"
:target="accel"
:default-value="defaultAccel"
:output-error-msg="true"
:has-spinner="true"
:spinner-factor="100"
:step="1"
:min="1"
:max="null"
:dec="0"
unit="mm/s²"
@submit="sendCmd"></number-input>
</v-col>
<v-col class="col-12 col-md-6">
<number-input
:label="$t('Panels.MachineSettingsPanel.MotionSettings.MaxAccelToDecel').toString()"
param="ACCEL_TO_DECEL"
:target="accelToDecel"
:default-value="defaultAccelToDecel"
:output-error-msg="true"
:has-spinner="true"
:spinner-factor="100"
:step="1"
:min="1"
:max="null"
:dec="0"
unit="mm/s²"
@submit="sendCmd"></number-input>
</v-col>
</v-row>
</v-card-text>
<v-container>
<responsive
:breakpoints="{
small: (el) => el.width < 375,
medium: (el) => el.width >= 375,
}">
<template #default="{ el }">
<v-row>
<v-col :class="{ 'col-12': el.is.small, 'col-6': el.is.medium }">
<number-input
:label="$t('Panels.MachineSettingsPanel.MotionSettings.Velocity').toString()"
param="VELOCITY"
:target="velocity"
:default-value="defaultVelocity"
:output-error-msg="true"
:has-spinner="true"
:spinner-factor="5"
:step="1"
:min="1"
:max="null"
:dec="0"
unit="mm/s"
@submit="sendCmd"></number-input>
</v-col>
<v-col :class="{ 'col-12': el.is.small, 'col-6': el.is.medium }">
<number-input
:label="$t('Panels.MachineSettingsPanel.MotionSettings.SquareCornerVelocity').toString()"
param="SQUARE_CORNER_VELOCITY"
:target="squareCornerVelocity"
:default-value="defaultSquareCornerVelocity"
:output-error-msg="true"
:has-spinner="true"
:step="0.1"
:min="0.1"
:max="null"
:dec="1"
unit="mm/s"
@submit="sendCmd"></number-input>
</v-col>
</v-row>
<v-row>
<v-col :class="{ 'col-12': el.is.small, 'col-6': el.is.medium }">
<number-input
:label="$t('Panels.MachineSettingsPanel.MotionSettings.Acceleration').toString()"
param="ACCEL"
:target="accel"
:default-value="defaultAccel"
:output-error-msg="true"
:has-spinner="true"
:spinner-factor="100"
:step="1"
:min="1"
:max="null"
:dec="0"
unit="mm/s²"
@submit="sendCmd"></number-input>
</v-col>
<v-col :class="{ 'col-12': el.is.small, 'col-6': el.is.medium }">
<number-input
:label="$t('Panels.MachineSettingsPanel.MotionSettings.MaxAccelToDecel').toString()"
param="ACCEL_TO_DECEL"
:target="accelToDecel"
:default-value="defaultAccelToDecel"
:output-error-msg="true"
:has-spinner="true"
:spinner-factor="100"
:step="1"
:min="1"
:max="null"
:dec="0"
unit="mm/s²"
@submit="sendCmd"></number-input>
</v-col>
</v-row>
</template>
</responsive>
</v-container>
</template>
<script lang="ts">
@ -76,9 +84,10 @@ import { Debounce } from 'vue-debounce-decorator'
import BaseMixin from '@/components/mixins/base'
import Panel from '@/components/ui/Panel.vue'
import NumberInput from '@/components/inputs/NumberInput.vue'
import Responsive from '@/components/ui/Responsive.vue'
@Component({
components: { Panel, NumberInput },
components: { Panel, NumberInput, Responsive },
})
export default class MotionSettings extends Mixins(BaseMixin) {
get velocity(): number {

View File

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

View File

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