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

Redesign control buttons #1986

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
+92 −94
Open

Redesign control buttons #1986

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
343ec2b
Replace 'stop' with more descriptive 'next' button
Eddasol Jan 28, 2025
46e0ea3
Update next dialog to say 'skip' instead of 'stop'
Eddasol Jan 28, 2025
d38c679
Fix nested errors
Eddasol Jan 28, 2025
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
98 changes: 45 additions & 53 deletions frontend/src/components/Displays/MissionButtons/MissionControlButtons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
import { MissionStatus } from 'models/Mission'
import { Button, CircularProgress, Icon } from '@equinor/eds-core-react'
import { Icons } from 'utils/icons'
import { tokens } from '@equinor/eds-tokens'
import styled from 'styled-components'
import { Typography } from '@equinor/eds-core-react'
import { useLanguageContext } from 'components/Contexts/LanguageContext'
import { useMissionControlContext } from 'components/Contexts/MissionControlContext'
import { StopMissionDialog, MissionStatusRequest } from 'components/Pages/FrontPage/MissionOverview/StopDialogs'
import { SkipMissionDialog, MissionStatusRequest } from 'components/Pages/FrontPage/MissionOverview/StopDialogs'
import { TaskType } from 'models/Task'
import { useState } from 'react'

Expand All @@ -24,15 +23,24 @@ interface MissionProps {
}

const ButtonStyle = styled.div`
display: grid;
grid-template-columns: 45px 45px;
margin-end: 20px;
display: flex;
height: 56px;
align-items: flex-start;
gap: 16px;
`
const ButtonText = styled.div`
display: flex;
flex-direction: column;
align-items: center;
`
const ButtonIcon = styled(Button)`
display: flex;
width: 35px;
height: 35px;
justify-content: center;
align-items: center;
gap: 8px;
`

