Skip to content

Commit 77e3339

Browse files
author
Thomas Bolis
committed
Fixing examples
1 parent c81fc9b commit 77e3339

File tree

1 file changed

+122
-117
lines changed

1 file changed

+122
-117
lines changed

‎examples/main.jsx‎

Lines changed: 122 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,15 @@ import {
1515
ToolbarSeparator
1616
} from 'material-ui';
1717

18-
import UndoIcon from 'material-ui/lib/svg-icons/content/undo';
19-
import RedoIcon from 'material-ui/lib/svg-icons/content/redo';
20-
import ClearIcon from 'material-ui/lib/svg-icons/action/delete';
21-
import SaveIcon from 'material-ui/lib/svg-icons/content/save';
22-
import RemoveIcon from 'material-ui/lib/svg-icons/content/clear';
23-
import DownloadIcon from 'material-ui/lib/svg-icons/file/file-download';
18+
import getMuiTheme from 'material-ui/styles/getMuiTheme';
19+
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
20+
21+
import UndoIcon from 'material-ui/svg-icons/content/undo';
22+
import RedoIcon from 'material-ui/svg-icons/content/redo';
23+
import ClearIcon from 'material-ui/svg-icons/action/delete';
24+
import SaveIcon from 'material-ui/svg-icons/content/save';
25+
import RemoveIcon from 'material-ui/svg-icons/content/clear';
26+
import DownloadIcon from 'material-ui/svg-icons/file/file-download';
2427

