From fc539da55d5f3dcc5190bb4c8a71acb2c0211bfa Mon Sep 17 00:00:00 2001 From: Erling Hauan Date: Sun, 13 Oct 2024 12:02:30 +0200 Subject: [PATCH 01/10] Align datamodel heading and schemaInspector tabs --- .../HeadingRow/HeadingRow.module.css | 3 +++ .../components/NodePanel/NodePanel.module.css | 4 --- .../src/components/NodePanel/NodePanel.tsx | 2 +- .../components/SchemaEditor/SchemaEditor.tsx | 4 +-- .../SchemaInspector.module.css | 19 ++++++++++---- .../SchemaInspector/SchemaInspector.tsx | 26 +++++++++++++------ 6 files changed, 38 insertions(+), 20 deletions(-) diff --git a/frontend/packages/schema-editor/src/components/NodePanel/HeadingRow/HeadingRow.module.css b/frontend/packages/schema-editor/src/components/NodePanel/HeadingRow/HeadingRow.module.css index b0c067040c8..4acedf957e7 100644 --- a/frontend/packages/schema-editor/src/components/NodePanel/HeadingRow/HeadingRow.module.css +++ b/frontend/packages/schema-editor/src/components/NodePanel/HeadingRow/HeadingRow.module.css @@ -1,5 +1,8 @@ .root { --gap: var(--fds-spacing-1); + height: var(--subtoolbar-height); + box-sizing: border-box; + box-shadow: var(--fds-shadow-small); align-items: center; display: flex; padding: var(--gap) 0; diff --git a/frontend/packages/schema-editor/src/components/NodePanel/NodePanel.module.css b/frontend/packages/schema-editor/src/components/NodePanel/NodePanel.module.css index 1f8384e8b2b..1bc72e07643 100644 --- a/frontend/packages/schema-editor/src/components/NodePanel/NodePanel.module.css +++ b/frontend/packages/schema-editor/src/components/NodePanel/NodePanel.module.css @@ -1,7 +1,3 @@ -.top { - box-shadow: var(--fds-shadow-small); -} - .backButton { background-color: var(--fds-semantic-surface-action-subtle); border: none; diff --git a/frontend/packages/schema-editor/src/components/NodePanel/NodePanel.tsx b/frontend/packages/schema-editor/src/components/NodePanel/NodePanel.tsx index 918c678d557..e746f1be991 100644 --- a/frontend/packages/schema-editor/src/components/NodePanel/NodePanel.tsx +++ b/frontend/packages/schema-editor/src/components/NodePanel/NodePanel.tsx @@ -21,7 +21,7 @@ export const NodePanel = ({ schemaPointer }: NodePanelProps) => { return ( <> -
+
{!isDataModelRoot && }
diff --git a/frontend/packages/schema-editor/src/components/SchemaEditor/SchemaEditor.tsx b/frontend/packages/schema-editor/src/components/SchemaEditor/SchemaEditor.tsx index 6b287d5be74..7c7b69acf67 100644 --- a/frontend/packages/schema-editor/src/components/SchemaEditor/SchemaEditor.tsx +++ b/frontend/packages/schema-editor/src/components/SchemaEditor/SchemaEditor.tsx @@ -35,7 +35,7 @@ export const SchemaEditor = () => { orientation='horizontal' localStorageContext={`datamodel:${user.id}:${org}`} > - + @@ -51,7 +51,7 @@ export const SchemaEditor = () => { collapsedSize={180} > diff --git a/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.module.css b/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.module.css index fe4a1c6dbde..68c268e5d1b 100644 --- a/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.module.css +++ b/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.module.css @@ -8,6 +8,20 @@ width: 150px; } +.noItem { + font-weight: 500; + padding-inline: var(--fds-spacing-4); +} + +.tabHeader { + height: var(--subtoolbar-height); + font-size: var(--fds-typography-heading-small); +} + +.tabHeaderExtraMargin { + margin-top: var(--fds-sizing-6); +} + .header { font-size: 16px; font-weight: 400; @@ -19,8 +33,3 @@ .header :global(.Mui-focusVisible) { background: gray; } - -.noItem { - font-weight: 500; - margin: 18px; -} diff --git a/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.tsx b/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.tsx index 9480c520805..d857b792051 100644 --- a/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.tsx +++ b/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.tsx @@ -1,37 +1,47 @@ -import React from 'react'; +import React, { ReactElement } from 'react'; import { Alert, Tabs } from '@digdir/designsystemet-react'; import type { UiSchemaNode } from '@altinn/schema-model'; import { isField, isObject } from '@altinn/schema-model'; import { ItemPropertiesTab } from './ItemPropertiesTab'; import { ItemFieldsTab } from './ItemFieldsTab'; import classes from './SchemaInspector.module.css'; -import { Divider } from 'app-shared/primitives'; import { useTranslation } from 'react-i18next'; import { useSchemaEditorAppContext } from '../../hooks/useSchemaEditorAppContext'; import { useSavableSchemaModel } from '../../hooks/useSavableSchemaModel'; +import cn from 'classnames'; -export const SchemaInspector = () => { +type SchemaInspectorProps = { + isDataModelRoot: boolean; +}; + +export const SchemaInspector = ({ isDataModelRoot }: SchemaInspectorProps): ReactElement => { const { t } = useTranslation(); const { selectedUniquePointer } = useSchemaEditorAppContext(); const savableModel = useSavableSchemaModel(); if (!selectedUniquePointer) { return ( -
-

{t('schema_editor.no_item_selected')}

- +
+

{t('schema_editor.no_item_selected')}

); } const selectedItem: UiSchemaNode = savableModel.getNodeByUniquePointer(selectedUniquePointer); const shouldDisplayFieldsTab = isField(selectedItem) && isObject(selectedItem); + const tabClass = isDataModelRoot + ? classes.tabHeader + : cn(classes.tabHeader, classes.tabHeaderExtraMargin); return ( - {t('schema_editor.properties')} - {t('schema_editor.fields')} + + {t('schema_editor.properties')} + + + {t('schema_editor.fields')} + From 21258a0263020432c6e9af6d0b866f3aa22ad988 Mon Sep 17 00:00:00 2001 From: Erling Hauan Date: Sun, 13 Oct 2024 13:53:10 +0200 Subject: [PATCH 02/10] Add separate heading and text content when no data model fields are selected --- .../src/components/SchemaEditor/SchemaEditor.tsx | 10 +++------- .../SchemaInspector/SchemaInspector.module.css | 16 ++++++++++++++-- .../SchemaInspector/SchemaInspector.tsx | 12 +++++++++--- 3 files changed, 26 insertions(+), 12 deletions(-) diff --git a/frontend/packages/schema-editor/src/components/SchemaEditor/SchemaEditor.tsx b/frontend/packages/schema-editor/src/components/SchemaEditor/SchemaEditor.tsx index 7c7b69acf67..6f14682447c 100644 --- a/frontend/packages/schema-editor/src/components/SchemaEditor/SchemaEditor.tsx +++ b/frontend/packages/schema-editor/src/components/SchemaEditor/SchemaEditor.tsx @@ -35,21 +35,17 @@ export const SchemaEditor = () => { orientation='horizontal' localStorageContext={`datamodel:${user.id}:${org}`} > - + - +
- + diff --git a/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.module.css b/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.module.css index 68c268e5d1b..8152e95c154 100644 --- a/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.module.css +++ b/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.module.css @@ -8,9 +8,21 @@ width: 150px; } -.noItem { - font-weight: 500; +.noItemHeadingWrapper { + display: flex; + flex-direction: column; + justify-content: center; padding-inline: var(--fds-spacing-4); + height: var(--subtoolbar-height); + border-bottom: 1px solid lightgray; +} + +.noItemTextWrapper { + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; } .tabHeader { diff --git a/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.tsx b/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.tsx index d857b792051..faf87a0dfa3 100644 --- a/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.tsx +++ b/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.tsx @@ -8,6 +8,7 @@ import classes from './SchemaInspector.module.css'; import { useTranslation } from 'react-i18next'; import { useSchemaEditorAppContext } from '../../hooks/useSchemaEditorAppContext'; import { useSavableSchemaModel } from '../../hooks/useSavableSchemaModel'; +import { StudioHeading, StudioParagraph } from '@studio/components'; import cn from 'classnames'; type SchemaInspectorProps = { @@ -21,9 +22,14 @@ export const SchemaInspector = ({ isDataModelRoot }: SchemaInspectorProps): Reac if (!selectedUniquePointer) { return ( -
-

{t('schema_editor.no_item_selected')}

-
+ <> +
+ {t('schema_editor.properties')} +
+
+ {t('schema_editor.no_item_selected')} +
+ ); } From a4917a273549c1c6b7dfe12a9f61dbb7e94bd76a Mon Sep 17 00:00:00 2001 From: Erling Hauan Date: Sun, 13 Oct 2024 16:29:06 +0200 Subject: [PATCH 03/10] Align TypesInspector heading with the other headings --- .../HeadingRow/HeadingRow.module.css | 1 - .../components/NodePanel/NodePanel.module.css | 4 +++ .../src/components/NodePanel/NodePanel.tsx | 4 +-- .../components/SchemaEditor/SchemaEditor.tsx | 2 +- .../SchemaInspector.module.css | 23 ++-------------- .../SchemaInspector/SchemaInspector.tsx | 26 +++++++------------ .../TypesInspector/TypesInspector.module.css | 23 +++++----------- .../TypesInspector/TypesInspector.tsx | 15 ++--------- 8 files changed, 28 insertions(+), 70 deletions(-) diff --git a/frontend/packages/schema-editor/src/components/NodePanel/HeadingRow/HeadingRow.module.css b/frontend/packages/schema-editor/src/components/NodePanel/HeadingRow/HeadingRow.module.css index 4acedf957e7..3f0081bc093 100644 --- a/frontend/packages/schema-editor/src/components/NodePanel/HeadingRow/HeadingRow.module.css +++ b/frontend/packages/schema-editor/src/components/NodePanel/HeadingRow/HeadingRow.module.css @@ -2,7 +2,6 @@ --gap: var(--fds-spacing-1); height: var(--subtoolbar-height); box-sizing: border-box; - box-shadow: var(--fds-shadow-small); align-items: center; display: flex; padding: var(--gap) 0; diff --git a/frontend/packages/schema-editor/src/components/NodePanel/NodePanel.module.css b/frontend/packages/schema-editor/src/components/NodePanel/NodePanel.module.css index 1bc72e07643..1f8384e8b2b 100644 --- a/frontend/packages/schema-editor/src/components/NodePanel/NodePanel.module.css +++ b/frontend/packages/schema-editor/src/components/NodePanel/NodePanel.module.css @@ -1,3 +1,7 @@ +.top { + box-shadow: var(--fds-shadow-small); +} + .backButton { background-color: var(--fds-semantic-surface-action-subtle); border: none; diff --git a/frontend/packages/schema-editor/src/components/NodePanel/NodePanel.tsx b/frontend/packages/schema-editor/src/components/NodePanel/NodePanel.tsx index e746f1be991..b2bed63e68e 100644 --- a/frontend/packages/schema-editor/src/components/NodePanel/NodePanel.tsx +++ b/frontend/packages/schema-editor/src/components/NodePanel/NodePanel.tsx @@ -21,9 +21,9 @@ export const NodePanel = ({ schemaPointer }: NodePanelProps) => { return ( <> -
- {!isDataModelRoot && } +
+ {!isDataModelRoot && }
{isNodeValidParent(node) && } diff --git a/frontend/packages/schema-editor/src/components/SchemaEditor/SchemaEditor.tsx b/frontend/packages/schema-editor/src/components/SchemaEditor/SchemaEditor.tsx index 6f14682447c..4a9946290c9 100644 --- a/frontend/packages/schema-editor/src/components/SchemaEditor/SchemaEditor.tsx +++ b/frontend/packages/schema-editor/src/components/SchemaEditor/SchemaEditor.tsx @@ -47,7 +47,7 @@ export const SchemaEditor = () => { diff --git a/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.module.css b/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.module.css index 8152e95c154..33b4dab618b 100644 --- a/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.module.css +++ b/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.module.css @@ -14,15 +14,7 @@ justify-content: center; padding-inline: var(--fds-spacing-4); height: var(--subtoolbar-height); - border-bottom: 1px solid lightgray; -} - -.noItemTextWrapper { - height: 100%; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; + border-bottom: 1px solid var(--fds-semantic-border-neutral-subtle); } .tabHeader { @@ -30,18 +22,7 @@ font-size: var(--fds-typography-heading-small); } -.tabHeaderExtraMargin { - margin-top: var(--fds-sizing-6); -} - -.header { - font-size: 16px; - font-weight: 400; - margin-bottom: 6px; - margin-top: 24px; - padding: 0; -} - +/* Should this be deleted? */ .header :global(.Mui-focusVisible) { background: gray; } diff --git a/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.tsx b/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.tsx index faf87a0dfa3..e00c14b7e3a 100644 --- a/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.tsx +++ b/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.tsx @@ -8,14 +8,9 @@ import classes from './SchemaInspector.module.css'; import { useTranslation } from 'react-i18next'; import { useSchemaEditorAppContext } from '../../hooks/useSchemaEditorAppContext'; import { useSavableSchemaModel } from '../../hooks/useSavableSchemaModel'; -import { StudioHeading, StudioParagraph } from '@studio/components'; -import cn from 'classnames'; +import { StudioCenter, StudioHeading, StudioParagraph } from '@studio/components'; -type SchemaInspectorProps = { - isDataModelRoot: boolean; -}; - -export const SchemaInspector = ({ isDataModelRoot }: SchemaInspectorProps): ReactElement => { +export const SchemaInspector = (): ReactElement => { const { t } = useTranslation(); const { selectedUniquePointer } = useSchemaEditorAppContext(); const savableModel = useSavableSchemaModel(); @@ -26,26 +21,23 @@ export const SchemaInspector = ({ isDataModelRoot }: SchemaInspectorProps): Reac
{t('schema_editor.properties')}
-
+ {t('schema_editor.no_item_selected')} -
+ ); } const selectedItem: UiSchemaNode = savableModel.getNodeByUniquePointer(selectedUniquePointer); const shouldDisplayFieldsTab = isField(selectedItem) && isObject(selectedItem); - const tabClass = isDataModelRoot - ? classes.tabHeader - : cn(classes.tabHeader, classes.tabHeaderExtraMargin); return ( - + - + {t('schema_editor.properties')} - + {t('schema_editor.fields')} @@ -57,7 +49,9 @@ export const SchemaInspector = ({ isDataModelRoot }: SchemaInspectorProps): Reac ) : ( - {t('app_data_modelling.fields_information')} + + {t('app_data_modelling.fields_information')} + )} ); diff --git a/frontend/packages/schema-editor/src/components/TypesInspector/TypesInspector.module.css b/frontend/packages/schema-editor/src/components/TypesInspector/TypesInspector.module.css index 4456910f3d4..5f299a9ecf0 100644 --- a/frontend/packages/schema-editor/src/components/TypesInspector/TypesInspector.module.css +++ b/frontend/packages/schema-editor/src/components/TypesInspector/TypesInspector.module.css @@ -1,6 +1,7 @@ .root { box-sizing: border-box; - padding: 24px 24px; + padding-inline: var(--fds-spacing-6); + padding-bottom: var(--fds-spacing-6); min-height: 100%; background: rgba(224, 224, 224, 0.3); border-right: 1px solid var(--fds-semantic-border-neutral-subtle); @@ -10,18 +11,19 @@ display: flex; flex-direction: column; align-items: stretch; - gap: 8px; + gap: var(--fds-spacing-2); } .addRow { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; + height: var(--subtoolbar-height); } .addRowText { grid-column: 1 / 3; - font-size: 18px; + font-size: var(--fds-font-size-f0); } .addRowButton { @@ -31,23 +33,12 @@ color: #000000; } +/* Should this be deleted? */ .root :global(.MuiAutocomplete-input) { width: 150px; } -.header { - font-size: 16px; - font-weight: 400; - margin-bottom: 6px; - margin-top: 24px; - padding: 0; -} - +/* Should this be deleted? */ .header :global(.Mui-focusVisible) { background: gray; } - -.noItem { - font-weight: 500; - margin: 18px; -} diff --git a/frontend/packages/schema-editor/src/components/TypesInspector/TypesInspector.tsx b/frontend/packages/schema-editor/src/components/TypesInspector/TypesInspector.tsx index 54e6a29226d..4d6b0574b59 100644 --- a/frontend/packages/schema-editor/src/components/TypesInspector/TypesInspector.tsx +++ b/frontend/packages/schema-editor/src/components/TypesInspector/TypesInspector.tsx @@ -1,6 +1,6 @@ import type { MouseEvent } from 'react'; import React from 'react'; -import { StudioButton } from '@studio/components'; +import { StudioButton, StudioHeading } from '@studio/components'; import { PlusIcon } from '@studio/icons'; import type { UiSchemaNode } from '@altinn/schema-model'; import { SchemaModel } from '@altinn/schema-model'; @@ -38,22 +38,11 @@ export const TypesInspector = ({ schemaItems }: TypesInspectorProps) => { save(schemaModel); }; - if (!schemaItems) { - return ( -
-

- {t('schema_editor.no_item_selected')} -

- -
- ); - } - return (
- {t('schema_editor.types')} + {t('schema_editor.types')} Date: Sun, 13 Oct 2024 20:12:08 +0200 Subject: [PATCH 04/10] Create border below headings for types, datamodel and properties --- .../components/NodePanel/NodePanel.module.css | 2 +- .../components/SchemaEditor/SchemaEditor.tsx | 2 +- .../SchemaInspector.module.css | 2 +- .../TypesInspector/TypesInspector.module.css | 25 ++++++++++--------- .../TypesInspector/TypesInspector.tsx | 24 +++++++++--------- .../DragAndDropList.module.css | 1 + 6 files changed, 29 insertions(+), 27 deletions(-) diff --git a/frontend/packages/schema-editor/src/components/NodePanel/NodePanel.module.css b/frontend/packages/schema-editor/src/components/NodePanel/NodePanel.module.css index 1f8384e8b2b..b383e15a662 100644 --- a/frontend/packages/schema-editor/src/components/NodePanel/NodePanel.module.css +++ b/frontend/packages/schema-editor/src/components/NodePanel/NodePanel.module.css @@ -1,5 +1,5 @@ .top { - box-shadow: var(--fds-shadow-small); + border-bottom: 1px solid var(--fds-semantic-border-neutral-subtle); } .backButton { diff --git a/frontend/packages/schema-editor/src/components/SchemaEditor/SchemaEditor.tsx b/frontend/packages/schema-editor/src/components/SchemaEditor/SchemaEditor.tsx index 4a9946290c9..853d07505de 100644 --- a/frontend/packages/schema-editor/src/components/SchemaEditor/SchemaEditor.tsx +++ b/frontend/packages/schema-editor/src/components/SchemaEditor/SchemaEditor.tsx @@ -14,7 +14,7 @@ import { useUserQuery } from 'app-development/hooks/queries'; import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams'; export const SchemaEditor = () => { - const { schemaModel, selectedTypePointer, selectedUniquePointer } = useSchemaEditorAppContext(); + const { schemaModel, selectedTypePointer } = useSchemaEditorAppContext(); const { org } = useStudioEnvironmentParams(); const { data: user } = useUserQuery(); const moveProperty = useMoveProperty(); diff --git a/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.module.css b/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.module.css index 33b4dab618b..da977e8af43 100644 --- a/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.module.css +++ b/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.module.css @@ -12,7 +12,7 @@ display: flex; flex-direction: column; justify-content: center; - padding-inline: var(--fds-spacing-4); + padding-inline: var(--fds-spacing-6); height: var(--subtoolbar-height); border-bottom: 1px solid var(--fds-semantic-border-neutral-subtle); } diff --git a/frontend/packages/schema-editor/src/components/TypesInspector/TypesInspector.module.css b/frontend/packages/schema-editor/src/components/TypesInspector/TypesInspector.module.css index 5f299a9ecf0..f7624cc9323 100644 --- a/frontend/packages/schema-editor/src/components/TypesInspector/TypesInspector.module.css +++ b/frontend/packages/schema-editor/src/components/TypesInspector/TypesInspector.module.css @@ -1,27 +1,19 @@ .root { box-sizing: border-box; - padding-inline: var(--fds-spacing-6); - padding-bottom: var(--fds-spacing-6); min-height: 100%; background: rgba(224, 224, 224, 0.3); - border-right: 1px solid var(--fds-semantic-border-neutral-subtle); -} - -.types { - display: flex; - flex-direction: column; - align-items: stretch; - gap: var(--fds-spacing-2); } -.addRow { +.typesHeadingWrapper { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; height: var(--subtoolbar-height); + padding-inline: var(--fds-spacing-6); + border-bottom: 1px solid var(--fds-semantic-border-neutral-subtle); } -.addRowText { +.typesHeading { grid-column: 1 / 3; font-size: var(--fds-font-size-f0); } @@ -33,6 +25,15 @@ color: #000000; } +.types { + padding-inline: var(--fds-spacing-6); + padding-block: var(--fds-spacing-4); + display: flex; + flex-direction: column; + align-items: stretch; + gap: var(--fds-spacing-3); +} + /* Should this be deleted? */ .root :global(.MuiAutocomplete-input) { width: 150px; diff --git a/frontend/packages/schema-editor/src/components/TypesInspector/TypesInspector.tsx b/frontend/packages/schema-editor/src/components/TypesInspector/TypesInspector.tsx index 4d6b0574b59..6483f0b08e2 100644 --- a/frontend/packages/schema-editor/src/components/TypesInspector/TypesInspector.tsx +++ b/frontend/packages/schema-editor/src/components/TypesInspector/TypesInspector.tsx @@ -5,7 +5,6 @@ import { PlusIcon } from '@studio/icons'; import type { UiSchemaNode } from '@altinn/schema-model'; import { SchemaModel } from '@altinn/schema-model'; import classes from './TypesInspector.module.css'; -import { Divider } from 'app-shared/primitives'; import { useTranslation } from 'react-i18next'; import { TypeItem } from './TypeItem'; import { useSchemaEditorAppContext } from '../../hooks/useSchemaEditorAppContext'; @@ -40,18 +39,19 @@ export const TypesInspector = ({ schemaItems }: TypesInspectorProps) => { return (
+
+ + {t('schema_editor.types')} + + } + onClick={handleAddDefinition} + title={t('schema_editor.add_type')} + /> +
-
- {t('schema_editor.types')} - } - onClick={handleAddDefinition} - title={t('schema_editor.add_type')} - /> -
- {schemaItems.map((item) => ( Date: Wed, 16 Oct 2024 14:34:34 +0200 Subject: [PATCH 05/10] Clean up --- .../HeadingRow/HeadingRow.module.css | 21 +++---------- .../components/NodePanel/NodePanel.module.css | 8 ++--- .../src/components/NodePanel/NodePanel.tsx | 8 ++--- .../SchemaInspector.module.css | 2 +- .../SchemaInspector/SchemaInspector.tsx | 16 +++++----- .../TypesInspector/TypesInspector.module.css | 31 +++++-------------- .../TypesInspector/TypesInspector.tsx | 8 ++--- .../DragAndDropList.module.css | 1 - 8 files changed, 35 insertions(+), 60 deletions(-) diff --git a/frontend/packages/schema-editor/src/components/NodePanel/HeadingRow/HeadingRow.module.css b/frontend/packages/schema-editor/src/components/NodePanel/HeadingRow/HeadingRow.module.css index 3f0081bc093..2ef7c7d456e 100644 --- a/frontend/packages/schema-editor/src/components/NodePanel/HeadingRow/HeadingRow.module.css +++ b/frontend/packages/schema-editor/src/components/NodePanel/HeadingRow/HeadingRow.module.css @@ -1,25 +1,14 @@ .root { - --gap: var(--fds-spacing-1); - height: var(--subtoolbar-height); - box-sizing: border-box; - align-items: center; display: flex; - padding: var(--gap) 0; - gap: var(--gap); -} - -.heading { - display: contents; + align-items: center; + height: var(--subtoolbar-height); + gap: var(--fds-spacing-3); + border-bottom: 1px solid var(--fds-semantic-border-neutral-subtle); } .heading .headingButton { - border-bottom-left-radius: 0; - border-left-color: transparent; - border-left-style: solid; - border-left-width: var(--studio-treeitem-vertical-line-width); - border-top-left-radius: 0; + display: flex; font: var(--fds-typography-paragraph-short-large); - min-height: var(--fds-sizing-12); } .root.selected .headingButton { diff --git a/frontend/packages/schema-editor/src/components/NodePanel/NodePanel.module.css b/frontend/packages/schema-editor/src/components/NodePanel/NodePanel.module.css index b383e15a662..a52c052e570 100644 --- a/frontend/packages/schema-editor/src/components/NodePanel/NodePanel.module.css +++ b/frontend/packages/schema-editor/src/components/NodePanel/NodePanel.module.css @@ -1,7 +1,3 @@ -.top { - border-bottom: 1px solid var(--fds-semantic-border-neutral-subtle); -} - .backButton { background-color: var(--fds-semantic-surface-action-subtle); border: none; @@ -12,3 +8,7 @@ .backButton:hover { background-color: var(--fds-semantic-surface-action-subtle-hover); } + +.content { + padding-block: var(--fds-spacing-2); +} diff --git a/frontend/packages/schema-editor/src/components/NodePanel/NodePanel.tsx b/frontend/packages/schema-editor/src/components/NodePanel/NodePanel.tsx index b2bed63e68e..47012e7d3ec 100644 --- a/frontend/packages/schema-editor/src/components/NodePanel/NodePanel.tsx +++ b/frontend/packages/schema-editor/src/components/NodePanel/NodePanel.tsx @@ -21,11 +21,11 @@ export const NodePanel = ({ schemaPointer }: NodePanelProps) => { return ( <> -
- - {!isDataModelRoot && } + + {!isDataModelRoot && } +
+ {isNodeValidParent(node) && }
- {isNodeValidParent(node) && } ); }; diff --git a/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.module.css b/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.module.css index 7094256f0ae..bc949fb4f97 100644 --- a/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.module.css +++ b/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.module.css @@ -4,7 +4,7 @@ height: 100%; } -.noItemHeadingWrapper { +.noItemHeadingContainer { display: flex; flex-direction: column; justify-content: center; diff --git a/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.tsx b/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.tsx index e00c14b7e3a..5ed263f4292 100644 --- a/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.tsx +++ b/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.tsx @@ -1,4 +1,5 @@ -import React, { ReactElement } from 'react'; +import type { ReactElement } from 'react'; +import React from 'react'; import { Alert, Tabs } from '@digdir/designsystemet-react'; import type { UiSchemaNode } from '@altinn/schema-model'; import { isField, isObject } from '@altinn/schema-model'; @@ -14,23 +15,24 @@ export const SchemaInspector = (): ReactElement => { const { t } = useTranslation(); const { selectedUniquePointer } = useSchemaEditorAppContext(); const savableModel = useSavableSchemaModel(); + const selectedItem: UiSchemaNode = selectedUniquePointer + ? savableModel.getNodeByUniquePointer(selectedUniquePointer) + : undefined; + const shouldDisplayFieldsTab = selectedItem && isField(selectedItem) && isObject(selectedItem); - if (!selectedUniquePointer) { + if (!selectedItem) { return ( <> -
+
{t('schema_editor.properties')}
- {t('schema_editor.no_item_selected')} + {t('schema_editor.no_item_selected')} ); } - const selectedItem: UiSchemaNode = savableModel.getNodeByUniquePointer(selectedUniquePointer); - const shouldDisplayFieldsTab = isField(selectedItem) && isObject(selectedItem); - return ( diff --git a/frontend/packages/schema-editor/src/components/TypesInspector/TypesInspector.module.css b/frontend/packages/schema-editor/src/components/TypesInspector/TypesInspector.module.css index 8243879c3bc..ed69e45b743 100644 --- a/frontend/packages/schema-editor/src/components/TypesInspector/TypesInspector.module.css +++ b/frontend/packages/schema-editor/src/components/TypesInspector/TypesInspector.module.css @@ -1,35 +1,20 @@ -.root { - box-sizing: border-box; - min-height: 100%; - background: rgba(224, 224, 224, 0.3); -} - -.typesHeadingWrapper { - display: grid; - grid-template-columns: repeat(3, 1fr); +.headingContainer { + display: flex; + justify-content: space-between; align-items: center; height: var(--subtoolbar-height); padding-inline: var(--fds-spacing-6); border-bottom: 1px solid var(--fds-semantic-border-neutral-subtle); } -.typesHeading { - grid-column: 1 / 3; - font-size: var(--fds-font-size-f0); +.addTypeButton { + color: var(--fds-semantic-surface-neutral-inverted); } -.addRowButton { - grid-column: 3; - margin-left: auto; - margin-right: 0; - color: #000000; -} - -.types { - padding-inline: var(--fds-spacing-6); - padding-block: var(--fds-spacing-4); +.typesList { display: flex; flex-direction: column; - align-items: stretch; + padding-block: var(--fds-spacing-5); + padding-inline: var(--fds-spacing-6); gap: var(--fds-spacing-3); } diff --git a/frontend/packages/schema-editor/src/components/TypesInspector/TypesInspector.tsx b/frontend/packages/schema-editor/src/components/TypesInspector/TypesInspector.tsx index 6483f0b08e2..ea597f7691f 100644 --- a/frontend/packages/schema-editor/src/components/TypesInspector/TypesInspector.tsx +++ b/frontend/packages/schema-editor/src/components/TypesInspector/TypesInspector.tsx @@ -39,19 +39,19 @@ export const TypesInspector = ({ schemaItems }: TypesInspectorProps) => { return (
-
- +
+ {t('schema_editor.types')} } onClick={handleAddDefinition} title={t('schema_editor.add_type')} />
-
+
{schemaItems.map((item) => ( Date: Wed, 16 Oct 2024 14:46:58 +0200 Subject: [PATCH 06/10] Fix selected type being sunk to bottom --- .../SchemaEditor/SchemaEditor.module.css | 18 +++--------------- 1 file changed, 3 insertions(+), 15 deletions(-) diff --git a/frontend/packages/schema-editor/src/components/SchemaEditor/SchemaEditor.module.css b/frontend/packages/schema-editor/src/components/SchemaEditor/SchemaEditor.module.css index ed349915d51..b7117d4a636 100644 --- a/frontend/packages/schema-editor/src/components/SchemaEditor/SchemaEditor.module.css +++ b/frontend/packages/schema-editor/src/components/SchemaEditor/SchemaEditor.module.css @@ -1,8 +1,8 @@ .editor { + display: flex; + flex-direction: column; + width: 100%; background-color: white; - display: grid; - grid-template-rows: auto 1fr; - flex: 1; min-height: 200px; overflow-y: auto; } @@ -13,15 +13,3 @@ overflow-y: auto; width: 100%; } - -.typeInfo { - display: flex; - flex-direction: row; - background-color: #022f51; - color: #ffffff; - align-items: center; - justify-content: center; - margin-left: auto; - margin-right: auto; - width: 100%; -} From 8687736f89c2f1f067b6abee6a7b108bbc1c7f63 Mon Sep 17 00:00:00 2001 From: Erling Hauan Date: Thu, 17 Oct 2024 14:21:28 +0200 Subject: [PATCH 07/10] Update headings and add a test for no item selected --- .../NodePanel/HeadingRow/HeadingRow.tsx | 12 ++++++---- .../SchemaInspector.module.css | 2 +- .../SchemaInspector/SchemaInspector.test.tsx | 24 ++++++++++++++----- .../SchemaInspector/SchemaInspector.tsx | 6 +++-- .../TypesInspector/TypesInspector.tsx | 2 +- 5 files changed, 32 insertions(+), 14 deletions(-) diff --git a/frontend/packages/schema-editor/src/components/NodePanel/HeadingRow/HeadingRow.tsx b/frontend/packages/schema-editor/src/components/NodePanel/HeadingRow/HeadingRow.tsx index 1c4976365cd..1275e8fbf6e 100644 --- a/frontend/packages/schema-editor/src/components/NodePanel/HeadingRow/HeadingRow.tsx +++ b/frontend/packages/schema-editor/src/components/NodePanel/HeadingRow/HeadingRow.tsx @@ -1,5 +1,4 @@ import classes from './HeadingRow.module.css'; -import { Heading } from '@digdir/designsystemet-react'; import { NodeIcon } from '../../NodeIcon'; import type { ReactNode } from 'react'; import React from 'react'; @@ -13,7 +12,12 @@ import { SchemaModel, } from '@altinn/schema-model'; import { useTranslation } from 'react-i18next'; -import { StudioButton, StudioDeleteButton, StudioDropdownMenu } from '@studio/components'; +import { + StudioButton, + StudioDeleteButton, + StudioDropdownMenu, + StudioHeading, +} from '@studio/components'; import { BooleanIcon, CombinationIcon, @@ -44,7 +48,7 @@ export const HeadingRow = ({ schemaPointer }: HeadingRowProps) => { return (
- + { > {title} - + {isValidParent && } {!isDataModelRoot && }
diff --git a/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.module.css b/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.module.css index bc949fb4f97..9bc24f62495 100644 --- a/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.module.css +++ b/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.module.css @@ -4,7 +4,7 @@ height: 100%; } -.noItemHeadingContainer { +.noSelectionHeadingContainer { display: flex; flex-direction: column; justify-content: center; diff --git a/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.test.tsx b/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.test.tsx index e272a513ecb..2d9ee24cb0f 100644 --- a/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.test.tsx +++ b/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.test.tsx @@ -42,7 +42,19 @@ const renderSchemaInspector = (uiSchemaMap: UiSchemaNodes, selectedItem?: UiSche describe('SchemaInspector', () => { afterEach(jest.clearAllMocks); - it('Saves data model when entering text in textboxes', async () => { + it('displays a message when no node is selected', () => { + renderSchemaInspector(mockUiSchema); + + const noSelectionHeader = screen.getByRole('heading', { + name: textMock('schema_editor.properties'), + }); + const noSelectionParagraph = screen.getByText(textMock('schema_editor.no_item_selected')); + + expect(noSelectionHeader).toBeInTheDocument(); + expect(noSelectionParagraph).toBeInTheDocument(); + }); + + it('saves data model when entering text in textboxes', async () => { renderSchemaInspector(mockUiSchema, getMockSchemaByPath('#/$defs/Kommentar2000Restriksjon')); const tablist = screen.getByRole('tablist'); expect(tablist).toBeDefined(); @@ -59,13 +71,13 @@ describe('SchemaInspector', () => { expect(saveDataModel).toHaveBeenCalled(); }); - test('renders no item if nothing is selected', () => { + it('renders no item if nothing is selected', () => { renderSchemaInspector(mockUiSchema); const textboxes = screen.queryAllByRole('textbox'); expect(textboxes).toHaveLength(0); }); - it('Saves data model correctly when changing restriction value', async () => { + it('saves data model correctly when changing restriction value', async () => { const schemaPointer = '#/$defs/Kommentar2000Restriksjon'; renderSchemaInspector(mockUiSchema, getMockSchemaByPath(schemaPointer)); @@ -93,7 +105,7 @@ describe('SchemaInspector', () => { expect(updatedNode.restrictions.minLength).toEqual(parseInt(minLength)); }); - test('Adds new object field when pressing the enter key', async () => { + it('adds new object field when pressing the enter key', async () => { const parentNodePointer = '#/properties/test'; const childNodePointer = '#/properties/test/properties/abc'; const rootNode: FieldNode = { @@ -125,7 +137,7 @@ describe('SchemaInspector', () => { }); }); - test('Adds new valid value field when pressing the enter key', async () => { + it('adds new valid value field when pressing the enter key', async () => { const itemPointer = '#/properties/test'; const enumValue = 'valid value'; const rootNode: FieldNode = { @@ -155,7 +167,7 @@ describe('SchemaInspector', () => { expect(saveDataModel).not.toHaveBeenCalled(); }); - it('Does not display the fields tab when the selected item is a combination', async () => { + it('does not display the fields tab when the selected item is a combination', async () => { const itemPointer = '#/properties/testcombination'; const rootNode: FieldNode = { ...rootNodeMock, diff --git a/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.tsx b/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.tsx index 5ed263f4292..2b6991aaefe 100644 --- a/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.tsx +++ b/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.tsx @@ -23,8 +23,10 @@ export const SchemaInspector = (): ReactElement => { if (!selectedItem) { return ( <> -
- {t('schema_editor.properties')} +
+ + {t('schema_editor.properties')} +
{t('schema_editor.no_item_selected')} diff --git a/frontend/packages/schema-editor/src/components/TypesInspector/TypesInspector.tsx b/frontend/packages/schema-editor/src/components/TypesInspector/TypesInspector.tsx index ea597f7691f..27abff95072 100644 --- a/frontend/packages/schema-editor/src/components/TypesInspector/TypesInspector.tsx +++ b/frontend/packages/schema-editor/src/components/TypesInspector/TypesInspector.tsx @@ -40,7 +40,7 @@ export const TypesInspector = ({ schemaItems }: TypesInspectorProps) => { return (
- + {t('schema_editor.types')} Date: Mon, 21 Oct 2024 14:53:42 +0200 Subject: [PATCH 08/10] Fix most PR comments --- .../NodePanel/HeadingRow/HeadingRow.module.css | 11 +++++++++-- .../components/NodePanel/HeadingRow/HeadingRow.tsx | 2 +- .../SchemaInspector/SchemaInspector.test.tsx | 4 ++-- .../components/SchemaInspector/SchemaInspector.tsx | 12 +++++------- 4 files changed, 17 insertions(+), 12 deletions(-) diff --git a/frontend/packages/schema-editor/src/components/NodePanel/HeadingRow/HeadingRow.module.css b/frontend/packages/schema-editor/src/components/NodePanel/HeadingRow/HeadingRow.module.css index 2ef7c7d456e..beef35d7c0c 100644 --- a/frontend/packages/schema-editor/src/components/NodePanel/HeadingRow/HeadingRow.module.css +++ b/frontend/packages/schema-editor/src/components/NodePanel/HeadingRow/HeadingRow.module.css @@ -6,12 +6,19 @@ border-bottom: 1px solid var(--fds-semantic-border-neutral-subtle); } -.heading .headingButton { +.headingButton { display: flex; font: var(--fds-typography-paragraph-short-large); + border-left: var(--studio-treeitem-vertical-line-width) solid transparent; + border-top-left-radius: 0; + border-bottom-left-radius: 0; } -.root.selected .headingButton { +.headingButton:hover { + background-color: var(--fds-colors-blue-100); +} + +.selected .headingButton { background-color: var(--studio-treeitem-selected-background-colour); border-left-color: var(--studio-treeitem-vertical-line-colour-root); } diff --git a/frontend/packages/schema-editor/src/components/NodePanel/HeadingRow/HeadingRow.tsx b/frontend/packages/schema-editor/src/components/NodePanel/HeadingRow/HeadingRow.tsx index 1275e8fbf6e..19252a281f2 100644 --- a/frontend/packages/schema-editor/src/components/NodePanel/HeadingRow/HeadingRow.tsx +++ b/frontend/packages/schema-editor/src/components/NodePanel/HeadingRow/HeadingRow.tsx @@ -48,7 +48,7 @@ export const HeadingRow = ({ schemaPointer }: HeadingRowProps) => { return (
- + { it('displays a message when no node is selected', () => { renderSchemaInspector(mockUiSchema); - const noSelectionHeader = screen.getByRole('heading', { + const propertiesHeader = screen.getByRole('heading', { name: textMock('schema_editor.properties'), }); const noSelectionParagraph = screen.getByText(textMock('schema_editor.no_item_selected')); - expect(noSelectionHeader).toBeInTheDocument(); + expect(propertiesHeader).toBeInTheDocument(); expect(noSelectionParagraph).toBeInTheDocument(); }); diff --git a/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.tsx b/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.tsx index 2b6991aaefe..5bfbe303a77 100644 --- a/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.tsx +++ b/frontend/packages/schema-editor/src/components/SchemaInspector/SchemaInspector.tsx @@ -48,15 +48,13 @@ export const SchemaInspector = (): ReactElement => { - {shouldDisplayFieldsTab ? ( - + + {shouldDisplayFieldsTab ? ( - - ) : ( - + ) : ( {t('app_data_modelling.fields_information')} - - )} + )} + ); }; From 6353e9074ef90c0e5961aee86a7a64811822b3ac Mon Sep 17 00:00:00 2001 From: Erling Hauan Date: Mon, 21 Oct 2024 19:34:31 +0200 Subject: [PATCH 09/10] Add label and vertical divider to toolbar --- .../TopToolbar/SchemaSelect.module.css | 8 +++ .../TopToolbar/SchemaSelect.tsx | 50 +++++++++++-------- .../TopToolbar/TopToolbar.module.css | 39 +++------------ .../TopToolbar/TopToolbar.tsx | 44 +++++++++------- .../HeadingRow/HeadingRow.module.css | 12 +++-- 5 files changed, 77 insertions(+), 76 deletions(-) diff --git a/frontend/app-development/features/dataModelling/SchemaEditorWithToolbar/TopToolbar/SchemaSelect.module.css b/frontend/app-development/features/dataModelling/SchemaEditorWithToolbar/TopToolbar/SchemaSelect.module.css index 7914b8c1c12..3eeeab9785a 100644 --- a/frontend/app-development/features/dataModelling/SchemaEditorWithToolbar/TopToolbar/SchemaSelect.module.css +++ b/frontend/app-development/features/dataModelling/SchemaEditorWithToolbar/TopToolbar/SchemaSelect.module.css @@ -1,4 +1,12 @@ +.selectContainer { + display: flex; + align-items: center; + gap: var(--fds-spacing-4); +} + .select { + display: flex; + flex-direction: row; cursor: pointer; min-width: 20vw; } diff --git a/frontend/app-development/features/dataModelling/SchemaEditorWithToolbar/TopToolbar/SchemaSelect.tsx b/frontend/app-development/features/dataModelling/SchemaEditorWithToolbar/TopToolbar/SchemaSelect.tsx index d1ff68acf42..36439b1e28b 100644 --- a/frontend/app-development/features/dataModelling/SchemaEditorWithToolbar/TopToolbar/SchemaSelect.tsx +++ b/frontend/app-development/features/dataModelling/SchemaEditorWithToolbar/TopToolbar/SchemaSelect.tsx @@ -5,7 +5,8 @@ import { groupMetadataOptions, } from '../../../../utils/metadataUtils'; import type { MetadataOption } from '../../../../types/MetadataOption'; -import { NativeSelect } from '@digdir/designsystemet-react'; +import { Label } from '@digdir/designsystemet-react'; +import { StudioNativeSelect } from '@studio/components'; import classes from './SchemaSelect.module.css'; import type { DataModelMetadata } from 'app-shared/types/DataModelMetadata'; import { useTranslation } from 'react-i18next'; @@ -30,26 +31,31 @@ export const SchemaSelect = ({ setSelectedOption(findMetadataOptionByRelativeUrl(options, repositoryUrl)); return ( - handleChange(e.target.value)} - value={selectedOption?.value.repositoryRelativeUrl} - size='small' - > - {optionGroups.map((group) => ( - - {group.options.map((option) => ( - - ))} - - ))} - +
+ + handleChange(e.target.value)} + value={selectedOption?.value.repositoryRelativeUrl} + size='sm' + > + {optionGroups.map((group) => ( + + {group.options.map((option) => ( + + ))} + + ))} + +
); }; diff --git a/frontend/app-development/features/dataModelling/SchemaEditorWithToolbar/TopToolbar/TopToolbar.module.css b/frontend/app-development/features/dataModelling/SchemaEditorWithToolbar/TopToolbar/TopToolbar.module.css index 5fdb2d3f0c4..f488cd29804 100644 --- a/frontend/app-development/features/dataModelling/SchemaEditorWithToolbar/TopToolbar/TopToolbar.module.css +++ b/frontend/app-development/features/dataModelling/SchemaEditorWithToolbar/TopToolbar/TopToolbar.module.css @@ -1,27 +1,11 @@ .toolbar { - align-items: center; - background: #fff; - border-bottom: 1px solid #c9c9c9; + height: var(--subtoolbar-height); + background: white; display: flex; - padding: 8px; -} - -.toolbar > *, -.toolbar > { - margin-right: 1rem; -} - -.toolbar button[class*='selected'] { - color: #fff; -} - -.toolbar button[class*='toggle'] { - font-size: 1em; - padding-top: 4px; -} - -.generateButtonWrapper { - flex: 1; + align-items: center; + border-bottom: 1px solid var(--fds-semantic-border-neutral-subtle); + padding-inline: var(--fds-spacing-6); + gap: var(--fds-spacing-2); } @keyframes fadeOut { @@ -42,14 +26,3 @@ .statusPopover.success { animation: fadeOut 1.5s; } - -.toggleButtonGroupWrapper { - flex: 0.5; -} - -.right { - display: flex; - flex: 3; - gap: 1rem; - justify-content: flex-end; -} diff --git a/frontend/app-development/features/dataModelling/SchemaEditorWithToolbar/TopToolbar/TopToolbar.tsx b/frontend/app-development/features/dataModelling/SchemaEditorWithToolbar/TopToolbar/TopToolbar.tsx index 9139f7af038..ce72e6820cd 100644 --- a/frontend/app-development/features/dataModelling/SchemaEditorWithToolbar/TopToolbar/TopToolbar.tsx +++ b/frontend/app-development/features/dataModelling/SchemaEditorWithToolbar/TopToolbar/TopToolbar.tsx @@ -49,6 +49,12 @@ export function TopToolbar({ return (
+ - + -
-
- {modelPath && ( - - onSetSchemaGenerationErrorMessages(errorMessages) - } - /> - )} -
-
+ {modelPath && ( + + onSetSchemaGenerationErrorMessages(errorMessages) + } + /> + )}
); } + +const VerticalDivider = () => { + return ( +
+ ); +}; diff --git a/frontend/packages/schema-editor/src/components/NodePanel/HeadingRow/HeadingRow.module.css b/frontend/packages/schema-editor/src/components/NodePanel/HeadingRow/HeadingRow.module.css index beef35d7c0c..b808b23164f 100644 --- a/frontend/packages/schema-editor/src/components/NodePanel/HeadingRow/HeadingRow.module.css +++ b/frontend/packages/schema-editor/src/components/NodePanel/HeadingRow/HeadingRow.module.css @@ -9,9 +9,9 @@ .headingButton { display: flex; font: var(--fds-typography-paragraph-short-large); - border-left: var(--studio-treeitem-vertical-line-width) solid transparent; border-top-left-radius: 0; border-bottom-left-radius: 0; + border: 0; } .headingButton:hover { @@ -19,6 +19,12 @@ } .selected .headingButton { - background-color: var(--studio-treeitem-selected-background-colour); - border-left-color: var(--studio-treeitem-vertical-line-colour-root); + /*background-color: var(--studio-treeitem-selected-background-colour);*/ + background: linear-gradient( + to right, + var(--studio-treeitem-vertical-line-colour-root) 0 var(--studio-treeitem-vertical-line-width), + var(--studio-treeitem-selected-background-colour) var(--studio-treeitem-vertical-line-width) + 100% + ); + /*border-left-color: var(--studio-treeitem-vertical-line-colour-root);*/ } From e30ff3817899f7f3ef52fa9969f7359a12aeede8 Mon Sep 17 00:00:00 2001 From: Erling Hauan Date: Tue, 22 Oct 2024 09:41:01 +0200 Subject: [PATCH 10/10] Design decided, but not functionally implemented --- .../TopToolbar/TopToolbar.module.css | 8 ++ .../TopToolbar/TopToolbar.tsx | 120 +++++++++++++----- .../NodePanel/HeadingRow/HeadingRow.tsx | 14 +- .../src/components/NodePanel/NodePanel.tsx | 2 +- .../TypesInspector/TypesInspector.tsx | 4 +- 5 files changed, 115 insertions(+), 33 deletions(-) diff --git a/frontend/app-development/features/dataModelling/SchemaEditorWithToolbar/TopToolbar/TopToolbar.module.css b/frontend/app-development/features/dataModelling/SchemaEditorWithToolbar/TopToolbar/TopToolbar.module.css index f488cd29804..721450e4cb7 100644 --- a/frontend/app-development/features/dataModelling/SchemaEditorWithToolbar/TopToolbar/TopToolbar.module.css +++ b/frontend/app-development/features/dataModelling/SchemaEditorWithToolbar/TopToolbar/TopToolbar.module.css @@ -8,6 +8,14 @@ gap: var(--fds-spacing-2); } +.blueBackground { + background: var(--fds-colors-blue-100); +} + +.modelName { + /*font-weight: 400;*/ +} + @keyframes fadeOut { 0% { opacity: 1; diff --git a/frontend/app-development/features/dataModelling/SchemaEditorWithToolbar/TopToolbar/TopToolbar.tsx b/frontend/app-development/features/dataModelling/SchemaEditorWithToolbar/TopToolbar/TopToolbar.tsx index ce72e6820cd..a66c827cc82 100644 --- a/frontend/app-development/features/dataModelling/SchemaEditorWithToolbar/TopToolbar/TopToolbar.tsx +++ b/frontend/app-development/features/dataModelling/SchemaEditorWithToolbar/TopToolbar/TopToolbar.tsx @@ -9,9 +9,12 @@ import type { CreateDataModelMutationArgs } from '../../../../hooks/mutations/us import { useCreateDataModelMutation } from '../../../../hooks/mutations'; import type { MetadataOption } from '../../../../types/MetadataOption'; import { GenerateModelsButton } from './GenerateModelsButton'; -import { usePrevious } from '@studio/components'; +import { StudioButton, StudioParagraph, usePrevious } from '@studio/components'; import type { DataModelMetadata } from 'app-shared/types/DataModelMetadata'; import { useTranslation } from 'react-i18next'; +import { Label, Link } from '@digdir/designsystemet-react'; +import { ArrowLeftIcon, ChevronRightIcon } from '@studio/icons'; +import cn from 'classnames'; export interface TopToolbarProps { createNewOpen: boolean; @@ -47,35 +50,46 @@ export function TopToolbar({ setCreateNewOpen(false); }; + const showTypeToolbar = false; + return ( -
- - - - - - {modelPath && ( - - onSetSchemaGenerationErrorMessages(errorMessages) - } - /> +
+ {showTypeToolbar ? ( + + ) : ( + <> + + + + + {/**/} + {modelPath && ( + + onSetSchemaGenerationErrorMessages(errorMessages) + } + /> + )} + )}
); @@ -91,3 +105,51 @@ const VerticalDivider = () => { /> ); }; + +const TypeControls = () => { + const showBreadcrumbs = true; + + return ( +
+ {showBreadcrumbs ? ( + <> +
+ + Datamodell: model + + + + Type: name0 + +
+ {/*}>Tilbake til datamodell*/} + + ) : ( + <> +
+ +
+ }> + Tilbake til datamodell model + + + )} +
+ ); +}; diff --git a/frontend/packages/schema-editor/src/components/NodePanel/HeadingRow/HeadingRow.tsx b/frontend/packages/schema-editor/src/components/NodePanel/HeadingRow/HeadingRow.tsx index 19252a281f2..3b9168c6bcd 100644 --- a/frontend/packages/schema-editor/src/components/NodePanel/HeadingRow/HeadingRow.tsx +++ b/frontend/packages/schema-editor/src/components/NodePanel/HeadingRow/HeadingRow.tsx @@ -30,6 +30,7 @@ import { useSavableSchemaModel } from '../../../hooks/useSavableSchemaModel'; import type { TranslationKey } from '@altinn-studio/language/type'; import { useAddProperty } from '../../../hooks/useAddProperty'; import cn from 'classnames'; +import { ArrowLeftIcon } from '@studio/icons'; export interface HeadingRowProps { schemaPointer?: string; @@ -60,7 +61,8 @@ export const HeadingRow = ({ schemaPointer }: HeadingRowProps) => { {isValidParent && } - {!isDataModelRoot && } + + {/*{!isDataModelRoot && }*/}
); }; @@ -175,3 +177,13 @@ const DeleteButton = ({ schemaPointer }: DeleteButtonProps) => { ); }; + +const BackButton = () => ( +
+ }>Tilbake til datamodell +
+); diff --git a/frontend/packages/schema-editor/src/components/NodePanel/NodePanel.tsx b/frontend/packages/schema-editor/src/components/NodePanel/NodePanel.tsx index 47012e7d3ec..1cd57aef35f 100644 --- a/frontend/packages/schema-editor/src/components/NodePanel/NodePanel.tsx +++ b/frontend/packages/schema-editor/src/components/NodePanel/NodePanel.tsx @@ -22,7 +22,7 @@ export const NodePanel = ({ schemaPointer }: NodePanelProps) => { return ( <> - {!isDataModelRoot && } + {/*{!isDataModelRoot && }*/}
{isNodeValidParent(node) && }
diff --git a/frontend/packages/schema-editor/src/components/TypesInspector/TypesInspector.tsx b/frontend/packages/schema-editor/src/components/TypesInspector/TypesInspector.tsx index 27abff95072..e6f0d463224 100644 --- a/frontend/packages/schema-editor/src/components/TypesInspector/TypesInspector.tsx +++ b/frontend/packages/schema-editor/src/components/TypesInspector/TypesInspector.tsx @@ -38,7 +38,7 @@ export const TypesInspector = ({ schemaItems }: TypesInspectorProps) => { }; return ( -
+ <>
{t('schema_editor.types')} @@ -61,6 +61,6 @@ export const TypesInspector = ({ schemaItems }: TypesInspectorProps) => { /> ))}
-
+ ); };