From 4405b25ca6844b27ecc18ec91e37470d283726d3 Mon Sep 17 00:00:00 2001 From: Determinant Date: Tue, 19 Feb 2019 14:45:03 -0500 Subject: improve the UI --- src/Analyze.tsx | 16 +++++++++------- src/Chart.tsx | 12 +++++------- src/PatternTable.tsx | 26 +++++++++++++++----------- src/Settings.tsx | 39 +++++++++++++++++++++++++++++---------- src/gapi.ts | 31 +++++++++++++++++-------------- src/popup.tsx | 2 +- src/tab.tsx | 2 ++ 7 files changed, 78 insertions(+), 50 deletions(-) (limited to 'src') 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 { const { classes } = this.props; return ( - + { open={this.state.snackBarOpen} variant={this.state.snackBarVariant} onClose={this.handleSnackbarClose}/> - - - + + Analyzed Events { calendars={this.state.calendars} onRemovePattern={this.removePattern} onUpdatePattern={this.updatePattern} /> - - + + Time Range + +
{ - + + 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 { } }; return ( -
({ id: p.name, @@ -88,7 +87,6 @@ export class PatternPieChart extends React.Component { motionDamping={15} theme={theme} tooltipFormat={v => `${v.toFixed(2)} hr`} /> -
); } } @@ -107,11 +105,11 @@ type DoublePieChartProps = { function DoublePieChart(props: DoublePieChartProps) { return ( - - + + - - + + ); } 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 ( - +
props.onChange('name', event.target.value)} /> - ); +
); } const patternHead: {label: string, elem: any}[] = [ @@ -133,11 +136,11 @@ class PatternTable extends React.Component { onMouseOver={setActive} onMouseOut={unsetActive} className={classes.deleteButton}> - +
this.props.onRemovePattern(p.idx)} /> - +
, @@ -152,6 +155,7 @@ class PatternTable extends React.Component { 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 { rows.flat(); return ( -
+
{ } -
{ nextIconButtonProps={{'aria-label': 'Next Page'}} onChangePage={this.handleChangePage} onChangeRowsPerPage={this.handleChangeRowsPerPage} /> +
); } } 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 { 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 { {(this.state.isLoggedIn && - + {Object.keys(this.state.calendars).sort().map(id => { onClick={this.handleLoadDefault}>Load Default
- + {(this.state.isLoggedIn && - + { Tracked Time Range - + +
+
{this.state.trackedPeriods && this.state.trackedPeriods.map((p, idx) => @@ -485,6 +502,8 @@ class Settings extends React.Component { fromOnChange={this.handlePeriodFromChange(idx)} toOnChange={this.handlePeriodToChange(idx)}/> )} +
+
@@ -492,7 +511,7 @@ class Settings extends React.Component { Misc
- + 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 { ${moment(d.end).format('ddd, MMM Do, YYYY')}`} {(d.data.some(dd => dd.value > 1e-3) && - ) || +
) || No matching events. } 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 { ${moment(d.end).format('ddd, MMM Do, YYYY')}`} {(d.data.some(dd => dd.value > 1e-3) && +
{ radialLabelsLinkDiagonalLength={40} labelFontSize={14} padAngle={0.8} /> +
) || No matching events. -- cgit v1.2.3-70-g09d2