2528
import dataJson from './data.json'
2629
import dataUrl from './data.url'
@@ -197,127 +200,129 @@ class SketchFieldDemo extends React.Component {
197200

198201
render() {
199202
return (
200-
<div>
201-
202-
{/* Application Bar with tools */}
203-
204-
<div className='row'>
205-
<div className='col-xs-12 col-sm-12 col-md-12 col-lg-12'>
206-
<AppBar title='Sketch Tool' showMenuIconButton={false} style={styles.appBar}>
207-
<IconButton
208-
onTouchTap={this._undo}
209-
iconStyle={styles.iconButton}>
210-
<UndoIcon />
211-
</IconButton>
212-
<IconButton
213-
onTouchTap={this._redo}
214-
iconStyle={styles.iconButton}
215-
disabled={!this.state.canRedo}>
216-
<RedoIcon/>
217-
</IconButton>
218-
<ToolbarSeparator style={styles.separator}/>
219-
<IconButton
220-
onTouchTap={this._save}
221-
iconStyle={styles.iconButton}>
222-
<SaveIcon />
223-
</IconButton>
224-
<IconButton
225-
onTouchTap={this._download}
226-
iconStyle={styles.iconButton}>
227-
<DownloadIcon />
228-
</IconButton>
229-
<a ref='imgDown'/>
230-
<ToolbarSeparator style={styles.separator}/>
231-
<IconButton
232-
onTouchTap={this._clear}
233-
iconStyle={styles.iconButton}>
234-
<ClearIcon />
235-
</IconButton>
236-
</AppBar>
203+
<MuiThemeProvider muiTheme={getMuiTheme()}>
204+
<div>
205+
206+
{/* Application Bar with tools */}
207+
208+
<div className='row'>
209+
<div className='col-xs-12 col-sm-12 col-md-12 col-lg-12'>
210+
<AppBar title='Sketch Tool' showMenuIconButton={false} style={styles.appBar}>
211+
<IconButton
212+
onTouchTap={this._undo}
213+
iconStyle={styles.iconButton}>
214+
<UndoIcon />
215+
</IconButton>
216+
<IconButton
217+
onTouchTap={this._redo}
218+
iconStyle={styles.iconButton}
219+
disabled={!this.state.canRedo}>
220+
<RedoIcon/>
221+
</IconButton>
222+
<ToolbarSeparator style={styles.separator}/>
223+
<IconButton
224+
onTouchTap={this._save}
225+
iconStyle={styles.iconButton}>
226+
<SaveIcon />
227+
</IconButton>
228+
<IconButton
229+
onTouchTap={this._download}
230+
iconStyle={styles.iconButton}>
231+
<DownloadIcon />
232+
</IconButton>
233+
<a ref='imgDown'/>
234+
<ToolbarSeparator style={styles.separator}/>
235+
<IconButton
236+
onTouchTap={this._clear}
237+
iconStyle={styles.iconButton}>
238+
<ClearIcon />
239+
</IconButton>
240+
</AppBar>
241+
</div>
237242
</div>
238-
</div>
239243

240-
{/*Sketch Area with tools*/}
241-
242-
<div className='row'>
243-
<div className='col-xs-7 col-sm-7 col-md-9 col-lg-9'>
244-
245-
{/* Sketch area */}
246-
<div style={{padding:'3px'}}>
247-
<SketchField
248-
name='sketch'
249-
className='canvas-area'
250-
ref={(c) => this._sketch = c}
251-
lineColor={this.state.lineColor}
252-
lineWidth={this.state.lineWidth}
253-
fillColor={this.state.fillWithColor ? this.state.fillColor : 'transparent'}
254-
scaleOnResize={true}
255-
height={660}
256-
defaultData={dataJson}
257-
defaultDataType="json"
258-
onChange={(e) => {
244+
{/*Sketch Area with tools*/}
245+
246+
<div className='row'>
247+
<div className='col-xs-7 col-sm-7 col-md-9 col-lg-9'>
248+
249+
{/* Sketch area */}
250+
<div style={{padding:'3px'}}>
251+
<SketchField
252+
name='sketch'
253+
className='canvas-area'
254+
ref={(c) => this._sketch = c}
255+
lineColor={this.state.lineColor}
256+
lineWidth={this.state.lineWidth}
257+
fillColor={this.state.fillWithColor ? this.state.fillColor : 'transparent'}
258+
scaleOnResize={true}
259+
height={660}
260+
defaultData={dataJson}
261+
defaultDataType="json"
262+
onChange={(e) => {
259263
this.setState({canUndo: this._sketch.canUndo()})
260264
}}
261-
tool={this.state.tool}
262-
/>
265+
tool={this.state.tool}
266+
/>
267+
</div>
268+
</div>
269+
<div className='col-xs-5 col-sm-5 col-md-3 col-lg-3'>
270+
<Card style={{margin:'10px 10px 5px 0'}}>
271+
<CardTitle title='Tools'/>
272+
<CardText>
273+
<label htmlFor='tool'>Canvas Tool</label><br/>
274+
<SelectField ref='tool' value={this.state.tool} onChange={this._selectTool}>
275+
<MenuItem value={Tools.Select} primaryText="Select"/>
276+
<MenuItem value={Tools.Pencil} primaryText="Pencil"/>
277+
<MenuItem value={Tools.Line} primaryText="Line"/>
278+
<MenuItem value={Tools.Rectangle} primaryText="Rectangle"/>
279+
<MenuItem value={Tools.Circle} primaryText="Circle"/>
280+
</SelectField>
281+
<br/>
282+
<br/>
283+
<br/>
284+
<label htmlFor='slider'>Line Weight</label>
285+
<Slider ref='slider' step={0.1}
286+
defaultValue={this.state.lineWidth/100}
287+
onChange={(e, v) => this.setState({lineWidth:v*100})}/>
288+
</CardText>
289+
</Card>
290+
<Card style={{margin:'5px 10px 5px 0'}}>
291+
<CardTitle title='Colors'/>
292+
<CardText>
293+
<label htmlFor='lineColor'>Line</label>
294+
<CompactPicker
295+
id='lineColor' color={this.state.lineColor}
296+
onChange={(color) => this.setState({lineColor:'#'+color.hex})}/>
297+
<br/>
298+
<br/>
299+
<Toggle label="Fill"
300+
defaultToggled={this.state.fillWithColor}
301+
onToggle={(e) => this.setState({fillWithColor:!this.state.fillWithColor})}/>
302+
<CompactPicker
303+
color={this.state.fillColor}
304+
onChange={(color) => this.setState({fillColor:'#'+color.hex})}/>
305+
</CardText>
306+
</Card>
263307
</div>
264308
</div>
265-
<div className='col-xs-5 col-sm-5 col-md-3 col-lg-3'>
266-
<Card style={{margin:'10px 10px 5px 0'}}>
267-
<CardTitle title='Tools'/>
268-
<CardText>
269-
<label htmlFor='tool'>Canvas Tool</label><br/>
270-
<SelectField ref='tool' value={this.state.tool} onChange={this._selectTool}>
271-
<MenuItem value={Tools.Select} primaryText="Select"/>
272-
<MenuItem value={Tools.Pencil} primaryText="Pencil"/>
273-
<MenuItem value={Tools.Line} primaryText="Line"/>
274-
<MenuItem value={Tools.Rectangle} primaryText="Rectangle"/>
275-
<MenuItem value={Tools.Circle} primaryText="Circle"/>
276-
</SelectField>
277-
<br/>
278-
<br/>
279-
<br/>
280-
<label htmlFor='slider'>Line Weight</label>
281-
<Slider ref='slider' step={0.1}
282-
defaultValue={this.state.lineWidth/100}
283-
onChange={(e, v) => this.setState({lineWidth:v*100})}/>
284-
</CardText>
285-
</Card>
286-
<Card style={{margin:'5px 10px 5px 0'}}>
287-
<CardTitle title='Colors'/>
288-
<CardText>
289-
<label htmlFor='lineColor'>Line</label>
290-
<CompactPicker
291-
id='lineColor' color={this.state.lineColor}
292-
onChange={(color) => this.setState({lineColor:'#'+color.hex})}/>
293-
<br/>
294-
<br/>
295-
<Toggle label="Fill"
296-
defaultToggled={this.state.fillWithColor}
297-
onToggle={(e) => this.setState({fillWithColor:!this.state.fillWithColor})}/>
298-
<CompactPicker
299-
color={this.state.fillColor}
300-
onChange={(color) => this.setState({fillColor:'#'+color.hex})}/>
301-
</CardText>
302-
</Card>
303-
</div>
304-
</div>
305309

306-
{/*Saved Paintings*/}
307-
308-
<div className='row'>
309-
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
310-
<div className="box" style={styles.root}>
311-
<GridList
312-
cols={5}
313-
cellHeight={200}
314-
padding={1} style={styles.gridList}>
315-
{this.state.drawings.map(this._renderTile)}
316-
</GridList>
310+
{/*Saved Paintings*/}
311+
312+
<div className='row'>
313+
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
314+
<div className="box" style={styles.root}>
315+
<GridList
316+
cols={5}
317+
cellHeight={200}
318+
padding={1} style={styles.gridList}>
319+
{this.state.drawings.map(this._renderTile)}
320+
</GridList>
321+
</div>
317322
</div>
318323
</div>
319324
</div>
320-
</div>
325+
</MuiThemeProvider>
321326
)
322327
}
323328
}

0 commit comments

Comments
 (0)