diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/Dashboard.tsx | 60 | ||||
| -rw-r--r-- | src/PatternTable.tsx | 7 | ||||
| -rw-r--r-- | src/Settings.tsx | 30 |
3 files changed, 75 insertions, 22 deletions
diff --git a/src/Dashboard.tsx b/src/Dashboard.tsx index ab26666..f514b38 100644 --- a/src/Dashboard.tsx +++ b/src/Dashboard.tsx @@ -10,6 +10,7 @@ import Tab, { TabProps } from '@material-ui/core/Tab'; import { LinkProps } from '@material-ui/core/Link'; import Grid from '@material-ui/core/Grid'; import { HashRouter as Router, RouteComponentProps, withRouter, Route, Link, Redirect, Switch } from "react-router-dom"; +import { TransitionGroup, CSSTransition } from "react-transition-group"; import { theme } from './theme'; import Logo from './Logo'; @@ -33,13 +34,34 @@ const styles = (theme: Theme) => ({ display: 'inline-block' }, appBarSpacer: theme.mixins.toolbar, - content: { + contentWrapper: { + position: 'relative' as 'relative', flexGrow: 1, padding: theme.spacing.unit * 3, overflow: 'auto', }, + content: { + position: 'absolute' as 'absolute', + left: theme.spacing.unit * 3, + right: theme.spacing.unit * 3, + paddingBottom: theme.spacing.unit * 3, + }, indicator: { backgroundColor: theme.palette.primary.contrastText + }, + fadeEnter: { + opacity: 0.001 + }, + fadeEnterActive: { + opacity: 1, + transition: 'opacity 300ms ease-in' + }, + fadeExit: { + opacity: 1 + }, + fadeExitActive: { + opacity: 0.001, + transition: 'opacity 300ms ease-in' } }); @@ -51,8 +73,13 @@ interface DashboardTabsProps extends RouteComponentProps { toolbar: string, title: string, indicator: string, - content: string - }; + content: string, + contentWrapper: string, + fadeEnter: string, + fadeEnterActive: string, + fadeExit: string, + fadeExitActive: string, + } } class DashboardTabs extends React.Component<DashboardTabsProps> { @@ -60,7 +87,7 @@ class DashboardTabs extends React.Component<DashboardTabsProps> { this.props.history.push(currentTab); } render() { - const { classes } = this.props; + const { classes, location } = this.props; return ( <div className={classes.root}> <AppBar @@ -80,11 +107,28 @@ class DashboardTabs extends React.Component<DashboardTabsProps> { </Toolbar> </AppBar> <CssBaseline /> - <main className={classes.content}> + <main className={classes.contentWrapper}> <div className={classes.appBarSpacer} /> - <Route exact path="/settings" component={Settings} /> - <Route exact path="/analyze" component={Analyze} /> - <Route exact path="/" render={() => <Redirect to="/settings" />}/> + <TransitionGroup> + <CSSTransition + key={location.pathname} + timeout={{ enter: 300, exit: 300 }} + classNames={{ + enter: classes.fadeEnter, + enterActive: classes.fadeEnterActive, + exit: classes.fadeExit, + exitActive: classes.fadeExitActive + }}> + <div className={classes.content}> + <Switch location={location}> + {console.log(location)} + <Route exact path="/settings" component={Settings} /> + <Route exact path="/analyze" component={Analyze} /> + <Route exact path="/" render={() => <Redirect to="/settings" />}/> + </Switch> + </div> + </CSSTransition> + </TransitionGroup> </main> </div> ); diff --git a/src/PatternTable.tsx b/src/PatternTable.tsx index 075cafe..7bb29b8 100644 --- a/src/PatternTable.tsx +++ b/src/PatternTable.tsx @@ -11,6 +11,8 @@ import TablePagination from '@material-ui/core/TablePagination'; import DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined'; import Popover from '@material-ui/core/Popover'; import MaterialColorPicker from 'react-material-color-picker'; +import { SlideDown } from 'react-slidedown'; +import 'react-slidedown/lib/slidedown.css'; import { CalendarField, EventField } from './RegexField'; import { theme, defaultChartColor } from './theme'; @@ -186,6 +188,7 @@ class PatternTable extends React.Component<PatternTableProps> { rows.flat(); return ( + <SlideDown className={'my-dropdown-slidedown'}> <div className={classes.patternTableWrapper}> <Popover id="colorPicker" @@ -239,7 +242,9 @@ class PatternTable extends React.Component<PatternTableProps> { nextIconButtonProps={{'aria-label': 'Next Page'}} onChangePage={this.handleChangePage} onChangeRowsPerPage={this.handleChangeRowsPerPage} /> - </div>); + </div> + </SlideDown> + ); } } diff --git a/src/Settings.tsx b/src/Settings.tsx index 3537894..d5ca681 100644 --- a/src/Settings.tsx +++ b/src/Settings.tsx @@ -20,7 +20,9 @@ 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 { getColorFamily } from 'materialcolorize'; +import { SlideDown } from 'react-slidedown'; +import 'react-slidedown/lib/slidedown.css'; import PatternTable from './PatternTable'; import Snackbar, { SnackbarVariant } from './Snackbar'; @@ -463,19 +465,21 @@ class Settings extends React.Component<SettingsProps> { <STableCell className={classes.tableContent} style={{paddingRight: 0}}> {(this.state.isLoggedIn && <div className={classNames(classes.calendarList, classes.list)}> - <List disablePadding> + <SlideDown className={'my-dropdown-slidedown'}> + <List disablePadding> {Object.keys(this.state.calendars).sort().map(id => - <CompactListItem - key={id} - onClick={() => this.toggleCalendar(id)} - disableGutters - dense button > - <Checkbox - checked={this.state.calendars[id].enabled} - disableRipple /> - <ListItemText primary={this.state.calendars[id].name} /> - </CompactListItem>)} - </List></div>) || 'Please Login.'} + <CompactListItem + key={id} + onClick={() => this.toggleCalendar(id)} + disableGutters + dense button > + <Checkbox + checked={this.state.calendars[id].enabled} + disableRipple /> + <ListItemText primary={this.state.calendars[id].name} /> + </CompactListItem>)} + </List> + </SlideDown></div>) || 'Please Login.'} </STableCell> </TableRow> <TableRow> |