vmario/Doodle3D-Slicer
0
0
Fork 0
mirror of https://github.com/Doodle3D/Doodle3D-Slicer.git synced 2024-07-03 09:31:22 +02:00
Code Issues Projects Releases Wiki Activity

use mui theme for colors

Browse Source
This commit is contained in:
casperlamboo 2018-01-17 13:26:30 +01:00
parent 2fdc5ca16b
commit 2f4adbbb47
5 changed files with 59 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
index.js
View File

@ -8,6 +8,17 @@ import jss from 'jss';
import preset from 'jss-preset-default'; import preset from 'jss-preset-default';
import normalize from 'normalize-jss'; import normalize from 'normalize-jss';
import queryString from 'query-string'; import queryString from 'query-string';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import { blue400, blue500, blue700 } from 'material-ui/styles/colors';
const muiTheme = getMuiTheme({
palette: {
primary1Color: blue500,
primary2Color: blue700,
primary3Color: blue400,
accent1Color: blue500,
}
});
injectTapEventPlugin(); injectTapEventPlugin();
@ -25,7 +36,7 @@ jss.createStyleSheet({
const { file } = queryString.parse(location.search); const { file } = queryString.parse(location.search);
render(( render((
<MuiThemeProvider> <MuiThemeProvider muiTheme={muiTheme}>
<Interface file={file} name="doodle"/> <Interface file={file} name="doodle"/>
</MuiThemeProvider> </MuiThemeProvider>
), document.getElementById('app')); ), document.getElementById('app'));

67
src/interface/FormComponents.js
View File

@ -4,11 +4,11 @@ import _ from 'lodash';
import injectSheet from 'react-jss'; import injectSheet from 'react-jss';
import MaterialUISelectField from 'material-ui/SelectField' import MaterialUISelectField from 'material-ui/SelectField'
import MaterialUICheckbox from 'material-ui/Checkbox'; import MaterialUICheckbox from 'material-ui/Checkbox';
import { blue500, grey500 } from 'material-ui/styles/colors';
import TextFieldIcon from 'material-ui-textfield-icon'; import TextFieldIcon from 'material-ui-textfield-icon';
import RefreshIcon from 'material-ui-icons/Refresh'; import RefreshIcon from 'material-ui-icons/Refresh';
import muiThemeable from 'material-ui/styles/muiThemeable';
const contextTypes = { export const contextTypes = {
settings: PropTypes.object.isRequired, settings: PropTypes.object.isRequired,
onChange: PropTypes.func.isRequired, onChange: PropTypes.func.isRequired,
disabled: PropTypes.bool.isRequired, disabled: PropTypes.bool.isRequired,
@ -18,64 +18,69 @@ const contextTypes = {
activePrinter: PropTypes.string activePrinter: PropTypes.string
}; };
const propTypes = { const propTypes = {
name: PropTypes.string.isRequired name: PropTypes.string.isRequired,
muiTheme: PropTypes.object.isRequired
}; };
export const SelectField = (props, context) => ( export const _SelectField = ({ name, muiTheme, ...props }, context) => (
<MaterialUISelectField <MaterialUISelectField
{...props} {...props}
disabled={context.disabled} disabled={context.disabled}
value={_.get(context, props.name)} value={_.get(context, name)}
onChange={(event, index, value) => context.onChange(props.name, value)} onChange={(event, index, value) => context.onChange(name, value)}
/> />
); );
SelectField.contextTypes = contextTypes; _SelectField.contextTypes = contextTypes;
SelectField.propTypes = propTypes; _SelectField.propTypes = propTypes;
export const SelectField = muiThemeable()(_SelectField);
export const TextField = (props, context) => ( const _TextField = ({ name, muiTheme, ...props }, context) => (
<TextFieldIcon <TextFieldIcon
{...props} {...props}
icon={context.advancedFields.includes(props.name) && <RefreshIcon onTouchTap={() => context.onChange(props.name, null)} />} icon={context.advancedFields.includes(name) && <RefreshIcon style={{ fill: muiTheme.palette.textColor }} onTouchTap={() => context.onChange(name, null)} />}
floatingLabelStyle={{ color: context.advancedFields.includes(props.name) ? blue500 : grey500 }} floatingLabelStyle={{ color: context.advancedFields.includes(name) ? muiTheme.palette.primary3Color : muiTheme.palette.disabledColor }}
disabled={context.disabled} disabled={context.disabled}
value={_.get(context, props.name)} value={_.get(context, name)}
onChange={(event, value) => context.onChange(props.name, value)} onChange={(event, value) => context.onChange(name, value)}
/> />
); );
TextField.contextTypes = contextTypes; _TextField.contextTypes = contextTypes;
TextField.propTypes = propTypes; _TextField.propTypes = propTypes;
export const TextField = muiThemeable()(_TextField);
export const NumberField = (props, context) => ( const _NumberField = ({ name, min, max, muiTheme, ...props }, context) => (
<TextFieldIcon <TextFieldIcon
{...props} {...props}
type="number" type="number"
icon={context.advancedFields.includes(props.name) && <RefreshIcon onTouchTap={() => context.onChange(props.name, null)} />} icon={context.advancedFields.includes(name) && <RefreshIcon style={{ fill: muiTheme.palette.textColor }} onTouchTap={() => context.onChange(name, null)} />}
floatingLabelStyle={{ color: context.advancedFields.includes(props.name) ? blue500 : grey500 }} floatingLabelStyle={{ color: context.advancedFields.includes(name) ? muiTheme.palette.primary3Color : muiTheme.palette.disabledColor }}
disabled={context.disabled} disabled={context.disabled}
value={_.get(context, props.name.toString())} value={_.get(context, name.toString())}
onChange={(event, value) => { onChange={(event, value) => {
value = parseFloat(value); value = parseFloat(value);
if (props.min) value = Math.max(value, props.min); if (min) value = Math.max(value, min);
if (props.max) value = Math.min(value, props.max); if (max) value = Math.min(value, max);
context.onChange(props.name, value); context.onChange(name, value);
}} }}
/> />
); );
NumberField.contextTypes = contextTypes; _NumberField.contextTypes = contextTypes;
NumberField.propTypes = propTypes; _NumberField.propTypes = propTypes;
export const NumberField = muiThemeable()(_NumberField);
export const Checkbox = (props, context) => ( export const _Checkbox = ({ name, muiTheme, ...props }, context) => (
<span style={{ display: 'flex', position: 'relative' }}> <span style={{ display: 'flex', position: 'relative' }}>
<MaterialUICheckbox <MaterialUICheckbox
{...props} {...props}
style={{ display: 'block' }} style={{ display: 'block' }}
iconStyle={{ fill: context.advancedFields.includes(props.name) ? blue500 : grey500 }} iconStyle={{ fill: context.advancedFields.includes(name) ? muiTheme.palette.primary3Color : muiTheme.palette.disabledColor }}
disabled={context.disabled} disabled={context.disabled}
checked={_.get(context, props.name)} checked={_.get(context, name)}
onCheck={(event, value) => context.onChange(props.name, value)} onCheck={(event, value) => context.onChange(name, value)}
/> />
{context.advancedFields.includes(props.name) && <RefreshIcon onTouchTap={() => context.onChange(props.name, null)} />} {context.advancedFields.includes(name) && <RefreshIcon onTouchTap={() => context.onChange(name, null)} />}
</span> </span>
); );
Checkbox.contextTypes = contextTypes; _Checkbox.contextTypes = contextTypes;
Checkbox.propTypes = propTypes; _Checkbox.propTypes = propTypes;
export const Checkbox = muiThemeable()(_Checkbox);

6
src/interface/Settings.js
View File

@ -5,7 +5,7 @@ import { Tabs, Tab } from 'material-ui/Tabs';
import MenuItem from 'material-ui/MenuItem'; import MenuItem from 'material-ui/MenuItem';
import injectSheet from 'react-jss'; import injectSheet from 'react-jss';
import { SelectField, TextField, NumberField, Checkbox } from './FormComponents.js'; import { SelectField, TextField, NumberField, Checkbox } from './FormComponents.js';
import { grey800, cyan500, red500 } from 'material-ui/styles/colors'; import { grey800, red500 } from 'material-ui/styles/colors';
import Divider from 'material-ui/Divider'; import Divider from 'material-ui/Divider';
import Dialog from 'material-ui/Dialog'; import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton'; import FlatButton from 'material-ui/FlatButton';
@ -319,7 +319,7 @@ class Settings extends React.Component {
</SelectField> </SelectField>
{localStorage.active && <SettingsIcon {localStorage.active && <SettingsIcon
onTouchTap={this.openManagePrinterDialog} onTouchTap={this.openManagePrinterDialog}
style={{ margin: '0 10px', cursor: 'pointer' }} style={{ fill: grey800, marginLeft: '10px', cursor: 'pointer' }}
/>} />}
</div> </div>
<SelectField name="settings.material" floatingLabelText="Material" fullWidth> <SelectField name="settings.material" floatingLabelText="Material" fullWidth>
@ -328,7 +328,7 @@ class Settings extends React.Component {
))} ))}
</SelectField> </SelectField>
<h3>Printer Setup</h3> <h3>Printer Setup</h3>
<Tabs inkBarStyle={{ backgroundColor: cyan500 }}> <Tabs>
<Tab buttonStyle={{ color: grey800, backgroundColor: 'white' }} label="Basic"> <Tab buttonStyle={{ color: grey800, backgroundColor: 'white' }} label="Basic">
<div> <div>
<SelectField name="settings.quality" floatingLabelText="Quality" fullWidth> <SelectField name="settings.quality" floatingLabelText="Quality" fullWidth>

