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

chore: refactor model page styles and micro copy #324

Merged
merged 11 commits into from
Oct 3, 2024
Merged

chore: refactor model page styles and micro copy #324

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
579b039
chore: refactor model page styles and microcopy
o-jorgensen Sep 19, 2024
c4e1d79
Merge branch 'main' into chore/refactor-model-page-styles-and-microcopy
o-jorgensen Sep 19, 2024
edc7db0
Fix heading levels and nesting
o-jorgensen Sep 19, 2024
bcb53f4
Add custom styles for loading and error state on the model page
o-jorgensen Sep 19, 2024
4862aef
Add conditional rendering of metadata tables
o-jorgensen Sep 24, 2024
bf48b9a
Clean up model upload page
o-jorgensen Sep 24, 2024
471e84c
Fix alignment on upload page
o-jorgensen Sep 24, 2024
36d3aa4
Backtrack previously deleted validation rules in upload form
o-jorgensen Sep 30, 2024
b14fb35
Remove unused heading
o-jorgensen Sep 30, 2024
920bb6c
Remove uploading status from snackbar (replaced by static message) an…
o-jorgensen Sep 30, 2024
19b943e
chore: Small pr changes.
mheggelund Oct 3, 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
32 changes: 17 additions & 15 deletions src/components/AreaCoordinates/AreaCoordinates.styled.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,7 @@ import { theme } from '../../tokens/theme';

export const StyledDialog = styled(Dialog)`
width: fit-content;
max-width: 90vw;
max-height: 90vh;

@media (min-width: 700px) {
max-height: 90vh;
overflow-x: scroll;
}
`;

export const ContentSplitter = styled.div`
Expand All @@ -23,32 +17,41 @@ export const ContentSplitter = styled.div`
export const Selects = styled.div`
display: flex;
flex-direction: column;

row-gap: ${spacings.XXX_LARGE};

@media (min-width: 750px) {
min-width: 450px;
}
width: 28rem;
`;

export const CoordinateFields = styled.div`
display: flex;
flex-direction: column;

row-gap: ${spacings.LARGE};
`;

export const Content = styled(Dialog.CustomContent)`
display: flex;
flex-direction: column;
justify-content: start;

row-gap: ${spacings.SMALL};

.coordinate-errors {
padding: 0;
margin: 0 0 0 ${spacings.LARGE};

p,
li {
color: ${theme.light.danger.text};
}

li:has(p:empty) {
display: none;
}
}
`;

export const CoordinateGroup = styled.div`
display: flex;
flex-direction: column;
row-gap: 1rem;
`;

export const CoordinateInputs = styled.div`
Expand All @@ -60,14 +63,13 @@ export const CoordinateInputs = styled.div`
export const Warning = styled(Banner)`
div {
background-color: ${theme.light.info.warning};
max-width: 450px;
}
`;

export const Buttons = styled.div`
display: flex;
flex-direction: row;
column-gap: ${spacings.MEDIUM};
column-gap: ${spacings.SMALL};
`;

