diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/Analyze.tsx | 8 | ||||
| -rw-r--r-- | src/PatternTable.tsx | 63 | ||||
| -rw-r--r-- | src/Settings.tsx | 21 | ||||
| -rw-r--r-- | src/background.ts | 8 | ||||
| -rw-r--r-- | src/tab.tsx | 1 |
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 /> |