5009 mobile modal improvements #6065
Conversation
github-actions
bot
added
Priority: Must Have
|
will upload an APK to test when ready |
| marginBottom: '30px', | ||
| marginTop: '30px', | ||
| marginBottom: keyboardIsOpen ? 0 : '30px', | ||
| marginTop: keyboardIsOpen ? 0 : '30px', |
There was a problem hiding this comment.
Makes the margins around the buttons smaller while using the keyboard (because they take up a lot of space)
| @@ -161,6 +166,9 @@ export const useDialog = (dialogProps?: DialogProps): DialogState => { | |||
| isRtl, | |||
| animationTimeout | |||
| ); | |||
| const { isOpen: keyboardIsOpen } = useKeyboardContext(); | |||
| const isSmallerScreen = useMediaQuery('(max-height: 850px)'); | |||
There was a problem hiding this comment.
Felt like a reasonable height to be okay with sticking with modals as they are, most tablets around 750-800 high... happy to play around with this
| > | ||
| {fullScreen && ( | ||
| <IconButton |
There was a problem hiding this comment.
Some modals used clicking on the backdrop to close (e.g. internal order create) so added close button
Bundle size differenceComparing this PR to
|
| isOpen, | ||
| onClose, | ||
| disableMobileFullScreen: true, | ||
| }); |
There was a problem hiding this comment.
Input modal is small (used for like tax input) so don't need the full screen capability here
| return ( | ||
| <Box sx={{ display: fullScreen ? 'none' : undefined }}> | ||
| <Box sx={{ display: hideFooter ? 'none' : undefined }}> |
There was a problem hiding this comment.
When not in modal, i.e. typing in a table filter, hide the footers so can see more of the results
| @@ -46,7 +44,7 @@ export const StocktakeLineEditModal: FC< | |||
| okButton={ | |||
| <DialogButton variant="ok" onClick={onOk} disabled={!isValid} /> | |||
| } | |||
| height={height} | |||
| height={600} | |||
There was a problem hiding this comment.
no longer need the useKeyboardHeightAdjustment! So move all the heights back to hard coded
| @@ -68,11 +68,10 @@ export const ReportArgumentsModal: FC<ReportArgumentsModalProps> = ({ | |||
| }} | |||
| /> | |||
| } | |||
| contentProps={{ sx: { margin: '0 auto' } }} | |||
There was a problem hiding this comment.
some styling is a little off in full screen mode, i need to review this more fully
Fixes #5009
Leaving in draft until I do a full sweep of the modals...
👩🏻💻 What does this PR do?
Full screen modals! Also fixes autocomplete dropdowns going crazy places and some other funchy behaviour!
💌 Any notes for the reviewer?
Please give her a thorough sweep 😅
Few threads solved here, will put comments throughout
🧪 Testing
📃 Documentation