From 55acf06c6d5e756ea004a4f2a028dd9a3957bdfb Mon Sep 17 00:00:00 2001 From: Andre Vasconcelos Date: Thu, 11 Jun 2020 04:34:08 +0900 Subject: [PATCH] MM-22852 Improve mobile modal style (#4198) * Opening screens as 'pageSheet' for iOS * Added pagesheet on more screens - Search - Edit Profile - Recent Mentions - FlaggedPosts * Close sidebar when tapping new channel `+` icon * Update search modal test to expect `pageSheet` * Fixing search screen * Making sure padding fix only applies to iOS * Adjusting padding & height values for searchbar * Adjusting padding & height values for searchbar (2) * Changed default iOS modal to be pageSheet * Fix test that failed due to changes in modal behavior * Removing useless params from openModal function --- app/actions/navigation/index.js | 7 +- app/actions/navigation/index.test.js | 4 +- .../sidebars/main/channels_list/list/list.js | 7 +- .../settings/settings_sidebar_base.js | 3 +- app/screens/channel/channel_base.js | 6 + app/screens/search/search.js | 108 +++++++++--------- 6 files changed, 73 insertions(+), 62 deletions(-) diff --git a/app/actions/navigation/index.js b/app/actions/navigation/index.js index d7571c2e5..2e27c7591 100644 --- a/app/actions/navigation/index.js +++ b/app/actions/navigation/index.js @@ -225,7 +225,7 @@ export async function popToRoot() { export function showModal(name, title, passProps = {}, options = {}) { const theme = getThemeFromState(); const defaultOptions = { - modalPresentationStyle: Platform.select({ios: 'fullScreen', android: 'none'}), + modalPresentationStyle: Platform.select({ios: 'pageSheet', android: 'none'}), layout: { componentBackgroundColor: theme.centerChannelBg, }, @@ -312,6 +312,11 @@ export function showSearchModal(initialValue = '') { visible: false, height: 0, }, + ...Platform.select({ + ios: { + modalPresentationStyle: 'pageSheet', + }, + }), }; showModal(name, title, passProps, options); diff --git a/app/actions/navigation/index.test.js b/app/actions/navigation/index.test.js index ac737cc12..279127f31 100644 --- a/app/actions/navigation/index.test.js +++ b/app/actions/navigation/index.test.js @@ -229,7 +229,7 @@ describe('@actions/navigation', () => { const showModal = jest.spyOn(Navigation, 'showModal'); const defaultOptions = { - modalPresentationStyle: Platform.select({ios: 'fullScreen', android: 'none'}), + modalPresentationStyle: Platform.select({ios: 'pageSheet', android: 'none'}), layout: { componentBackgroundColor: theme.centerChannelBg, }, @@ -366,7 +366,7 @@ describe('@actions/navigation', () => { }, }; const defaultOptions = { - modalPresentationStyle: Platform.select({ios: 'fullScreen', android: 'none'}), + modalPresentationStyle: Platform.select({ios: 'pageSheet', android: 'none'}), layout: { componentBackgroundColor: theme.centerChannelBg, }, diff --git a/app/components/sidebars/main/channels_list/list/list.js b/app/components/sidebars/main/channels_list/list/list.js index bda7f4613..b740998b3 100644 --- a/app/components/sidebars/main/channels_list/list/list.js +++ b/app/components/sidebars/main/channels_list/list/list.js @@ -16,13 +16,14 @@ import { import {intlShape} from 'react-intl'; import MaterialIcon from 'react-native-vector-icons/MaterialIcons'; import FontAwesomePro from 'react-native-vector-icons/Ionicons'; +import EventEmitter from '@mm-redux/utils/event_emitter'; import {General} from '@mm-redux/constants'; import {debounce} from '@mm-redux/actions/helpers'; import ChannelItem from 'app/components/sidebars/main/channels_list/channel_item'; import {paddingLeft} from 'app/components/safe_area_view/iphone_x_spacing'; -import {DeviceTypes, ListTypes} from 'app/constants'; +import {DeviceTypes, ListTypes, NavigationTypes} from 'app/constants'; import {SidebarSectionTypes} from 'app/constants/view'; import BottomSheet from 'app/utils/bottom_sheet'; @@ -232,6 +233,7 @@ export default class List extends PureComponent { closeButton: this.closeButton, }; + EventEmitter.emit(NavigationTypes.CLOSE_MAIN_SIDEBAR); showModal(screen, title, passProps); }); @@ -244,6 +246,7 @@ export default class List extends PureComponent { closeButton: this.closeButton, }; + EventEmitter.emit(NavigationTypes.CLOSE_MAIN_SIDEBAR); showModal(screen, title, passProps); }); @@ -261,6 +264,7 @@ export default class List extends PureComponent { }, }; + EventEmitter.emit(NavigationTypes.CLOSE_MAIN_SIDEBAR); showModal(screen, title, passProps, options); }); @@ -272,6 +276,7 @@ export default class List extends PureComponent { closeButton: this.closeButton, }; + EventEmitter.emit(NavigationTypes.CLOSE_MAIN_SIDEBAR); showModal(screen, title, passProps); }); diff --git a/app/components/sidebars/settings/settings_sidebar_base.js b/app/components/sidebars/settings/settings_sidebar_base.js index 34da5d1cd..538cc0f34 100644 --- a/app/components/sidebars/settings/settings_sidebar_base.js +++ b/app/components/sidebars/settings/settings_sidebar_base.js @@ -29,7 +29,6 @@ export default class SettingsSidebarBase extends PureComponent { currentUser: PropTypes.object.isRequired, status: PropTypes.string, theme: PropTypes.object.isRequired, - locale: PropTypes.string, }; static defaultProps = { @@ -130,7 +129,7 @@ export default class SettingsSidebarBase extends PureComponent { logout(); }); - openModal = async (screen, title, passProps) => { + openModal = async (screen, title, passProps = {}) => { this.closeSettingsSidebar(); if (!this.closeButton) { diff --git a/app/screens/channel/channel_base.js b/app/screens/channel/channel_base.js index 600f547fa..001e35b67 100644 --- a/app/screens/channel/channel_base.js +++ b/app/screens/channel/channel_base.js @@ -7,6 +7,7 @@ import {intlShape} from 'react-intl'; import { Keyboard, StyleSheet, + Platform, } from 'react-native'; import MaterialIcon from 'react-native-vector-icons/MaterialIcons'; @@ -178,6 +179,11 @@ export default class ChannelBase extends PureComponent { icon: source, }], }, + ...Platform.select({ + ios: { + modalPresentationStyle: 'pageSheet', + }, + }), }; Keyboard.dismiss(); diff --git a/app/screens/search/search.js b/app/screens/search/search.js index 71b2a1395..e3e70e3e1 100644 --- a/app/screens/search/search.js +++ b/app/screens/search/search.js @@ -26,11 +26,10 @@ import FormattedText from 'app/components/formatted_text'; import Loading from 'app/components/loading'; import PostListRetry from 'app/components/post_list_retry'; import PostSeparator from 'app/components/post_separator'; -import SafeAreaView from 'app/components/safe_area_view'; import SearchBar from 'app/components/search_bar'; import StatusBar from 'app/components/status_bar'; import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing'; -import {DeviceTypes, ListTypes} from 'app/constants'; +import {ListTypes} from 'app/constants'; import mattermostManaged from 'app/mattermost_managed'; import {preventDoubleTap} from 'app/utils/tap'; import {goToScreen, showModalOverCurrentContext, dismissModal} from 'app/actions/navigation'; @@ -713,64 +712,60 @@ export default class Search extends PureComponent { paddingRes.paddingLeft = null; if (isLandscape) { - paddingRes.paddingTop = 5; + paddingRes.paddingTop = 14; } } return ( - - - - - - - - + + + - - + + + + ); } } @@ -786,9 +781,10 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => { justifyContent: 'center', }, ios: { - height: 44, - paddingLeft: 8, - paddingBottom: 10, + height: 61, + paddingLeft: 14, + paddingRight: 5, + paddingTop: 14, }, }), },