Skip to content

Commit

Permalink
Front - improve spacing in timeline
Browse files Browse the repository at this point in the history
  • Loading branch information
@lwih
lwih committed Nov 16, 2023
1 parent 190e2ff commit 4cb2514
Show file tree
Hide file tree
Showing 3 changed files with 47 additions and 33 deletions.
31 changes: 21 additions & 10 deletions frontend/src/pam/mission/timeline/timeline-item-container.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,22 +8,33 @@ interface MissionTimelineItemContainerProps {
children: ReactNode
}

function createActionStyled(background?: string, border?: string, color?: string) {
type ItemOptions = {
backgroundColor?: string
borderColor?: string
color?: string
noMinHeight?: boolean
}

function createActionStyled(options: ItemOptions) {
return styled.div`
min-height: ${border ? '48px' : '52px'};
background: ${background || 'inherit'} 0% 0% no-repeat padding-box;
border: ${border ? `1px solid ${border}` : 'none'};
min-height: ${options.noMinHeight ? 0 : options.borderColor ? '48px' : '52px'};
background: ${options.backgroundColor || 'inherit'} 0% 0% no-repeat padding-box;
border: ${options.borderColor ? `1px solid ${options.borderColor}` : 'none'};
text-align: left;
letter-spacing: 0px;
`
}

const ActionControl = createActionStyled('#ffffff', '#cccfd6')
const ActionSurveillance = createActionStyled('#e5e5eb', '#cccfd6')
const ActionNote = createActionStyled('#d4dde7', '#cccfd6')
const ActionOther = createActionStyled('#d4e5f4', '#cccfd6')
const ActionStatus = createActionStyled(undefined, undefined, '#707785')
const ActionContact = createActionStyled(undefined, undefined, '#707785')
const ActionControl = createActionStyled({ backgroundColor: '#ffffff', borderColor: '#cccfd6' })
const ActionSurveillance = createActionStyled({ backgroundColor: '#e5e5eb', borderColor: '#cccfd6' })
const ActionNote = createActionStyled({ backgroundColor: '#d4dde7', borderColor: '#cccfd6' })
const ActionOther = createActionStyled({ backgroundColor: '#d4e5f4', borderColor: '#cccfd6' })
const ActionStatus = createActionStyled({
backgroundColor: undefined,
borderColor: undefined,
noMinHeight: true
})
const ActionContact = createActionStyled({ backgroundColor: undefined, borderColor: undefined, color: '#707785' })

const getActionComponent = (
actionSource: MissionSourceEnum,
Expand Down
45 changes: 24 additions & 21 deletions frontend/src/pam/mission/timeline/timeline-item.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@ const Wrapper: React.FC<{ action: Action; onClick: any; children: any; borderWhe
<FlexboxGrid
style={{
width: '100%',
padding: '1rem',
border: !!borderWhenSelected ? `3px solid ${THEME.color.blueGray}` : 'none',
cursor: 'pointer'
}}
Expand All @@ -50,7 +49,12 @@ const ActionEnvControl: React.FC<{ action: EnvAction | EnvActionControl; onClick
const { actionId } = useParams()
return (
<Wrapper action={action as EnvActionControl} onClick={onClick} borderWhenSelected={action.id === actionId}>
<FlexboxGrid.Item style={{ width: '100%' }}>
<FlexboxGrid.Item
style={{
width: '100%',
padding: '1rem'
}}
>
<Stack direction="row" spacing="0.5rem">
<Stack.Item alignSelf="flex-start">
<Icon.ControlUnit color={THEME.color.charcoal} size={20} />
Expand Down Expand Up @@ -95,11 +99,6 @@ const ActionEnvControl: React.FC<{ action: EnvAction | EnvActionControl; onClick
</b>
</Text>
</Stack.Item>
<Stack.Item>
<InfractionTag text="5 PV" />
&nbsp;
<InfractionTag text="2 NATINF" />
</Stack.Item>

<Stack.Item alignSelf="flex-start" style={{ width: '100%' }}>
<Stack direction="row" spacing="1rem" style={{ width: '100%' }}>
Expand All @@ -110,7 +109,11 @@ const ActionEnvControl: React.FC<{ action: EnvAction | EnvActionControl; onClick
amountOfControlsToComplete={(action as any as EnvActionControl)?.controlsToComplete?.length}
/>
) : (
<div />
<>
<InfractionTag text="5 PV" />
&nbsp;
<InfractionTag text="2 NATINF" />
</>
)}
</Stack.Item>
<Stack.Item alignSelf="flex-end" style={{ width: '30%' }}>
Expand All @@ -136,7 +139,7 @@ const ActionFishControl: React.FC<{ action: FishAction; onClick: any }> = ({ act
const { actionId } = useParams()
return (
<Wrapper action={action as FishAction} onClick={onClick} borderWhenSelected={action.id === actionId}>
<FlexboxGrid.Item style={{ width: '100%' }}>
<FlexboxGrid.Item style={{ width: '100%', padding: '1rem' }}>
<Stack direction="row" spacing="0.5rem">
<Stack.Item alignSelf="flex-start">
<Icon.ControlUnit color={THEME.color.charcoal} size={20} />
Expand All @@ -158,21 +161,21 @@ const ActionFishControl: React.FC<{ action: FishAction; onClick: any }> = ({ act
</Stack>
</Stack.Item>

<Stack.Item>
<InfractionTag text="3 PV" />
&nbsp;
<InfractionTag text="2 NATINF" />
</Stack.Item>

<Stack.Item alignSelf="flex-start" style={{ width: '100%' }}>
<Stack direction="row" spacing="1rem" style={{ width: '100%' }}>
<Stack.Item style={{ width: '70%' }}>
{(action as any as FishAction)?.controlsToComplete !== undefined &&
(action as any as FishAction)?.controlsToComplete?.length > 0 && (
<ControlsToCompleteTag
amountOfControlsToComplete={(action as any as FishAction)?.controlsToComplete?.length}
/>
)}
(action as any as FishAction)?.controlsToComplete?.length > 0 ? (
<ControlsToCompleteTag
amountOfControlsToComplete={(action as any as FishAction)?.controlsToComplete?.length}
/>
) : (
<>
<InfractionTag text="3 PV" />
&nbsp;
<InfractionTag text="2 NATINF" />
</>
)}
</Stack.Item>
<Stack.Item alignSelf="flex-end" style={{ width: '30%' }}>
<Stack direction="column" alignItems="flex-end">
Expand All @@ -197,7 +200,7 @@ const ActionNavControl: React.FC<{ action: Action; onClick: any }> = ({ action,
const { actionId } = useParams()
return (
<Wrapper action={action as FishAction} onClick={onClick} borderWhenSelected={action.id === actionId}>
<FlexboxGrid.Item style={{ width: '100%' }}>
<FlexboxGrid.Item style={{ width: '100%', padding: '1rem' }}>
<Stack direction="row" spacing="0.5rem">
<Stack.Item alignSelf="flex-start" style={{ paddingTop: '0.2rem' }}>
<Icon.ControlUnit color={THEME.color.charcoal} size={20} />
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/pam/mission/timeline/timeline.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const MissionTimeline: React.FC<MissionTimelineProps> = ({ mission, onSelectActi
<div>
<FlexboxGrid justify="space-between" align="middle" style={{ height: '100%' }}>
<FlexboxGrid.Item style={{ width: '100%' }}>
<Stack direction="column" spacing={'0.75rem'}>
<Stack direction="column" spacing={'1rem'}>
{mission.actions.map((action: Action) => {
if (!action.data) {
return <></>
Expand All @@ -30,7 +30,7 @@ const MissionTimeline: React.FC<MissionTimelineProps> = ({ mission, onSelectActi
style={{ width: '100%' }}
>
<Stack direction="row" spacing={'0.5rem'}>
<Stack.Item style={{ minWidth: '50px' }}>
<Stack.Item style={{ minWidth: '75px' }}>
<Stack direction="column">
<Stack.Item>
<Text as="h3" color={THEME.color.slateGray} weight="bold">
Expand Down

0 comments on commit 4cb2514

Please sign in to comment.