6
src/interface/index.js
View File

@ -22,6 +22,7 @@ import JSONToSketchData from 'doodle3d-core/shape/JSONToSketchData';
import createSceneData from 'doodle3d-core/d3/createSceneData.js'; import createSceneData from 'doodle3d-core/d3/createSceneData.js';
import { generateExportMesh } from 'doodle3d-core/utils/exportUtils.js'; import { generateExportMesh } from 'doodle3d-core/utils/exportUtils.js';
import { Matrix4 } from 'three/src/math/Matrix4.js'; import { Matrix4 } from 'three/src/math/Matrix4.js';
import muiThemeable from 'material-ui/styles/muiThemeable';
const MAX_FULLSCREEN_WIDTH = 720; const MAX_FULLSCREEN_WIDTH = 720;
@ -96,7 +97,8 @@ class Interface extends React.Component {
classes: PropTypes.objectOf(PropTypes.string), classes: PropTypes.objectOf(PropTypes.string),
pixelRatio: PropTypes.number.isRequired, pixelRatio: PropTypes.number.isRequired,
onCancel: PropTypes.func, onCancel: PropTypes.func,
name: PropTypes.string.isRequired name: PropTypes.string.isRequired,
muiTheme: PropTypes.object.isRequired
}; };
static defaultProps = { static defaultProps = {
@ -383,4 +385,4 @@ class Interface extends React.Component {
} }
} }
export default injectSheet(styles)(Interface); export default muiThemeable()(injectSheet(styles)(Interface));

