CreatBot/CreatBotMainsail
11
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/panels/MachineSettings/FirmwareRetractionSettings.vue
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">

26
src/components/panels/MachineSettings/MachineSettingsPanel.vue
View File

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

149
src/components/panels/MachineSettings/MotionSettings.vue
View File

@ -1,73 +1,81 @@
<template> <template>
<v-card-text> <v-container>
<v-row> <responsive
<v-col class="col-12 col-md-6"> :breakpoints="{
<number-input small: (el) => el.width < 375,
:label="$t('Panels.MachineSettingsPanel.MotionSettings.Velocity').toString()" medium: (el) => el.width >= 375,
param="VELOCITY" }">
:target="velocity" <template #default="{ el }">
:default-value="defaultVelocity" <v-row>
:output-error-msg="true" <v-col :class="{ 'col-12': el.is.small, 'col-6': el.is.medium }">
:has-spinner="true" <number-input
:spinner-factor="5" :label="$t('Panels.MachineSettingsPanel.MotionSettings.Velocity').toString()"
:step="1" param="VELOCITY"
:min="1" :target="velocity"
:max="null" :default-value="defaultVelocity"
:dec="0" :output-error-msg="true"
unit="mm/s" :has-spinner="true"
@submit="sendCmd"></number-input> :spinner-factor="5"
</v-col> :step="1"
<v-col class="col-12 col-md-6"> :min="1"
<number-input :max="null"
:label="$t('Panels.MachineSettingsPanel.MotionSettings.SquareCornerVelocity').toString()" :dec="0"
param="SQUARE_CORNER_VELOCITY" unit="mm/s"
:target="squareCornerVelocity" @submit="sendCmd"></number-input>
:default-value="defaultSquareCornerVelocity" </v-col>
:output-error-msg="true" <v-col :class="{ 'col-12': el.is.small, 'col-6': el.is.medium }">
:has-spinner="true" <number-input
:step="0.1" :label="$t('Panels.MachineSettingsPanel.MotionSettings.SquareCornerVelocity').toString()"
:min="0.1" param="SQUARE_CORNER_VELOCITY"
:max="null" :target="squareCornerVelocity"
:dec="1" :default-value="defaultSquareCornerVelocity"
unit="mm/s" :output-error-msg="true"
@submit="sendCmd"></number-input> :has-spinner="true"
</v-col> :step="0.1"
</v-row> :min="0.1"
<v-row> :max="null"
<v-col class="col-12 col-md-6"> :dec="1"
<number-input unit="mm/s"
:label="$t('Panels.MachineSettingsPanel.MotionSettings.Acceleration').toString()" @submit="sendCmd"></number-input>
param="ACCEL" </v-col>
:target="accel" </v-row>
:default-value="defaultAccel" <v-row>
:output-error-msg="true" <v-col :class="{ 'col-12': el.is.small, 'col-6': el.is.medium }">
:has-spinner="true" <number-input
:spinner-factor="100" :label="$t('Panels.MachineSettingsPanel.MotionSettings.Acceleration').toString()"
:step="1" param="ACCEL"
:min="1" :target="accel"
:max="null" :default-value="defaultAccel"
:dec="0" :output-error-msg="true"
unit="mm/s²" :has-spinner="true"
@submit="sendCmd"></number-input> :spinner-factor="100"
</v-col> :step="1"
<v-col class="col-12 col-md-6"> :min="1"
<number-input :max="null"
:label="$t('Panels.MachineSettingsPanel.MotionSettings.MaxAccelToDecel').toString()" :dec="0"
param="ACCEL_TO_DECEL" unit="mm/s²"
:target="accelToDecel" @submit="sendCmd"></number-input>
:default-value="defaultAccelToDecel" </v-col>
:output-error-msg="true" <v-col :class="{ 'col-12': el.is.small, 'col-6': el.is.medium }">
:has-spinner="true" <number-input
:spinner-factor="100" :label="$t('Panels.MachineSettingsPanel.MotionSettings.MaxAccelToDecel').toString()"
:step="1" param="ACCEL_TO_DECEL"
:min="1" :target="accelToDecel"
:max="null" :default-value="defaultAccelToDecel"
:dec="0" :output-error-msg="true"
unit="mm/s²" :has-spinner="true"
@submit="sendCmd"></number-input> :spinner-factor="100"
</v-col> :step="1"
</v-row> :min="1"
</v-card-text> :max="null"
:dec="0"
unit="mm/s²"
@submit="sendCmd"></number-input>
</v-col>
</v-row>
</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 {

2
src/locales/de.json
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.",

2
src/locales/en.json
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.",