From 735d8e5aa8b590b37a16c0e1b52a688c43dd5c10 Mon Sep 17 00:00:00 2001
From: Determinant <ted.sybil@gmail.com>
Date: Thu, 7 Feb 2019 01:32:45 -0500
Subject: add popup

---
 src/App.js       | 99 --------------------------------------------------------
 src/App.test.js  |  9 ------
 src/Dashboard.js | 99 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/index.html   | 17 ++++++++++
 src/index.js     |  4 +--
 src/popup.js     | 29 +++++++++++++++++
 6 files changed, 147 insertions(+), 110 deletions(-)
 delete mode 100644 src/App.js
 delete mode 100644 src/App.test.js
 create mode 100644 src/Dashboard.js
 create mode 100644 src/index.html
 create mode 100644 src/popup.js

(limited to 'src')

diff --git a/src/App.js b/src/App.js
deleted file mode 100644
index bd17cec..0000000
--- a/src/App.js
+++ /dev/null
@@ -1,99 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import 'typeface-roboto';
-import { withStyles } from '@material-ui/core/styles';
-import { MuiThemeProvider } from '@material-ui/core/styles';
-import CssBaseline from '@material-ui/core/CssBaseline';
-import AppBar from '@material-ui/core/AppBar';
-import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
-import Paper from '@material-ui/core/Paper';
-import Tabs from '@material-ui/core/Tabs';
-import Tab from '@material-ui/core/Tab';
-import Grid from '@material-ui/core/Grid';
-import { HashRouter as Router, withRouter, Route, Link, Redirect, Switch } from "react-router-dom";
-import { hashHistory } from 'react-router';
-import Logo from './Logo';
-import theme from './theme';
-import CustomAnalyzer from './CustomAnalyzer';
-import Settings from './Settings';
-
-const styles = theme => ({
-    root: {
-        display: 'flex',
-        height: '100vh',
-    },
-    appBar: {
-        zIndex: theme.zIndex.drawer + 1,
-        transition: theme.transitions.create(['width', 'margin'], {
-            easing: theme.transitions.easing.sharp,
-            duration: theme.transitions.duration.leavingScreen,
-        }),
-    },
-    title: {
-        flexGrow: 1,
-        display: 'inline-block'
-    },
-    appBarSpacer: theme.mixins.toolbar,
-    content: {
-        flexGrow: 1,
-        padding: theme.spacing.unit * 3,
-        overflow: 'auto',
-    },
-    indicator: {
-        backgroundColor: theme.palette.primary.contrastText
-    }
-});
-
-class DashboardTabs extends React.Component {
-    handleChangeTab = (event, currentTab) => {
-        this.props.history.push(currentTab);
-    }
-    render() {
-        const { classes } = this.props;
-        return (
-            <div className={classes.root}>
-                <AppBar
-                    position="absolute"
-                    className={classes.appBar}>
-                    <Toolbar className={classes.toolbar}>
-                        <Typography component="h1" variant="h6" color="inherit" noWrap className={classes.title}>
-                            <Logo style={{width: '2em', verticalAlign: 'bottom', marginRight: '0.2em'}}/>Chromicle
-                        </Typography>
-                        <Tabs styles={{ display: 'inline-block '}}
-                            classes={{ indicator: classes.indicator }}
-                            value={this.props.history.location.pathname}
-                            onChange={this.handleChangeTab}>
-                            <Tab label="Settings" component={Link} to="/settings" value="/settings" />
-                            <Tab label="Analyze" component={Link} to="/analyze" value="/analyze" />
-                        </Tabs>
-                    </Toolbar>
-                </AppBar>
-                <CssBaseline />
-                <main className={classes.content}>
-                    <div className={classes.appBarSpacer} />
-                    <Route exact path="/settings" component={Settings} />
-                    <Route exact path="/analyze" component={CustomAnalyzer} />
-                    <Route exact path="/" render={() => <Redirect to="/settings" />}/>
-                </main>
-            </div>
-        );
-    }
-}
-
-DashboardTabs.propTypes = {
-    classes: PropTypes.object.isRequired,
-};
-
-class Dashboard extends React.Component {
-    render() {
-        const { classes } = this.props;
-        let Tabs = withRouter(withStyles(styles)(DashboardTabs));
-        return (
-            <MuiThemeProvider theme={theme}>
-                <Router><Tabs /></Router>
-            </MuiThemeProvider>);
-    }
-}
-
-export default Dashboard;
diff --git a/src/App.test.js b/src/App.test.js
deleted file mode 100644
index a754b20..0000000
--- a/src/App.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-
-it('renders without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
-  ReactDOM.unmountComponentAtNode(div);
-});
diff --git a/src/Dashboard.js b/src/Dashboard.js
new file mode 100644
index 0000000..bd17cec
--- /dev/null
+++ b/src/Dashboard.js
@@ -0,0 +1,99 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import 'typeface-roboto';
+import { withStyles } from '@material-ui/core/styles';
+import { MuiThemeProvider } from '@material-ui/core/styles';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import Paper from '@material-ui/core/Paper';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+import Grid from '@material-ui/core/Grid';
+import { HashRouter as Router, withRouter, Route, Link, Redirect, Switch } from "react-router-dom";
+import { hashHistory } from 'react-router';
+import Logo from './Logo';
+import theme from './theme';
+import CustomAnalyzer from './CustomAnalyzer';
+import Settings from './Settings';
+
+const styles = theme => ({
+    root: {
+        display: 'flex',
+        height: '100vh',
+    },
+    appBar: {
+        zIndex: theme.zIndex.drawer + 1,
+        transition: theme.transitions.create(['width', 'margin'], {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+        }),
+    },
+    title: {
+        flexGrow: 1,
+        display: 'inline-block'
+    },
+    appBarSpacer: theme.mixins.toolbar,
+    content: {
+        flexGrow: 1,
+        padding: theme.spacing.unit * 3,
+        overflow: 'auto',
+    },
+    indicator: {
+        backgroundColor: theme.palette.primary.contrastText
+    }
+});
+
+class DashboardTabs extends React.Component {
+    handleChangeTab = (event, currentTab) => {
+        this.props.history.push(currentTab);
+    }
+    render() {
+        const { classes } = this.props;
+        return (
+            <div className={classes.root}>
+                <AppBar
+                    position="absolute"
+                    className={classes.appBar}>
+                    <Toolbar className={classes.toolbar}>
+                        <Typography component="h1" variant="h6" color="inherit" noWrap className={classes.title}>
+                            <Logo style={{width: '2em', verticalAlign: 'bottom', marginRight: '0.2em'}}/>Chromicle
+                        </Typography>
+                        <Tabs styles={{ display: 'inline-block '}}
+                            classes={{ indicator: classes.indicator }}
+                            value={this.props.history.location.pathname}
+                            onChange={this.handleChangeTab}>
+                            <Tab label="Settings" component={Link} to="/settings" value="/settings" />
+                            <Tab label="Analyze" component={Link} to="/analyze" value="/analyze" />
+                        </Tabs>
+                    </Toolbar>
+                </AppBar>
+                <CssBaseline />
+                <main className={classes.content}>
+                    <div className={classes.appBarSpacer} />
+                    <Route exact path="/settings" component={Settings} />
+                    <Route exact path="/analyze" component={CustomAnalyzer} />
+                    <Route exact path="/" render={() => <Redirect to="/settings" />}/>
+                </main>
+            </div>
+        );
+    }
+}
+
+DashboardTabs.propTypes = {
+    classes: PropTypes.object.isRequired,
+};
+
+class Dashboard extends React.Component {
+    render() {
+        const { classes } = this.props;
+        let Tabs = withRouter(withStyles(styles)(DashboardTabs));
+        return (
+            <MuiThemeProvider theme={theme}>
+                <Router><Tabs /></Router>
+            </MuiThemeProvider>);
+    }
+}
+
+export default Dashboard;
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000..a51779c
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+    <link rel="stylesheet" href="/fonts/TypoPRO-FantasqueSansMono-Regular.css" />
+    <title>Chromicle</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/src/index.js b/src/index.js
index 955691f..adcb634 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './App';
+import Dashboard from './Dashboard';
 import * as serviceWorker from './serviceWorker';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<Dashboard />, document.getElementById('root'));
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
diff --git a/src/popup.js b/src/popup.js
new file mode 100644
index 0000000..c4daf81
--- /dev/null
+++ b/src/popup.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import * as serviceWorker from './serviceWorker';
+import { MuiThemeProvider } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import theme from './theme';
+
+function openOptions() {
+    chrome.tabs.create({ url: "index.html" });
+}
+
+class Popup extends React.Component {
+    render() {
+        return (
+            <MuiThemeProvider theme={theme}>
+            <span>No data available.
+            <Button variant="contained" color="primary" onClick={openOptions}>Go to Dashboard</Button>
+            </span>
+            </MuiThemeProvider>
+        );
+    }
+}
+
+ReactDOM.render(<Popup />, document.getElementById('root'));
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: http://bit.ly/CRA-PWA
+serviceWorker.unregister();
-- 
cgit v1.2.3-70-g09d2