improve the UI

7 files changed, 78 insertions, 50 deletions

diff --git a/src/Analyze.tsx b/src/Analyze.tsx
index cf87cb3..bb3f38c 100644
--- a/src/Analyze.tsx
+++ b/src/Analyze.tsx
@@ -194,7 +194,7 @@ class Analyze extends React.Component<AnalyzeProps> {
         const { classes } = this.props;
 
         return (
-            <Grid container  spacing={16}>
+            <Grid container spacing={16}>
                 <AlertDialog
                     title={this.state.dialogMsg.title}
                     message={this.state.dialogMsg.message}
@@ -205,9 +205,8 @@ class Analyze extends React.Component<AnalyzeProps> {
                     open={this.state.snackBarOpen}
                     variant={this.state.snackBarVariant}
                     onClose={this.handleSnackbarClose}/>
-                <Grid item md={6} xs={12}>
-                    <FormControl fullWidth={true}>
-                        <FormGroup>
+                <Grid item container md={6} xs={12} spacing={16}>
+                    <Grid item xs={12}>
                             <Typography variant="h6" component="h1" gutterBottom>
                                 Analyzed Events
                                 <IconButton
@@ -219,11 +218,13 @@ class Analyze extends React.Component<AnalyzeProps> {
                                 calendars={this.state.calendars}
                                 onRemovePattern={this.removePattern}
                                 onUpdatePattern={this.updatePattern} />
-                        </FormGroup>
-                        <FormGroup>
+                    </Grid>
+                    <Grid item xs={12}>
                             <Typography variant="h6" component="h1" gutterBottom>
                                 Time Range
                             </Typography>
+                        <FormControl fullWidth={true}>
+                        <FormGroup>
                             <div style={{textAlign: 'center'}}>
                                 <DateRangePicker
                                     startDate={this.state.startDate}
@@ -254,7 +255,8 @@ class Analyze extends React.Component<AnalyzeProps> {
                                 </FormGroup>
                             </Grid>
                         </Grid>
-                    </FormControl>
+                        </FormControl>
+                    </Grid>
                 </Grid>
                 <Grid item md={6} xs={12}>
                     <Typography variant="h6" component="h1" gutterBottom>
diff --git a/src/Chart.tsx b/src/Chart.tsx
index e1b9c6d..d70e4f0 100644
--- a/src/Chart.tsx
+++ b/src/Chart.tsx
@@ -17,7 +17,7 @@ type PatternPieChartProps = {
         patternTableWrapper: string,
         pieChart: string
     },
-    height?: number,
+    height?: number | string,
     data: PatternGraphData[],
     radialLabelsLinkStrokeWidth?: number,
     radialLabelsLinkDiagonalLength?: number,
@@ -52,7 +52,6 @@ export class PatternPieChart extends React.Component<PatternPieChartProps> {
             }
         };
     return (
-        <div style={{height: (height ? height : 300)}}>
             <ResponsivePie
             data={data.map(p => ({
                 id: p.name,
@@ -88,7 +87,6 @@ export class PatternPieChart extends React.Component<PatternPieChartProps> {
             motionDamping={15}
             theme={theme}
             tooltipFormat={v => `${v.toFixed(2)} hr`} />
-        </div>
     );
     }
 }
@@ -107,11 +105,11 @@ type DoublePieChartProps = {
 function DoublePieChart(props: DoublePieChartProps) {
     return (
     <Grid container spacing={0}>
-      <Grid item xs={12} lg={6}>
-      <StyledPatternPieChart data={props.patternGraphData} height={300} />
+      <Grid item md={12} lg={12} style={{height: 300}}>
+      <StyledPatternPieChart data={props.patternGraphData} />
       </Grid>
-      <Grid item xs={12} lg={6}>
-      <StyledPatternPieChart data={props.calendarGraphData} height={300} />
+      <Grid item md={12} lg={12} style={{height: 300}}>
+      <StyledPatternPieChart data={props.calendarGraphData} />
       </Grid>
     </Grid>);
 }
diff --git a/src/PatternTable.tsx b/src/PatternTable.tsx
index b9d0e9e..e514551 100644
--- a/src/PatternTable.tsx
+++ b/src/PatternTable.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import { Theme, withStyles, withTheme, StyleRules } from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
 import Table from '@material-ui/core/Table';
@@ -20,17 +21,19 @@ const styles = (theme: Theme): StyleRules => ({
     deleteButton: {
         width: 0,
         position: 'absolute',
-        marginRight: '2em',
+        paddingRight: '24px',
         right: 0,
-        height: 48,
+        lineHeight: '48px',
     },
     deleteButtonHide: {
         display: 'none'
     },
-    deleteButtonShow: {},
+    deleteButtonShow: {
+        backgroundColor: theme.palette.background.default,
+        zIndex: 1
+    },
     deleteIcon: {
         position: 'absolute',
-        height: '100%',
         cursor: 'pointer'
     },
     patternTableWrapper: {
@@ -62,7 +65,7 @@ type NameFieldProps = {
 function NameField(props: NameFieldProps) {
     let color = props.value.color.background;
     return (
-        <span>
+        <div style={{minWidth: 250}}>
             <div
                 className={props.classes.colorSample}
                 style={{backgroundColor: (color ? color : defaultChartColor)}}
@@ -71,7 +74,7 @@ function NameField(props: NameFieldProps) {
             <TextField
                 value={props.value.name}
                 onChange={event => props.onChange('name', event.target.value)} />
-        </span>);
+        </div>);
 }
 
 const patternHead: {label: string, elem: any}[] = [
@@ -133,11 +136,11 @@ class PatternTable extends React.Component<PatternTableProps> {
                 onMouseOver={setActive} onMouseOut={unsetActive}
                 className={classes.deleteButton}>
                 <td>
-                    <span className={this.state.activePattern !== p.idx ? classes.deleteButtonHide : classes.deleteButtonShow}>
+                    <div className={classNames(this.state.activePattern !== p.idx ? classes.deleteButtonHide : classes.deleteButtonShow, classes.deleteIcon)}>
                     <DeleteOutlinedIcon
-                        className={classes.deleteIcon}
+                        style={{verticalAlign: 'middle'}}
                         onClick={() => this.props.onRemovePattern(p.idx)} />
-                    </span>
+                    </div>
                 </td>
             </TableRow>,
             <TableRow key={i * 2 + 1} onMouseOver={setActive} onMouseOut={unsetActive}>
@@ -152,6 +155,7 @@ class PatternTable extends React.Component<PatternTableProps> {
                                     onChange={(field: string, value: any) => this.props.onUpdatePattern(field, p.idx, value)}
                                     colorOnClick={(event: React.MouseEvent<{}>) => {
                                         this.activeColorPattern = p.idx;
+                                        console.log(p.color.background);
                                         this.setState({
                                             anchorEl: event.currentTarget,
                                             colorPickerDefault: p.color.background,
@@ -165,7 +169,7 @@ class PatternTable extends React.Component<PatternTableProps> {
         rows.flat();
 
         return (
-            <div>
+            <div style={{width: '100%', position: 'relative'}}>
                 <Popover
                     id="colorPicker"
                     open={this.state.colorPickerOpen}
@@ -207,7 +211,6 @@ class PatternTable extends React.Component<PatternTableProps> {
                             }
                         </TableBody>
                     </Table>
-                </div>
                 <TablePagination
                     rowsPerPageOptions={[5, 10, 25]}
                     component="div"
@@ -218,6 +221,7 @@ class PatternTable extends React.Component<PatternTableProps> {
                     nextIconButtonProps={{'aria-label': 'Next Page'}}
                     onChangePage={this.handleChangePage}
                     onChangeRowsPerPage={this.handleChangeRowsPerPage} />
+                </div>
             </div>);
     }
 }
diff --git a/src/Settings.tsx b/src/Settings.tsx
index 13488c4..1e5df42 100644
--- a/src/Settings.tsx
+++ b/src/Settings.tsx
@@ -20,6 +20,7 @@ import Checkbox from '@material-ui/core/Checkbox';
 import TextField from '@material-ui/core/TextField';
 import MenuItem from '@material-ui/core/MenuItem';
 import Select from '@material-ui/core/Select';
+import { getColorFamily } from 'materialcolorize'
 
 import PatternTable from './PatternTable';
 import Snackbar, { SnackbarVariant } from './Snackbar';
@@ -30,14 +31,21 @@ import { Pattern, PatternEntry, PatternEntryFlat } from './pattern';
 import { DurationFlat, TrackedPeriodFlat } from './duration';
 
 const styles = (theme: Theme): StyleRules => ({
+    patternTable: {
+        marginLeft: -24
+    },
     tableHead: {
         verticalAlign: 'top',
         textAlign: 'right',
         lineHeight: '3em',
+        minWidth: 250
     },
     tableContent: {
         textAlign: 'left',
-        maxWidth: 600,
+        maxWidth: 400,
+    },
+    list: {
+        marginLeft: -12
     },
     calendarList: {
         maxHeight: 400,
@@ -45,11 +53,13 @@ const styles = (theme: Theme): StyleRules => ({
     },
     bottomButtons: {
         marginTop: 10,
-        textAlign: 'right'
+        textAlign: 'right',
+        minWidth: 600
     },
     trackedPeriodInput: {
         paddingTop: 10,
-        paddingBottom: 10
+        paddingBottom: 20,
+        overflowX: 'auto'
     }
 });
 
@@ -149,7 +159,9 @@ type SettingsProps = {
         tableContent: string,
         calendarList: string,
         bottomButtons: string,
-        trackedPeriodInput: string
+        trackedPeriodInput: string,
+        list: string,
+        patternTable: string
     }
 };
 
@@ -244,9 +256,12 @@ class Settings extends React.Component<SettingsProps> {
         let [colors, _cals] = await Promise.all([pm_colors, pm_cals]);
         var cals: { [id: string]: gapi.GCalendarMeta } = {};
         _cals.forEach((cal: any) => {
+            let _color = colors[cal.colorId];
             cals[cal.id] = {
                 name: cal.summary,
-                color: colors[cal.colorId],
+                color: {
+                    background: ('#' + getColorFamily(_color.background)[300]).toLowerCase()
+                },
                 enabled: true
             };
         });
@@ -429,7 +444,7 @@ class Settings extends React.Component<SettingsProps> {
                            </STableCell>
                            <STableCell className={classes.tableContent}>
                                {(this.state.isLoggedIn &&
-                               <List className={classes.calendarList}>
+                               <List className={classNames(classes.calendarList, classes.list)} disablePadding>
                                    {Object.keys(this.state.calendars).sort().map(id =>
                                        <CompactListItem
                                            key={id}
@@ -458,9 +473,9 @@ class Settings extends React.Component<SettingsProps> {
                                    onClick={this.handleLoadDefault}>Load Default</Button>
                                </div>
                            </STableCell>
-                           <STableCell className={classes.tableContent}>
+                           <STableCell className={classes.tableContent}  style={{paddingRight: 0}}>
                                {(this.state.isLoggedIn &&
-                               <FormControl fullWidth={true}>
+                               <FormControl fullWidth={true} className={classes.patternTable}>
                                <PatternTable
                                    patterns={this.state.patterns}
                                    calendars={this.state.calendars}
@@ -473,7 +488,9 @@ class Settings extends React.Component<SettingsProps> {
                            <STableCell className={classes.tableHead}>
                                 Tracked Time Range
                            </STableCell>
-                           <STableCell className={classNames(classes.tableContent, classes.trackedPeriodInput)}>
+                           <STableCell className={classes.tableContent}>
+                               <div className={classes.trackedPeriodInput}>
+                                <div style={{minWidth: 600}}>
                                {this.state.trackedPeriods &&
                                    this.state.trackedPeriods.map((p, idx) =>
                                    <FormGroup key={idx}>
@@ -485,6 +502,8 @@ class Settings extends React.Component<SettingsProps> {
                                        fromOnChange={this.handlePeriodFromChange(idx)}
                                        toOnChange={this.handlePeriodToChange(idx)}/>
                                    </FormGroup>)}
+                                </div>
+                                </div>
                            </STableCell>
                        </TableRow>
                        <TableRow>
@@ -492,7 +511,7 @@ class Settings extends React.Component<SettingsProps> {
                             Misc
                            </STableCell>
                            <STableCell className={classes.tableContent}>
-                               <List>
+                               <List className={classes.list} disablePadding>
                                 <CompactListItem
                                         key="overrideNewTab"
                                         onClick={() => this.toggleOverrideNewTab()}
diff --git a/src/gapi.ts b/src/gapi.ts
index 8e74483..9ddf751 100644
--- a/src/gapi.ts
+++ b/src/gapi.ts
@@ -7,6 +7,7 @@ let loggedIn: boolean = null;
 
 enum GApiError {
     invalidSyncToken = "invalidSyncToken",
+    invalidAuthToken = "invalidAuthToken",
     notLoggedIn = "notLoggedIn",
     notLoggedOut = "notLoggedOut",
     otherError = "otherError",
@@ -120,22 +121,24 @@ function getEvents(calId: string, token: string,
             timeMax,
             maxResults: resultsPerRequest
         })}`, { method: 'GET' });
-        if (response.status === 200)
-        {
-            let data = await response.json();
-            results.push(...data.items);
-            if (data.nextPageToken) {
-                return singleFetch(data.nextPageToken, '');
-            } else {
-                return ({
-                    nextSyncToken: data.nextSyncToken,
-                    results
-                });
+        switch (response.status) {
+            case 200: {
+                let data = await response.json();
+                results.push(...data.items);
+                if (data.nextPageToken) {
+                    return singleFetch(data.nextPageToken, '');
+                } else {
+                    return ({
+                        nextSyncToken: data.nextSyncToken,
+                        results
+                    });
+                }
+                break;
             }
+            case 410: throw GApiError.invalidSyncToken; break;
+            case 401: throw GApiError.invalidAuthToken; break;
+            default: throw GApiError.otherError;
         }
-        else if (response.status === 410)
-            throw GApiError.invalidSyncToken;
-        else throw GApiError.otherError;
     };
 
     return singleFetch('', syncToken);
diff --git a/src/popup.tsx b/src/popup.tsx
index 0c0c8cc..d0f714b 100644
--- a/src/popup.tsx
+++ b/src/popup.tsx
@@ -108,7 +108,7 @@ class Popup extends React.Component<PopupProps> {
                     ${moment(d.end).format('ddd, MMM Do, YYYY')}`}
                     </Typography>
                     {(d.data.some(dd => dd.value > 1e-3) &&
-                    <StyledPatternPieChart data={d.data} />) ||
+                    <div style={{height: 300}}><StyledPatternPieChart data={d.data} /></div>) ||
                     <Typography variant="subtitle1" align="center" color="textSecondary">
                         No matching events.
                     </Typography>}
diff --git a/src/tab.tsx b/src/tab.tsx
index e720844..ebddc70 100644
--- a/src/tab.tsx
+++ b/src/tab.tsx
@@ -105,6 +105,7 @@ class Tab extends React.Component<TabProps> {
                     ${moment(d.end).format('ddd, MMM Do, YYYY')}`}
                     </Typography>
                     {(d.data.some(dd => dd.value > 1e-3) &&
+                    <div style={{height: 400}}>
                     <StyledPatternPieChart
                         data={d.data}
                         height={400}
@@ -114,6 +115,7 @@ class Tab extends React.Component<TabProps> {
                         radialLabelsLinkDiagonalLength={40}
                         labelFontSize={14}
                         padAngle={0.8} />
+                    </div>
                     ) ||
                     <Typography variant="subtitle1" align="center" color="textSecondary">
                         No matching events.