Skip to content

Commit fbc5158

Browse files
mariusconjeaudMarius Conjeaudnielsdejong
authored
Remove fixed widths in report actions modal (#533)
* Remove fixed widths in report actions modal * Update style rule modal * Fix fullscreen report --------- Co-authored-by: Marius Conjeaud <[email protected]> Co-authored-by: Niels de Jong <[email protected]>
1 parent 9be253e commit fbc5158

File tree

3 files changed

+222
-237
lines changed

3 files changed

+222
-237
lines changed

‎src/card/Card.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -207,7 +207,7 @@ const NeoCard = ({
207207
// Look into React Portals: https://stackoverflow.com/questions/61432878/how-to-render-child-component-outside-of-its-parent-component-dom-hierarchy
208208
if (expanded) {
209209
return (
210-
<Dialog size='large' open={expanded} aria-labelledby='form-dialog-title' style={{ maxWidth: '100%' }}>
210+
<Dialog open={expanded} aria-labelledby='form-dialog-title' className='dialog-xxl'>
211211
<Dialog.Content style={{ height: document.documentElement.clientHeight }}>{component}</Dialog.Content>
212212
</Dialog>
213213
);

‎src/extensions/actions/ActionsRuleCreationModal.tsx‎

Lines changed: 111 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -204,27 +204,21 @@ export const NeoCustomReportActionsModal = ({
204204
if (customization == 'set variable') {
205205
return (
206206
<>
207-
<td
208-
style={{
209-
paddingLeft: '5px',
210-
paddingRight: '0px',
211-
paddingTop: '5px',
212-
paddingBottom: '5px',
213-
}}
214-
>
215-
<TextInput
216-
style={{ width: '100px', color: 'black', marginRight: '-5px' }}
217-
disabled={true}
218-
value='$neodash_'
219-
></TextInput>
220-
</td>
221-
<td style={{ paddingLeft: '5px', paddingRight: '5px' }}>
222-
<TextInput
223-
placeholder=''
224-
value={rule.customizationValue}
225-
onChange={(e) => updateRuleField(index, 'customizationValue', e.target.value)}
226-
></TextInput>
227-
</td>
207+
<TextInput
208+
className='n-inline-block n-align-middle n-w-1/4 n-pr-1'
209+
fluid
210+
style={{ minWidth: 80, color: 'black' }}
211+
disabled={true}
212+
value='$neodash_'
213+
></TextInput>
214+
<TextInput
215+
className='n-inline-block n-align-middle n-w-1/2'
216+
fluid
217+
style={{ minWidth: 150 }}
218+
placeholder=''
219+
value={rule.customizationValue}
220+
onChange={(e) => updateRuleField(index, 'customizationValue', e.target.value)}
221+
></TextInput>
228222
</>
229223
);
230224
} else if (customization == 'set page') {
@@ -283,127 +277,110 @@ export const NeoCustomReportActionsModal = ({
283277
return (
284278
<>
285279
<tr>
286-
<td style={{ paddingLeft: '2px', paddingRight: '2px' }}>
287-
<span style={{ color: 'black', width: '50px' }}>{index + 1}.</span>
288-
</td>
289-
<td style={{ paddingLeft: '20px', paddingRight: '20px' }}>
290-
<span style={{ fontWeight: 'bold', color: 'black', width: '50px' }}> ON</span>
280+
<td width='2.5%' className='n-pr-1'>
281+
<span className='n-pr-1'>{index + 1}.</span>
282+
<span className='n-font-bold'>ON</span>
291283
</td>
292-
<td>
293-
<div style={{ border: '2px dashed grey' }}>
294-
<td style={{ paddingLeft: '5px', paddingRight: '5px' }}>
295-
<Dropdown
296-
type='select'
297-
fluid
298-
style={{ marginLeft: '1%', display: 'inline-block', width: '200px' }}
299-
selectProps={{
300-
onChange: (newValue) => updateRuleField(index, 'condition', newValue.value),
301-
options:
302-
RULE_CONDITIONS[type] &&
303-
RULE_CONDITIONS[type].map((option) => ({
304-
label: option.label,
305-
value: option.value,
306-
})),
307-
value: { label: ruleTrigger ? ruleTrigger.label : '', value: rule.condition },
308-
}}
309-
></Dropdown>
310-
</td>
311-
<td className='n-align-top'>
312-
<Autocomplete
313-
disableClearable={true}
314-
id='autocomplete-label-type'
315-
size='small'
316-
noOptionsText='*Specify an exact field name'
317-
options={createFieldVariableSuggestionsFromRule(rule, true)}
318-
value={rule.field ? rule.field : ''}
319-
inputValue={rule.field ? rule.field : ''}
320-
popupIcon={<></>}
321-
style={{ width: 150, padding: 0 }}
322-
onInputChange={(event, value) => {
323-
updateRuleField(index, 'field', value);
324-
}}
325-
onChange={(event, newValue) => {
326-
updateRuleField(index, 'field', newValue);
327-
}}
328-
renderInput={(params) => (
329-
<TextField
330-
{...params}
331-
placeholder='Field name...'
332-
style={{ padding: 0 }}
333-
InputLabelProps={{ shrink: true }}
334-
/>
335-
)}
336-
/>
337-
</td>
284+
<td width='30%'>
285+
<div style={{ border: '2px dashed grey' }} className='n-p-1'>
286+
<Dropdown
287+
type='select'
288+
className='n-align-middle n-w-2/5 n-pr-1'
289+
style={{ minWidth: 80, display: 'inline-block' }}
290+
selectProps={{
291+
onChange: (newValue) => updateRuleField(index, 'condition', newValue.value),
292+
options:
293+
RULE_CONDITIONS[type] &&
294+
RULE_CONDITIONS[type].map((option) => ({
295+
label: option.label,
296+
value: option.value,
297+
})),
298+
value: { label: ruleTrigger ? ruleTrigger.label : '', value: rule.condition },
299+
}}
300+
></Dropdown>
301+
<Autocomplete
302+
className='n-align-middle n-inline-block n-w-3/5'
303+
disableClearable={true}
304+
id='autocomplete-label-type'
305+
size='small'
306+
noOptionsText='*Specify an exact field name'
307+
options={createFieldVariableSuggestionsFromRule(rule, true)}
308+
value={rule.field ? rule.field : ''}
309+
inputValue={rule.field ? rule.field : ''}
310+
popupIcon={<></>}
311+
style={{
312+
minWidth: 125,
313+
}}
314+
onInputChange={(event, value) => {
315+
updateRuleField(index, 'field', value);
316+
}}
317+
onChange={(event, newValue) => {
318+
updateRuleField(index, 'field', newValue);
319+
}}
320+
renderInput={(params) => (
321+
<TextField
322+
{...params}
323+
placeholder='Field name...'
324+
style={{ padding: 0 }}
325+
InputLabelProps={{ shrink: true }}
326+
/>
327+
)}
328+
/>
338329
</div>
339330
</td>
340-
<td style={{ paddingLeft: '20px', paddingRight: '20px' }}>
341-
<span style={{ fontWeight: 'bold', color: 'black', width: '50px' }}>SET</span>
331+
<td width='2.5%' className='n-text-center'>
332+
<span style={{ fontWeight: 'bold', color: 'black' }}>SET</span>
342333
</td>
343-
<td>
344-
<div style={{ border: '2px dashed grey', marginBottom: '5px' }}>
345-
<td
346-
style={{
347-
paddingLeft: '5px',
348-
paddingRight: '5px',
349-
paddingTop: '5px',
350-
paddingBottom: '5px',
334+
<td width='45%'>
335+
<div style={{ border: '2px dashed grey' }} className='n-p-1'>
336+
<Dropdown
337+
type='select'
338+
className='n-align-middle n-w-1/4'
339+
style={{ minWidth: 80, display: 'inline-block' }}
340+
fluid
341+
selectProps={{
342+
onChange: (newValue) => updateRuleField(index, 'customization', newValue.value),
343+
options:
344+
RULE_BASED_REPORT_ACTIONS_CUSTOMIZATIONS[type] &&
345+
RULE_BASED_REPORT_ACTIONS_CUSTOMIZATIONS[type].map((option) => ({
346+
label: option.label,
347+
value: option.value,
348+
})),
349+
value: { label: ruleType ? ruleType.label : '', value: rule.customization },
351350
}}
352-
>
353-
<Dropdown
354-
type='select'
355-
style={{ width: '150px', display: 'inline-block' }}
356-
fluid
357-
selectProps={{
358-
onChange: (newValue) => updateRuleField(index, 'customization', newValue.value),
359-
options:
360-
RULE_BASED_REPORT_ACTIONS_CUSTOMIZATIONS[type] &&
361-
RULE_BASED_REPORT_ACTIONS_CUSTOMIZATIONS[type].map((option) => ({
362-
label: option.label,
363-
value: option.value,
364-
})),
365-
value: { label: ruleType ? ruleType.label : '', value: rule.customization },
366-
}}
367-
></Dropdown>
368-
</td>
351+
></Dropdown>
369352
{getActionHelper(rule, index, rules[index].customization)}
370353
</div>
371354
</td>
372355

373-
<td style={{ paddingLeft: '20px', paddingRight: '20px' }}>
374-
<span style={{ fontWeight: 'bold', color: 'black', width: '50px' }}>TO</span>
356+
<td width='2.5%' className='n-text-center'>
357+
<span style={{ fontWeight: 'bold', color: 'black' }}>TO</span>
375358
</td>
376-
<td>
377-
<div style={{ border: '2px dashed grey' }}>
378-
<td className='n-align-top'>
379-
<Autocomplete
380-
disableClearable={true}
381-
id='autocomplete-label-type'
382-
noOptionsText='*Specify an exact field name'
383-
options={createFieldVariableSuggestionsFromRule(rule, false)}
384-
value={rule.value || ''}
385-
inputValue={rule.value || ''}
386-
popupIcon={<></>}
387-
style={{ display: 'inline-block', width: 185, marginLeft: '5px', marginTop: '5px' }}
388-
onInputChange={(event, value) => {
389-
updateRuleField(index, 'value', value);
390-
}}
391-
onChange={(event, newValue) => {
392-
updateRuleField(index, 'value', newValue);
393-
}}
394-
renderInput={(params) => (
395-
<TextField
396-
{...params}
397-
placeholder='Field name...'
398-
InputLabelProps={{ shrink: true }}
399-
/>
400-
)}
401-
/>
402-
</td>
359+
<td width='20%'>
360+
<div style={{ border: '2px dashed grey' }} className='n-p-1'>
361+
<Autocomplete
362+
disableClearable={true}
363+
id='autocomplete-label-type'
364+
noOptionsText='*Specify an exact field name'
365+
options={createFieldVariableSuggestionsFromRule(rule, false)}
366+
value={rule.value || ''}
367+
inputValue={rule.value || ''}
368+
popupIcon={<></>}
369+
style={{ minWidth: 125 }}
370+
onInputChange={(event, value) => {
371+
updateRuleField(index, 'value', value);
372+
}}
373+
onChange={(event, newValue) => {
374+
updateRuleField(index, 'value', newValue);
375+
}}
376+
renderInput={(params) => (
377+
<TextField {...params} placeholder='Field name...' InputLabelProps={{ shrink: true }} />
378+
)}
379+
/>
403380
</div>
404381
</td>
405382

406-
<td style={{ width: '2.5%' }}>
383+
<td width='2.5%'>
407384
<IconButton
408385
aria-label='remove rule'
409386
size='medium'
@@ -415,15 +392,14 @@ export const NeoCustomReportActionsModal = ({
415392
<XMarkIconOutline />
416393
</IconButton>
417394
</td>
418-
<hr />
419395
</tr>
420396
</>
421397
);
422398
})}
423399

424400
<tr>
425-
<td colSpan={5}>
426-
<div style={{ textAlign: 'center', marginBottom: '5px' }}>
401+
<td colSpan={7}>
402+
<div className='n-text-center n-mt-1'>
427403
<IconButton
428404
aria-label='add'
429405
size='medium'
@@ -440,7 +416,8 @@ export const NeoCustomReportActionsModal = ({
440416
</tr>
441417
</table>
442418
</div>
443-
419+
</Dialog.Content>
420+
<Dialog.Actions>
444421
<Button
445422
onClick={() => {
446423
handleClose();
@@ -451,7 +428,7 @@ export const NeoCustomReportActionsModal = ({
451428
Save
452429
<SparklesIconOutline className='btn-icon-lg-r' />
453430
</Button>
454-
</Dialog.Content>
431+
</Dialog.Actions>
455432
</Dialog>
456433
) : (
457434
<></>

0 commit comments

Comments
 (0)