export { StyledDialog as Dialog };
4 changes: 2 additions & 2 deletions src/components/AreaCoordinates/AreaCoordinates.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -313,7 +313,7 @@ export const AreaCoordinates = ({
</Styled.CoordinateInputs>
</Styled.CoordinateGroup>
<Styled.CoordinateGroup>
<Typography variant="h6">Bottom Right Corner </Typography>
<Typography variant="h6">Bottom Right Corner</Typography>
<Styled.CoordinateInputs>
<CoordinateInput
label="X end"
Expand All @@ -340,7 +340,7 @@ export const AreaCoordinates = ({
{activeAreaResultList &&
activeAreaResultList?.length > 0 &&
edit && (
<Styled.Warning elevation="none">
<Styled.Warning>
<Banner.Message>
IMPORTANT - this model area has one or more results in
object or variogram cases. Changing the coordinates will
Expand Down
24 changes: 12 additions & 12 deletions src/components/AreaCoordinates/hooks/AreaCoordinates.hooks.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,29 +19,29 @@ export const validateCoordinates = async (
) => {
const errors: CoordinateErrorType = {};
if (!activeArea || activeArea.modelAreaTypeId === '') {
errors.area = 'Model area needs to be selected';
errors.area = 'You must select a model area';
}

if (area && area.coordinates[0].x === area.coordinates[1].x) {
errors.x0 = 'X coordinates can´t be equal.';
errors.x0 = "X start/end coordinates can't be equal.";
}
if (area && area.coordinates[0].y === area.coordinates[1].y) {
errors.y0 = 'Y coordinates can´t be equal.';
errors.y0 = "Y start/end coordinates can't be equal.";
}
if (area && NotANumber(area.coordinates[0].x)) {
errors.x0 = 'Coordinates can´t be string, just numbers are allowed.';
errors.x0 = 'Coordinates must be a number';
}
if (area && NotANumber(area.coordinates[0].y)) {
errors.y0 = 'Coordinates can´t be string, just numbers are allowed.';
errors.y0 = 'Coordinates must be a number';
}
if (area && NotANumber(area.coordinates[1].x)) {
errors.x1 = 'Coordinates can´t be string, just numbers are allowed.';
errors.x1 = 'Coordinates must be a number';
}
if (area && NotANumber(area.coordinates[1].y)) {
errors.y1 = 'Coordinates can´t be string, just numbers are allowed.';
errors.y1 = 'Coordinates must be a number';
}
if (area && area.coordinates[1].x === 0) {
errors.x1 = 'Bottom right corner can not be 0.';
errors.x1 = 'Bottom right corner must be greater than 0';
}

if (
Expand All @@ -51,7 +51,7 @@ export const validateCoordinates = async (
// @ts-expect-error Autocomplete
area.coordinates[0].x === '')
) {
errors.x0 = 'All fields must be filled in';
errors.x0 = 'You must enter all four coordinates';
}

if (
Expand All @@ -61,7 +61,7 @@ export const validateCoordinates = async (
// @ts-expect-error Autocomplete
area.coordinates[0].y === '')
) {
errors.y0 = 'All fields must be filled in';
errors.y0 = 'You must enter all four coordinates';
}

if (
Expand All @@ -71,7 +71,7 @@ export const validateCoordinates = async (
// @ts-expect-error Autocomplete
area.coordinates[1].x === '')
) {
errors.x1 = 'All fields must be filled in';
errors.x1 = 'You must enter all four coordinates';
}

if (
Expand All @@ -81,7 +81,7 @@ export const validateCoordinates = async (
// @ts-expect-error Autocomplete
area.coordinates[1].y === '')
) {
errors.y1 = 'All fields must be filled in';
errors.y1 = 'You must enter all four coordinates';
}

return errors;
Expand Down
17 changes: 0 additions & 17 deletions src/components/ErrorBanner/ErrorBanner.styled.tsx
View file
Open in desktop

This file was deleted.

12 changes: 0 additions & 12 deletions src/components/ErrorBanner/ErrorBanner.tsx
View file
Open in desktop

This file was deleted.

39 changes: 30 additions & 9 deletions src/components/ErrorMessage/ErrorMessage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,38 @@
import { Typography } from '@equinor/eds-core-react';
import { CoordinateErrorType } from '../AreaCoordinates/hooks/AreaCoordinates.hooks';

export const ErrorMessage = ({ errors }: { errors: CoordinateErrorType }) => {
return (
<>
{errors && (
<div>
{' '}
<p>{errors.area}</p>
<p>{errors.x0}</p>
<p>{errors.y0}</p>
<p>{errors.x1}</p>
<p>{errors.y1}</p>
</div>
{/* Only render the <ul> wrapper if there are one or more errors */}
{Object.values(errors).some((error) => !!error) && (
<ul className="coordinate-errors">
<li>
<Typography group="input" variant="helper">
{errors.area}
</Typography>
</li>
<li>
<Typography group="input" variant="helper">
{errors.x0}
</Typography>
</li>
<li>
<Typography group="input" variant="helper">
{errors.y0}
</Typography>
</li>
<li>
<Typography group="input" variant="helper">
{errors.x1}
</Typography>
</li>
<li>
<Typography group="input" variant="helper">
{errors.y1}
</Typography>
</li>
</ul>
)}
</>
);
Expand Down
14 changes: 6 additions & 8 deletions ...ositionEnviroment/GrossDepositionEnviromentGroup/GrossDepositionEnviromentGroup.styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,14 @@ import { spacings } from '../../../tokens/spacings';
export const Wrapper = styled.div`
display: flex;
flex-direction: column;

row-gap: ${spacings.MEDIUM};
`;

export const ArcElCell = styled.div`
display: flex;
flex-direction: row;
white-space: nowrap;
th,
td {
white-space: nowrap;
}

> p {
padding-right: ${spacings.X_SMALL};
ul {
padding-inline: ${spacings.MEDIUM} 0;
}
`;
94 changes: 46 additions & 48 deletions ...ossDepositionEnviroment/GrossDepositionEnviromentGroup/GrossDepositionEnviromentGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,57 +106,55 @@ export const GrossDepositionEnviromentGroup = ({
return (
<>
<Styled.Wrapper>
<Typography variant="h3">Gross Depositional Environment</Typography>
<Table>
<Table.Head>
<Table.Row>
<Table.Cell></Table.Cell>
<Table.Cell>Gross Depositional Environment (GDE)</Table.Cell>
<Table.Cell>Depositional Environment</Table.Cell>
<Table.Cell>Subenvironment</Table.Cell>
<Table.Cell>Architectural Element</Table.Cell>
</Table.Row>
</Table.Head>

<Table.Body>
{gdeGroups.map((row) => (
<Table.Row key={row.geologicalGroupId}>
<Table.Cell>
<Button
variant="ghost_icon"
onClick={() => deleteGdeRow(row.geologicalGroupId)}
>
<Icon
data={deleteIcon}
title={'Delete gross deposition enviroment row'}
/>
</Button>
</Table.Cell>
<Table.Cell>
<Styled.ArcElCell>
{row.grossDepEnv.identifier}
</Styled.ArcElCell>
</Table.Cell>
<Table.Cell>
<Styled.ArcElCell>{row.depEnv.identifier}</Styled.ArcElCell>
</Table.Cell>
<Table.Cell>
<Styled.ArcElCell>{row.subenv.identifier}</Styled.ArcElCell>
</Table.Cell>
<Table.Cell>
<Styled.ArcElCell>
{row.architecturalElements.map((a) => (
<p key={a.geologicalStandardId}>{a.identifier},</p>
))}
</Styled.ArcElCell>
</Table.Cell>
<Typography variant="h4" as="h3">
Gross Depositional Environment (GDE)
</Typography>
{gdeGroups.length > 0 && (
<Table>
<Table.Head>
<Table.Row>
<Table.Cell></Table.Cell>
<Table.Cell>GDE</Table.Cell>
<Table.Cell>Depositional environment</Table.Cell>
<Table.Cell>Subenvironment</Table.Cell>
<Table.Cell>Architectural element</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table>
</Table.Head>

<Table.Body>
{gdeGroups.map((row) => (
<Table.Row key={row.geologicalGroupId}>
<Table.Cell>
<Button
variant="ghost_icon"
onClick={() => deleteGdeRow(row.geologicalGroupId)}
>
<Icon
data={deleteIcon}
title={'Delete gross deposition enviroment row'}
/>
</Button>
</Table.Cell>
<Table.Cell>{row.grossDepEnv.identifier}</Table.Cell>
<Table.Cell>{row.depEnv.identifier}</Table.Cell>
<Table.Cell>{row.subenv.identifier}</Table.Cell>
<Table.Cell>
{row.architecturalElements.length > 0 && (
<ul>
{row.architecturalElements.map((a) => (
<li key={a.geologicalStandardId}>{a.identifier}</li>
))}
</ul>
)}
</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table>
)}
<div>
<Button variant="outlined" onClick={handleGdeDialog}>
Add Row
Add GDE…
</Button>
</div>
</Styled.Wrapper>
Expand Down
Loading