self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2024-11-27 08:21:03 +02:00
Code Issues Releases Activity

Mobile: Improve dialog styling on large and notched screens (#10470)

Browse Source
This commit is contained in:
Henry Heino 2024-05-27 01:05:15 -07:00 committed by GitHub
parent 768e59938c
commit 28f3d53b3b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 44 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/app-mobile/components/DismissibleDialog.tsx
View File

@ -40,6 +40,7 @@ const useStyles = (themeId: number, containerStyle: ViewStyle) => {
height: windowSize.height * 0.9,
width: windowSize.width * 0.97,
flexShrink: 1,
// Center
marginLeft: 'auto',
@ -47,6 +48,13 @@ const useStyles = (themeId: number, containerStyle: ViewStyle) => {
...containerStyle,
},
dialogContainer: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
flexGrow: 1,
},
});
}, [themeId, windowSize.width, windowSize.height, containerStyle]);
};
@ -69,7 +77,9 @@ const DismissibleDialog: React.FC<Props> = props => {
visible={props.visible}
onDismiss={props.onDismiss}
onRequestClose={props.onDismiss}
containerStyle={styles.dialogContainer}
animationType='fade'
backgroundColor='rgba(0, 0, 0, 0.1)'
transparent={true}
>
<Surface style={styles.dialog} elevation={1}>

46
packages/app-mobile/components/Modal.tsx
View File

@ -1,36 +1,58 @@
import * as React from 'react';
import { Modal, ModalProps, StyleSheet, View, ViewStyle } from 'react-native';
import { useMemo } from 'react';
import { Modal, ModalProps, StyleSheet, View, ViewStyle, useWindowDimensions } from 'react-native';
import { hasNotch } from 'react-native-device-info';
interface ModalElementProps extends ModalProps {
children: React.ReactNode;
containerStyle?: ViewStyle;
elevation?: number;
backgroundColor?: string;
}
const useStyles = (backgroundColor?: string) => {
const { width: windowWidth, height: windowHeight } = useWindowDimensions();
const isLandscape = windowWidth > windowHeight;
return useMemo(() => {
return StyleSheet.create({
contentWrapper: isLandscape ? {
marginRight: hasNotch() ? 60 : 0,
marginLeft: hasNotch() ? 60 : 0,
marginTop: 15,
marginBottom: 15,
} : {
marginTop: hasNotch() ? 65 : 15,
marginBottom: hasNotch() ? 35 : 15,
},
modalBackground: { backgroundColor, flexGrow: 1 },
});
}, [isLandscape, backgroundColor]);
};
const ModalElement: React.FC<ModalElementProps> = ({
children,
containerStyle,
backgroundColor,
...modalProps
}) => {
const styles = useStyles(backgroundColor);
// contentWrapper adds padding. To allow styling the region outside of the modal
// (e.g. to add a background), the content is wrapped twice.
const content = (
<View style={[styles.contentWrapper, containerStyle]}>
{children}
</View>
);
// supportedOrientations: On iOS, this allows the dialog to be shown in non-portrait orientations.
return (
<Modal
supportedOrientations={['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right']}
{...modalProps}
>
<View style={[styleSheet.modalContainer, containerStyle ? containerStyle : null]}>
{children}
</View>
<View style={styles.modalBackground}>{content}</View>
</Modal>
);
};
const styleSheet = StyleSheet.create({
modalContainer: {
marginTop: hasNotch() ? 65 : 15,
marginBottom: hasNotch() ? 35 : 15,
},
});
export default ModalElement;