Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updates for some styling synchronization. #2324

Merged
merged 4 commits into from
Dec 16, 2022
Merged

Updates for some styling synchronization. #2324

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
00e8a15
Updates for some styling synchronization.
Dec 13, 2022
c52ff19
Adding another page navigator for the bottom of the page.
Dec 14, 2022
c8fe539
Merge branch 'main' into update/lineage-events-styles_
wslulciuc Dec 14, 2022
62f6314
Merge branch 'main' into update/lineage-events-styles_
phixMe Dec 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 7 additions & 6 deletions web/src/components/core/date-picker/MqDatePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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({
Expand All @@ -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'
},
Expand Down Expand Up @@ -57,7 +58,7 @@ type DatePickerProps = WithStyles<typeof styles> & OwnProps

class MqDatePicker extends React.Component<DatePickerProps> {
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 (
<DateTimePicker
label={label}
Expand All @@ -70,4 +71,4 @@ class MqDatePicker extends React.Component<DatePickerProps> {
}
}

export default withStyles(styles)(MqDatePicker)
export default withStyles(styles)(MqDatePicker)
16 changes: 16 additions & 0 deletions web/src/components/core/input-base/MqInputBase.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'])
}
}
}
})
Expand All @@ -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'])
}
}
}
})
Expand Down
80 changes: 57 additions & 23 deletions web/src/routes/events/Events.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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'
Expand Down Expand Up @@ -49,13 +52,16 @@ const styles = (theme: Theme) => {
borderRadius: '50%'
},
table: {
marginBottom: '100px'
marginBottom: theme.spacing(2)
},
row: {
cursor: 'pointer',
'&:hover': {
backgroundColor: theme.palette.action.hover
}
},
ml2: {
marginLeft: theme.spacing(2)
}
})
}
Expand Down Expand Up @@ -129,7 +135,7 @@ class Events extends React.Component<EventsProps, EventsState> {
if (eventsProps !== eventsState) {
this.setState({
events: eventsProps,
pageIsLast: eventsProps.length < page * this.pageSize ? true : false
pageIsLast: eventsProps.length < page * this.pageSize
})
}
}
Expand All @@ -140,7 +146,7 @@ class Events extends React.Component<EventsProps, EventsState> {

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() {
Expand Down Expand Up @@ -192,9 +198,32 @@ class Events extends React.Component<EventsProps, EventsState> {
<Container maxWidth={'lg'} disableGutters>
<MqScreenLoad loading={isEventsLoading || !isEventsInit}>
<>
<Box p={2}>
<MqText heading>{i18next.t('events_route.title')}</MqText>
Page: {this.pageNavigation()}
<Box p={2} display={'flex'} justifyContent={'space-between'}>
<Box>
<MqText heading>{i18next.t('events_route.title')}</MqText>
Page: {this.pageNavigation()}
</Box>
<Box>
<Tooltip title={i18next.t('events_route.previous_page')}>
<IconButton
className={classes.ml2}
color='primary'
disabled={page === 1}
onClick={() => this.handleClickPage('prev')}
>
<ChevronLeftRounded />
</IconButton>
</Tooltip>
<Tooltip title={i18next.t('events_route.next_page')}>
<IconButton
color='primary'
disabled={pageIsLast}
onClick={() => this.handleClickPage('next')}
>
<ChevronRightRounded />
</IconButton>
</Tooltip>
</Box>
</Box>
<Box p={2} className={classes.nav}>
<MqDatePicker
Expand All @@ -207,22 +236,6 @@ class Events extends React.Component<EventsProps, EventsState> {
value={formatDatePicker(dateTo)}
onChange={(e: any) => this.handleChangeDatepicker(e, 'to')}
/>
<Button
variant='outlined'
color='primary'
disabled={page === 1}
onClick={() => this.handleClickPage('prev')}
>
{i18next.t('events_route.previous_page')}
</Button>
<Button
variant='outlined'
color='primary'
disabled={pageIsLast}
onClick={() => this.handleClickPage('next')}
>
{i18next.t('events_route.next_page')}
</Button>
</Box>
{events.length === 0 ? (
<Box p={2}>
Expand Down Expand Up @@ -324,6 +337,27 @@ class Events extends React.Component<EventsProps, EventsState> {
</Table>
</>
)}
<Box display={'flex'} justifyContent={'flex-end'} mb={2}>
<Tooltip title={i18next.t('events_route.previous_page')}>
<IconButton
className={classes.ml2}
color='primary'
disabled={page === 1}
onClick={() => this.handleClickPage('prev')}
>
<ChevronLeftRounded />
</IconButton>
</Tooltip>
<Tooltip title={i18next.t('events_route.next_page')}>
<IconButton
color='primary'
disabled={pageIsLast}
onClick={() => this.handleClickPage('next')}
>
<ChevronRightRounded />
</IconButton>
</Tooltip>
</Box>
</>
</MqScreenLoad>
</Container>
Expand Down