From 00e8a1599afa3203b044bb0dbd6c58a722fcb0f0 Mon Sep 17 00:00:00 2001 From: phix Date: Tue, 13 Dec 2022 12:45:42 -0800 Subject: [PATCH 1/2] Updates for some styling synchronization. --- .../core/date-picker/MqDatePicker.tsx | 13 +++-- .../core/input-base/MqInputBase.tsx | 16 ++++++ web/src/routes/events/Events.tsx | 57 ++++++++++++------- 3 files changed, 58 insertions(+), 28 deletions(-) diff --git a/web/src/components/core/date-picker/MqDatePicker.tsx b/web/src/components/core/date-picker/MqDatePicker.tsx index c314026721..1fce20613e 100644 --- a/web/src/components/core/date-picker/MqDatePicker.tsx +++ b/web/src/components/core/date-picker/MqDatePicker.tsx @@ -1,11 +1,11 @@ // SPDX-License-Identifier: Apache-2.0 -import React from 'react' +import { DateTimePicker } from '@material-ui/pickers' import { Theme } from '@material-ui/core' +import { alpha } from '@material-ui/core/styles' +import React from 'react' import createStyles from '@material-ui/core/styles/createStyles' import withStyles, { WithStyles } from '@material-ui/core/styles/withStyles' -import { DateTimePicker } from '@material-ui/pickers' -import { alpha } from '@material-ui/core/styles' const styles = (theme: Theme) => createStyles({ @@ -14,8 +14,9 @@ const styles = (theme: Theme) => cursor: 'pointer', backgroundColor: 'transparent', border: `2px solid ${theme.palette.common.white}`, - padding: `${theme.spacing(1)}px ${theme.spacing(1)}px`, + padding: `${theme.spacing(1)}px ${theme.spacing(3)}px`, transition: theme.transitions.create(['border-color', 'box-shadow']), + borderRadius: theme.spacing(4), '& *': { cursor: 'pointer' }, @@ -57,7 +58,7 @@ type DatePickerProps = WithStyles & OwnProps class MqDatePicker extends React.Component { render() { - const { classes, value, onChange, label = '', format = "MMM DD yyyy hh:mm a" } = this.props + const { classes, value, onChange, label = '', format = 'MMM DD yyyy hh:mm a' } = this.props return ( { } } -export default withStyles(styles)(MqDatePicker) \ No newline at end of file +export default withStyles(styles)(MqDatePicker) diff --git a/web/src/components/core/input-base/MqInputBase.tsx b/web/src/components/core/input-base/MqInputBase.tsx index fe10c8701c..da7bfc9968 100644 --- a/web/src/components/core/input-base/MqInputBase.tsx +++ b/web/src/components/core/input-base/MqInputBase.tsx @@ -18,6 +18,14 @@ export const MqInputBase = withStyles((theme: Theme) => borderColor: theme.palette.primary.main, boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 3px`, borderRadius: theme.spacing(4) + }, + '&:hover': { + borderColor: theme.palette.primary.main, + boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 3px`, + '& > label': { + color: theme.palette.primary.main, + transition: theme.transitions.create(['color']) + } } } }) @@ -39,6 +47,14 @@ export const MqInputNoIcon = withStyles((theme: Theme) => borderColor: theme.palette.primary.main, boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 3px`, borderRadius: theme.spacing(4) + }, + '&:hover': { + borderColor: theme.palette.primary.main, + boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 3px`, + '& > label': { + color: theme.palette.primary.main, + transition: theme.transitions.create(['color']) + } } } }) diff --git a/web/src/routes/events/Events.tsx b/web/src/routes/events/Events.tsx index 738f4b8ff8..79f7dc4384 100644 --- a/web/src/routes/events/Events.tsx +++ b/web/src/routes/events/Events.tsx @@ -9,8 +9,10 @@ import { TableCell, TableHead, TableRow, - Theme + Theme, + Tooltip } from '@material-ui/core' +import { ChevronLeftRounded, ChevronRightRounded } from '@material-ui/icons' import { Event } from '../../types/api' import { IState } from '../../store/reducers' import { MqScreenLoad } from '../../components/core/screen-load/MqScreenLoad' @@ -22,6 +24,7 @@ import { formatDateAPIQuery, formatDatePicker } from '../../helpers/time' import { saveAs } from 'file-saver' import { theme } from '../../helpers/theme' import Box from '@material-ui/core/Box' +import IconButton from '@material-ui/core/IconButton' import MqDatePicker from '../../components/core/date-picker/MqDatePicker' import MqEmpty from '../../components/core/empty/MqEmpty' import MqJson from '../../components/core/code/MqJson' @@ -56,6 +59,9 @@ const styles = (theme: Theme) => { '&:hover': { backgroundColor: theme.palette.action.hover } + }, + ml2: { + marginLeft: theme.spacing(2) } }) } @@ -129,7 +135,7 @@ class Events extends React.Component { if (eventsProps !== eventsState) { this.setState({ events: eventsProps, - pageIsLast: eventsProps.length < page * this.pageSize ? true : false + pageIsLast: eventsProps.length < page * this.pageSize }) } } @@ -140,7 +146,7 @@ class Events extends React.Component { getEvents() { const { events, page } = this.state - return events.slice(0 + (page - 1) * this.pageSize, this.pageSize + (page - 1) * this.pageSize) + return events.slice((page - 1) * this.pageSize, this.pageSize + (page - 1) * this.pageSize) } pageNavigation() { @@ -192,9 +198,32 @@ class Events extends React.Component { <> - - {i18next.t('events_route.title')} - Page: {this.pageNavigation()} + + + {i18next.t('events_route.title')} + Page: {this.pageNavigation()} + + + + this.handleClickPage('prev')} + > + + + + + this.handleClickPage('next')} + > + + + + { value={formatDatePicker(dateTo)} onChange={(e: any) => this.handleChangeDatepicker(e, 'to')} /> - - {events.length === 0 ? ( From c52ff197abea51ca7f3a483e1f5eea84edab0805 Mon Sep 17 00:00:00 2001 From: phix Date: Wed, 14 Dec 2022 11:36:56 -0800 Subject: [PATCH 2/2] Adding another page navigator for the bottom of the page. --- web/src/routes/events/Events.tsx | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/web/src/routes/events/Events.tsx b/web/src/routes/events/Events.tsx index 79f7dc4384..e8d38204c3 100644 --- a/web/src/routes/events/Events.tsx +++ b/web/src/routes/events/Events.tsx @@ -52,7 +52,7 @@ const styles = (theme: Theme) => { borderRadius: '50%' }, table: { - marginBottom: '100px' + marginBottom: theme.spacing(2) }, row: { cursor: 'pointer', @@ -337,6 +337,27 @@ class Events extends React.Component { )} + + + this.handleClickPage('prev')} + > + + + + + this.handleClickPage('next')} + > + + + +