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

Jump to bottom

Add close button, fix layout, refactor #8755

Merged
merged 11 commits into from
Nov 14, 2024
Merged

Add close button, fix layout, refactor #8755

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
212400d
1-3088: add header
thomasheartman Nov 14, 2024
95a3353
1-3088: remove fill to make it easier to styel
thomasheartman Nov 14, 2024
7cb4b7a
1-3088: move headers into modal
thomasheartman Nov 14, 2024
bae8773
1-3088: remove headers from components
thomasheartman Nov 14, 2024
3333eda
1-3088: format headr rows differently
thomasheartman Nov 14, 2024
84b9113
1-3088: simplify component
thomasheartman Nov 14, 2024
8652e93
1-3088: fix activity layout
thomasheartman Nov 14, 2024
a6a0fae
1-3088: extract project health grid
thomasheartman Nov 14, 2024
026d30b
1-3088: move health grid sections into shared
thomasheartman Nov 14, 2024
c0937ce
1-3088: move grid allocation up to container
thomasheartman Nov 14, 2024
1ef2b80
1-3088: add close button
thomasheartman Nov 14, 2024
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/assets/icons/projectStatus.svg
View file
Open in desktop
Copy link
Contributor Author

Choose a reason for hiding this comment

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

The icon is still there, it just has no fill color by default. This is to make it easier to style.

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 0 additions & 8 deletions frontend/src/component/project/Project/ProjectStatus/ProjectActivity.tsx
View file
Open in desktop
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I've moved section headers up to the project status modal level, so they're easier to align and make sure they share the same styles etc.

I left the container in the first instance because without it we lose the scrolling when it overflows.

Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,9 @@ import { styled, Tooltip } from '@mui/material';
const StyledContainer = styled('div')(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
gap: theme.spacing(2),
}));

const TitleContainer = styled('h4')({
margin: 0,
width: '100%',
});

type Output = { date: string; count: number; level: number };

const ensureFullYearData = (data: Output[]): Output[] => {
Expand Down Expand Up @@ -93,7 +86,6 @@ export const ProjectActivity = () => {
<>
{data.activityCountByDate.length > 0 ? (
<StyledContainer>
<TitleContainer>Activity in project</TitleContainer>
<ActivityCalendar
theme={explicitTheme}
data={fullData}
Expand Down
13 changes: 3 additions & 10 deletions frontend/src/component/project/Project/ProjectStatus/ProjectHealth.tsx
View file
Open in desktop
Copy link
Contributor Author

Choose a reason for hiding this comment

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

We use the exact same container three places, so I extracted it.

Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,7 @@ import { Link } from 'react-router-dom';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { useProjectStatus } from 'hooks/api/getters/useProjectStatus/useProjectStatus';
import { useRequiredPathParam } from 'hooks/useRequiredPathParam';

const HealthContainer = styled('div')(({ theme }) => ({
backgroundColor: theme.palette.envAccordion.expanded,
padding: theme.spacing(3),
borderRadius: theme.shape.borderRadiusExtraLarge,
minWidth: '300px',
gridArea: 'health',
}));
import { HealthGridTile } from './ProjectHealthGrid.styles';

const TextContainer = styled('div')(({ theme }) => ({
display: 'flex',
Expand Down Expand Up @@ -63,7 +56,7 @@ export const ProjectHealth = () => {
: theme.palette.success.border;

return (
<HealthContainer>
<HealthGridTile>
<ChartRow>
<SVGWrapper>
<StyledSVG viewBox='0 0 100 100'>
Expand Down Expand Up @@ -111,6 +104,6 @@ export const ProjectHealth = () => {
)}
</TextContainer>
</ChartRow>
</HealthContainer>
</HealthGridTile>
);
};
7 changes: 7 additions & 0 deletions frontend/src/component/project/Project/ProjectStatus/ProjectHealthGrid.styles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { styled } from '@mui/material';

export const HealthGridTile = styled('article')(({ theme }) => ({
backgroundColor: theme.palette.envAccordion.expanded,
padding: theme.spacing(3),
borderRadius: theme.shape.borderRadiusExtraLarge,
}));
57 changes: 57 additions & 0 deletions frontend/src/component/project/Project/ProjectStatus/ProjectHealthGrid.tsx
View file
Open in desktop
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 used to be in ProjectStatusModal, but because of how involved it is, I'd rather treat it as "one widget" and extract it into its own file.

Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import { ProjectHealth } from './ProjectHealth';
import { styled } from '@mui/material';
import { StaleFlags } from './StaleFlags';
import { ProjectResources } from './ProjectResources';

const onNarrowGrid = (css: object) => ({
'@container (max-width: 650px)': css,
'@supports not (container-type: inline-size)': {
'@media (max-width: 712px)': css,
},
});

const HealthContainer = styled('div')({
containerType: 'inline-size',
});

const HealthGrid = styled('div')(({ theme }) => ({
display: 'grid',
gridTemplateAreas: `
"health resources"
"stale resources"
`,
gridTemplateColumns: 'repeat(2, minmax(300px, 1fr))',
gap: theme.spacing(1, 2),
...onNarrowGrid({
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(1),
}),
}));

const Tile = styled('div', {
shouldForwardProp: (prop) => prop !== 'gridArea',
})<{ gridArea: string }>(({ theme, gridArea }) => ({
gridArea,
'&>*': {
height: '100%',
},
}));

export const ProjectHealthGrid = () => {
return (
<HealthContainer>
<HealthGrid>
<Tile gridArea='health'>
<ProjectHealth />
</Tile>
<Tile gridArea='stale'>
<StaleFlags />
</Tile>
<Tile gridArea='resources'>
<ProjectResources />
</Tile>
</HealthGrid>
</HealthContainer>
);
};
Loading
Loading