p15670423
/
monkey
1
0
Fork 5
Code Issues Pull Requests 3 Projects Releases Wiki Activity

Improve modal boxes

This commit is contained in:
Itay Mizeretz 2017-10-17 11:17:41 +03:00
parent 085f0d2d69
commit 1011e731af
2 changed files with 29 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
monkey_island/cc/ui/src/components/pages/MapPage.js
View File

@ -134,21 +134,23 @@ class MapPageComponent extends React.Component {
return ( return (
<ModalContainer onClose={() => this.setState({showKillDialog: false})}> <ModalContainer onClose={() => this.setState({showKillDialog: false})}>
<ModalDialog onClose={() => this.setState({showKillDialog: false})}> <ModalDialog onClose={() => this.setState({showKillDialog: false})}>
<h1>Kill all monkeys</h1> <h2>Are you sure you want to kill all monkeys?</h2>
<p style={{'fontSize': '1.2em', 'marginBottom': '2em'}}> <p style={{'fontSize': '1.2em', 'marginBottom': '2em'}}>
Are you sure you want to kill all monkeys? This might take a few moments...
</p> </p>
<button type="button" className="btn btn-danger btn-lg" style={{margin: '5px'}} <div className="text-center">
onClick={() => { <button type="button" className="btn btn-danger btn-lg" style={{margin: '5px'}}
this.killAllMonkeys(); onClick={() => {
this.setState({showKillDialog: false}); this.killAllMonkeys();
}}> this.setState({showKillDialog: false});
Kill all monkeys }}>
</button> Kill all monkeys
<button type="button" className="btn btn-success btn-lg" style={{margin: '5px'}} </button>
onClick={() => this.setState({showKillDialog: false})}> <button type="button" className="btn btn-success btn-lg" style={{margin: '5px'}}
Cancel onClick={() => this.setState({showKillDialog: false})}>
</button> Cancel
</button>
</div>
</ModalDialog> </ModalDialog>
</ModalContainer> </ModalContainer>
) )

26
monkey_island/cc/ui/src/components/pages/StartOverPage.js
View File

@ -33,7 +33,7 @@ class StartOverPageComponent extends React.Component {
return ( return (
<ModalContainer onClose={() => this.setState({showCleanDialog: false})}> <ModalContainer onClose={() => this.setState({showCleanDialog: false})}>
<ModalDialog onClose={() => this.setState({showCleanDialog: false})}> <ModalDialog onClose={() => this.setState({showCleanDialog: false})}>
<h1>Reset environment</h1> <h2>Reset environment</h2>
<p style={{'fontSize': '1.2em', 'marginBottom': '2em'}}> <p style={{'fontSize': '1.2em', 'marginBottom': '2em'}}>
Are you sure you want to reset the environment? Are you sure you want to reset the environment?
</p> </p>
@ -46,17 +46,19 @@ class StartOverPageComponent extends React.Component {
: :
<div /> <div />
} }
<button type="button" className="btn btn-danger btn-lg" style={{margin: '5px'}} <div className="text-center">
onClick={() => { <button type="button" className="btn btn-danger btn-lg" style={{margin: '5px'}}
this.cleanup(); onClick={() => {
this.setState({showCleanDialog: false}); this.cleanup();
}}> this.setState({showCleanDialog: false});
Reset environment }}>
</button> Reset environment
<button type="button" className="btn btn-success btn-lg" style={{margin: '5px'}} </button>
onClick={() => this.setState({showCleanDialog: false})}> <button type="button" className="btn btn-success btn-lg" style={{margin: '5px'}}
Cancel onClick={() => this.setState({showCleanDialog: false})}>
</button> Cancel
</button>
</div>
</ModalDialog> </ModalDialog>
</ModalContainer> </ModalContainer>
) )