export const MissionControlButtons = ({
missionName,
Expand Down Expand Up @@ -72,42 +80,34 @@ const OngoingMissionButton = ({ missionName, robotId, missionTaskType }: Mission
const { TranslateText } = useLanguageContext()
const { updateRobotMissionState } = useMissionControlContext()
const [isDialogOpen, setIsDialogOpen] = useState(false)
const toggleStopMissionDialog = () => {
const toggleSkipMissionDialog = () => {
setIsDialogOpen(!isDialogOpen)
}

return (
<ButtonStyle>
<ButtonText>
<Button variant="ghost_icon" onClick={toggleStopMissionDialog}>
<Icon
name={Icons.StopButton}
style={{ color: tokens.colors.interactive.secondary__resting.rgba }}
size={40}
/>
</Button>
<ButtonIcon
variant="contained_icon"
onClick={() => updateRobotMissionState(MissionStatusRequest.Pause, robotId)}
>
<Icon name={Icons.PauseStandard} size={24} />
</ButtonIcon>
<Typography variant="caption">{TranslateText('Pause')}</Typography>
</ButtonText>
<ButtonText>
<ButtonIcon variant="contained_icon" onClick={toggleSkipMissionDialog}>
<Icon name={Icons.Next} size={24} />
</ButtonIcon>
<Typography variant="caption">{TranslateText('Stop')}</Typography>
<StopMissionDialog
<SkipMissionDialog
missionName={missionName}
robotId={robotId}
missionTaskType={missionTaskType}
isStopMissionDialogOpen={isDialogOpen}
toggleDialog={toggleStopMissionDialog}
isSkipMissionDialogOpen={isDialogOpen}
toggleDialog={toggleSkipMissionDialog}
/>
</ButtonText>
<ButtonText>
<Button
variant="ghost_icon"
onClick={() => updateRobotMissionState(MissionStatusRequest.Pause, robotId)}
>
<Icon
name={Icons.PauseButton}
style={{ color: tokens.colors.interactive.secondary__resting.hex }}
size={40}
/>
</Button>
<Typography variant="caption">{TranslateText('Pause')}</Typography>
</ButtonText>
</ButtonStyle>
)
}
Expand All @@ -116,42 +116,34 @@ const PausedMissionButton = ({ missionName, robotId, missionTaskType }: MissionP
const { TranslateText } = useLanguageContext()
const { updateRobotMissionState } = useMissionControlContext()
const [isDialogOpen, setIsDialogOpen] = useState(false)
const toggleStopMissionDialog = () => {
const toggleSkipMissionDialog = () => {
setIsDialogOpen(!isDialogOpen)
}

return (
<ButtonStyle>
<ButtonText>
<Button variant="ghost_icon" onClick={toggleStopMissionDialog}>
<Icon
name={Icons.StopButton}
style={{ color: tokens.colors.interactive.secondary__resting.rgba }}
size={40}
/>
</Button>
<ButtonIcon
variant="contained_icon"
onClick={() => updateRobotMissionState(MissionStatusRequest.Resume, robotId)}
>
<Icon name={Icons.PlayStandard} size={24} />
</ButtonIcon>
<Typography variant="caption">{TranslateText('Start')}</Typography>
</ButtonText>
<ButtonText>
<ButtonIcon variant="contained_icon" onClick={toggleSkipMissionDialog}>
<Icon name={Icons.Next} size={24} />
</ButtonIcon>
<Typography variant="caption">{TranslateText('Stop')}</Typography>
<StopMissionDialog
<SkipMissionDialog
missionName={missionName}
robotId={robotId}
missionTaskType={missionTaskType}
isStopMissionDialogOpen={isDialogOpen}
toggleDialog={toggleStopMissionDialog}
isSkipMissionDialogOpen={isDialogOpen}
toggleDialog={toggleSkipMissionDialog}
/>
</ButtonText>
<ButtonText>
<Button
variant="ghost_icon"
onClick={() => updateRobotMissionState(MissionStatusRequest.Resume, robotId)}
>
<Icon
name={Icons.PlayButton}
style={{ color: tokens.colors.interactive.secondary__resting.hex }}
size={40}
/>
</Button>
<Typography variant="caption">{TranslateText('Start')}</Typography>
</ButtonText>
</ButtonStyle>
)
}
28 changes: 14 additions & 14 deletions frontend/src/components/Pages/FrontPage/MissionOverview/StopDialogs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,63 +56,63 @@ const DialogContent = ({ missionTaskType }: { missionTaskType: TaskType | undefi
return (
<StyledText>
<Typography variant="body_long">
{TranslateText('Stop button pressed during localization warning text')}
{TranslateText('Skip button pressed during localization warning text')}
</Typography>
<Typography variant="body_long">
{TranslateText('Stop button pressed confirmation text')}
{TranslateText('Skip button pressed confirmation text')}
</Typography>
</StyledText>
)
case TaskType.ReturnHome:
return (
<StyledText>
<Typography variant="body_long">
{TranslateText('Stop button pressed during return home warning text')}
{TranslateText('Skip button pressed during return home warning text')}
</Typography>
<Typography variant="body_long">
{TranslateText('Stop button pressed confirmation text')}
{TranslateText('Skip button pressed confirmation text')}
</Typography>
</StyledText>
)
case TaskType.Inspection:
return (
<StyledText>
<Typography variant="body_long">{TranslateText('Stop button pressed warning text')}</Typography>
<Typography variant="body_long">{TranslateText('Skip button pressed warning text')}</Typography>
<Typography variant="body_long">
{TranslateText('Stop button pressed confirmation text')}
{TranslateText('Skip button pressed confirmation text')}
</Typography>
</StyledText>
)
default:
return (
<StyledText>
<Typography variant="body_long">
{TranslateText('Stop button pressed with no tasktype warning text')}
{TranslateText('Skip button pressed with no tasktype warning text')}
</Typography>
<Typography variant="body_long">
{TranslateText('Stop button pressed with no mission confirmation text')}
{TranslateText('Skip button pressed with no mission confirmation text')}
</Typography>
</StyledText>
)
}
}

export const StopMissionDialog = ({
export const SkipMissionDialog = ({
missionName,
robotId,
missionTaskType,
isStopMissionDialogOpen,
isSkipMissionDialogOpen,
toggleDialog,
}: MissionProps & { isStopMissionDialogOpen: boolean; toggleDialog: () => void }): JSX.Element => {
}: MissionProps & { isSkipMissionDialogOpen: boolean; toggleDialog: () => void }): JSX.Element => {
const { TranslateText } = useLanguageContext()
const { updateRobotMissionState } = useMissionControlContext()

return (
<StyledDialog open={isStopMissionDialogOpen} isDismissable>
<StyledDialog open={isSkipMissionDialogOpen} isDismissable>
<Dialog.Header>
<Dialog.Title>
<Typography variant="h5">
{missionName ? TranslateText('Stop mission:') : TranslateText('No mission running')}{' '}
{missionName ? TranslateText('Skip mission:') : TranslateText('No mission running')}{' '}
{missionName}
</Typography>
</Dialog.Title>
Expand All @@ -130,7 +130,7 @@ export const StopMissionDialog = ({
color="danger"
onClick={() => updateRobotMissionState(MissionStatusRequest.Stop, robotId)}
>
{TranslateText('Stop mission')}
{TranslateText('Skip mission')}
</Button>
</StyledDisplayButtons>
</Dialog.Actions>
Expand Down
20 changes: 10 additions & 10 deletions frontend/src/components/Pages/RobotPage/RobotPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import { VideoStreamWindow } from '../MissionPage/VideoStream/VideoStreamWindow'
import { MoveRobotArmSection } from './RobotArmMovement'
import { Icons } from 'utils/icons'
import { tokens } from '@equinor/eds-tokens'
import { StopMissionDialog } from '../FrontPage/MissionOverview/StopDialogs'
import { SkipMissionDialog } from '../FrontPage/MissionOverview/StopDialogs'
import { TaskType } from 'models/Task'
import { useMissionsContext } from 'components/Contexts/MissionRunsContext'
import { ReturnHomeButton } from './ReturnHomeButton'
Expand Down Expand Up @@ -67,7 +67,7 @@ export const RobotPage = () => {
const selectedRobot = enabledRobots.find((robot) => robot.id === robotId)

const [isDialogOpen, setIsDialogOpen] = useState(false)
const toggleStopMissionDialog = () => {
const toggleSkipMissionDialog = () => {
setIsDialogOpen(!isDialogOpen)
}

Expand Down Expand Up @@ -137,7 +137,7 @@ export const RobotPage = () => {
<StyledTextButton
variant="contained"
onClick={() => {
toggleStopMissionDialog()
toggleSkipMissionDialog()
}}
>
<Icon
Expand All @@ -146,14 +146,14 @@ export const RobotPage = () => {
size={24}
/>
{TranslateText('Stop')} {selectedRobot.name}
<StopMissionDialog
missionName={mission?.name}
robotId={selectedRobot.id}
missionTaskType={missionTaskType}
isStopMissionDialogOpen={isDialogOpen}
toggleDialog={toggleStopMissionDialog}
/>
</StyledTextButton>
<SkipMissionDialog
missionName={mission?.name}
robotId={selectedRobot.id}
missionTaskType={missionTaskType}
isSkipMissionDialogOpen={isDialogOpen}
toggleDialog={toggleSkipMissionDialog}
/>
{selectedRobot && <ReturnHomeButton robot={selectedRobot} />}

{selectedRobot.model.type === RobotType.TaurobInspector && (
Expand Down
16 changes: 8 additions & 8 deletions frontend/src/language/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,10 +81,10 @@
"East": "East",
"South": "South",
"West": "West",
"Stop button pressed warning text": "You are about to stop the entire mission. If there are no more missions in the queue, the robot will return to the start position.",
"Stop button pressed confirmation text": "Are you sure you want to stop the mission?",
"Stop mission": "Stop mission",
"Stop mission:": "Stop mission: ",
"Skip button pressed warning text": "You are about to skip the entire mission. If there are no more missions in the queue, the robot will return to the start position.",
"Skip button pressed confirmation text": "Are you sure you want to skip the mission?",
"Skip mission": "Skip mission",
"Skip mission:": "Skip mission: ",
"Search for missions": "Search for missions",
"Search for a tag": "Search for a tag",
"Search for a robot name": "Search for a robot name",
Expand Down Expand Up @@ -219,9 +219,9 @@
"Dock": "Dock",
"Dock successful text": "The robots are docked and will not run missions. To continue the mission press the 'Dismiss from dock' button.",
"Connection Issues": "Connection Issues",
"Stop button pressed during return home warning text": "You are about to stop a mission that will send the robot back to the start position. You must manually drive the robot to the start position to start a new mission.",
"Skip button pressed during return home warning text": "You are about to skip a mission that will send the robot back to the start position. You must manually drive the robot to the start position to start a new mission.",
"Failed Telemetry": "Failed Telemetry",
"Stop button pressed during localization warning text": "You are about to stop a mission that localizes the robot. You will not be able to run an inspection mission until you have successfully localized the robot.",
"Skip button pressed during localization warning text": "You are about to skip a mission that localizes the robot. You will not be able to run an inspection mission until you have successfully localized the robot.",
"HighHigh": "HighHigh",
"High": "High",
"Ok": "Ok",
Expand Down Expand Up @@ -264,9 +264,9 @@
"Open mission": "Open mission",
"Open robot information": "Open robot information",
"Not available": "Not available",
"Stop button pressed with no tasktype warning text": "A stop command was recieved with no ongoing tasks.",
"Skip button pressed with no tasktype warning text": "A skip command was recieved with no ongoing tasks.",
"No mission running": "No Flotilla mission is running",
"Stop button pressed with no mission confirmation text": "Do you want to send the stop command to the robot regardless?",
"Skip button pressed with no mission confirmation text": "Do you want to send the command to stop current mission to the robot regardless?",
"Tag": "Tag",
"Timestamp": "Timestamp",
"Last completed inspection": "Last completed inspection",
Expand Down
16 changes: 8 additions & 8 deletions frontend/src/language/no.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,10 +81,10 @@
"East": "Øst",
"South": "Sør",
"West": "Vest",
"Stop button pressed warning text": "Du er i ferd med å stoppe hele oppdraget. Hvis det ikke er flere oppdrag i kø vil roboten bli sendt tilbake til startposisjonen sin.",
"Stop button pressed confirmation text": "Er du sikker på at du vil stoppe oppdraget?",
"Stop mission": "Stopp oppdraget",
"Stop mission:": "Stopp oppdrag: ",
"Skip button pressed warning text": "Du er i ferd med å hoppe over hele oppdraget. Hvis det ikke er flere oppdrag i kø vil roboten bli sendt tilbake til startposisjonen sin.",
"Skip button pressed confirmation text": "Er du sikker på at du vil hoppe over oppdraget?",
"Skip mission": "Hopp over oppdraget",
"Skip mission:": "Hopp over oppdrag: ",
"Search for missions": "Søk etter oppdrag",
"Search for a tag": "Søk etter tag",
"Search for a robot name": "Søk etter robotnavn",
Expand Down Expand Up @@ -219,9 +219,9 @@
"Dock": "Ladestasjon",
"Dock successful text": "Robotene er i ladestasjonen og vil ikke kjøre oppdrag. For å fortsette oppdrag trykk på knappen 'Slipp robotene ut fra ladestasjon'.",
"Connection Issues": "Tilkoblings\u00adproblemer",
"Stop button pressed during return home warning text": "Du er i ferd med å stoppe et oppdrag som sender roboten tilbake til startposisjonen. Du må kjøre roboten manuelt til startposisjonen for å starte et nytt oppdrag.",
"Skip button pressed during return home warning text": "Du er i ferd med å hoppe over et oppdrag som sender roboten tilbake til startposisjonen. Du må kjøre roboten manuelt til startposisjonen for å starte et nytt oppdrag.",
"Failed Telemetry": "Mislykket telemetri",
"Stop button pressed during localization warning text": "Du er i ferd med å stoppe et oppdrag som lokaliserer roboten. Du vil ikke kunne kjøre et inspeksjonsoppdrag før du har lokalisert roboten.",
"Skip button pressed during localization warning text": "Du er i ferd med å hoppe over et oppdrag som lokaliserer roboten. Du vil ikke kunne kjøre et inspeksjonsoppdrag før du har lokalisert roboten.",
"HighHigh": "HøyHøy",
"High": "Høy",
"Ok": "Ok",
Expand Down Expand Up @@ -265,8 +265,8 @@
"Open robot information": "Åpne robotinformasjon",
"Not available": "Ikke tilgjengelig",
"No mission running": "Ingen pågående Flotilla oppdrag",
"Stop button pressed with no tasktype warning text": "Et stopp signal ble mottat uten noen pågående oppdrag.",
"Stop button pressed with no mission confirmation text": "Ønsker du å sende stopp signalet til roboten likevel?",
"Skip button pressed with no tasktype warning text": "Et signal om å hoppe over oppdraget ble mottat uten noen pågående oppdrag.",
"Skip button pressed with no mission confirmation text": "Ønsker du å sende signalet om å stoppe nåværende oppdrag til roboten likevel?",
"Tag": "Tag",
"Timestamp": "Tidspunkt",
"Last completed inspection": "Siste gjennomførte inspeksjon",
Expand Down
Loading