From 579b039ec55d1ec9a5615c2829dacdb7e0f17915 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=98rjan=20Aare=20J=C3=B8rgensen?= Date: Thu, 19 Sep 2024 12:46:17 +0200 Subject: [PATCH] chore: refactor model page styles and microcopy --- .../AreaCoordinates.styled.tsx | 32 ++--- .../AreaCoordinates/AreaCoordinates.tsx | 4 +- .../hooks/AreaCoordinates.hooks.ts | 24 ++-- .../ErrorBanner/ErrorBanner.styled.tsx | 17 --- src/components/ErrorBanner/ErrorBanner.tsx | 12 -- src/components/ErrorMessage/ErrorMessage.tsx | 39 +++++-- .../GrossDepositionEnviromentGroup.styled.ts | 14 +-- .../GrossDepositionEnviromentGroup.tsx | 38 +++--- .../OutcropAnalogueGroup.tsx | 100 ++++++++-------- .../StratigrapicGroups.styled.ts | 11 +- .../StratigrapicGroups/StratigrapicGroups.tsx | 10 +- .../SettingSelect.styled.tsx | 3 +- src/features/Footer/Footer.styled.tsx | 1 + .../HandleModelComponent.tsx | 28 ----- .../ModelMetadata/ModelMetadata.styled.ts | 11 +- .../ModelMetadata/ModelMetadata.tsx | 10 +- .../ModelMetadataComponent.test.tsx | 8 +- .../EditNameDescription.styled.ts | 3 +- .../EditNameDescription.tsx | 36 +----- .../ModelAreaCoordinates.tsx | 2 +- .../ModelFilesView/ModelFilesView.styled.tsx | 5 +- .../ModelFilesView/ModelFilesView.tsx | 8 +- .../ModelMetadataView.styled.tsx | 21 ++-- .../ModelMetadataView/ModelMetadataView.tsx | 110 +++++++++--------- .../ModelNameFrame/ModelNameFrame.styled.tsx | 10 +- .../ModelNameFrame/ModelNameFrame.tsx | 7 +- src/features/ModelView/ModelView.styled.tsx | 18 +-- src/features/ModelView/ModelView.tsx | 17 +-- src/pages/ModelPages/Model/Model.styled.tsx | 19 +-- src/tokens/theme.ts | 5 + 30 files changed, 261 insertions(+), 362 deletions(-) delete mode 100644 src/components/ErrorBanner/ErrorBanner.styled.tsx delete mode 100644 src/components/ErrorBanner/ErrorBanner.tsx diff --git a/src/components/AreaCoordinates/AreaCoordinates.styled.tsx b/src/components/AreaCoordinates/AreaCoordinates.styled.tsx index eb8c1e20..e580d550 100644 --- a/src/components/AreaCoordinates/AreaCoordinates.styled.tsx +++ b/src/components/AreaCoordinates/AreaCoordinates.styled.tsx @@ -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` @@ -23,18 +17,13 @@ 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}; `; @@ -42,13 +31,27 @@ 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` @@ -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 }; diff --git a/src/components/AreaCoordinates/AreaCoordinates.tsx b/src/components/AreaCoordinates/AreaCoordinates.tsx index bc241b29..e1dcad20 100644 --- a/src/components/AreaCoordinates/AreaCoordinates.tsx +++ b/src/components/AreaCoordinates/AreaCoordinates.tsx @@ -313,7 +313,7 @@ export const AreaCoordinates = ({ - Bottom Right Corner + Bottom Right Corner 0 && edit && ( - + IMPORTANT - this model area has one or more results in object or variogram cases. Changing the coordinates will diff --git a/src/components/AreaCoordinates/hooks/AreaCoordinates.hooks.ts b/src/components/AreaCoordinates/hooks/AreaCoordinates.hooks.ts index 0118310a..71039b4a 100644 --- a/src/components/AreaCoordinates/hooks/AreaCoordinates.hooks.ts +++ b/src/components/AreaCoordinates/hooks/AreaCoordinates.hooks.ts @@ -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 ( @@ -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 ( @@ -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 ( @@ -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 ( @@ -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; diff --git a/src/components/ErrorBanner/ErrorBanner.styled.tsx b/src/components/ErrorBanner/ErrorBanner.styled.tsx deleted file mode 100644 index bfaf06e2..00000000 --- a/src/components/ErrorBanner/ErrorBanner.styled.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { Banner } from '@equinor/eds-core-react'; -import styled from 'styled-components'; -import { spacings } from '../../tokens/spacings'; - -export const Error = styled(Banner)` - max-width: 650px; - box-shadow: none; - hr { - height: 0px; - } - - div { - background-color: #ffaebf; - border: solid 1px #c7264c; - border-radius: ${spacings.BORDER_ROUNDED}; - } -`; diff --git a/src/components/ErrorBanner/ErrorBanner.tsx b/src/components/ErrorBanner/ErrorBanner.tsx deleted file mode 100644 index 7a19de3e..00000000 --- a/src/components/ErrorBanner/ErrorBanner.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { Banner } from '@equinor/eds-core-react'; -import * as Styled from './ErrorBanner.styled'; - -export const ErrorBanner = ({ text }: { text: string | undefined }) => { - return ( - - - {text !== undefined ? text : ''} - - - ); -}; diff --git a/src/components/ErrorMessage/ErrorMessage.tsx b/src/components/ErrorMessage/ErrorMessage.tsx index c87e39c1..61693990 100644 --- a/src/components/ErrorMessage/ErrorMessage.tsx +++ b/src/components/ErrorMessage/ErrorMessage.tsx @@ -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 && ( -
- {' '} -

{errors.area}

-

{errors.x0}

-

{errors.y0}

-

{errors.x1}

-

{errors.y1}

-
+ {/* Only render the
    wrapper if there are one or more errors */} + {Object.values(errors).some((error) => !!error) && ( +
      +
    • + + {errors.area} + +
      • +
    • + + {errors.x0} + +
      • +
    • + + {errors.y0} + +
      • +
    • + + {errors.x1} + +
      • +
    • + + {errors.y1} + +
      • +
    )} ); diff --git a/src/components/GrossDepositionEnviroment/GrossDepositionEnviromentGroup/GrossDepositionEnviromentGroup.styled.ts b/src/components/GrossDepositionEnviroment/GrossDepositionEnviromentGroup/GrossDepositionEnviromentGroup.styled.ts index 484f1c6b..fb97ddd8 100644 --- a/src/components/GrossDepositionEnviroment/GrossDepositionEnviromentGroup/GrossDepositionEnviromentGroup.styled.ts +++ b/src/components/GrossDepositionEnviroment/GrossDepositionEnviromentGroup/GrossDepositionEnviromentGroup.styled.ts @@ -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; } `; diff --git a/src/components/GrossDepositionEnviroment/GrossDepositionEnviromentGroup/GrossDepositionEnviromentGroup.tsx b/src/components/GrossDepositionEnviroment/GrossDepositionEnviromentGroup/GrossDepositionEnviromentGroup.tsx index 16a8ab24..26e446ca 100644 --- a/src/components/GrossDepositionEnviroment/GrossDepositionEnviromentGroup/GrossDepositionEnviromentGroup.tsx +++ b/src/components/GrossDepositionEnviroment/GrossDepositionEnviromentGroup/GrossDepositionEnviromentGroup.tsx @@ -106,15 +106,17 @@ export const GrossDepositionEnviromentGroup = ({ return ( <> - Gross Depositional Environment + + Gross Depositional Environment (GDE) + - Gross Depositional Environment (GDE) - Depositional Environment + GDE + Depositional environment Subenvironment - Architectural Element + Architectural element @@ -132,23 +134,17 @@ export const GrossDepositionEnviromentGroup = ({ /> + {row.grossDepEnv.identifier} + {row.depEnv.identifier} + {row.subenv.identifier} - - {row.grossDepEnv.identifier} - - - - {row.depEnv.identifier} - - - {row.subenv.identifier} - - - - {row.architecturalElements.map((a) => ( -

    {a.identifier},

    - ))} -     + {row.architecturalElements.length > 0 && ( +
      + {row.architecturalElements.map((a) => ( +
    • {a.identifier}
      • + ))} +
    + )}     ))} @@ -156,7 +152,7 @@ export const GrossDepositionEnviromentGroup = ({
    diff --git a/src/components/OutcropAnalogue/OutcropAnalogueGroup/OutcropAnalogueGroup.tsx b/src/components/OutcropAnalogue/OutcropAnalogueGroup/OutcropAnalogueGroup.tsx index 7c73941a..43a99fd9 100644 --- a/src/components/OutcropAnalogue/OutcropAnalogueGroup/OutcropAnalogueGroup.tsx +++ b/src/components/OutcropAnalogue/OutcropAnalogueGroup/OutcropAnalogueGroup.tsx @@ -78,58 +78,54 @@ export const OutcropAnalogueGroup = ({ }; return ( - <> - - Outcrop Analogue - - - - - Analogue - Region - Basin - Category + + Outcrop Analogue +
    + + + + Analogue + Region + Basin + Category + + + + {outcropGroup.map((row) => ( + + + + + + {row.name} + + {row.region} + + + {row.basins?.map((item) => item)} + + + + {row.outcropCategory} + - - - {outcropGroup.map((row) => ( - - - - - - {row.name} - - {row.region} - - - {row.basins?.map((item) => item)} - - - - - {row.outcropCategory} - - - - ))} - -
    -
    - -
    -     + ))} + + +
    + +
    Add Outcrop Analogue @@ -146,6 +142,6 @@ export const OutcropAnalogueGroup = ({ - + ); }; diff --git a/src/components/StrategraphicColumn/StratigrapicGroups/StratigrapicGroups.styled.ts b/src/components/StrategraphicColumn/StratigrapicGroups/StratigrapicGroups.styled.ts index bf95f702..513a75bc 100644 --- a/src/components/StrategraphicColumn/StratigrapicGroups/StratigrapicGroups.styled.ts +++ b/src/components/StrategraphicColumn/StratigrapicGroups/StratigrapicGroups.styled.ts @@ -4,16 +4,15 @@ import { spacings } from '../../../tokens/spacings'; export const Wrapper = styled.div` display: flex; flex-direction: column; - row-gap: ${spacings.MEDIUM}; + + th, + td { + white-space: nowrap; + } `; export const StratColCell = styled.div` display: flex; flex-direction: row; - white-space: nowrap; - - > p { - padding-right: ${spacings.X_SMALL}; - } `; diff --git a/src/components/StrategraphicColumn/StratigrapicGroups/StratigrapicGroups.tsx b/src/components/StrategraphicColumn/StratigrapicGroups/StratigrapicGroups.tsx index 50ec3fbe..eab54f3c 100644 --- a/src/components/StrategraphicColumn/StratigrapicGroups/StratigrapicGroups.tsx +++ b/src/components/StrategraphicColumn/StratigrapicGroups/StratigrapicGroups.tsx @@ -28,7 +28,7 @@ export const StratigrapicGroups = ({ return ( - Stratigraphic column + Stratigraphic column @@ -72,7 +72,7 @@ export const StratigrapicGroups = ({ ) : ( - --- + - )} {filterUnitLevel(row, 2).length > 0 ? ( @@ -81,7 +81,7 @@ export const StratigrapicGroups = ({ ) : ( - --- + - )} {filterUnitLevel(row, 3).length > 0 ? ( @@ -90,7 +90,7 @@ export const StratigrapicGroups = ({ ) : ( - --- + - )} ))} @@ -98,7 +98,7 @@ export const StratigrapicGroups = ({
    diff --git a/src/features/Compute/CaseGroup/CaseSettingSelects/SettingSelect.styled.tsx b/src/features/Compute/CaseGroup/CaseSettingSelects/SettingSelect.styled.tsx index 809ff1da..879bfada 100644 --- a/src/features/Compute/CaseGroup/CaseSettingSelects/SettingSelect.styled.tsx +++ b/src/features/Compute/CaseGroup/CaseSettingSelects/SettingSelect.styled.tsx @@ -1,5 +1,6 @@ import styled from 'styled-components'; import { spacings } from '../../../../tokens/spacings'; +import { theme } from '../../../../tokens/theme'; export const AutocompleteWrapper = styled.div` display: flex; @@ -12,7 +13,7 @@ export const AutocompleteWrapper = styled.div` export const Required = styled.div` > label { - color: red; + color: ${theme.light.danger.text}; } `; diff --git a/src/features/Footer/Footer.styled.tsx b/src/features/Footer/Footer.styled.tsx index 4ba229ce..6ee471ff 100644 --- a/src/features/Footer/Footer.styled.tsx +++ b/src/features/Footer/Footer.styled.tsx @@ -4,6 +4,7 @@ import { theme } from '../../tokens/theme'; const StyledFooter = styled.footer` height: ${spacings.XXXX_LARGE}; + background-color: ${theme.light.ui.background.default}; display: flex; justify-content: space-between; diff --git a/src/features/HandleModel/HandleModelComponent/HandleModelComponent.tsx b/src/features/HandleModel/HandleModelComponent/HandleModelComponent.tsx index 13fdcc97..2de75454 100644 --- a/src/features/HandleModel/HandleModelComponent/HandleModelComponent.tsx +++ b/src/features/HandleModel/HandleModelComponent/HandleModelComponent.tsx @@ -1,7 +1,6 @@ /* eslint-disable max-lines */ /* eslint-disable max-lines-per-function */ import { Button, LinearProgress, Typography } from '@equinor/eds-core-react'; -import _ from 'lodash'; import { useEffect, useState } from 'react'; import { generatePath, useNavigate } from 'react-router-dom'; import { @@ -11,7 +10,6 @@ import { StratColumnDto, StratUnitDto, } from '../../../api/generated'; -import { ErrorBanner } from '../../../components/ErrorBanner/ErrorBanner'; import { ModelInputFilesTable } from '../ModelInputFilesTable/ModelInputFilesTable'; import { ModelMetadata } from '../ModelMetadata/ModelMetadata'; import { @@ -130,23 +128,6 @@ export const HandleModelComponent = ({ } const INIFileContent = () =>

    Not implemented yet...

    ; - const getErroMessageList = () => { - if (_.isEmpty(errors)) return; - - const errorList: string[] = []; - - Object.keys(errors).forEach(function (key) { - // TODO: Fix the TS error for errors[key] - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - const message = errors[key]; - errorList.push(message); - }); - return errorList; - }; - - const ErrorList = getErroMessageList(); - return ( {progress !== undefined && progress <= 0 && ( @@ -173,15 +154,6 @@ export const HandleModelComponent = ({ metadata={metadata} setMetadata={setMetadata} /> - {!_.isEmpty(errors) && - ErrorList !== undefined && - ErrorList.map((e, i) => { - return ( - - - - ); - })} )} diff --git a/src/features/HandleModel/ModelMetadata/ModelMetadata.styled.ts b/src/features/HandleModel/ModelMetadata/ModelMetadata.styled.ts index dc9f5b40..9aa9f8d0 100644 --- a/src/features/HandleModel/ModelMetadata/ModelMetadata.styled.ts +++ b/src/features/HandleModel/ModelMetadata/ModelMetadata.styled.ts @@ -1,10 +1,10 @@ import { TextField } from '@equinor/eds-core-react'; import styled from 'styled-components'; import { spacings } from '../../../tokens/spacings'; +import { theme } from '../../../tokens/theme'; export const ModelMetadata = styled.div` display: flex; flex-direction: column; - row-gap: ${spacings.MEDIUM}; min-height: 200px; `; @@ -15,12 +15,11 @@ export const Form = styled.div` row-gap: ${spacings.MEDIUM}; `; -export const TextInput = styled(TextField)` - display: flex; - flex-direction: column; -`; +export const TextInput = styled(TextField)``; + export const InputfieldRequired = styled.div` > label { - color: red; + color: ${theme.light.danger.text}; + margin-block-start: ${spacings.X_SMALL}; } `; diff --git a/src/features/HandleModel/ModelMetadata/ModelMetadata.tsx b/src/features/HandleModel/ModelMetadata/ModelMetadata.tsx index fab64e77..b82350cf 100644 --- a/src/features/HandleModel/ModelMetadata/ModelMetadata.tsx +++ b/src/features/HandleModel/ModelMetadata/ModelMetadata.tsx @@ -22,19 +22,19 @@ export const ModelMetadata = ({ ) => setMetadata({ ...metadata, name: e.currentTarget.value }) } /> - {errors.name && } + {errors.name && } ) => setMetadata({ ...metadata, description: e.currentTarget.value }) @@ -43,7 +43,9 @@ export const ModelMetadata = ({ rows={4} rowsMax={8} /> - {errors.description && } + {errors.description && ( + + )} diff --git a/src/features/HandleModel/ModelMetadata/ModelMetadataComponent.test.tsx b/src/features/HandleModel/ModelMetadata/ModelMetadataComponent.test.tsx index 67a3341b..c86d1ebe 100644 --- a/src/features/HandleModel/ModelMetadata/ModelMetadataComponent.test.tsx +++ b/src/features/HandleModel/ModelMetadata/ModelMetadataComponent.test.tsx @@ -81,7 +81,7 @@ const Render = () => { test('renders modelMetadata after loading', () => { render(); - const nameLable = screen.getByLabelText('Model Name'); + const nameLable = screen.getByLabelText('Model name (required)'); expect(nameLable).toBeInTheDocument(); expect(nameLable).toHaveValue(''); }); @@ -89,7 +89,7 @@ test('renders modelMetadata after loading', () => { test('Name field to be present and empty after render', async () => { render(); - const nameLable = screen.getByLabelText('Model Name'); + const nameLable = screen.getByLabelText('Model name (required)'); expect(nameLable).toBeInTheDocument(); expect(nameLable).toHaveValue(''); }); @@ -97,6 +97,8 @@ test('Name field to be present and empty after render', async () => { test('Description field to be present after render', async () => { render(); - const descriptionLable = screen.getByLabelText('Model description'); + const descriptionLable = screen.getByLabelText( + 'Model description (required)', + ); expect(descriptionLable).toBeInTheDocument(); }); diff --git a/src/features/ModelView/EditNameDescription/EditNameDescription.styled.ts b/src/features/ModelView/EditNameDescription/EditNameDescription.styled.ts index fec9567f..60f54ae8 100644 --- a/src/features/ModelView/EditNameDescription/EditNameDescription.styled.ts +++ b/src/features/ModelView/EditNameDescription/EditNameDescription.styled.ts @@ -3,12 +3,11 @@ import styled from 'styled-components'; import { spacings } from '../../../tokens/spacings'; export const DialogWrapper = styled(Dialog)` - min-width: 300px; + min-width: 336px; `; export const Buttons = styled(Dialog.Actions)` display: flex; flex-direction: row; - column-gap: ${spacings.SMALL}; `; diff --git a/src/features/ModelView/EditNameDescription/EditNameDescription.tsx b/src/features/ModelView/EditNameDescription/EditNameDescription.tsx index 3a1cc28e..1c4e2727 100644 --- a/src/features/ModelView/EditNameDescription/EditNameDescription.tsx +++ b/src/features/ModelView/EditNameDescription/EditNameDescription.tsx @@ -1,11 +1,8 @@ /* eslint-disable max-lines-per-function */ -import { Button, Dialog, Typography } from '@equinor/eds-core-react'; -import _ from 'lodash'; +import { Button, Dialog } from '@equinor/eds-core-react'; import { useEffect, useState } from 'react'; import { AnalogueModelDetail } from '../../../api/generated'; -import { ErrorBanner } from '../../../components/ErrorBanner/ErrorBanner'; import { validateValues } from '../../HandleModel/HandleModelComponent/HandleModelComponent.hooks'; -import * as Styled2 from '../../HandleModel/HandleModelComponent/HandleModelComponent.styled'; import { ModelMetadata } from '../../HandleModel/ModelMetadata/ModelMetadata'; import * as Styled from './EditNameDescription.styled'; export const EditNameDescription = ({ @@ -42,22 +39,6 @@ export const EditNameDescription = ({ } }, [defaultMetadata, edit, errors, isEdit, metadata, submitting]); - const getErroMessageList = () => { - if (_.isEmpty(errors)) return; - - const errorList: string[] = []; - - Object.keys(errors).forEach(function (key) { - // TODO: Fix the TS error for errors[key] - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - const message = errors[key]; - errorList.push(message); - }); - return errorList; - }; - const ErrorList = getErroMessageList(); - const handleSubmit = () => { setErrors(validateValues(metadata, undefined, isEdit)); setSubmitting(true); @@ -71,8 +52,8 @@ export const EditNameDescription = ({ return ( <> + Edit name and description - Edit name description {isEdit && ( <> - {!_.isEmpty(errors) && - ErrorList !== undefined && - ErrorList.map((e, i) => { - return ( - - - - ); - })} )} - - diff --git a/src/features/ModelView/ModelAreaCoordinates/ModelAreaCoordinates.tsx b/src/features/ModelView/ModelAreaCoordinates/ModelAreaCoordinates.tsx index ede2a4a6..bc5c3206 100644 --- a/src/features/ModelView/ModelAreaCoordinates/ModelAreaCoordinates.tsx +++ b/src/features/ModelView/ModelAreaCoordinates/ModelAreaCoordinates.tsx @@ -14,7 +14,7 @@ export const ModelAreaCoordinates = ({ coordinates. ); diff --git a/src/features/ModelView/ModelFilesView/ModelFilesView.styled.tsx b/src/features/ModelView/ModelFilesView/ModelFilesView.styled.tsx index 6c165f01..3a1d1968 100644 --- a/src/features/ModelView/ModelFilesView/ModelFilesView.styled.tsx +++ b/src/features/ModelView/ModelFilesView/ModelFilesView.styled.tsx @@ -5,17 +5,14 @@ import { spacings } from '../../../tokens/spacings'; export const TableWrapper = styled.div` display: flex; flex-direction: column; + align-items: flex-start; row-gap: ${spacings.LARGE}; - - width: 85%; `; export const FileTable = styled(Table)` - width: 100%; min-width: 256px; `; export const TableCell = styled(Table.Cell)` - width: 80%; padding-right: ${spacings.X_LARGE}; `; diff --git a/src/features/ModelView/ModelFilesView/ModelFilesView.tsx b/src/features/ModelView/ModelFilesView/ModelFilesView.tsx index 4ab42ae4..30127979 100644 --- a/src/features/ModelView/ModelFilesView/ModelFilesView.tsx +++ b/src/features/ModelView/ModelFilesView/ModelFilesView.tsx @@ -14,7 +14,7 @@ export const ModelFilesView = () => { - Model input files + Model input files Size @@ -24,14 +24,14 @@ export const ModelFilesView = () => { data.data.fileUploads?.length > 0) ? ( data.data.fileUploads?.map((file: UploadList) => ( - {file.originalFileName} - **Size** + {file.originalFileName} + - )) ) : ( No files uploaded - -- + - )} diff --git a/src/features/ModelView/ModelMetadataView/ModelMetadataView.styled.tsx b/src/features/ModelView/ModelMetadataView/ModelMetadataView.styled.tsx index a595a3ac..103e6d2c 100644 --- a/src/features/ModelView/ModelMetadataView/ModelMetadataView.styled.tsx +++ b/src/features/ModelView/ModelMetadataView/ModelMetadataView.styled.tsx @@ -1,27 +1,26 @@ import styled from 'styled-components'; import { spacings } from '../../../tokens/spacings'; +import { theme } from '../../../tokens/theme'; export const Wrapper = styled.div` display: flex; flex-direction: column; - row-gap: ${spacings.XXX_LARGE}; - > button { - width: fit-content; + table { + border: 1px solid ${theme.light.ui.background.medium}; + border-collapse: collapse; } -`; -export const Metadata = styled.div` - display: flex; - flex-direction: column; - row-gap: ${spacings.LARGE}; + /* Equal widths of the icon column in each of the metadata tables */ + td:first-child { + width: ${spacings.XXX_LARGE}; + } `; -export const MetadataInfo = styled.div` +export const DescriptionMeta = styled.div` display: flex; flex-direction: column; + align-items: flex-start; row-gap: ${spacings.MEDIUM}; - - max-width: 60%; `; diff --git a/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx b/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx index c45a3667..34b3f053 100644 --- a/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx +++ b/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx @@ -272,66 +272,66 @@ export const ModelMetadataView = ({ return ( - - {!isAddUploading && ( + Model metadata + {!isAddUploading && ( + <> - Description and metadata - - <>{data.data.description &&
    {data.data.description}
    } - - -
    - {!isAddModelDialog && ( - - )} -
    + {data.data.description && ( + + {data.data.description} + + )} - )} - {isAddUploading && ( - - Add model metadata - - At least one type of metadata (outcrop analogue, stratigraphic - column, or deposition environment) is required when adding a new - model. - - - )} -
    - -
    -
    - -
    -
    - + Edit name and description… + + + -
    -     + + )} + {isAddUploading && ( + <> + Add model metadata + + At least one type of metadata (outcrop analogue, stratigraphic + column, or deposition environment) is required when adding a new + model. + + + )} + +
    + +
    +
    + +
    +
    + +
    Add stratigraphic column diff --git a/src/features/ModelView/ModelNameFrame/ModelNameFrame.styled.tsx b/src/features/ModelView/ModelNameFrame/ModelNameFrame.styled.tsx index 9f35b5e7..47af001a 100644 --- a/src/features/ModelView/ModelNameFrame/ModelNameFrame.styled.tsx +++ b/src/features/ModelView/ModelNameFrame/ModelNameFrame.styled.tsx @@ -3,15 +3,7 @@ import { spacings } from '../../../tokens/spacings'; import { theme } from '../../../tokens/theme'; export const NameFrame = styled.div` - width: 100%; - min-height: ${spacings.NAME_FRAME}; - padding: ${spacings.LARGE} 0; background-color: ${theme.light.ui.background.light}; - border-left: solid ${spacings.XX_SMALL} ${theme.light.ui.background.medium}; - - > h1 { - margin: 0; - padding: 0 ${spacings.X_LARGE}; - font-weight: normal; + padding: ${spacings.LARGE} ${spacings.X_LARGE}; } `; diff --git a/src/features/ModelView/ModelNameFrame/ModelNameFrame.tsx b/src/features/ModelView/ModelNameFrame/ModelNameFrame.tsx index ff0ae7bf..aa666203 100644 --- a/src/features/ModelView/ModelNameFrame/ModelNameFrame.tsx +++ b/src/features/ModelView/ModelNameFrame/ModelNameFrame.tsx @@ -1,10 +1,15 @@ +import { Typography } from '@equinor/eds-core-react'; import { AnalogueModelDetail } from '../../../api/generated'; import * as Styled from './ModelNameFrame.styled'; export const ModelNameFrame = ({ model }: { model?: AnalogueModelDetail }) => { return ( - {model ?

    {model.name}

    :

    Loading ....

    } + {model ? ( + {model.name} + ) : ( + Loading .... + )}     ); }; diff --git a/src/features/ModelView/ModelView.styled.tsx b/src/features/ModelView/ModelView.styled.tsx index 13469d51..8a2a6ebc 100644 --- a/src/features/ModelView/ModelView.styled.tsx +++ b/src/features/ModelView/ModelView.styled.tsx @@ -2,22 +2,10 @@ import styled from 'styled-components'; import { spacings } from '../../tokens/spacings'; export const MetadataWrapper = styled.div` - display: flex; - flex-direction: row; - justify-content: space-between; - height: calc(100% - 75.5px); - width: 100%; - padding: ${spacings.X_LARGE}; - row-gap: ${spacings.XXX_LARGE}; - column-gap: ${spacings.X_LARGE}; - - @media (max-width: 1350px) { - flex-direction: column; - } -`; -export const InnerMetadataWrapper = styled.div` display: flex; flex-direction: column; + align-items: flex-start; row-gap: ${spacings.XXX_LARGE}; - width: 50vw; + padding: ${spacings.X_LARGE} ${spacings.X_LARGE} + calc(${spacings.XXXX_LARGE} + ${spacings.X_LARGE}); `; diff --git a/src/features/ModelView/ModelView.tsx b/src/features/ModelView/ModelView.tsx index 7e209013..4282d89f 100644 --- a/src/features/ModelView/ModelView.tsx +++ b/src/features/ModelView/ModelView.tsx @@ -1,12 +1,10 @@ import { useState } from 'react'; import { CoordinatesDialog } from '../../components/AreaCoordinates/CoordinatesDialog/CoordinatesDialog'; -import { ImageView } from '../../components/ImageView/ImageView'; import { ModelMetadataView } from '../../features/ModelView/ModelMetadataView/ModelMetadataView'; import { DeleteModel } from './DeleteButton/DeleteModel'; import { ModelAreaCoordinates } from './ModelAreaCoordinates/ModelAreaCoordinates'; import { ModelFilesView } from './ModelFilesView/ModelFilesView'; import * as Styled from './ModelView.styled'; -import Img from './image.png'; export const ModelView = () => { const [open, setOpen] = useState(false); @@ -18,17 +16,10 @@ export const ModelView = () => { return ( <> - - - - - - - + + + + diff --git a/src/pages/ModelPages/Model/Model.styled.tsx b/src/pages/ModelPages/Model/Model.styled.tsx index c2ec1147..15a5fb09 100644 --- a/src/pages/ModelPages/Model/Model.styled.tsx +++ b/src/pages/ModelPages/Model/Model.styled.tsx @@ -1,24 +1,15 @@ import styled from 'styled-components'; -import { theme } from '../../../tokens/theme'; export const Wrapper = styled.div` - display: flex; - flex: auto; - flex-direction: row; - position: relative; - width: 100%; - height: 100%; + display: grid; + grid-template-areas: 'sidebar content'; + grid-template-columns: 16rem 1fr; `; export const ContentWrapper = styled.div` - width: 100%; - overflow: scroll; + grid-area: content; `; export const SidebarWrapper = styled.div` - heigth: 100%; - max-width: 256px; - > div { - border-color: ${theme.light.ui.background.medium}; - } + grid-area: sidebar; `; diff --git a/src/tokens/theme.ts b/src/tokens/theme.ts index 28fb16d2..e3e95964 100644 --- a/src/tokens/theme.ts +++ b/src/tokens/theme.ts @@ -36,5 +36,10 @@ export const theme = { info: { warning: infographic.primary__spruce_wood.hex, }, + danger: { + text: interactive.danger__text.hex, + highlight: interactive.danger__highlight.hex, + resting: interactive.danger__resting.hex, + }, }, };