mirror of
https://github.com/Doodle3D/Doodle3D-Slicer.git
synced 2024-12-23 03:23:48 +01:00
use mui theme for colors
This commit is contained in:
parent
2fdc5ca16b
commit
2f4adbbb47
13
index.js
13
index.js
@ -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'));
|
||||||
|
@ -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);
|
||||||
|
@ -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>
|
||||||
|
@ -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));
|
||||||
|
@ -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 });
|
||||||
|
Loading…
Reference in New Issue
Block a user