luneski/mqtt-explorer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Beautify error boundary

Browse Source
This commit is contained in:
Thomas Nordquist
2019-01-18 19:16:37 +01:00
parent 353081175b
commit 2c4c7bb72e
1 changed files with 14 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
app/src/ErrorBoundary.tsx
View File

@@ -1,5 +1,4 @@
import * as React from 'react' import * as React from 'react'
import * as q from '../../backend/src/Model'
import { import {
Button, Button,
Modal, Modal,
@@ -56,9 +55,9 @@ class ErrorBoundary extends React.Component<Props, State> {
<Toolbar style={{ padding: '0' }}> <Toolbar style={{ padding: '0' }}>
<Typography className={classes.title} variant="h6" color="inherit"><Warning /> Oooooops!</Typography> <Typography className={classes.title} variant="h6" color="inherit"><Warning /> Oooooops!</Typography>
</Toolbar> </Toolbar>
<Typography>I hoped that you would never see this window, but MQTT-Explorer had an unexpected error.</Typography> <Typography className={classes.centered}>I hoped that you would never see this window, but MQTT-Explorer had an unexpected error.</Typography>
<Typography style={{ textAlign: 'center' }}><SentimentDissatisfied /></Typography> <Typography className={classes.centered}><SentimentDissatisfied /></Typography>
<pre className={classes.textColor} style={{ maxHeight: '40vh', overflow: 'scroll' }}> <pre className={classes.textColor} style={{ maxHeight: '35vh', overflow: 'scroll' }}>
<code className={classes.textColor}> <code className={classes.textColor}>
{this.state.error.stack} {this.state.error.stack}
</code> </code>
@@ -68,8 +67,10 @@ class ErrorBoundary extends React.Component<Props, State> {
<span> <a className={classes.textColor} href="https://github.com/thomasnordquist/MQTT-Explorer/issues">https://github.com/thomasnordquist/MQTT-Explorer/issues</a></span> <span> <a className={classes.textColor} href="https://github.com/thomasnordquist/MQTT-Explorer/issues">https://github.com/thomasnordquist/MQTT-Explorer/issues</a></span>
</Typography> </Typography>
<div> <div>
<div className={classes.buttonPositioning}><Button onClick={this.restart}>Restart</Button></div> <div className={classes.buttonPositioning}>
<div className={classes.buttonPositioning}><Button onClick={this.clearStorage}>Start Fresh</Button></div> <Button className={classes.button} variant="contained" color="secondary" onClick={this.clearStorage}>Start Fresh</Button>
<Button className={classes.button} variant="contained" color="primary" onClick={this.restart}>Restart</Button>
</div>
</div> </div>
</Paper> </Paper>
</Modal> </Modal>
@@ -78,11 +79,14 @@ class ErrorBoundary extends React.Component<Props, State> {
} }
const styles = (theme: Theme) => ({ const styles = (theme: Theme) => ({
button: {
margin: '0 8px 0 8px',
},
root: { root: {
minWidth: 550, minWidth: 550,
maxWidth: 650, maxWidth: 650,
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,
margin: '14vh auto auto auto', margin: '10vh auto auto auto',
padding: `${2 * theme.spacing.unit}px`, padding: `${2 * theme.spacing.unit}px`,
outline: 'none', outline: 'none',
}, },
@@ -94,6 +98,9 @@ const styles = (theme: Theme) => ({
textColor: { textColor: {
color: theme.palette.text.primary, color: theme.palette.text.primary,
}, },
centered: {
textAlign: 'center' as 'center',
},
buttonPositioning: { buttonPositioning: {
textAlign: 'center' as 'center', textAlign: 'center' as 'center',
marginTop: `${theme.spacing.unit * 2}px`, marginTop: `${theme.spacing.unit * 2}px`,