Refactor PrinterPositionPanel and PrinterTemperaturePanel for improved styling and layout
- Introduced controlLabelStyle and controlInputStyle for consistent styling of control elements in PrinterPositionPanel. - Replaced Space components with Flex for better alignment and layout management in PrinterPositionPanel. - Updated input field widths in PrinterTemperaturePanel for enhanced usability and consistency.
This commit is contained in:
parent
e52798d4ac
commit
e3544ef2e2
@ -30,6 +30,17 @@ const CustomCollapse = styled(Collapse)`
|
||||
}
|
||||
`
|
||||
|
||||
const controlLabelStyle = {
|
||||
whiteSpace: 'nowrap',
|
||||
flexShrink: 0,
|
||||
minWidth: '120px'
|
||||
}
|
||||
|
||||
const controlInputStyle = {
|
||||
flex: 1,
|
||||
minWidth: 0
|
||||
}
|
||||
|
||||
const PrinterPositionPanel = ({
|
||||
id,
|
||||
showControls = true,
|
||||
@ -234,16 +245,22 @@ const PrinterPositionPanel = ({
|
||||
</Descriptions>
|
||||
{showControls && (
|
||||
<>
|
||||
<Space direction='vertical' style={{ width: '100%' }}>
|
||||
<Space direction='horizontal'>
|
||||
<Text>Max Velocity:</Text>
|
||||
<Space.Compact block size='small'>
|
||||
<Flex vertical gap='small' style={{ width: '100%' }}>
|
||||
<Flex align='center' style={{ width: '100%' }}>
|
||||
<Text style={{ ...controlLabelStyle, minWidth: '91px' }}>
|
||||
Max Velocity:
|
||||
</Text>
|
||||
<Space.Compact
|
||||
block
|
||||
size='small'
|
||||
style={{ flex: 1, minWidth: 0 }}
|
||||
>
|
||||
<InputNumber
|
||||
value={round(maxVelocity, 2)}
|
||||
min={1}
|
||||
max={10000}
|
||||
step={5}
|
||||
style={{ width: '125px' }}
|
||||
style={controlInputStyle}
|
||||
suffix='mm/s'
|
||||
onChange={(value) => setMaxVelocity(value)}
|
||||
onPressEnter={handleSetMaxVelocity}
|
||||
@ -259,92 +276,104 @@ const PrinterPositionPanel = ({
|
||||
Set
|
||||
</Button>
|
||||
</Space.Compact>
|
||||
</Space>
|
||||
</Flex>
|
||||
|
||||
<Space direction='vertical' style={{ width: '100%' }}>
|
||||
<Space direction='horizontal'>
|
||||
<Text>Max Acceleration:</Text>
|
||||
<Space.Compact block size='small'>
|
||||
<InputNumber
|
||||
value={round(maxAcceleration, 2)}
|
||||
min={1}
|
||||
max={10000}
|
||||
step={5}
|
||||
style={{ width: '125px' }}
|
||||
suffix='mm/s²'
|
||||
onChange={(value) => setMaxAcceleration(value)}
|
||||
onPressEnter={handleSetMaxAcceleration}
|
||||
size='small'
|
||||
disabled={controlsDisabled}
|
||||
/>
|
||||
<Button
|
||||
type='default'
|
||||
style={{ width: 40 }}
|
||||
onClick={handleSetMaxAcceleration}
|
||||
disabled={controlsDisabled}
|
||||
>
|
||||
Set
|
||||
</Button>
|
||||
</Space.Compact>
|
||||
</Space>
|
||||
</Space>
|
||||
<Flex align='center' style={{ width: '100%' }}>
|
||||
<Text style={{ ...controlLabelStyle, minWidth: '120px' }}>
|
||||
Max Acceleration:
|
||||
</Text>
|
||||
<Space.Compact
|
||||
block
|
||||
size='small'
|
||||
style={{ flex: 1, minWidth: 0 }}
|
||||
>
|
||||
<InputNumber
|
||||
value={round(maxAcceleration, 2)}
|
||||
min={1}
|
||||
max={10000}
|
||||
step={5}
|
||||
style={controlInputStyle}
|
||||
suffix='mm/s²'
|
||||
onChange={(value) => setMaxAcceleration(value)}
|
||||
onPressEnter={handleSetMaxAcceleration}
|
||||
size='small'
|
||||
disabled={controlsDisabled}
|
||||
/>
|
||||
<Button
|
||||
type='default'
|
||||
style={{ width: 40 }}
|
||||
onClick={handleSetMaxAcceleration}
|
||||
disabled={controlsDisabled}
|
||||
>
|
||||
Set
|
||||
</Button>
|
||||
</Space.Compact>
|
||||
</Flex>
|
||||
|
||||
<Space direction='vertical' style={{ width: '100%' }}>
|
||||
<Space direction='horizontal'>
|
||||
<Text>Sqr Corner Vel:</Text>
|
||||
<Space.Compact block size='small'>
|
||||
<InputNumber
|
||||
value={round(squareCornerVelocity, 2) || 0}
|
||||
min={0.1}
|
||||
max={1000}
|
||||
step={0.1}
|
||||
suffix='mm/s'
|
||||
style={{ width: '125px' }}
|
||||
onChange={(value) => setSquareCornerVelocity(value)}
|
||||
onPressEnter={handleSetSquareCornerVelocity}
|
||||
size='small'
|
||||
disabled={controlsDisabled}
|
||||
/>
|
||||
<Button
|
||||
type='default'
|
||||
style={{ width: 40 }}
|
||||
onClick={handleSetSquareCornerVelocity}
|
||||
disabled={controlsDisabled}
|
||||
>
|
||||
Set
|
||||
</Button>
|
||||
</Space.Compact>
|
||||
</Space>
|
||||
</Space>
|
||||
<Flex align='center' style={{ width: '100%' }}>
|
||||
<Text style={{ ...controlLabelStyle, minWidth: '102px' }}>
|
||||
Sqr Corner Vel:
|
||||
</Text>
|
||||
<Space.Compact
|
||||
block
|
||||
size='small'
|
||||
style={{ flex: 1, minWidth: 0 }}
|
||||
>
|
||||
<InputNumber
|
||||
value={round(squareCornerVelocity, 2) || 0}
|
||||
min={0.1}
|
||||
max={1000}
|
||||
step={0.1}
|
||||
style={controlInputStyle}
|
||||
suffix='mm/s'
|
||||
onChange={(value) => setSquareCornerVelocity(value)}
|
||||
onPressEnter={handleSetSquareCornerVelocity}
|
||||
size='small'
|
||||
disabled={controlsDisabled}
|
||||
/>
|
||||
<Button
|
||||
type='default'
|
||||
style={{ width: 40 }}
|
||||
onClick={handleSetSquareCornerVelocity}
|
||||
disabled={controlsDisabled}
|
||||
>
|
||||
Set
|
||||
</Button>
|
||||
</Space.Compact>
|
||||
</Flex>
|
||||
|
||||
<Space direction='vertical' style={{ width: '100%' }}>
|
||||
<Space direction='horizontal'>
|
||||
<Text>Min Cruise Ratio:</Text>
|
||||
<Space.Compact block size='small'>
|
||||
<InputNumber
|
||||
value={round(minCruiseRatio * 100, 2) || 0}
|
||||
min={0}
|
||||
max={100}
|
||||
step={1}
|
||||
suffix='%'
|
||||
style={{ width: '125px' }}
|
||||
onChange={(value) => setMinCruiseRatio(value / 100)}
|
||||
onPressEnter={handleSetMinCruiseRatio}
|
||||
size='small'
|
||||
disabled={controlsDisabled}
|
||||
/>
|
||||
<Button
|
||||
type='default'
|
||||
style={{ width: 40 }}
|
||||
onClick={handleSetMinCruiseRatio}
|
||||
disabled={controlsDisabled}
|
||||
>
|
||||
Set
|
||||
</Button>
|
||||
</Space.Compact>
|
||||
</Space>
|
||||
</Space>
|
||||
</Space>
|
||||
<Flex align='center' style={{ width: '100%' }}>
|
||||
<Text style={{ ...controlLabelStyle, minWidth: '114px' }}>
|
||||
Min Cruise Ratio:
|
||||
</Text>
|
||||
<Space.Compact
|
||||
block
|
||||
size='small'
|
||||
style={{ flex: 1, minWidth: 0 }}
|
||||
>
|
||||
<InputNumber
|
||||
value={round(minCruiseRatio * 100, 2) || 0}
|
||||
min={0}
|
||||
max={100}
|
||||
step={1}
|
||||
suffix='%'
|
||||
style={controlInputStyle}
|
||||
onChange={(value) => setMinCruiseRatio(value / 100)}
|
||||
onPressEnter={handleSetMinCruiseRatio}
|
||||
size='small'
|
||||
disabled={controlsDisabled}
|
||||
/>
|
||||
<Button
|
||||
type='default'
|
||||
style={{ width: 40 }}
|
||||
onClick={handleSetMinCruiseRatio}
|
||||
disabled={controlsDisabled}
|
||||
>
|
||||
Set
|
||||
</Button>
|
||||
</Space.Compact>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</>
|
||||
)}
|
||||
<Text>Homing Origin:</Text>
|
||||
@ -420,16 +449,22 @@ const PrinterPositionPanel = ({
|
||||
</Descriptions>
|
||||
{showControls && (
|
||||
<>
|
||||
<Space direction='vertical' style={{ width: '100%' }}>
|
||||
<Space direction='horizontal'>
|
||||
<Text>Speed Factor:</Text>
|
||||
<Space.Compact block size='small'>
|
||||
<Flex vertical gap='small' style={{ width: '100%' }}>
|
||||
<Flex align='center' style={{ width: '100%' }}>
|
||||
<Text style={{ ...controlLabelStyle, minWidth: '96px' }}>
|
||||
Speed Factor:
|
||||
</Text>
|
||||
<Space.Compact
|
||||
block
|
||||
size='small'
|
||||
style={{ flex: 1, minWidth: 0 }}
|
||||
>
|
||||
<InputNumber
|
||||
value={round(speedFactor, 2)}
|
||||
min={0.1}
|
||||
max={2}
|
||||
step={0.1}
|
||||
style={{ width: '125px' }}
|
||||
style={controlInputStyle}
|
||||
suffix='%'
|
||||
onChange={(value) => setSpeedFactor(value)}
|
||||
onPressEnter={handleSetSpeedFactor}
|
||||
@ -445,17 +480,23 @@ const PrinterPositionPanel = ({
|
||||
Set
|
||||
</Button>
|
||||
</Space.Compact>
|
||||
</Space>
|
||||
</Flex>
|
||||
|
||||
<Space direction='horizontal'>
|
||||
<Text>Extrude Factor:</Text>
|
||||
<Space.Compact block size='small'>
|
||||
<Flex align='center' style={{ width: '100%' }}>
|
||||
<Text style={{ ...controlLabelStyle, minWidth: '105px' }}>
|
||||
Extrude Factor:
|
||||
</Text>
|
||||
<Space.Compact
|
||||
block
|
||||
size='small'
|
||||
style={{ flex: 1, minWidth: 0 }}
|
||||
>
|
||||
<InputNumber
|
||||
value={round(extrudeFactor, 2)}
|
||||
min={0.1}
|
||||
max={2}
|
||||
step={0.1}
|
||||
style={{ width: '125px' }}
|
||||
style={controlInputStyle}
|
||||
suffix='%'
|
||||
onChange={(value) => setExtrudeFactor(value)}
|
||||
onPressEnter={handleSetExtrudeFactor}
|
||||
@ -471,8 +512,8 @@ const PrinterPositionPanel = ({
|
||||
Set
|
||||
</Button>
|
||||
</Space.Compact>
|
||||
</Space>
|
||||
</Space>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</>
|
||||
)}
|
||||
<Descriptions
|
||||
|
||||
@ -189,7 +189,7 @@ const PrinterTemperaturePanel = ({
|
||||
value={extruderTarget}
|
||||
min={0}
|
||||
max={300}
|
||||
style={{ width: '120px' }}
|
||||
style={{ width: '140px' }}
|
||||
addonAfter='°C'
|
||||
onChange={(value) => setExtruderTarget(value || 0)}
|
||||
onPressEnter={() =>
|
||||
@ -253,7 +253,7 @@ const PrinterTemperaturePanel = ({
|
||||
value={bedTarget}
|
||||
min={0}
|
||||
max={300}
|
||||
style={{ width: '120px' }}
|
||||
style={{ width: '140px' }}
|
||||
addonAfter='°C'
|
||||
onChange={(value) => setBedTarget(value || 0)}
|
||||
onPressEnter={() =>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user