SW/mattermost-mobile
2
0
Fork 0
forked from Ivasoft/mattermost-mobile
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MM-22852 Improve mobile modal style (#4198)

Browse Source 
* 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
This commit is contained in:
Andre Vasconcelos
2020-06-11 04:34:08 +09:00
committed by GitHub
parent 446f95ff6b
commit 55acf06c6d
6 changed files with 73 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/actions/navigation/index.js
View File

@@ -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);

4
app/actions/navigation/index.test.js
View File

@@ -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,
},

7
app/components/sidebars/main/channels_list/list/list.js
View File

@@ -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);
});

3
app/components/sidebars/settings/settings_sidebar_base.js
View File

@@ -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) {

6
app/screens/channel/channel_base.js
View File

@@ -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();

108
app/screens/search/search.js
View File

@@ -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 (
<SafeAreaView
excludeHeader={isLandscape && DeviceTypes.IS_IPHONE_WITH_INSETS}
>
<KeyboardLayout>
<StatusBar/>
<View style={[style.header, paddingRes]}>
<SearchBar
ref={this.setSearchBarRef}
placeholder={intl.formatMessage({id: 'search_bar.search', defaultMessage: 'Search'})}
cancelTitle={intl.formatMessage({id: 'mobile.post.cancel', defaultMessage: 'Cancel'})}
backgroundColor='transparent'
inputHeight={Platform.OS === 'ios' ? 33 : 46}
inputStyle={searchBarInput}
placeholderTextColor={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
selectionColor={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
tintColorSearch={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
tintColorDelete={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
titleCancelColor={theme.sidebarHeaderTextColor}
onChangeText={this.handleTextChanged}
onSearchButtonPress={this.handleSearchButtonPress}
onCancelButtonPress={this.cancelSearch}
onSelectionChange={this.handleSelectionChange}
autoCapitalize='none'
showArrow={true}
value={value}
containerStyle={style.searchBarContainer}
backArrowSize={28}
keyboardAppearance={getKeyboardAppearanceFromTheme(theme)}
containerHeight={33}
/>
</View>
<SectionList
ref={this.setListRef}
style={style.sectionList}
renderSectionHeader={this.renderSectionHeader}
sections={sections}
keyboardShouldPersistTaps='always'
keyboardDismissMode='interactive'
stickySectionHeadersEnabled={Platform.OS === 'ios'}
onLayout={this.handleLayout}
onScroll={this.handleScroll}
scrollEventThrottle={60}
ListFooterComponent={this.renderFooter}
/>
<Autocomplete
cursorPosition={cursorPosition}
<KeyboardLayout>
<StatusBar/>
<View style={[style.header, paddingRes]}>
<SearchBar
ref={this.setSearchBarRef}
placeholder={intl.formatMessage({id: 'search_bar.search', defaultMessage: 'Search'})}
cancelTitle={intl.formatMessage({id: 'mobile.post.cancel', defaultMessage: 'Cancel'})}
backgroundColor='transparent'
inputHeight={Platform.OS === 'ios' ? 33 : 46}
inputStyle={searchBarInput}
placeholderTextColor={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
selectionColor={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
tintColorSearch={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
tintColorDelete={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
titleCancelColor={theme.sidebarHeaderTextColor}
onChangeText={this.handleTextChanged}
isSearch={true}
onSearchButtonPress={this.handleSearchButtonPress}
onCancelButtonPress={this.cancelSearch}
onSelectionChange={this.handleSelectionChange}
autoCapitalize='none'
showArrow={true}
value={value}
enableDateSuggestion={this.props.enableDateSuggestion}
containerStyle={style.searchBarContainer}
backArrowSize={28}
keyboardAppearance={getKeyboardAppearanceFromTheme(theme)}
containerHeight={33}
/>
</KeyboardLayout>
</SafeAreaView>
</View>
<SectionList
ref={this.setListRef}
style={style.sectionList}
renderSectionHeader={this.renderSectionHeader}
sections={sections}
keyboardShouldPersistTaps='always'
keyboardDismissMode='interactive'
stickySectionHeadersEnabled={Platform.OS === 'ios'}
onLayout={this.handleLayout}
onScroll={this.handleScroll}
scrollEventThrottle={60}
ListFooterComponent={this.renderFooter}
/>
<Autocomplete
cursorPosition={cursorPosition}
onChangeText={this.handleTextChanged}
isSearch={true}
value={value}
enableDateSuggestion={this.props.enableDateSuggestion}
/>
</KeyboardLayout>
);
}
}
@@ -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,
},
}),
},