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

Fix overflow and line break style on robot button cards #1698

Merged
merged 1 commit into from
Jul 30, 2024
Merged

Fix overflow and line break style on robot button cards #1698

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion frontend/src/components/Displays/RobotDisplays/BatteryStatusDisplay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { Icons } from 'utils/icons'

const BatteryAlignment = styled.div`
display: flex;
align-items: end;
align-items: center;
`

const StyledTypography = styled(Typography)<{ $fontSize?: 24 | 16 | 18 | 32 | 40 | 48 }>`
Expand Down
3 changes: 1 addition & 2 deletions frontend/src/components/Displays/RobotDisplays/PressureStatusDisplay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,8 @@ import { PressureStatus } from 'models/Pressure'
const PressureAlignment = styled.div`
display: flex;
gap: 7px;
align-items: end;
align-items: center;
`

const StyledTypography = styled(Typography)<{ $fontSize?: 24 | 16 | 18 | 32 | 40 | 48 }>`
font-size: ${(props) => props.$fontSize};
`
Expand Down
13 changes: 11 additions & 2 deletions frontend/src/components/Displays/RobotDisplays/RobotStatusIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,21 @@ interface StatusProps {
const StyledStatus = styled.div`
display: flex;
flex-direction: row;
align-items: end;
align-items: center;
gap: 2px;
`

const LongTypography = styled(Typography)`
overflow: visible;
white-space: normal;
text-overflow: unset;
word-break: break-word;
hyphens: auto;
`

const StyledIcon = styled(Icon)`
width: 24px;
min-width: 24px;
height: 24px;
`

Expand Down Expand Up @@ -69,7 +78,7 @@ export const RobotStatusChip = ({ status, flotillaStatus, isarConnected }: Statu
return (
<StyledStatus>
<StyledIcon name={statusIcon} style={{ color: iconColor }} />
<Typography variant="body_short">{TranslateText(status)}</Typography>
<LongTypography variant="body_short">{TranslateText(status)}</LongTypography>
</StyledStatus>
)
}
6 changes: 4 additions & 2 deletions frontend/src/components/Pages/FrontPage/RobotCards/RobotStatusCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,13 +39,15 @@ const ButtonCard = styled.div`
background-color: ${tokens.colors.ui.background__light.hex};
padding: 10px;
border-radius: 0px 0px 6px 6px;
height: 100%;
`
const HorizontalContent = styled.div`
display: flex;
flex-direction: row;
align-content: end;
align-items: end;
align-content: start;
align-items: start;
justify-content: space-between;
gap: 4px;
padding-top: 2px;
`
const VerticalContent = styled.div`
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/language/no.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,7 +228,7 @@
"INFO": "INFO",
"Safe Zone": "Trygg sone",
"Safe Zone successful text": "Robotene er i sikker sone og vil ikke kjøre oppdrag. For å fortsette oppdrag trykk på knappen 'Trygt å fortsette oppdrag'.",
"Connection Issues": "Tilkoblingsproblemer",
"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.",
"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.",
Expand Down
Loading