From 29761f4a9d245742e12537dea360f69b90f7ba6c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Horus=20Lugo=20L=C3=B3pez?= Date: Tue, 6 Jul 2021 16:57:13 +0200 Subject: [PATCH 1/7] Inset the full screen modal used for workspaces on large devices --- .../Navigation/AppNavigator/AuthScreens.js | 4 +- .../AppNavigator/BaseDrawerNavigator.js | 67 +++++++++++-------- src/styles/styles.js | 12 +++- 3 files changed, 51 insertions(+), 32 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js index c1957ba28922..60fc28e8a1c7 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.js +++ b/src/libs/Navigation/AppNavigator/AuthScreens.js @@ -215,9 +215,9 @@ class AuthScreens extends React.Component { }; const fullscreenModalScreenOptions = { ...commonModalScreenOptions, - cardStyle: {...styles.fullscreenCard}, + cardStyle: {...styles.fullscreenCard, padding: this.props.isSmallScreenWidth ? 0 : 20}, cardStyleInterpolator: props => modalCardStyleInterpolator(this.props.isSmallScreenWidth, true, props), - cardOverlayEnabled: false, + cardOverlayEnabled: !this.props.isSmallScreenWidth, isFullScreenModal: true, }; diff --git a/src/libs/Navigation/AppNavigator/BaseDrawerNavigator.js b/src/libs/Navigation/AppNavigator/BaseDrawerNavigator.js index e794db66960e..8ca811a754a5 100644 --- a/src/libs/Navigation/AppNavigator/BaseDrawerNavigator.js +++ b/src/libs/Navigation/AppNavigator/BaseDrawerNavigator.js @@ -2,6 +2,7 @@ import React from 'react'; import _ from 'underscore'; import PropTypes from 'prop-types'; import {createDrawerNavigator} from '@react-navigation/drawer'; +import {View} from 'react-native'; import styles, {getNavigationDrawerStyle, getNavigationDrawerType} from '../../../styles/styles'; import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; @@ -27,33 +28,45 @@ const propTypes = { }; const Drawer = createDrawerNavigator(); -const BaseDrawerNavigator = props => ( - - {_.map(props.screens, screen => ( - - ))} - -); +const BaseDrawerNavigator = (props) => { + const content = ( + + {_.map(props.screens, screen => ( + + ))} + + ); + + if (!props.isSmallScreenWidth) { + return ( + + {content} + + ); + } + + return content; +}; BaseDrawerNavigator.propTypes = propTypes; BaseDrawerNavigator.displayName = 'BaseDrawerNavigator'; diff --git a/src/styles/styles.js b/src/styles/styles.js index f517f1d0be9d..207c94fb274f 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1436,6 +1436,12 @@ const styles = { height: '100%', }, + navigationSceneFullScreenWrapper: { + borderRadius: 12, + overflow: 'hidden', + height: '100%', + }, + invisible: { position: 'absolute', opacity: 0, @@ -1858,12 +1864,12 @@ function getSafeAreaMargins(insets) { function getNavigationDrawerStyle(windowWidth, windowHeight, isSmallScreenWidth) { return isSmallScreenWidth ? { - width: windowWidth, - height: windowHeight, + width: '100%', + height: '100%', borderColor: themeColors.border, } : { - height: windowHeight, + height: '100%', width: variables.sideBarWidth, borderRightColor: themeColors.border, }; From 8ad161ae18bcf47d1a389ec20eacd8e7eb24a6ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Horus=20Lugo=20L=C3=B3pez?= Date: Tue, 6 Jul 2021 17:30:57 +0200 Subject: [PATCH 2/7] Use style variables --- src/libs/Navigation/AppNavigator/AuthScreens.js | 3 ++- src/styles/styles.js | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js index 60fc28e8a1c7..4e5d84e76d69 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.js +++ b/src/libs/Navigation/AppNavigator/AuthScreens.js @@ -62,6 +62,7 @@ import { import SCREENS from '../../../SCREENS'; import Timers from '../../Timers'; import WorkspaceSettingsDrawerNavigator from './WorkspaceSettingsDrawerNavigator'; +import spacing from '../../../styles/utilities/spacing'; Onyx.connect({ key: ONYXKEYS.MY_PERSONAL_DETAILS, @@ -215,7 +216,7 @@ class AuthScreens extends React.Component { }; const fullscreenModalScreenOptions = { ...commonModalScreenOptions, - cardStyle: {...styles.fullscreenCard, padding: this.props.isSmallScreenWidth ? 0 : 20}, + cardStyle: {...styles.fullscreenCard, padding: this.props.isSmallScreenWidth ? spacing.p0 : spacing.p5}, cardStyleInterpolator: props => modalCardStyleInterpolator(this.props.isSmallScreenWidth, true, props), cardOverlayEnabled: !this.props.isSmallScreenWidth, isFullScreenModal: true, diff --git a/src/styles/styles.js b/src/styles/styles.js index 207c94fb274f..919231e4a6e6 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1437,7 +1437,7 @@ const styles = { }, navigationSceneFullScreenWrapper: { - borderRadius: 12, + borderRadius: variables.componentBorderRadiusCard, overflow: 'hidden', height: '100%', }, From 67a6c1411d63af50d01326385320574adb5e1a43 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Horus=20Lugo=20L=C3=B3pez?= Date: Tue, 6 Jul 2021 17:44:01 +0200 Subject: [PATCH 3/7] Remove unused parameters from the getNavigationDrawerStyle function --- src/libs/Navigation/AppNavigator/BaseDrawerNavigator.js | 2 -- src/styles/styles.js | 4 +--- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/BaseDrawerNavigator.js b/src/libs/Navigation/AppNavigator/BaseDrawerNavigator.js index 8ca811a754a5..510e80bf22ce 100644 --- a/src/libs/Navigation/AppNavigator/BaseDrawerNavigator.js +++ b/src/libs/Navigation/AppNavigator/BaseDrawerNavigator.js @@ -39,8 +39,6 @@ const BaseDrawerNavigator = (props) => { headerShown: false, drawerType: getNavigationDrawerType(props.isSmallScreenWidth), drawerStyle: getNavigationDrawerStyle( - props.windowWidth, - props.windowHeight, props.isSmallScreenWidth, ), swipeEdgeWidth: 500, diff --git a/src/styles/styles.js b/src/styles/styles.js index 919231e4a6e6..8971b02e39ef 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1856,12 +1856,10 @@ function getSafeAreaMargins(insets) { /** * Return navigation menu styles. * - * @param {Number} windowWidth - * @param {Number} windowHeight * @param {Boolean} isSmallScreenWidth * @returns {Object} */ -function getNavigationDrawerStyle(windowWidth, windowHeight, isSmallScreenWidth) { +function getNavigationDrawerStyle(isSmallScreenWidth) { return isSmallScreenWidth ? { width: '100%', From 208dd347c4bf53a235f5c2f70d3d738a043c2b1c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Horus=20Lugo=20L=C3=B3pez?= Date: Tue, 6 Jul 2021 17:55:41 +0200 Subject: [PATCH 4/7] Fix padding --- src/libs/Navigation/AppNavigator/AuthScreens.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js index 4e5d84e76d69..1ed568b2aeef 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.js +++ b/src/libs/Navigation/AppNavigator/AuthScreens.js @@ -216,7 +216,10 @@ class AuthScreens extends React.Component { }; const fullscreenModalScreenOptions = { ...commonModalScreenOptions, - cardStyle: {...styles.fullscreenCard, padding: this.props.isSmallScreenWidth ? spacing.p0 : spacing.p5}, + cardStyle: { + ...styles.fullscreenCard, + padding: this.props.isSmallScreenWidth ? spacing.p0.padding : spacing.p5.padding, + }, cardStyleInterpolator: props => modalCardStyleInterpolator(this.props.isSmallScreenWidth, true, props), cardOverlayEnabled: !this.props.isSmallScreenWidth, isFullScreenModal: true, From ed7d06de5bc11a60cb8aedc458f9985b0a8ddcaa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Horus=20Lugo=20L=C3=B3pez?= Date: Tue, 6 Jul 2021 18:17:22 +0200 Subject: [PATCH 5/7] Add custom CardOverlay component so we can use the modalBackdrop color --- src/components/CardOverlay.js | 19 +++++++++++++++++++ .../Navigation/AppNavigator/AuthScreens.js | 2 ++ 2 files changed, 21 insertions(+) create mode 100644 src/components/CardOverlay.js diff --git a/src/components/CardOverlay.js b/src/components/CardOverlay.js new file mode 100644 index 000000000000..681f5ad615ec --- /dev/null +++ b/src/components/CardOverlay.js @@ -0,0 +1,19 @@ +import React from 'react'; +import {View} from 'react-native'; +import themeColors from '../styles/themes/default'; + +const CardOverlay = () => ( + +); + +export default CardOverlay; diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js index 1ed568b2aeef..5ac6d24ccfcc 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.js +++ b/src/libs/Navigation/AppNavigator/AuthScreens.js @@ -63,6 +63,7 @@ import SCREENS from '../../../SCREENS'; import Timers from '../../Timers'; import WorkspaceSettingsDrawerNavigator from './WorkspaceSettingsDrawerNavigator'; import spacing from '../../../styles/utilities/spacing'; +import CardOverlay from '../../../components/CardOverlay'; Onyx.connect({ key: ONYXKEYS.MY_PERSONAL_DETAILS, @@ -223,6 +224,7 @@ class AuthScreens extends React.Component { cardStyleInterpolator: props => modalCardStyleInterpolator(this.props.isSmallScreenWidth, true, props), cardOverlayEnabled: !this.props.isSmallScreenWidth, isFullScreenModal: true, + cardOverlay: CardOverlay, }; return ( From 6315c42b3c3765acdba54a50a7fc26f07bcf08ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Horus=20Lugo=20L=C3=B3pez?= Date: Wed, 7 Jul 2021 12:18:55 +0200 Subject: [PATCH 6/7] Move CardOverlay styles to the styles.js file --- src/components/CardOverlay.js | 16 ++-------------- src/styles/styles.js | 10 ++++++++++ 2 files changed, 12 insertions(+), 14 deletions(-) diff --git a/src/components/CardOverlay.js b/src/components/CardOverlay.js index 681f5ad615ec..2b41472a05dc 100644 --- a/src/components/CardOverlay.js +++ b/src/components/CardOverlay.js @@ -1,19 +1,7 @@ import React from 'react'; import {View} from 'react-native'; -import themeColors from '../styles/themes/default'; +import styles from '../styles/styles'; -const CardOverlay = () => ( - -); +const CardOverlay = () => ; export default CardOverlay; diff --git a/src/styles/styles.js b/src/styles/styles.js index 8971b02e39ef..9a03493fd04e 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1746,6 +1746,16 @@ const styles = { lineHeight: 16, ...whiteSpace.noWrap, }, + + cardOverlay: { + backgroundColor: themeColors.modalBackdrop, + position: 'absolute', + top: 0, + left: 0, + width: '100%', + height: '100%', + opacity: 0.5, + }, }; const baseCodeTagStyles = { From 8de4c567285b504a014cb57c2a243d8ba8681063 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Horus=20Lugo=20L=C3=B3pez?= Date: Mon, 19 Jul 2021 18:48:55 +0200 Subject: [PATCH 7/7] Solve two style issues related to the reports screen provoked by the latest changes --- src/libs/Navigation/AppNavigator/AuthScreens.js | 1 + src/libs/Navigation/AppNavigator/BaseDrawerNavigator.js | 5 ++++- src/libs/Navigation/AppNavigator/MainDrawerNavigator.js | 1 + 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js index c51bb9296f49..0524a97a02d1 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.js +++ b/src/libs/Navigation/AppNavigator/AuthScreens.js @@ -271,6 +271,7 @@ class AuthScreens extends React.Component { // prevent unnecessary scrolling cardStyle: { overflow: 'hidden', + height: '100%', }, }} component={MainDrawerNavigator} diff --git a/src/libs/Navigation/AppNavigator/BaseDrawerNavigator.js b/src/libs/Navigation/AppNavigator/BaseDrawerNavigator.js index 510e80bf22ce..5a6d277b1953 100644 --- a/src/libs/Navigation/AppNavigator/BaseDrawerNavigator.js +++ b/src/libs/Navigation/AppNavigator/BaseDrawerNavigator.js @@ -23,6 +23,9 @@ const propTypes = { /** Drawer content Component */ drawerContent: PropTypes.elementType.isRequired, + /** If it's the main screen, don't wrap the content even if it's a full screen modal. */ + isMainScreen: PropTypes.bool, + /** Window Dimensions props */ ...windowDimensionsPropTypes, }; @@ -55,7 +58,7 @@ const BaseDrawerNavigator = (props) => { ); - if (!props.isSmallScreenWidth) { + if (!props.isMainScreen && !props.isSmallScreenWidth) { return ( {content} diff --git a/src/libs/Navigation/AppNavigator/MainDrawerNavigator.js b/src/libs/Navigation/AppNavigator/MainDrawerNavigator.js index de10b3fc9364..382aad6fef84 100644 --- a/src/libs/Navigation/AppNavigator/MainDrawerNavigator.js +++ b/src/libs/Navigation/AppNavigator/MainDrawerNavigator.js @@ -54,6 +54,7 @@ const MainDrawerNavigator = (props) => { initialParams, }, ]} + isMainScreen /> ); };