From 7a012dbbe73be04ed0928338834c3bd48375ca44 Mon Sep 17 00:00:00 2001 From: aimane-chnaif Date: Wed, 26 Oct 2022 03:30:26 +1000 Subject: [PATCH 1/2] remove extra spaces on attachment modal --- src/components/AttachmentModal.js | 11 +---------- src/components/Modal/BaseModal.js | 2 ++ .../signin/SignInPageLayout/SignInPageContent.js | 6 +++--- src/styles/StyleUtils.js | 4 ++++ src/styles/getModalStyles/getBaseModalStyles.js | 8 ++++---- 5 files changed, 14 insertions(+), 17 deletions(-) diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js index 4e0f31c53485..7895b119b726 100755 --- a/src/components/AttachmentModal.js +++ b/src/components/AttachmentModal.js @@ -233,15 +233,6 @@ class AttachmentModal extends PureComponent { ? addEncryptedAuthTokenToURL(this.state.sourceURL) : this.state.sourceURL; - // When the confirm button is visible we don't need bottom padding on the attachment view. - const attachmentViewPaddingStyles = this.props.onConfirm - ? [styles.pl5, styles.pr5, styles.pt5] - : styles.p5; - - const attachmentViewStyles = this.props.isSmallScreenWidth || this.props.isMediumScreenWidth - ? [styles.imageModalImageCenterContainer] - : [styles.imageModalImageCenterContainer, attachmentViewPaddingStyles]; - const {fileName, fileExtension} = FileUtils.splitExtensionFromFileName(this.props.originalFileName || lodashGet(this.state, 'file.name', '')); return ( @@ -272,7 +263,7 @@ class AttachmentModal extends PureComponent { /> ) : ''} /> - + {this.state.sourceURL && ( ( Date: Wed, 26 Oct 2022 05:32:28 +1000 Subject: [PATCH 2/2] fix modal margin issue in android --- src/components/Modal/BaseModal.js | 4 ++++ src/styles/StyleUtils.js | 6 ++++-- src/styles/getModalStyles/getBaseModalStyles.js | 8 ++++++++ src/styles/getModalStyles/index.android.js | 1 + 4 files changed, 17 insertions(+), 2 deletions(-) diff --git a/src/components/Modal/BaseModal.js b/src/components/Modal/BaseModal.js index cd9c7702f043..91b1867a6f91 100644 --- a/src/components/Modal/BaseModal.js +++ b/src/components/Modal/BaseModal.js @@ -62,6 +62,8 @@ class BaseModal extends PureComponent { swipeDirection, animationIn, animationOut, + shouldAddTopSafeAreaMargin, + shouldAddBottomSafeAreaMargin, shouldAddTopSafeAreaPadding, shouldAddBottomSafeAreaPadding, hideBackdrop, @@ -128,6 +130,8 @@ class BaseModal extends PureComponent { safeAreaPaddingBottom, safeAreaPaddingLeft, safeAreaPaddingRight, + shouldAddBottomSafeAreaMargin, + shouldAddTopSafeAreaMargin, shouldAddBottomSafeAreaPadding, shouldAddTopSafeAreaPadding, modalContainerStyleMarginTop: modalContainerStyle.marginTop, diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js index 4cb6c4726abe..7f25d8f03d3e 100644 --- a/src/styles/StyleUtils.js +++ b/src/styles/StyleUtils.js @@ -298,6 +298,8 @@ function getWidthAndHeightStyle(width, height) { * @returns {Object} */ function getModalPaddingStyles({ + shouldAddBottomSafeAreaMargin, + shouldAddTopSafeAreaMargin, shouldAddBottomSafeAreaPadding, shouldAddTopSafeAreaPadding, safeAreaPaddingTop, @@ -310,8 +312,8 @@ function getModalPaddingStyles({ modalContainerStylePaddingBottom, }) { return { - marginTop: modalContainerStyleMarginTop ? modalContainerStyleMarginTop + safeAreaPaddingTop : 0, - marginBottom: modalContainerStyleMarginBottom ? modalContainerStyleMarginBottom + safeAreaPaddingBottom : 0, + marginTop: (modalContainerStyleMarginTop || 0) + (shouldAddTopSafeAreaMargin ? safeAreaPaddingTop : 0), + marginBottom: (modalContainerStyleMarginBottom || 0) + (shouldAddBottomSafeAreaMargin ? safeAreaPaddingBottom : 0), paddingTop: shouldAddTopSafeAreaPadding ? (modalContainerStylePaddingTop || 0) + safeAreaPaddingTop : modalContainerStylePaddingTop || 0, diff --git a/src/styles/getModalStyles/getBaseModalStyles.js b/src/styles/getModalStyles/getBaseModalStyles.js index a3efc5b19273..7346a49517dc 100644 --- a/src/styles/getModalStyles/getBaseModalStyles.js +++ b/src/styles/getModalStyles/getBaseModalStyles.js @@ -15,6 +15,8 @@ export default (type, windowDimensions, popoverAnchorPosition = {}, containerSty let animationIn; let animationOut; let hideBackdrop = false; + let shouldAddBottomSafeAreaMargin = false; + let shouldAddTopSafeAreaMargin = false; let shouldAddBottomSafeAreaPadding = false; let shouldAddTopSafeAreaPadding = false; @@ -83,6 +85,8 @@ export default (type, windowDimensions, popoverAnchorPosition = {}, containerSty swipeDirection = ['down', 'right']; animationIn = isSmallScreenWidth ? 'slideInRight' : 'fadeIn'; animationOut = isSmallScreenWidth ? 'slideOutRight' : 'fadeOut'; + shouldAddTopSafeAreaMargin = !isSmallScreenWidth; + shouldAddBottomSafeAreaMargin = !isSmallScreenWidth; shouldAddTopSafeAreaPadding = isSmallScreenWidth; shouldAddBottomSafeAreaPadding = false; break; @@ -115,6 +119,8 @@ export default (type, windowDimensions, popoverAnchorPosition = {}, containerSty swipeDirection = undefined; animationIn = isSmallScreenWidth ? 'slideInRight' : 'fadeIn'; animationOut = isSmallScreenWidth ? 'slideOutRight' : 'fadeOut'; + shouldAddTopSafeAreaMargin = !isSmallScreenWidth; + shouldAddBottomSafeAreaMargin = !isSmallScreenWidth; shouldAddTopSafeAreaPadding = isSmallScreenWidth; shouldAddBottomSafeAreaPadding = false; break; @@ -217,6 +223,8 @@ export default (type, windowDimensions, popoverAnchorPosition = {}, containerSty animationIn, animationOut, hideBackdrop, + shouldAddTopSafeAreaMargin, + shouldAddBottomSafeAreaMargin, shouldAddBottomSafeAreaPadding, shouldAddTopSafeAreaPadding, }; diff --git a/src/styles/getModalStyles/index.android.js b/src/styles/getModalStyles/index.android.js index e7e3531171ae..9f2b0dae0720 100644 --- a/src/styles/getModalStyles/index.android.js +++ b/src/styles/getModalStyles/index.android.js @@ -3,5 +3,6 @@ import getBaseModalStyles from './getBaseModalStyles'; // Only apply top padding on iOS since it's the only platform using SafeAreaView export default (type, windowDimensions, popoverAnchorPosition = {}, containerStyle = {}) => ({ ...getBaseModalStyles(type, windowDimensions, popoverAnchorPosition, containerStyle), + shouldAddTopSafeAreaMargin: false, shouldAddTopSafeAreaPadding: false, });