diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/Analyze.tsx | 16 | ||||
| -rw-r--r-- | src/Chart.tsx | 12 | ||||
| -rw-r--r-- | src/PatternTable.tsx | 26 | ||||
| -rw-r--r-- | src/Settings.tsx | 39 | ||||
| -rw-r--r-- | src/gapi.ts | 31 | ||||
| -rw-r--r-- | src/popup.tsx | 2 | ||||
| -rw-r--r-- | src/tab.tsx | 2 |
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. |