7
src/interface/utils.js
View File

@ -17,6 +17,7 @@ import printerSettings from '../settings/printer.yml';
import materialSettings from '../settings/material.yml'; import materialSettings from '../settings/material.yml';
import qualitySettings from '../settings/quality.yml'; import qualitySettings from '../settings/quality.yml';
import { sliceGeometry } from '../slicer.js'; import { sliceGeometry } from '../slicer.js';
import { grey800, red500 } from 'material-ui/styles/colors';
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import fileSaver from 'file-saver'; import fileSaver from 'file-saver';
@ -35,7 +36,7 @@ export function centerGeometry(mesh) {
mesh.geometry.applyMatrix(new Matrix4().makeTranslation(-center.x, -center.y, -center.z)); mesh.geometry.applyMatrix(new Matrix4().makeTranslation(-center.x, -center.y, -center.z));
} }
export function createScene({ pixelRatio }) { export function createScene({ pixelRatio, muiTheme }) {
const scene = new Scene(); const scene = new Scene();
const camera = new PerspectiveCamera(50, 1, 1, 10000); const camera = new PerspectiveCamera(50, 1, 1, 10000);
@ -53,11 +54,11 @@ export function createScene({ pixelRatio }) {
const light = new AmbientLight(0x656565); const light = new AmbientLight(0x656565);
scene.add(light); scene.add(light);
const material = new MeshPhongMaterial({ color: 0x2194ce, side: DoubleSide, specular: 0xc5c5c5, shininess: 5 }); const material = new MeshPhongMaterial({ color: muiTheme.palette.primary2Color, side: DoubleSide, specular: 0xc5c5c5, shininess: 5 });
const mesh = new Mesh(new THREE.Geometry(), material); const mesh = new Mesh(new THREE.Geometry(), material);
scene.add(mesh); scene.add(mesh);
const box = new BoxHelper(new Mesh(new BoxGeometry(1, 1, 1).applyMatrix(new Matrix4().makeTranslation(0, 0.5, 0))), 0x72bcd4); const box = new BoxHelper(new Mesh(new BoxGeometry(1, 1, 1).applyMatrix(new Matrix4().makeTranslation(0, 0.5, 0))), muiTheme.palette.primary3Color);
scene.add(box); scene.add(box);
let renderer = new WebGLRenderer({ alpha: true, antialias: true }); let renderer = new WebGLRenderer({ alpha: true, antialias: true });