From f8856c502a59dadd20efaa9f191e82e039dffa56 Mon Sep 17 00:00:00 2001 From: Ivar Nesje Date: Fri, 1 Oct 2021 13:27:31 +0200 Subject: [PATCH 1/7] Add support for labelGrid innerGrid lets you adjust the size of form fields when the expected content is short. Here I provide a way to set labelGrid in order to enable long lists of short questions and answers to be presented in a table like way to save screen space. --- .../src/components/GenericComponent.tsx | 9 ++++++++- .../src/features/form/layout/index.ts | 1 + 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/GenericComponent.tsx b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/GenericComponent.tsx index 093e9fa1601..85ce9bc1042 100644 --- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/GenericComponent.tsx +++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/GenericComponent.tsx @@ -239,7 +239,14 @@ export function GenericComponent(props: IGenericComponentProps) { alignItems='baseline' > {!noLabelComponents.includes(props.type) && - + Date: Fri, 1 Oct 2021 15:19:59 +0200 Subject: [PATCH 2/7] // eslint-disable-next-line react/jsx-no-bind Theese are ignored in PartySelection as well, and are really annoying when they break altinn-studio\src\Altinn.Apps\AppFrontend\react\altinn-app-frontend> npm start --- .../src/features/instantiate/containers/PartySelection.tsx | 1 + .../src/shared/components/altinnPartySearch.tsx | 1 + .../altinn-app-frontend/src/components/altinnPartySearch.tsx | 1 + 3 files changed, 3 insertions(+) diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/features/instantiate/containers/PartySelection.tsx b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/features/instantiate/containers/PartySelection.tsx index 7838d056d35..2b1e2b04138 100644 --- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/features/instantiate/containers/PartySelection.tsx +++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/features/instantiate/containers/PartySelection.tsx @@ -1,4 +1,5 @@ /* eslint-disable no-nested-ternary */ +/* eslint-disable react/jsx-no-bind */ /* eslint-disable implicit-arrow-linebreak */ import { createStyles, Grid, Typography, withStyles, WithStyles } from '@material-ui/core'; import AddIcon from '@material-ui/icons/Add'; diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/shared/components/altinnPartySearch.tsx b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/shared/components/altinnPartySearch.tsx index 333fc2507b3..c701fcef665 100644 --- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/shared/components/altinnPartySearch.tsx +++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/shared/components/altinnPartySearch.tsx @@ -42,6 +42,7 @@ function AltinnPartySearch(props: IAltinnPartySearchProps) { language.party_selection.search_placeholder } showLabel={false} + // eslint-disable-next-line react/jsx-no-bind onChange={onChangeSearchString} placeholder={ !language.party_selection ? diff --git a/src/Altinn.Apps/AppTemplates/react/altinn-app-frontend/src/components/altinnPartySearch.tsx b/src/Altinn.Apps/AppTemplates/react/altinn-app-frontend/src/components/altinnPartySearch.tsx index 6949fc9ab73..7bdd6e757af 100644 --- a/src/Altinn.Apps/AppTemplates/react/altinn-app-frontend/src/components/altinnPartySearch.tsx +++ b/src/Altinn.Apps/AppTemplates/react/altinn-app-frontend/src/components/altinnPartySearch.tsx @@ -44,6 +44,7 @@ function AltinnPartySearch(props: IAltinnPartySearchProps) { language.party_selection.search_placeholder } showLabel={false} + // eslint-disable-next-line react/jsx-no-bind onChange={onChangeSearchString} placeholder={ !language.party_selection ? From 761b1fc76ae7f50591da2ca9d59686e1cec06b90 Mon Sep 17 00:00:00 2001 From: Ivar Nesje Date: Sat, 9 Oct 2021 10:11:17 +0200 Subject: [PATCH 3/7] Add underline when labelGrid is in use. --- .../src/components/GenericComponent.tsx | 106 ++++++++++-------- .../src/styles/GenericComponent.css | 44 ++++++++ 2 files changed, 105 insertions(+), 45 deletions(-) create mode 100644 src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/styles/GenericComponent.css diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/GenericComponent.tsx b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/GenericComponent.tsx index 85ce9bc1042..a49cf26376e 100644 --- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/GenericComponent.tsx +++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/GenericComponent.tsx @@ -6,12 +6,13 @@ import { getTextResourceByKey } from 'altinn-shared/utils'; import { ILabelSettings, ITextResource, Triggers } from 'src/types'; import { IComponentValidations } from 'src/types'; import { Grid, makeStyles } from '@material-ui/core'; +import classNames from 'classnames'; import { ILanguageState } from '../shared/resources/language/languageReducers'; // eslint-disable-next-line import/no-cycle import components from '.'; import FormDataActions from '../features/form/data/formDataActions'; import { IFormData } from '../features/form/data/formDataReducer'; -import { IDataModelBindings, IGrid, ITextResourceBindings } from '../features/form/layout'; +import { IDataModelBindings, IGrid, IGridStyling, ITextResourceBindings } from '../features/form/layout'; import RuleActions from '../features/form/rules/rulesActions'; import { setCurrentSingleFieldValidation } from '../features/form/validation/validationSlice'; import { makeGetFocus, makeGetHidden } from '../selectors/getLayoutData'; @@ -27,6 +28,7 @@ import { getFormDataForComponent, selectComponentTexts } from '../utils/formComponentUtils'; import { FormLayoutActions } from '../features/form/layout/formLayoutSlice'; import Description from '../features/form/components/Description'; +import '../styles/GenericComponent.css'; export interface IGenericComponentProps { id: string; @@ -226,55 +228,58 @@ export function GenericComponent(props: IGenericComponentProps) { ]; return ( - - {!noLabelComponents.includes(props.type) && + <> - - - - } - - - - {isSimple && hasValidationMessages && - renderValidationMessagesForComponent(componentValidations?.simpleBinding, props.id) + {!noLabelComponents.includes(props.type) && + + + + } + + + + {isSimple && hasValidationMessages && + renderValidationMessagesForComponent(componentValidations?.simpleBinding, props.id) + } + - +
+ ); } @@ -298,4 +303,15 @@ const RenderLabelScoped = (props: IRenderLabelProps) => { ); }; +const gridToHiddenProps = (props?: IGridStyling) => { + return classNames({ + hrLabelGrid: !!props, + xs: props?.xs > 0 && props?.xs < 12, + sm: props?.sm > 0 && props?.sm < 12, + md: props?.md > 0 && props?.md < 12, + lg: props?.lg > 0 && props?.lg < 12, + xl: props?.xl > 0 && props?.xl < 12, + }); +}; + export default GenericComponent; diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/styles/GenericComponent.css b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/styles/GenericComponent.css new file mode 100644 index 00000000000..3a65afd37a3 --- /dev/null +++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/styles/GenericComponent.css @@ -0,0 +1,44 @@ +.hrLabelGrid{ + display: none; + width: 100%; + margin: 0 12px; + padding: 0; + border-top: 1px dashed #949494; + height: 0; +} + +/* +breakpoints from altinn theme + xs: 0, + sm: 600, + md: 1025, + lg: 1440, + xl: 1920, */ + +.hrLabelGrid.xs{ + display:block; +} + +@media (min-width: 600px) { + .hrLabelGrid.sm{ + display:block; + } +} + +@media (min-width: 1025px) { + .hrLabelGrid.md { + display:block; + } +} + +@media (min-width: 1440px) { + .hrLabelGrid.lg { + display:block; + } +} + +@media (min-width: 1920px) { + .hrLabelGrid.xl { + display:block; + } +} \ No newline at end of file From 11837de157c34b6bf9c83e73ff476dde2af41f85 Mon Sep 17 00:00:00 2001 From: Ivar Nesje Date: Tue, 19 Oct 2021 15:44:44 +0200 Subject: [PATCH 4/7] Use jss instead of css styling, and use border-bottom on Grid instead of a separate
tag --- .../src/components/GenericComponent.tsx | 51 ++++++++++++++----- .../src/styles/GenericComponent.css | 44 ---------------- 2 files changed, 37 insertions(+), 58 deletions(-) delete mode 100644 src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/styles/GenericComponent.css diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/GenericComponent.tsx b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/GenericComponent.tsx index a49cf26376e..be362308d0f 100644 --- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/GenericComponent.tsx +++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/GenericComponent.tsx @@ -28,7 +28,6 @@ import { getFormDataForComponent, selectComponentTexts } from '../utils/formComponentUtils'; import { FormLayoutActions } from '../features/form/layout/formLayoutSlice'; import Description from '../features/form/components/Description'; -import '../styles/GenericComponent.css'; export interface IGenericComponentProps { id: string; @@ -44,13 +43,36 @@ export interface IGenericComponentProps { hidden?: boolean; } -const useStyles = makeStyles({ +const useStyles = makeStyles((theme) => ({ container: { '@media print': { display: 'flex !important', }, }, -}); + xs: { + 'border-bottom': '1px dashed #949494', + }, + sm: { + [theme.breakpoints.up('sm')]: { + 'border-bottom': '1px dashed #949494', + }, + }, + md: { + [theme.breakpoints.up('md')]: { + 'border-bottom': '1px dashed #949494', + }, + }, + lg: { + [theme.breakpoints.up('lg')]: { + 'border-bottom': '1px dashed #949494', + }, + }, + xl: { + [theme.breakpoints.up('xl')]: { + 'border-bottom': '1px dashed #949494', + }, + }, +})); export function GenericComponent(props: IGenericComponentProps) { const { @@ -238,7 +260,9 @@ export function GenericComponent(props: IGenericComponentProps) { lg={props.grid?.lg || false} xl={props.grid?.xl || false} key={`grid-${props.id}`} - className={`form-group a-form-group ${classes.container}`} + className={ + classNames('form-group', 'a-form-group', classes.container, gridToHiddenProps(props.grid?.labelGrid, classes)) + } alignItems='baseline' > {!noLabelComponents.includes(props.type) && @@ -278,7 +302,6 @@ export function GenericComponent(props: IGenericComponentProps) { } -
); } @@ -303,15 +326,15 @@ const RenderLabelScoped = (props: IRenderLabelProps) => { ); }; -const gridToHiddenProps = (props?: IGridStyling) => { - return classNames({ - hrLabelGrid: !!props, - xs: props?.xs > 0 && props?.xs < 12, - sm: props?.sm > 0 && props?.sm < 12, - md: props?.md > 0 && props?.md < 12, - lg: props?.lg > 0 && props?.lg < 12, - xl: props?.xl > 0 && props?.xl < 12, - }); +const gridToHiddenProps = (labelGrid: IGridStyling, classes: ReturnType) => { + if (!labelGrid) return undefined; + return { + [classes.xs]: labelGrid.xs > 0 && labelGrid.xs < 12, + [classes.sm]: labelGrid.sm > 0 && labelGrid.sm < 12, + [classes.md]: labelGrid.md > 0 && labelGrid.md < 12, + [classes.lg]: labelGrid.lg > 0 && labelGrid.lg < 12, + [classes.xl]: labelGrid.xl > 0 && labelGrid.xl < 12, + }; }; export default GenericComponent; diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/styles/GenericComponent.css b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/styles/GenericComponent.css deleted file mode 100644 index 3a65afd37a3..00000000000 --- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/styles/GenericComponent.css +++ /dev/null @@ -1,44 +0,0 @@ -.hrLabelGrid{ - display: none; - width: 100%; - margin: 0 12px; - padding: 0; - border-top: 1px dashed #949494; - height: 0; -} - -/* -breakpoints from altinn theme - xs: 0, - sm: 600, - md: 1025, - lg: 1440, - xl: 1920, */ - -.hrLabelGrid.xs{ - display:block; -} - -@media (min-width: 600px) { - .hrLabelGrid.sm{ - display:block; - } -} - -@media (min-width: 1025px) { - .hrLabelGrid.md { - display:block; - } -} - -@media (min-width: 1440px) { - .hrLabelGrid.lg { - display:block; - } -} - -@media (min-width: 1920px) { - .hrLabelGrid.xl { - display:block; - } -} \ No newline at end of file From d67d04f938c9387c6f04bbcaafa35b1e693c3db9 Mon Sep 17 00:00:00 2001 From: Ivar Nesje Date: Tue, 19 Oct 2021 15:46:58 +0200 Subject: [PATCH 5/7] remove obsolete fragment. --- .../src/components/GenericComponent.tsx | 92 +++++++++---------- 1 file changed, 45 insertions(+), 47 deletions(-) diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/GenericComponent.tsx b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/GenericComponent.tsx index be362308d0f..f6c5d78c608 100644 --- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/GenericComponent.tsx +++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/GenericComponent.tsx @@ -250,59 +250,57 @@ export function GenericComponent(props: IGenericComponentProps) { ]; return ( - <> - - {!noLabelComponents.includes(props.type) && - - - - - } + + {!noLabelComponents.includes(props.type) && - - - {isSimple && hasValidationMessages && - renderValidationMessagesForComponent(componentValidations?.simpleBinding, props.id) - } + + } + + + + {isSimple && hasValidationMessages && + renderValidationMessagesForComponent(componentValidations?.simpleBinding, props.id) + } - + ); } From 8600cb62b6b8c6129c88fbc2c42c3f4cee843414 Mon Sep 17 00:00:00 2001 From: Ivar Nesje Date: Mon, 29 Nov 2021 12:10:54 +0100 Subject: [PATCH 6/7] bump frontend version --- .../AppFrontend/react/altinn-app-frontend/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/package.json b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/package.json index 960432ab1e7..ae83bf7be28 100644 --- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/package.json +++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/package.json @@ -1,6 +1,6 @@ { "name": "altinn-app-frontend", - "version": "3.17.1", + "version": "3.17.2", "description": "", "main": "index.js", "scripts": { From 527ce78084e1ef55560abe708a5db43ef95bbe2e Mon Sep 17 00:00:00 2001 From: Steffen Lorang Ekeberg Date: Mon, 29 Nov 2021 13:11:03 +0100 Subject: [PATCH 7/7] Update src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/package.json --- .../AppFrontend/react/altinn-app-frontend/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/package.json b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/package.json index ae83bf7be28..db1a81e18b8 100644 --- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/package.json +++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/package.json @@ -1,6 +1,6 @@ { "name": "altinn-app-frontend", - "version": "3.17.2", + "version": "3.18.0", "description": "", "main": "index.js", "scripts": {