Skip to content

Commit e2f3f5d

Browse files
amitSteinmetzamitSteinmetz
authored
style: change velocity page time buttons style (#1387)
1 parent 37038ee commit e2f3f5d

6 files changed

Lines changed: 94 additions & 41 deletions

File tree

‎src/hooks/useSingleLineData.ts‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ export const useSingleLineData = (
2121
const [filteredPositions, setFilteredPositions] = useState<Point[]>([])
2222
const [plannedRouteStops, setPlannedRouteStops] = useState<BusStop[]>([])
2323
const [options, setOptions] = useState<{ value: string; label: string }[]>([])
24-
// const [startTime, setStartTime] = useState<string>()
2524
const { startTime } = search
2625
const [error, setError] = useState<string>()
2726

@@ -46,7 +45,6 @@ export const useSingleLineData = (
4645
setRouteKey(undefined)
4746
setStartTime(undefined)
4847
setError(undefined)
49-
// setSearch((prev) => ({ ...prev, routes: undefined, routeKey: undefined }))
5048
setSearch((prev) => ({
5149
...prev,
5250
routes: undefined,
@@ -64,7 +62,6 @@ export const useSingleLineData = (
6462
setRoutes(routes)
6563
setSearch((prev) => ({ ...prev, routes }))
6664
setError(undefined)
67-
// setStartTime(undefined)
6865
})
6966
.catch((err) => {
7067
if (err?.cause?.name !== 'AbortError') {

‎src/pages/components/DateNavigator.tsx‎

Lines changed: 0 additions & 33 deletions
This file was deleted.

‎src/pages/components/DateSelector.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ export function DateSelector({
4545
minDate={minDate || startOfTime}
4646
disabled={disabled}
4747
onError={(err) => setError(err)}
48+
sx={{ width: { xs: '100%', sm: '70%' } }}
4849
slotProps={{
4950
calendarHeader: {
5051
sx: {
@@ -56,6 +57,7 @@ export function DateSelector({
5657
textField: {
5758
fullWidth: true,
5859
helperText: errorMessageKey && t(errorMessageKey),
60+
sx: { bgcolor: '#ffffff', borderRadius: 1 },
5961
},
6062
}}
6163
/>

‎src/pages/components/dateNavigator/DateNavigator.scss‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
.nav-btn {
2+
padding-left: 4px;
3+
padding-right: 4px;
4+
font-size: 0.75rem !important;
5+
white-space: nowrap;
6+
min-width: 0;
7+
flex: 1;
8+
height: 44px;
9+
text-transform: none;
10+
border-color: rgb(0 0 0 / 12%);
11+
12+
@media (width >= 600px) {
13+
padding-left: 16px;
14+
padding-right: 16px;
15+
font-size: 0.9rem !important;
16+
}
17+
18+
@media (width >= 900px) {
19+
font-size: 1rem !important;
20+
}
21+
22+
&.today {
23+
background-color: #1976d2 !important;
24+
color: #fff !important;
25+
border-color: #1976d2 !important;
26+
27+
&:hover {
28+
background-color: #1565c0 !important;
29+
border-color: #1565c0 !important;
30+
}
31+
32+
.MuiButton-startIcon {
33+
color: #fff;
34+
}
35+
}
36+
}

‎src/pages/components/dateNavigator/DateNavigator.tsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { Today } from '@mui/icons-material'
2+
import { Box, Button, ButtonGroup } from '@mui/material'
3+
import dayjs from 'src/dayjs'
4+
import './DateNavigator.scss'
5+
6+
interface DateNavigatorProps {
7+
currentTime: dayjs.Dayjs
8+
onChange: (time: dayjs.Dayjs) => void
9+
}
10+
11+
export const DateNavigator = ({ currentTime, onChange }: DateNavigatorProps) => {
12+
const handleChange = (amount: number, unit: 'day' | 'week') => {
13+
const newTime =
14+
amount > 0 ? currentTime.add(amount, unit) : currentTime.subtract(Math.abs(amount), unit)
15+
onChange(newTime)
16+
}
17+
18+
const handleToday = () => onChange(dayjs())
19+
20+
return (
21+
<Box sx={{ width: { xs: '100%', sm: '100%' }, my: 1 }}>
22+
<ButtonGroup
23+
variant="outlined"
24+
fullWidth
25+
sx={{
26+
bgcolor: 'background.paper',
27+
boxShadow: '0 2px 4px rgba(0,0,0,0.05)',
28+
borderRadius: 2,
29+
}}>
30+
<Button onClick={() => handleChange(-1, 'week')} className="nav-btn">
31+
שבוע קודם
32+
</Button>
33+
<Button onClick={() => handleChange(-1, 'day')} className="nav-btn">
34+
יום קודם
35+
</Button>
36+
<Button
37+
onClick={handleToday}
38+
className="nav-btn today"
39+
startIcon={<Today fontSize="small" />}>
40+
היום
41+
</Button>
42+
<Button onClick={() => handleChange(1, 'day')} className="nav-btn">
43+
יום הבא
44+
</Button>
45+
<Button onClick={() => handleChange(1, 'week')} className="nav-btn">
46+
שבוע הבא
47+
</Button>
48+
</ButtonGroup>
49+
</Box>
50+
)
51+
}

‎src/pages/velocityHeatmap/index.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { Grid } from '@mui/material'
1+
import { Stack } from '@mui/material'
22
import React, { useContext, useState } from 'react'
33
import { MapContainer, TileLayer } from 'react-leaflet'
44
import dayjs from 'src/dayjs'
55
import { SearchContext } from '../../model/pageState'
6-
import { DateNavigator } from '../components/DateNavigator'
6+
import { DateNavigator } from '../components/dateNavigator/DateNavigator'
77
import { DateSelector } from '../components/DateSelector'
88
import { VelocityHeatmapLegend } from './components/VelocityHeatmapLegend'
99
import { VelocityHeatmapRectangles } from './components/VelocityHeatmapRectangles'
@@ -34,10 +34,10 @@ const VelocityHeatmapPage: React.FC = () => {
3434
<p>This page will display a heatmap of velocity aggregation data.</p>
3535

3636
{/* choose date*/}
37-
<Grid>
37+
<Stack direction="column" spacing={2} sx={{ mb: 2, width: { xs: '100%', md: '70%' } }}>
3838
<DateSelector time={dayjs(search.timestamp)} onChange={handleTimestampChange} />
39-
</Grid>
40-
<DateNavigator currentTime={dayjs(search.timestamp)} onChange={handleTimestampChange} />
39+
<DateNavigator currentTime={dayjs(search.timestamp)} onChange={handleTimestampChange} />
40+
</Stack>
4141
<div style={{ margin: '12px 0' }}>
4242
<b>Visualization:</b>{' '}
4343
{VIS_MODES.map((mode) => (

0 commit comments

Comments
 (0)