From 6c709176c33c192eee70cc43d0ebf3a441da802b Mon Sep 17 00:00:00 2001 From: Norbert Csaba Herczeg Date: Wed, 5 Apr 2023 21:18:30 +0200 Subject: [PATCH] JNG-4705 view/edit nirvana (#46) * JNG-4705 view edit nirvana * JNG-4705 fix association navigation disabled state * JNG-4705 fix binary input disabled state --- .../components/TrinaryLogic.ts.hbs | 2 + .../widgets/AggregationInput.tsx.hbs | 2 +- .../widgets/AssociationButton.tsx.hbs | 6 +-- .../widgets/TrinaryLogicCombobox.tsx.hbs | 6 ++- .../src/fragments/page/page-crud-actions.hbs | 16 ++---- .../src/pages/widgets/binarytypeinput.hbs | 5 +- .../actor/src/pages/widgets/dateinput.hbs | 5 +- .../actor/src/pages/widgets/datetimeinput.hbs | 11 +++-- .../src/pages/widgets/enumerationcombo.hbs | 9 ++-- .../src/pages/widgets/enumerationradio.hbs | 14 ++++-- .../actor/src/pages/widgets/numericinput.hbs | 9 ++-- .../actor/src/pages/widgets/switch.hbs | 26 +++++----- .../actor/src/pages/widgets/textarea.hbs | 9 ++-- .../actor/src/pages/widgets/textinput.hbs | 9 ++-- .../actor/src/pages/widgets/timeinput.hbs | 10 ++-- .../src/pages/widgets/trinarylogiccombo.hbs | 9 +++- .../resources/actor/src/theme/index.ts.hbs | 49 +++++-------------- 17 files changed, 103 insertions(+), 94 deletions(-) diff --git a/judo-ui-react/src/main/resources/actor/src/components-api/components/TrinaryLogic.ts.hbs b/judo-ui-react/src/main/resources/actor/src/components-api/components/TrinaryLogic.ts.hbs index a11d0f59..98467143 100644 --- a/judo-ui-react/src/main/resources/actor/src/components-api/components/TrinaryLogic.ts.hbs +++ b/judo-ui-react/src/main/resources/actor/src/components-api/components/TrinaryLogic.ts.hbs @@ -12,6 +12,8 @@ export const TRINARY_LOGIC = new Map([ export interface TrinaryLogicProps { readOnly?: boolean; + disabled?: boolean; + editMode?: boolean; value?: boolean | null; id?: string; label: string; diff --git a/judo-ui-react/src/main/resources/actor/src/components/widgets/AggregationInput.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/components/widgets/AggregationInput.tsx.hbs index 2e51d9e1..6dfff662 100644 --- a/judo-ui-react/src/main/resources/actor/src/components/widgets/AggregationInput.tsx.hbs +++ b/judo-ui-react/src/main/resources/actor/src/components/widgets/AggregationInput.tsx.hbs @@ -69,7 +69,7 @@ export const AggregationInput = ({ focused={focused} fullWidth value={labelList.filter(l => !!l && l.length > 0).join(' - ')} - className={!onSet || disabled || !editMode ? 'Mui-readOnly' : undefined} + className={ !editMode ? 'JUDO-viewMode' : undefined } sx={ { ':hover': { cursor: 'pointer', diff --git a/judo-ui-react/src/main/resources/actor/src/components/widgets/AssociationButton.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/components/widgets/AssociationButton.tsx.hbs index 7d6c8aa7..6b826eeb 100644 --- a/judo-ui-react/src/main/resources/actor/src/components/widgets/AssociationButton.tsx.hbs +++ b/judo-ui-react/src/main/resources/actor/src/components/widgets/AssociationButton.tsx.hbs @@ -5,9 +5,9 @@ import { JudoIdentifiable } from '@judo/data-api-common'; import { useJudoNavigation } from '../CustomBreadcrumb'; export interface AssociationBaseProps { -id: string; -editMode?: boolean; -children?: ReactNode; + id: string; + editMode?: boolean; + children?: ReactNode; } export interface AssociationButtonProps extends AssociationBaseProps { diff --git a/judo-ui-react/src/main/resources/actor/src/components/widgets/TrinaryLogicCombobox.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/components/widgets/TrinaryLogicCombobox.tsx.hbs index e1646a4b..83e0a051 100644 --- a/judo-ui-react/src/main/resources/actor/src/components/widgets/TrinaryLogicCombobox.tsx.hbs +++ b/judo-ui-react/src/main/resources/actor/src/components/widgets/TrinaryLogicCombobox.tsx.hbs @@ -12,6 +12,8 @@ import { MdiIcon } from '../MdiIcon'; export const TrinaryLogicCombobox = ({ readOnly = false, + disabled = false, + editMode = false, value = null, id, label, @@ -36,12 +38,12 @@ export const TrinaryLogicCombobox = ({ label={label} select value={TRINARY_LOGIC.get(value)} + className={ !editMode ? 'JUDO-viewMode' : undefined } onChange={onChangeHandler} - className={readOnly ? 'Mui-readOnly' : undefined} + disabled={disabled || readOnly} error={error} helperText={helperText} InputProps={ { - readOnly: readOnly, startAdornment: ( diff --git a/judo-ui-react/src/main/resources/actor/src/fragments/page/page-crud-actions.hbs b/judo-ui-react/src/main/resources/actor/src/fragments/page/page-crud-actions.hbs index 88363f27..2a878013 100644 --- a/judo-ui-react/src/main/resources/actor/src/fragments/page/page-crud-actions.hbs +++ b/judo-ui-react/src/main/resources/actor/src/fragments/page/page-crud-actions.hbs @@ -1,12 +1,4 @@ {{# if page.dataElement.isUpdatable }} - {editMode && ( - - - - )} {editMode && ( )} diff --git a/judo-ui-react/src/main/resources/actor/src/pages/widgets/binarytypeinput.hbs b/judo-ui-react/src/main/resources/actor/src/pages/widgets/binarytypeinput.hbs index 74893aa2..1b573dfb 100644 --- a/judo-ui-react/src/main/resources/actor/src/pages/widgets/binarytypeinput.hbs +++ b/judo-ui-react/src/main/resources/actor/src/pages/widgets/binarytypeinput.hbs @@ -20,6 +20,8 @@ type="file" error={ !!validation.get('{{ child.attributeType.name }}') } helperText={ validation.get('{{ child.attributeType.name }}') } + className={ !editMode ? 'JUDO-viewMode' : undefined } + disabled={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} } onChange={ async (event: any) => { try { const uploadedData = await uploadFile(data, '{{ child.attributeType.name }}', event.target.files, '{{ attributePath child.attributeType }}'); @@ -32,6 +34,7 @@ console.error(uploadedData); return; } + setEditMode(true); storeDiff('{{ child.attributeType.name }}', uploadedData.token); enqueueSnackbar(t('judo.files.upload-success', { defaultValue: 'File uploaded successfully.' }) as string, { variant: 'success', @@ -46,10 +49,8 @@ console.error(err); } } } - className={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} || !editMode ? 'Mui-readOnly' : undefined } InputLabelProps={ { shrink: true } } InputProps={ { - readOnly: {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} || !editMode, {{# if child.icon }} startAdornment: ( diff --git a/judo-ui-react/src/main/resources/actor/src/pages/widgets/dateinput.hbs b/judo-ui-react/src/main/resources/actor/src/pages/widgets/dateinput.hbs index b6708439..57d9dfd1 100644 --- a/judo-ui-react/src/main/resources/actor/src/pages/widgets/dateinput.hbs +++ b/judo-ui-react/src/main/resources/actor/src/pages/widgets/dateinput.hbs @@ -16,15 +16,16 @@ {{# if child.attributeType.isRequired }} required {{/ if }} {...props} id="{{ createId child }}" + className={ !editMode ? 'JUDO-viewMode' : undefined } error={!!validation.get('{{ child.attributeType.name }}')} helperText={validation.get('{{ child.attributeType.name }}')} /> ) } label={ t('{{ idToTranslationKey child.fQName application }}', { defaultValue: '{{ child.label }}' }) as string } value={ data.{{ child.attributeType.name }} ?? null } - className={ {{ boolValue child.attributeType.isReadOnly }} || !editMode ? 'Mui-readOnly' : undefined } - readOnly={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} || !editMode } + disabled={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} } onChange={ (newValue?: Dayjs | null) => { + setEditMode(true); storeDiff('{{ child.attributeType.name }}', uiDateToServiceDate(newValue)); } } {{# if child.icon }} diff --git a/judo-ui-react/src/main/resources/actor/src/pages/widgets/datetimeinput.hbs b/judo-ui-react/src/main/resources/actor/src/pages/widgets/datetimeinput.hbs index 6cbee545..de9c872e 100644 --- a/judo-ui-react/src/main/resources/actor/src/pages/widgets/datetimeinput.hbs +++ b/judo-ui-react/src/main/resources/actor/src/pages/widgets/datetimeinput.hbs @@ -11,20 +11,25 @@ > {{/ if }} ( ) } label={ t('{{ idToTranslationKey child.fQName application }}', { defaultValue: '{{ child.label }}' }) as string } value={ data.{{ child.attributeType.name }} ?? null } - className={ {{ boolValue child.attributeType.isReadOnly }} || !editMode ? 'Mui-readOnly' : undefined} - readOnly={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} || !editMode } - onChange={ (newValue: any) => storeDiff('{{ child.attributeType.name }}', newValue) } + disabled={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} } + onChange={ (newValue: any) => { + setEditMode(true); + storeDiff('{{ child.attributeType.name }}', newValue); + } } {{# if child.icon }} InputProps={ { startAdornment: ( diff --git a/judo-ui-react/src/main/resources/actor/src/pages/widgets/enumerationcombo.hbs b/judo-ui-react/src/main/resources/actor/src/pages/widgets/enumerationcombo.hbs index 957c7889..91d6b6f9 100644 --- a/judo-ui-react/src/main/resources/actor/src/pages/widgets/enumerationcombo.hbs +++ b/judo-ui-react/src/main/resources/actor/src/pages/widgets/enumerationcombo.hbs @@ -16,13 +16,16 @@ id="{{ createId child }}" label={ t('{{ idToTranslationKey child.fQName application }}', { defaultValue: '{{ child.label }}' }) as string } value={ data.{{ child.attributeType.name }} || '' } + className={ !editMode ? 'JUDO-viewMode' : undefined } + disabled={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} } error={ !!validation.get('{{ child.attributeType.name }}') } helperText={ validation.get('{{ child.attributeType.name }}') } - onChange={ (event) => storeDiff('{{ child.attributeType.name }}', event.target.value as {{ restParamName child.attributeType.dataType }}) } - className={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} || !editMode ? 'Mui-readOnly' : undefined } + onChange={ (event) => { + setEditMode(true); + storeDiff('{{ child.attributeType.name }}', event.target.value as {{ restParamName child.attributeType.dataType }}); + } } InputLabelProps={ { shrink: true } } InputProps={ { - readOnly: {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} || !editMode, {{# if child.icon }} startAdornment: ( diff --git a/judo-ui-react/src/main/resources/actor/src/pages/widgets/enumerationradio.hbs b/judo-ui-react/src/main/resources/actor/src/pages/widgets/enumerationradio.hbs index db4699f4..3c518fc0 100644 --- a/judo-ui-react/src/main/resources/actor/src/pages/widgets/enumerationradio.hbs +++ b/judo-ui-react/src/main/resources/actor/src/pages/widgets/enumerationradio.hbs @@ -16,12 +16,18 @@ name="{{ child.attributeType.name }}" id="{{ createId child }}" value={ data.{{ child.attributeType.name }} || '' } - className={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} || !editMode ? 'Mui-readOnly' : undefined } - onChange={ (event) => storeDiff('{{ child.attributeType.name }}', event.target.value as {{ restParamName child.attributeType.dataType }}) } + onChange={ (event) => { + setEditMode(true); + storeDiff('{{ child.attributeType.name }}', event.target.value as {{ restParamName child.attributeType.dataType }}); + } } > {{# each child.attributeType.dataType.members as |member| }} - } label= { t('enumerations.{{ restParamName child.attributeType.dataType }}.{{ member.name }}', { defaultValue: '{{ member.name }}' }) } - disabled={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} || !editMode } + } + label= { t('enumerations.{{ restParamName child.attributeType.dataType }}.{{ member.name }}', { defaultValue: '{{ member.name }}' }) } + disabled={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} } /> {{/ each }} diff --git a/judo-ui-react/src/main/resources/actor/src/pages/widgets/numericinput.hbs b/judo-ui-react/src/main/resources/actor/src/pages/widgets/numericinput.hbs index 7603e2db..e1baafd4 100644 --- a/judo-ui-react/src/main/resources/actor/src/pages/widgets/numericinput.hbs +++ b/judo-ui-react/src/main/resources/actor/src/pages/widgets/numericinput.hbs @@ -17,13 +17,16 @@ label={ t('{{ idToTranslationKey child.fQName application }}', { defaultValue: '{{ child.label }}' }) as string } type="number" value={ data.{{ child.attributeType.name }} } + className={ !editMode ? 'JUDO-viewMode' : undefined } + disabled={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} } error={ !!validation.get('{{ child.attributeType.name }}') } helperText={ validation.get('{{ child.attributeType.name }}') } - onChange={ (event) => storeDiff('{{ child.attributeType.name }}', Number(event.target.value)) } - className={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} || !editMode ? 'Mui-readOnly' : undefined } + onChange={ (event) => { + setEditMode(true); + storeDiff('{{ child.attributeType.name }}', Number(event.target.value)); + } } InputLabelProps={ { shrink: true } } InputProps={ { - readOnly: {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} || !editMode, {{# if child.icon }} startAdornment: ( diff --git a/judo-ui-react/src/main/resources/actor/src/pages/widgets/switch.hbs b/judo-ui-react/src/main/resources/actor/src/pages/widgets/switch.hbs index f9499769..cf905ce5 100644 --- a/judo-ui-react/src/main/resources/actor/src/pages/widgets/switch.hbs +++ b/judo-ui-react/src/main/resources/actor/src/pages/widgets/switch.hbs @@ -18,22 +18,23 @@ label={ t('{{ idToTranslationKey child.fQName application }}', { defaultValue: '{{ child.label }}' }) as string } select value={ booleanToStringSelect( data.{{ child.attributeType.name }} )} + className={ !editMode ? 'JUDO-viewMode' : undefined } + disabled={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} } error={ !!validation.get('{{ child.attributeType.name }}') } helperText={ validation.get('{{ child.attributeType.name }}') } onChange={ (event) => { + setEditMode(true); storeDiff('{{ child.attributeType.name }}', stringToBooleanSelect(event.target.value)); } } - className={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} || !editMode ? 'Mui-readOnly' : undefined } InputLabelProps={ { shrink: true } } InputProps={ { - readOnly: {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} || !editMode, - {{# if child.icon }} - startAdornment: ( - - - - ), - {{/ if }} + {{# if child.icon }} + startAdornment: ( + + + + ), + {{/ if }} } } > { t('judo.form.switch.true', { defaultValue: 'Yes' }) as string } @@ -44,9 +45,12 @@ + { + setEditMode(true); + storeDiff('{{ child.attributeType.name }}', event.target.value); + } } /> } label={ t('{{ idToTranslationKey child.fQName application }}', { defaultValue: '{{ child.label }}' }) as string } /> diff --git a/judo-ui-react/src/main/resources/actor/src/pages/widgets/textarea.hbs b/judo-ui-react/src/main/resources/actor/src/pages/widgets/textarea.hbs index 9e948c4f..61841afa 100644 --- a/judo-ui-react/src/main/resources/actor/src/pages/widgets/textarea.hbs +++ b/judo-ui-react/src/main/resources/actor/src/pages/widgets/textarea.hbs @@ -16,15 +16,18 @@ id="{{ createId child }}" label={ t('{{ idToTranslationKey child.fQName application }}', { defaultValue: '{{ child.label }}' }) as string } value={ data.{{ child.attributeType.name }} } + className={ !editMode ? 'JUDO-viewMode' : undefined } + disabled={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} } multiline minRows={ {{ child.row }} } error={ !!validation.get('{{ child.attributeType.name }}') } helperText={ validation.get('{{ child.attributeType.name }}') } - onChange={ (event) => storeDiff('{{ child.attributeType.name }}', event.target.value) } - className={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} || !editMode ? 'Mui-readOnly' : undefined } + onChange={ (event) => { + setEditMode(true); + storeDiff('{{ child.attributeType.name }}', event.target.value); + } } InputLabelProps={ { shrink: true } } InputProps={ { - readOnly: {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} || !editMode, {{# if child.icon }} startAdornment: ( diff --git a/judo-ui-react/src/main/resources/actor/src/pages/widgets/textinput.hbs b/judo-ui-react/src/main/resources/actor/src/pages/widgets/textinput.hbs index 85178437..1e841a09 100644 --- a/judo-ui-react/src/main/resources/actor/src/pages/widgets/textinput.hbs +++ b/judo-ui-react/src/main/resources/actor/src/pages/widgets/textinput.hbs @@ -16,13 +16,16 @@ id="{{ createId child }}" label={ t('{{ idToTranslationKey child.fQName application }}', { defaultValue: '{{ child.label }}' }) as string } value={ data.{{ child.attributeType.name }} } + className={ !editMode ? 'JUDO-viewMode' : undefined } + disabled={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} } error={ !!validation.get('{{ child.attributeType.name }}') } helperText={ validation.get('{{ child.attributeType.name }}') } - onChange={ (event) => storeDiff('{{ child.attributeType.name }}', event.target.value) } - className={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} || !editMode ? 'Mui-readOnly' : undefined } + onChange={ (event) => { + setEditMode(true); + storeDiff('{{ child.attributeType.name }}', event.target.value); + } } InputLabelProps={ { shrink: true } } InputProps={ { - readOnly: {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} || !editMode, {{# if child.icon }} startAdornment: ( diff --git a/judo-ui-react/src/main/resources/actor/src/pages/widgets/timeinput.hbs b/judo-ui-react/src/main/resources/actor/src/pages/widgets/timeinput.hbs index fb54e7e9..62bd1563 100644 --- a/judo-ui-react/src/main/resources/actor/src/pages/widgets/timeinput.hbs +++ b/judo-ui-react/src/main/resources/actor/src/pages/widgets/timeinput.hbs @@ -16,15 +16,19 @@ {{# if child.attributeType.isRequired }} required {{/ if }} {...props} id="{{ createId child }}" + className={ !editMode ? 'JUDO-viewMode' : undefined } + disabled={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} } error={!!validation.get('{{ child.attributeType.name }}')} helperText={validation.get('{{ child.attributeType.name }}')} /> ) } label={ t('{{ idToTranslationKey child.fQName application }}', { defaultValue: '{{ child.label }}' }) as string } value={ data.{{ child.attributeType.name }} ?? null } - className={ {{ boolValue child.attributeType.isReadOnly }} || !editMode ? 'Mui-readOnly' : undefined } - readOnly={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} || !editMode } - onChange={ (newValue: string | null | undefined) => storeDiff('{{ child.attributeType.name }}', newValue) } + readOnly={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} } + onChange={ (newValue: string | null | undefined) => { + setEditMode(true); + storeDiff('{{ child.attributeType.name }}', newValue); + } } {{# if child.icon }} InputProps={ { startAdornment: ( diff --git a/judo-ui-react/src/main/resources/actor/src/pages/widgets/trinarylogiccombo.hbs b/judo-ui-react/src/main/resources/actor/src/pages/widgets/trinarylogiccombo.hbs index 04c4971a..68be4b78 100644 --- a/judo-ui-react/src/main/resources/actor/src/pages/widgets/trinarylogiccombo.hbs +++ b/judo-ui-react/src/main/resources/actor/src/pages/widgets/trinarylogiccombo.hbs @@ -15,10 +15,15 @@ id="{{ createId child }}" label={ t('{{ idToTranslationKey child.fQName application }}', { defaultValue: '{{ child.label }}' }) as string {{# if child.attributeType.isRequired }} + " *" {{/ if }} } value={ data?.{{ child.attributeType.name }} } + editMode={ editMode } error={ !!validation.get('{{ child.attributeType.name }}') } helperText={ validation.get('{{ child.attributeType.name }}') } - onChange={ (value) => storeDiff('{{ child.attributeType.name }}', value) } - readOnly={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} || !editMode } + onChange={ (value) => { + setEditMode(true); + storeDiff('{{ child.attributeType.name }}', value); + } } + disabled={ {{# if child.enabledBy }}!data.{{ child.enabledBy.name }} ||{{/ if }} {{ boolValue child.attributeType.isReadOnly }} } + readOnly={ {{ boolValue child.attributeType.isReadOnly }} } /> {{# if child.customImplementation }} diff --git a/judo-ui-react/src/main/resources/actor/src/theme/index.ts.hbs b/judo-ui-react/src/main/resources/actor/src/theme/index.ts.hbs index e10a86cc..7cceb1d0 100644 --- a/judo-ui-react/src/main/resources/actor/src/theme/index.ts.hbs +++ b/judo-ui-react/src/main/resources/actor/src/theme/index.ts.hbs @@ -107,27 +107,6 @@ const baseTheme = createTheme(paletteTheme, { }, }, }, - MuiFilledInput: { - styleOverrides: { - input: { - '&:-webkit-autofill': { - WebkitBackgroundClip: 'text !important', - }, - }, - root: { - background: 'inherit', - '&.Mui-focused': { - background: 'inherit', - }, - '&:hover:not(.Mui-disabled):before': { - borderBottom: 'none', - }, - '&.Mui-focused .MuiInputAdornment-root .MuiSvgIcon-root': { - color: paletteTheme.palette.secondary.main, - }, - }, - }, - }, MuiTextField: { defaultProps: { fullWidth: true, @@ -136,21 +115,17 @@ const baseTheme = createTheme(paletteTheme, { }, styleOverrides: { root: { - background: 'white', - '& .MuiFilledInput-underline:before': { - borderBottom: 'none', - }, - '&.Mui-readOnly:not(.Mui-disabled):not(.Mui-focused)': { - borderBottom: `1px solid ${alpha(paletteTheme.palette.primary.main, 0.2)}`, - background: 'transparent', - }, - '&:not(.Mui-readOnly):not(.Mui-disabled)': { - boxShadow: '0px 0px 8px 2px rgba(0,0,0,0.05)', - borderRadius: `8px 8px 0 0`, - background: paletteTheme.palette.background.default, - }, - }, - }, + '&.JUDO-viewMode:not(.Mui-readOnly):not(.Mui-disabled) .MuiInputBase-root': { + background: 'transparent', + }, + '.MuiInputBase-root.Mui-readOnly': { + background: 'transparent', + }, + '.MuiInputBase-root.Mui-disabled': { + background: 'transparent', + }, + } + } }, MuiRadio: { defaultProps: { @@ -161,7 +136,7 @@ const baseTheme = createTheme(paletteTheme, { styleOverrides: { filled: { '&:focus': { - backgroundColor: 'white', + backgroundColor: 'transparent', }, }, },