mirror of
https://github.com/Doodle3D/Doodle3D-Slicer.git
synced 2024-10-23 01:22:30 +02:00
Display settings inside accordion element
This commit is contained in:
Casper Lamboo
parent
49b4a2be59
commit
01f40eb5f8
62
src/interface/Accordion.js
Normal file
62
src/interface/Accordion.js
Normal file
@ -0,0 +1,62 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'proptypes';
|
||||
import injectSheet from 'react-jss';
|
||||
import ExpandIcon from 'material-ui-icons/ExpandMore';
|
||||
|
||||
const styles = {
|
||||
button: {
|
||||
cursor: 'pointer'
|
||||
},
|
||||
body: {
|
||||
overflow: 'hidden'
|
||||
},
|
||||
closed: {
|
||||
maxHeight: '0px'
|
||||
},
|
||||
title: {
|
||||
display: 'flex',
|
||||
alignItems: 'flex-end'
|
||||
}
|
||||
};
|
||||
|
||||
class Accordion extends React.Component {
|
||||
static propTypes = {
|
||||
elements: PropTypes.arrayOf(PropTypes.shape({ body: PropTypes.node, title: PropTypes.string })),
|
||||
classes: PropTypes.objectOf(PropTypes.string)
|
||||
};
|
||||
static defaultProps: {
|
||||
elements: []
|
||||
};
|
||||
|
||||
state = {
|
||||
openAccordion: null
|
||||
};
|
||||
|
||||
changeAccordion = (name) => {
|
||||
const { openAccordion } = this.state;
|
||||
if (openAccordion === name) {
|
||||
this.setState({ openAccordion: null });
|
||||
} else {
|
||||
this.setState({ openAccordion: name });
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { openAccordion } = this.state;
|
||||
const { elements, classes } = this.props;
|
||||
|
||||
return elements.map(({ body, title }, i) => (
|
||||
<span key={i}>
|
||||
<span className={classes.title}>
|
||||
<ExpandIcon />
|
||||
<p onClick={() => this.changeAccordion(title)} className={classes.button}>{title}</p>
|
||||
</span>
|
||||
<div className={`${classes.body} ${openAccordion === title ? '' : classes.closed}`}>
|
||||
{body}
|
||||
</div>
|
||||
</span>
|
||||
));
|
||||
}
|
||||
}
|
||||
|
||||
export default injectSheet(styles)(Accordion);
|
||||
@ -22,6 +22,7 @@ import SettingsIcon from 'material-ui-icons/Settings';
|
||||
import ExitToAppIcon from 'material-ui-icons/ExitToApp';
|
||||
import validateIp from 'validate-ip';
|
||||
import { Doodle3DManager } from 'doodle3d-api';
|
||||
import Accordion from './Accordion.js';
|
||||
|
||||
const DOODLE_3D_MANAGER = new Doodle3DManager();
|
||||
DOODLE_3D_MANAGER.checkNonServerBoxes = false;
|
||||
@ -445,23 +446,38 @@ class Settings extends React.Component {
|
||||
</Tab>
|
||||
<Tab buttonStyle={{ color: grey800, backgroundColor: 'white' }} label="Advanced">
|
||||
<div>
|
||||
<p>Layer</p>
|
||||
<NumberField name="settings.layerHeight" min={0.05} max={3} fullWidth floatingLabelText="Height" />
|
||||
<p>Thickness</p>
|
||||
<Accordion elements={[{
|
||||
title: 'Layer',
|
||||
body: (<NumberField name="settings.layerHeight" min={0.05} max={3} fullWidth floatingLabelText="Height" />)
|
||||
}, {
|
||||
title: 'Thickness',
|
||||
body: (<span>
|
||||
<NumberField name="settings.thickness.top" min={0} fullWidth floatingLabelText="top" />
|
||||
<NumberField name="settings.thickness.bottom" min={0} fullWidth floatingLabelText="bottom" />
|
||||
<NumberField name="settings.thickness.shell" min={0} fullWidth floatingLabelText="shell" />
|
||||
<p>Material</p>
|
||||
</span>)
|
||||
}, {
|
||||
title: 'Material',
|
||||
body: (<span>
|
||||
<NumberField name="settings.filamentThickness" min={0.1} max={10} fullWidth floatingLabelText="Thickness" />
|
||||
<NumberField name="settings.temperature" min={100} max={400} fullWidth floatingLabelText="Temperature" />
|
||||
<p>Bed</p>
|
||||
</span>)
|
||||
}, {
|
||||
title: 'Bed',
|
||||
body: (<span>
|
||||
<NumberField name="settings.bedTemperature" min={30} max={150} fullWidth floatingLabelText="Temperature" />
|
||||
<Checkbox name="settings.heatedBed" label="Heated" />
|
||||
<p>Brim</p>
|
||||
</span>)
|
||||
}, {
|
||||
title: 'Brim',
|
||||
body: (<span>
|
||||
<NumberField name="settings.brim.size" min={0} max={20} fullWidth floatingLabelText="Size" />
|
||||
<NumberField name="settings.brim.speed" min={10} max={200} fullWidth floatingLabelText="Speed" />
|
||||
<NumberField name="settings.brim.flowRate" min={0.1} max={4} fullWidth floatingLabelText="Flow rate" />
|
||||
<p>Support</p>
|
||||
</span>)
|
||||
}, {
|
||||
title: 'Support',
|
||||
body: (<span>
|
||||
<Checkbox name="settings.support.enabled" label="Enabled" />
|
||||
<NumberField name="settings.support.distanceY" min={0.1} fullWidth floatingLabelText="Distance Y" />
|
||||
<NumberField name="settings.support.density" min={0} max={100} fullWidth floatingLabelText="Density" />
|
||||
@ -469,38 +485,67 @@ class Settings extends React.Component {
|
||||
<NumberField name="settings.support.minArea" min={1} fullWidth floatingLabelText="Min Area" />
|
||||
<NumberField name="settings.support.speed" min={10} max={200} fullWidth floatingLabelText="Speed" />
|
||||
<NumberField name="settings.support.flowRate" min={0.1} max={4} fullWidth floatingLabelText="Flow rate" />
|
||||
<p>First layer</p>
|
||||
</span>)
|
||||
}, {
|
||||
title: 'First layer',
|
||||
body: (<span>
|
||||
<NumberField name="settings.firstLayer.speed" min={10} max={200} fullWidth floatingLabelText="Speed" />
|
||||
<NumberField name="settings.firstLayer.flowRate" min={0.1} max={4} fullWidth floatingLabelText="Flow rate" />
|
||||
<p>Inner shell</p>
|
||||
</span>)
|
||||
}, {
|
||||
title: 'Inner shell',
|
||||
body: (<span>
|
||||
<NumberField name="settings.innerShell.speed" min={10} max={200} fullWidth floatingLabelText="Speed" />
|
||||
<NumberField name="settings.innerShell.flowRate" min={0.1} max={4} fullWidth floatingLabelText="Flow rate" />
|
||||
<p>Outer shell</p>
|
||||
</span>)
|
||||
}, {
|
||||
title: 'Outer shell',
|
||||
body: (<span>
|
||||
<NumberField name="settings.outerShell.speed" min={10} max={200} fullWidth floatingLabelText="Speed" />
|
||||
<NumberField name="settings.outerShell.flowRate" min={0.1} max={4} fullWidth floatingLabelText="Flow rate" />
|
||||
<p>Inner infill</p>
|
||||
</span>)
|
||||
}, {
|
||||
title: 'Inner infill',
|
||||
body: (<span>
|
||||
<NumberField name="settings.innerInfill.density" min={0} max={100} fullWidth floatingLabelText="Density" />
|
||||
<NumberField name="settings.innerInfill.speed" min={10} max={200} fullWidth floatingLabelText="Speed" />
|
||||
<NumberField name="settings.innerInfill.flowRate" min={0.1} max={4} fullWidth floatingLabelText="Flow rate" />
|
||||
<p>Outer infill</p>
|
||||
</span>)
|
||||
}, {
|
||||
title: 'Outer infill',
|
||||
body: (<span>
|
||||
<NumberField name="settings.outerInfill.speed" min={10} max={200} fullWidth floatingLabelText="Speed" />
|
||||
<NumberField name="settings.outerInfill.flowRate" min={0.1} max={4} fullWidth floatingLabelText="Flow rate" />
|
||||
<p>Travel</p>
|
||||
</span>)
|
||||
}, {
|
||||
title: 'Travel',
|
||||
body: (<span>
|
||||
<NumberField name="settings.travel.speed" min={10} max={200} fullWidth floatingLabelText="Speed" />
|
||||
<Checkbox name="settings.combing" label="Combing" />
|
||||
<p>Retraction</p>
|
||||
</span>)
|
||||
}, {
|
||||
title: 'Retraction',
|
||||
body: (<span>
|
||||
<Checkbox name="settings.retraction.enabled" label="Enabled" />
|
||||
<NumberField name="settings.retraction.amount" min={0} max={10} fullWidth floatingLabelText="Amount" />
|
||||
<NumberField name="settings.retraction.speed" min={10} max={200} fullWidth floatingLabelText="Speed" />
|
||||
<NumberField name="settings.retraction.minDistance" min={0} fullWidth floatingLabelText="Min distance" />
|
||||
<p>Printer dimensions</p>
|
||||
</span>)
|
||||
}, {
|
||||
title: 'Printer dimensions',
|
||||
body: (<span>
|
||||
<div className={classes.textFieldRow}>
|
||||
<NumberField name="settings.dimensions.x" min={1} fullWidth floatingLabelText="X" />
|
||||
<NumberField name="settings.dimensions.y" min={1} fullWidth floatingLabelText="Y" />
|
||||
<NumberField name="settings.dimensions.z" min={1} fullWidth floatingLabelText="Z" />
|
||||
</div>
|
||||
<p>Nozzle</p>
|
||||
</span>)
|
||||
}, {
|
||||
title: 'Nozzle',
|
||||
body: (<span>
|
||||
<NumberField name="settings.nozzleDiameter" min={0.1} max={5} fullWidth floatingLabelText="Diameter" />
|
||||
</span>)
|
||||
}]} />
|
||||
</div>
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user