aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/Analyze.tsx8
-rw-r--r--src/PatternTable.tsx63
-rw-r--r--src/Settings.tsx21
-rw-r--r--src/background.ts8
-rw-r--r--src/tab.tsx1
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 />