vmario/Doodle3D-Slicer
0
0
Fork 0
mirror of https://github.com/Doodle3D/Doodle3D-Slicer.git synced 2024-12-23 03:23:48 +01: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 normalize from 'normalize-jss';
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();
@ -25,7 +36,7 @@ jss.createStyleSheet({
const { file } = queryString.parse(location.search);
render((
<MuiThemeProvider>
<MuiThemeProvider muiTheme={muiTheme}>
<Interface file={file} name="doodle"/>
</MuiThemeProvider>
), document.getElementById('app'));

67
src/interface/FormComponents.js
View File

@ -4,11 +4,11 @@ import _ from 'lodash';
import injectSheet from 'react-jss';
import MaterialUISelectField from 'material-ui/SelectField'
import MaterialUICheckbox from 'material-ui/Checkbox';
import { blue500, grey500 } from 'material-ui/styles/colors';
import TextFieldIcon from 'material-ui-textfield-icon';
import RefreshIcon from 'material-ui-icons/Refresh';
import muiThemeable from 'material-ui/styles/muiThemeable';
const contextTypes = {
export const contextTypes = {
settings: PropTypes.object.isRequired,
onChange: PropTypes.func.isRequired,
disabled: PropTypes.bool.isRequired,
@ -18,64 +18,69 @@ const contextTypes = {
activePrinter: PropTypes.string
};
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
{...props}
disabled={context.disabled}
value={_.get(context, props.name)}
onChange={(event, index, value) => context.onChange(props.name, value)}
value={_.get(context, name)}
onChange={(event, index, value) => context.onChange(name, value)}
/>
);
SelectField.contextTypes = contextTypes;
SelectField.propTypes = propTypes;
_SelectField.contextTypes = contextTypes;
_SelectField.propTypes = propTypes;
export const SelectField = muiThemeable()(_SelectField);
export const TextField = (props, context) => (
const _TextField = ({ name, muiTheme, ...props }, context) => (
<TextFieldIcon
{...props}
icon={context.advancedFields.includes(props.name) && <RefreshIcon onTouchTap={() => context.onChange(props.name, null)} />}
floatingLabelStyle={{ color: context.advancedFields.includes(props.name) ? blue500 : grey500 }}
icon={context.advancedFields.includes(name) && <RefreshIcon style={{ fill: muiTheme.palette.textColor }} onTouchTap={() => context.onChange(name, null)} />}
floatingLabelStyle={{ color: context.advancedFields.includes(name) ? muiTheme.palette.primary3Color : muiTheme.palette.disabledColor }}
disabled={context.disabled}
value={_.get(context, props.name)}
onChange={(event, value) => context.onChange(props.name, value)}
value={_.get(context, name)}
onChange={(event, value) => context.onChange(name, value)}
/>
);
TextField.contextTypes = contextTypes;
TextField.propTypes = propTypes;
_TextField.contextTypes = contextTypes;
_TextField.propTypes = propTypes;
export const TextField = muiThemeable()(_TextField);
export const NumberField = (props, context) => (
const _NumberField = ({ name, min, max, muiTheme, ...props }, context) => (
<TextFieldIcon
{...props}
type="number"
icon={context.advancedFields.includes(props.name) && <RefreshIcon onTouchTap={() => context.onChange(props.name, null)} />}
floatingLabelStyle={{ color: context.advancedFields.includes(props.name) ? blue500 : grey500 }}
icon={context.advancedFields.includes(name) && <RefreshIcon style={{ fill: muiTheme.palette.textColor }} onTouchTap={() => context.onChange(name, null)} />}
floatingLabelStyle={{ color: context.advancedFields.includes(name) ? muiTheme.palette.primary3Color : muiTheme.palette.disabledColor }}
disabled={context.disabled}
value={_.get(context, props.name.toString())}
value={_.get(context, name.toString())}
onChange={(event, value) => {
value = parseFloat(value);
if (props.min) value = Math.max(value, props.min);
if (props.max) value = Math.min(value, props.max);
context.onChange(props.name, value);
if (min) value = Math.max(value, min);
if (max) value = Math.min(value, max);
context.onChange(name, value);
}}
/>
);
NumberField.contextTypes = contextTypes;
NumberField.propTypes = propTypes;
_NumberField.contextTypes = contextTypes;
_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' }}>
<MaterialUICheckbox
{...props}
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}
checked={_.get(context, props.name)}
onCheck={(event, value) => context.onChange(props.name, value)}
checked={_.get(context, name)}
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>
);
Checkbox.contextTypes = contextTypes;
Checkbox.propTypes = propTypes;
_Checkbox.contextTypes = contextTypes;
_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 injectSheet from 'react-jss';
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 Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
@ -319,7 +319,7 @@ class Settings extends React.Component {
</SelectField>
{localStorage.active && <SettingsIcon
onTouchTap={this.openManagePrinterDialog}
style={{ margin: '0 10px', cursor: 'pointer' }}
style={{ fill: grey800, marginLeft: '10px', cursor: 'pointer' }}
/>}
</div>
<SelectField name="settings.material" floatingLabelText="Material" fullWidth>
@ -328,7 +328,7 @@ class Settings extends React.Component {
))}
</SelectField>
<h3>Printer Setup</h3>
<Tabs inkBarStyle={{ backgroundColor: cyan500 }}>
<Tabs>
<Tab buttonStyle={{ color: grey800, backgroundColor: 'white' }} label="Basic">
<div>
<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 { generateExportMesh } from 'doodle3d-core/utils/exportUtils.js';
import { Matrix4 } from 'three/src/math/Matrix4.js';
import muiThemeable from 'material-ui/styles/muiThemeable';
const MAX_FULLSCREEN_WIDTH = 720;
@ -96,7 +97,8 @@ class Interface extends React.Component {
classes: PropTypes.objectOf(PropTypes.string),
pixelRatio: PropTypes.number.isRequired,
onCancel: PropTypes.func,
name: PropTypes.string.isRequired
name: PropTypes.string.isRequired,
muiTheme: PropTypes.object.isRequired
};
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 qualitySettings from '../settings/quality.yml';
import { sliceGeometry } from '../slicer.js';
import { grey800, red500 } from 'material-ui/styles/colors';
import React from 'react';
import PropTypes from 'prop-types';
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));
}
export function createScene({ pixelRatio }) {
export function createScene({ pixelRatio, muiTheme }) {
const scene = new Scene();
const camera = new PerspectiveCamera(50, 1, 1, 10000);
@ -53,11 +54,11 @@ export function createScene({ pixelRatio }) {
const light = new AmbientLight(0x656565);
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);
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);
let renderer = new WebGLRenderer({ alpha: true, antialias: true });