more improvements

5 files changed, 61 insertions, 40 deletions

diff --git a/src/Analyze.tsx b/src/Analyze.tsx
index bb3f38c..b272f30 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} style={{minWidth: 700}}>
                 <AlertDialog
                     title={this.state.dialogMsg.title}
                     message={this.state.dialogMsg.message}
@@ -239,17 +239,17 @@ class Analyze extends React.Component<AnalyzeProps> {
                         </FormGroup>
                         <div className={classes.buttonSpacer} />
                         <Grid container spacing={16}>
-                            <Grid item md={4} xs={12}>
+                            <Grid item lg={4} xs={12}>
                                 <FormGroup>
                                     <Button variant="contained" color="primary" onClick={this.loadDefault}>Load Default</Button>
                                 </FormGroup>
                             </Grid>
-                            <Grid item md={4} xs={12}>
+                            <Grid item lg={4} xs={12}>
                                 <FormGroup>
                                     <Button variant="contained" color="primary" onClick={this.reset}>Reset</Button>
                                 </FormGroup>
                             </Grid>
-                            <Grid item md={4} xs={12}>
+                            <Grid item lg={4} xs={12}>
                                 <FormGroup>
                                     <Button variant="contained" color="primary" onClick={this.analyze}>Analyze</Button>
                                 </FormGroup>
diff --git a/src/PatternTable.tsx b/src/PatternTable.tsx
index e514551..075cafe 100644
--- a/src/PatternTable.tsx
+++ b/src/PatternTable.tsx
@@ -18,12 +18,12 @@ import { PatternEntry, PatternEntryColor } from './pattern';
 import { GCalendarMeta } from './gapi';
 
 const styles = (theme: Theme): StyleRules => ({
-    deleteButton: {
+    deleteButtonRow: {
         width: 0,
         position: 'absolute',
         paddingRight: '24px',
         right: 0,
-        lineHeight: '48px',
+        lineHeight: '47px',
     },
     deleteButtonHide: {
         display: 'none'
@@ -32,15 +32,22 @@ const styles = (theme: Theme): StyleRules => ({
         backgroundColor: theme.palette.background.default,
         zIndex: 1
     },
-    deleteIcon: {
+    deleteButton: {
         position: 'absolute',
         cursor: 'pointer'
     },
+    deleteIcon: {
+        verticalAlign: 'middle'
+    },
     patternTableWrapper: {
-        overflowX: 'auto',
-        overflowY: 'hidden'
+        width: '100%',
+        position: 'relative'
     },
     patternTable: {
+        overflowX: 'auto',
+        overflowY: 'hidden',
+    },
+    patternTableInner: {
         minWidth: 600
     }
 });
@@ -52,12 +59,18 @@ let nameFieldstyles = {
         width: 30,
         marginRight: 10,
         cursor: 'pointer'
+    },
+    wrapper: {
+        minWidth: 250
     }
 };
 
 type NameFieldProps = {
     value: PatternEntry,
-    classes: { colorSample: string },
+    classes: {
+        colorSample: string,
+        wrapper: string
+    },
     colorOnClick: (e: React.MouseEvent<HTMLDivElement>) => void,
     onChange: (f: string, v: string) => void
 };
@@ -65,7 +78,7 @@ type NameFieldProps = {
 function NameField(props: NameFieldProps) {
     let color = props.value.color.background;
     return (
-        <div style={{minWidth: 250}}>
+        <div className={props.classes.wrapper}>
             <div
                 className={props.classes.colorSample}
                 style={{backgroundColor: (color ? color : defaultChartColor)}}
@@ -84,12 +97,14 @@ const patternHead: {label: string, elem: any}[] = [
 
 type PatternTableProps = {
     classes: {
+        deleteButtonRow: string,
         deleteButton: string,
         deleteButtonHide: string,
         deleteButtonShow: string,
         deleteIcon: string,
         patternTableWrapper: string,
         patternTable: string,
+        patternTableInner: string,
     },
     calendars: { [id: string]: GCalendarMeta },
     patterns: PatternEntry[],
@@ -132,13 +147,15 @@ class PatternTable extends React.Component<PatternTableProps> {
         let rows = patterns.slice(page * rowsPerPage, (page + 1) * rowsPerPage).map((p, i) => {
             let setActive = () => this.setState({ activePattern: p.idx });
             let unsetActive = () => this.setState({ activePattern: null });
+            let deleteButtonClass = this.state.activePattern !== p.idx ?
+                classes.deleteButtonHide : classes.deleteButtonShow;
             return [<TableRow key={i * 2}
                 onMouseOver={setActive} onMouseOut={unsetActive}
-                className={classes.deleteButton}>
+                className={classes.deleteButtonRow}>
                 <td>
-                    <div className={classNames(this.state.activePattern !== p.idx ? classes.deleteButtonHide : classes.deleteButtonShow, classes.deleteIcon)}>
+                    <div className={classNames(deleteButtonClass, classes.deleteButton)}>
                     <DeleteOutlinedIcon
-                        style={{verticalAlign: 'middle'}}
+                        className={classes.deleteIcon}
                         onClick={() => this.props.onRemovePattern(p.idx)} />
                     </div>
                 </td>
@@ -169,7 +186,7 @@ class PatternTable extends React.Component<PatternTableProps> {
         rows.flat();
 
         return (
-            <div style={{width: '100%', position: 'relative'}}>
+            <div className={classes.patternTableWrapper}>
                 <Popover
                     id="colorPicker"
                     open={this.state.colorPickerOpen}
@@ -196,8 +213,8 @@ class PatternTable extends React.Component<PatternTableProps> {
                         resetLabel='Reset'
                     />
                 </Popover>
-                <div className={classes.patternTableWrapper}>
-                    <Table className={classes.patternTable}>
+                <div className={classes.patternTable}>
+                    <Table className={classes.patternTableInner}>
                         <TableHead>
                             <TableRow>{patternHead.map((s, i) => (<TableCell key={i}>{s.label}</TableCell>))}</TableRow>
                         </TableHead>
@@ -211,17 +228,17 @@ class PatternTable extends React.Component<PatternTableProps> {
                             }
                         </TableBody>
                     </Table>
-                <TablePagination
-                    rowsPerPageOptions={[5, 10, 25]}
-                    component="div"
-                    count={patterns.length}
-                    rowsPerPage={rowsPerPage}
-                    page={page}
-                    backIconButtonProps={{'aria-label': 'Previous Page'}}
-                    nextIconButtonProps={{'aria-label': 'Next Page'}}
-                    onChangePage={this.handleChangePage}
-                    onChangeRowsPerPage={this.handleChangeRowsPerPage} />
                 </div>
+                    <TablePagination
+                        rowsPerPageOptions={[5, 10, 25]}
+                        component="div"
+                        count={patterns.length}
+                        rowsPerPage={rowsPerPage}
+                        page={page}
+                        backIconButtonProps={{'aria-label': 'Previous Page'}}
+                        nextIconButtonProps={{'aria-label': 'Next Page'}}
+                        onChangePage={this.handleChangePage}
+                        onChangeRowsPerPage={this.handleChangeRowsPerPage} />
             </div>);
     }
 }
diff --git a/src/Settings.tsx b/src/Settings.tsx
index 1e5df42..d44f1f6 100644
--- a/src/Settings.tsx
+++ b/src/Settings.tsx
@@ -38,7 +38,8 @@ const styles = (theme: Theme): StyleRules => ({
         verticalAlign: 'top',
         textAlign: 'right',
         lineHeight: '3em',
-        minWidth: 250
+        minWidth: 250,
+        width: '20%'
     },
     tableContent: {
         textAlign: 'left',
@@ -48,13 +49,13 @@ const styles = (theme: Theme): StyleRules => ({
         marginLeft: -12
     },
     calendarList: {
-        maxHeight: 400,
+        maxHeight: 200,
         overflowY: 'auto'
     },
     bottomButtons: {
         marginTop: 10,
         textAlign: 'right',
-        minWidth: 600
+        minWidth: 650
     },
     trackedPeriodInput: {
         paddingTop: 10,
@@ -158,6 +159,7 @@ type SettingsProps = {
         tableHead: string,
         tableContent: string,
         calendarList: string,
+        patternTableCell: string,
         bottomButtons: string,
         trackedPeriodInput: string,
         list: string,
@@ -442,9 +444,10 @@ class Settings extends React.Component<SettingsProps> {
                            </IconButton>
                                Calendars
                            </STableCell>
-                           <STableCell className={classes.tableContent}>
+                           <STableCell className={classes.tableContent} style={{paddingRight: 0}}>
+                                <div className={classNames(classes.calendarList, classes.list)}>
                                {(this.state.isLoggedIn &&
-                               <List className={classNames(classes.calendarList, classes.list)} disablePadding>
+                               <List disablePadding>
                                    {Object.keys(this.state.calendars).sort().map(id =>
                                        <CompactListItem
                                            key={id}
@@ -456,7 +459,7 @@ class Settings extends React.Component<SettingsProps> {
                                            disableRipple />
                                        <ListItemText primary={this.state.calendars[id].name} />
                                        </CompactListItem>)}
-                               </List>) || 'Please Login.'}
+                               </List>) || 'Please Login.'}</div>
                            </STableCell>
                        </TableRow>
                        <TableRow>
@@ -473,7 +476,7 @@ class Settings extends React.Component<SettingsProps> {
                                    onClick={this.handleLoadDefault}>Load Default</Button>
                                </div>
                            </STableCell>
-                           <STableCell className={classes.tableContent}  style={{paddingRight: 0}}>
+                           <STableCell className={classes.tableContent} style={{paddingRight: 0}}>
                                {(this.state.isLoggedIn &&
                                <FormControl fullWidth={true} className={classes.patternTable}>
                                <PatternTable
@@ -510,8 +513,8 @@ class Settings extends React.Component<SettingsProps> {
                            <STableCell className={classes.tableHead}>
                             Misc
                            </STableCell>
-                           <STableCell className={classes.tableContent}>
-                               <List className={classes.list} disablePadding>
+                           <STableCell className={classNames(classes.tableContent, classes.list)}>
+                               <List disablePadding>
                                 <CompactListItem
                                         key="overrideNewTab"
                                         onClick={() => this.toggleOverrideNewTab()}
diff --git a/src/background.ts b/src/background.ts
index 9b95061..f536005 100644
--- a/src/background.ts
+++ b/src/background.ts
@@ -139,12 +139,12 @@ function updateMainGraphData() {
         let startD = p.start.toMoment();
         let endD = p.end.toMoment();
         if (!(startD && endD)) return;
-        let start = moment().endOf('day');
+        let start = moment().add(1, 'days').startOf('day');
         if (endD.valueOf() == 0) {
             switch (p.start.unit) {
-                case 'days': start = moment().endOf('day'); break;
-                case 'weeks': start = moment().endOf('week'); break;
-                case 'months': start = moment().endOf('month'); break;
+                case 'days': start = moment().add(1, 'days').startOf('day'); break;
+                case 'weeks': start = moment().add(1, 'weeks').startOf('isoWeek'); break;
+                case 'months': start = moment().add(1, 'months').startOf('month'); break;
                 default:
             }
         }
diff --git a/src/tab.tsx b/src/tab.tsx
index ebddc70..5777dbe 100644
--- a/src/tab.tsx
+++ b/src/tab.tsx
@@ -74,6 +74,7 @@ class Tab extends React.Component<TabProps> {
     render() {
         let { classes } = this.props;
         let data = this.state.patternGraphData;
+        console.log(data);
         return (
             <MuiThemeProvider theme={theme}>
             <CssBaseline />