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

Keep the header sticky on the mission page #1072

Merged
merged 2 commits into from
Nov 13, 2023
Merged

Keep the header sticky on the mission page #1072

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
534e10e
Keep the header sticky on the mission page
andchiind Oct 18, 2023
8bbd105
Improve appearance of header
mrica-equinor Nov 13, 2023
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
123 changes: 65 additions & 58 deletions frontend/src/components/Pages/MissionPage/MissionHeader/MissionHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Typography } from '@equinor/eds-core-react'
import { Card, Typography } from '@equinor/eds-core-react'
import { MissionControlButtons } from 'components/Pages/FrontPage/MissionOverview/MissionControlButtons'
import { MissionStatusDisplay } from 'components/Pages/FrontPage/MissionOverview/MissionStatusDisplay'
import { format, differenceInMinutes } from 'date-fns'
Expand All @@ -9,15 +9,26 @@ import { useLanguageContext, TranslateTextWithContext } from 'components/Context
import { StatusReason } from '../StatusReason'
import { MissionRestartButton } from 'components/Pages/FrontPage/MissionOverview/MissionRestartButton'

const HeaderSection = styled.div`
const HeaderSection = styled(Card)`
width: 100%;
Copy link
Contributor

@prasm313 prasm313 Oct 26, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would prefer if only the title and buttons were sticky. When status, start date, start time etc. are visible it can be confusing when the mission has a lot of tags.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a bit difficult since we can't actually achieve this without moving the title out of the header. The CSS sticky feature only works within the parent component. To have something stay the same position on the screen regardless of its context we need to use "fixed" positioning which does not allow us to only start moving it when we scroll down a certain amount

min-width: 600px;
height: auto;
display: flex;
top: 60px;
flex-direction: column;
gap: 0.4rem;
gap: 10px;
position: sticky;
padding: 15px 0px 15px 0px;
background-color: white;
z-index: 1;
box-shadow: none;
border-bottom: 1px solid ${tokens.colors.interactive.disabled__border.hex};
border-radius: 0px;
`
const TitleSection = styled.div`
andchiind marked this conversation as resolved.
Show resolved Hide resolved
display: flex;
align-items: center;
mrica-equinor marked this conversation as resolved.
Show resolved Hide resolved
gap: 10px;
gap: 20px;
`
const InfoSection = styled.div`
display: flex;
Expand All @@ -26,60 +37,6 @@ const InfoSection = styled.div`
gap: 1.2rem;
`

interface MissionHeaderProps {
mission: Mission
}

export function MissionHeader({ mission }: MissionHeaderProps) {
const { TranslateText } = useLanguageContext()
const barToMillibar = 1000
const isMissionCompleted = mission.endTime ? true : false

const translatedStartDate = TranslateText('Start date')
const translatedStartTime = TranslateText('Start time')
const translatedUsedTime = TranslateText('Time used')
const translatedEstimatedTimeRemaining = TranslateText('Estimated time remaining')
const translatedRobot = TranslateText('Robot')
const translatedBatteryLevel = TranslateText('Battery level')
const translatedPressureLevel = TranslateText('Pressure level')
const translatedDescription = TranslateText('Description')

const { startTime, startDate, usedTime, remainingTime } = StartUsedAndRemainingTime(mission)
const isMissionActive = mission.status === MissionStatus.Ongoing || mission.status === MissionStatus.Paused

return (
<HeaderSection>
<TitleSection>
<Typography variant="h1">{mission.name}</Typography>
{isMissionActive && <MissionControlButtons mission={mission} />}
{mission.isCompleted && <MissionRestartButton mission={mission} />}
</TitleSection>
<Typography
variant="body_long_italic"
group="paragraph"
color={tokens.colors.text.static_icons__secondary.hex}
>
{mission.description && `${translatedDescription}: ${mission.description}`}
</Typography>
<StatusReason mission={mission}></StatusReason>
<InfoSection>
<MissionStatusDisplay status={mission.status} />
{HeaderText(`${translatedStartDate}: ${startDate}`)}
{HeaderText(`${translatedStartTime}: ${startTime}`)}
{HeaderText(`${translatedUsedTime}: ${usedTime}`)}
{!isMissionCompleted && HeaderText(`${translatedEstimatedTimeRemaining}: ${remainingTime}`)}
{HeaderText(`${translatedRobot}: ${mission.robot.name}`)}
{!isMissionCompleted && HeaderText(`${translatedBatteryLevel}: ${mission.robot.batteryLevel}%`)}
{!isMissionCompleted &&
mission.robot.pressureLevel &&
HeaderText(
`${translatedPressureLevel}: ${Math.round(mission.robot.pressureLevel * barToMillibar)}mBar`
)}
</InfoSection>
</HeaderSection>
)
}

function HeaderText(text: string) {
return (
<Typography variant="body_short" group="paragraph" color={tokens.colors.text.static_icons__secondary.hex}>
Expand Down Expand Up @@ -133,3 +90,53 @@ function StartUsedAndRemainingTime(mission: Mission): {
const usedTime: string = usedTimeInMinutes + ' ' + translatedMinutes
return { startTime, startDate, usedTime, remainingTime }
}

interface MissionHeaderProps {
mission: Mission
}

export function MissionHeader({ mission }: MissionHeaderProps) {
const { TranslateText } = useLanguageContext()
const barToMillibar = 1000
const isMissionCompleted = mission.endTime ? true : false

const translatedStartDate = TranslateText('Start date')
const translatedStartTime = TranslateText('Start time')
const translatedUsedTime = TranslateText('Time used')
const translatedEstimatedTimeRemaining = TranslateText('Estimated time remaining')
const translatedRobot = TranslateText('Robot')
const translatedBatteryLevel = TranslateText('Battery level')
const translatedPressureLevel = TranslateText('Pressure level')
const translatedDescription = TranslateText('Description')

const { startTime, startDate, usedTime, remainingTime } = StartUsedAndRemainingTime(mission)
const isMissionActive = mission.status === MissionStatus.Ongoing || mission.status === MissionStatus.Paused

return (
<HeaderSection>
<TitleSection>
<Typography variant="h1">{mission.name}</Typography>
{isMissionActive && <MissionControlButtons mission={mission} />}
{mission.isCompleted && <MissionRestartButton mission={mission} />}
</TitleSection>
<Typography variant="body_long" group="paragraph" color={tokens.colors.text.static_icons__secondary.hex}>
{mission.description && `${translatedDescription}: ${mission.description}`}
</Typography>
<StatusReason mission={mission}></StatusReason>
<InfoSection>
<MissionStatusDisplay status={mission.status} />
{HeaderText(`${translatedStartDate}: ${startDate}`)}
{HeaderText(`${translatedStartTime}: ${startTime}`)}
{HeaderText(`${translatedUsedTime}: ${usedTime}`)}
{!isMissionCompleted && HeaderText(`${translatedEstimatedTimeRemaining}: ${remainingTime}`)}
{HeaderText(`${translatedRobot}: ${mission.robot.name}`)}
{!isMissionCompleted && HeaderText(`${translatedBatteryLevel}: ${mission.robot.batteryLevel}%`)}
{!isMissionCompleted &&
mission.robot.pressureLevel &&
HeaderText(
`${translatedPressureLevel}: ${Math.round(mission.robot.pressureLevel * barToMillibar)}mBar`
)}
</InfoSection>
</HeaderSection>
)
}
Loading