status-im
/
visual-identity
mirror of https://github.com/status-im/visual-identity.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

move most tooling to appbar

This commit is contained in:
Barry Gitarts 2018-08-01 11:17:06 -04:00
parent 63918ff86b
commit 8f87ad3531
2 changed files with 12 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
app/components/draw/DrawField.js
View File

@ -84,7 +84,6 @@ const styles = {
} }
}; };
/** /**
* Helper function to manually fire an event * Helper function to manually fire an event
* *
@ -269,9 +268,9 @@ class SketchFieldDemo extends React.Component {
const { canvasState } = this.props; const { canvasState } = this.props;
console.log(this._sketch && this._sketch.toJSON()) console.log(this._sketch && this._sketch.toJSON())
return ( return (
<div className='container'> <div className='container' style={{ width: '100vw' }}>
<AppBar position="static" color="default"> <AppBar position="static" color="default">
<Toolbar> <Toolbar style={{ display: 'flex', justifyContent: 'space-evenly' }}>
<IconButton <IconButton
ref='zoom' ref='zoom'
onClick={(e) => this._sketch.zoom(1.25)}> onClick={(e) => this._sketch.zoom(1.25)}>
@ -282,6 +281,15 @@ class SketchFieldDemo extends React.Component {
onClick={(e) => this._sketch.zoom(0.8)}> onClick={(e) => this._sketch.zoom(0.8)}>
<ZoomOutIcon/> <ZoomOutIcon/>
</IconButton> </IconButton>
<Select value={this.state.tool} onChange={this._selectTool}>
<MenuItem value={Tools.Select}>Select</MenuItem>
<MenuItem value={Tools.Pencil}>Pencil</MenuItem>
<MenuItem value={Tools.Line}>Line</MenuItem>
<MenuItem value={Tools.Rectangle}>Rectangle</MenuItem>
<MenuItem value={Tools.Circle}>Circle</MenuItem>
<MenuItem value={Tools.Pan}>Pan</MenuItem>
</Select>
<Button variant="outlined" color="primary" onClick={this._saveToChain}>Submit</Button>
</Toolbar> </Toolbar>
</AppBar> </AppBar>
<div className='row'> <div className='row'>
@ -307,36 +315,6 @@ class SketchFieldDemo extends React.Component {
</div> </div>
<div className='row'> <div className='row'>
<div style={{ display: 'flex', alignItems: 'center' }} className="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <div style={{ display: 'flex', alignItems: 'center' }} className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<Card style={{margin: '10px 10px 5px 0'}}>
<CardHeader title='Tools' />
<CardContent>
<label htmlFor='zoom'>Zoom</label>
<div>
<IconButton
ref='zoom'
onClick={(e) => this._sketch.zoom(1.25)}>
<ZoomInIcon/>
</IconButton>
<IconButton
ref='zoom1'
onClick={(e) => this._sketch.zoom(0.8)}>
<ZoomOutIcon/>
</IconButton>
<br/>
</div>
</CardContent>
<CardContent>
<label>Drawing</label>
<Select value={this.state.tool} onChange={this._selectTool}>
<MenuItem value={Tools.Select}>Select</MenuItem>
<MenuItem value={Tools.Pencil}>Pencil</MenuItem>
<MenuItem value={Tools.Line}>Line</MenuItem>
<MenuItem value={Tools.Rectangle}>Rectangle</MenuItem>
<MenuItem value={Tools.Circle}>Circle</MenuItem>
<MenuItem value={Tools.Pan}>Pan</MenuItem>
</Select>
</CardContent>
</Card>
<Card style={{margin: '5px 10px 5px 0'}}> <Card style={{margin: '5px 10px 5px 0'}}>
<CardHeader title='Colors'/> <CardHeader title='Colors'/>
<CardContent> <CardContent>
@ -345,7 +323,6 @@ class SketchFieldDemo extends React.Component {
onChange={(color) => this.setState({lineColor: color.hex})}/> onChange={(color) => this.setState({lineColor: color.hex})}/>
</CardContent> </CardContent>
</Card> </Card>
<Button variant="outlined" color="primary" onClick={this._saveToChain}>Save to chain</Button>
</div> </div>
</div> </div>
</div> </div>

11
app/components/draw/draw.css
View File

@ -1,18 +1,9 @@
body, html {
margin: 0;
padding: 0;
min-height: 100%;
height: 100%;
font-weight: 300;
font-family: "Roboto", sans-serif;
}
#container { #container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow-x: hidden; overflow-x: hidden;
min-height: 100%; min-height: 100%;
width: 100%; width: 1vw;
height: 100%; height: 100%;
background-color: #eeffd3; background-color: #eeffd3;
color: #000000; color: #000000;