MM-9637 Fix text not visible when typing on Android search box (#1450)

This commit is contained in:
enahum 2018-02-20 20:37:00 -03:00 committed by Harrison Healey
parent f75d35b66e
commit 4959af54ed
8 changed files with 71 additions and 36 deletions

View file

@ -106,7 +106,11 @@ class ChannelsList extends React.PureComponent {
backgroundColor: changeOpacity(theme.sidebarHeaderTextColor, 0.2),
color: theme.sidebarHeaderTextColor,
fontSize: 15,
lineHeight: 66
...Platform.select({
android: {
marginBottom: -5
}
})
};
const title = (
@ -116,7 +120,7 @@ class ChannelsList extends React.PureComponent {
placeholder={intl.formatMessage({id: 'mobile.channel_drawer.search', defaultMessage: 'Jump to...'})}
cancelTitle={intl.formatMessage({id: 'mobile.post.cancel', defaultMessage: 'Cancel'})}
backgroundColor='transparent'
inputHeight={33}
inputHeight={34}
inputStyle={searchBarInput}
placeholderTextColor={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
tintColorSearch={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}

View file

@ -441,6 +441,17 @@ export default class EmojiPicker extends PureComponent {
keyboardOffset = 52;
}
const searchBarInput = {
backgroundColor: theme.centerChannelBg,
color: theme.centerChannelColor,
fontSize: 13,
...Platform.select({
android: {
marginBottom: -3
}
})
};
return (
<SafeAreaView excludeHeader={true}>
<KeyboardAvoidingView
@ -455,11 +466,7 @@ export default class EmojiPicker extends PureComponent {
cancelTitle={formatMessage({id: 'mobile.post.cancel', defaultMessage: 'Cancel'})}
backgroundColor='transparent'
inputHeight={33}
inputStyle={{
backgroundColor: theme.centerChannelBg,
color: theme.centerChannelColor,
fontSize: 13
}}
inputStyle={searchBarInput}
placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.5)}
tintColorSearch={changeOpacity(theme.centerChannelColor, 0.8)}
tintColorDelete={changeOpacity(theme.centerChannelColor, 0.5)}

View file

@ -221,9 +221,7 @@ export default class SearchBarAndroid extends PureComponent {
disableFullscreenUI={true}
style={[
styles.searchBarInput,
inputNoBackground,
{height: this.props.inputHeight},
isFocused ? {paddingBottom: (this.props.inputHeight - 17) / 2} : styles.searchBarBlurredInput
inputNoBackground
]}
/>
{isFocused && value ?

View file

@ -7,6 +7,7 @@ import {injectIntl, intlShape} from 'react-intl';
import {
Alert,
InteractionManager,
Platform,
View
} from 'react-native';
@ -238,6 +239,17 @@ class ChannelAddMembers extends PureComponent {
);
}
const searchBarInput = {
backgroundColor: changeOpacity(theme.centerChannelColor, 0.2),
color: theme.centerChannelColor,
fontSize: 15,
...Platform.select({
android: {
marginBottom: -5
}
})
};
return (
<View style={style.container}>
<StatusBar/>
@ -250,12 +262,7 @@ class ChannelAddMembers extends PureComponent {
cancelTitle={formatMessage({id: 'mobile.post.cancel', defaultMessage: 'Cancel'})}
backgroundColor='transparent'
inputHeight={33}
inputStyle={{
backgroundColor: changeOpacity(theme.centerChannelColor, 0.2),
color: theme.centerChannelColor,
fontSize: 15,
lineHeight: 66
}}
inputStyle={searchBarInput}
placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.5)}
tintColorSearch={changeOpacity(theme.centerChannelColor, 0.5)}
tintColorDelete={changeOpacity(theme.centerChannelColor, 0.5)}

View file

@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
import {
Alert,
InteractionManager,
Platform,
View
} from 'react-native';
import {injectIntl, intlShape} from 'react-intl';
@ -285,6 +286,17 @@ class ChannelMembers extends PureComponent {
);
}
const searchBarInput = {
backgroundColor: changeOpacity(theme.centerChannelColor, 0.2),
color: theme.centerChannelColor,
fontSize: 15,
...Platform.select({
android: {
marginBottom: -5
}
})
};
return (
<View style={style.container}>
<StatusBar/>
@ -297,12 +309,7 @@ class ChannelMembers extends PureComponent {
cancelTitle={formatMessage({id: 'mobile.post.cancel', defaultMessage: 'Cancel'})}
backgroundColor='transparent'
inputHeight={33}
inputStyle={{
backgroundColor: changeOpacity(theme.centerChannelColor, 0.2),
color: theme.centerChannelColor,
fontSize: 15,
lineHeight: 66
}}
inputStyle={searchBarInput}
placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.5)}
tintColorSearch={changeOpacity(theme.centerChannelColor, 0.5)}
tintColorDelete={changeOpacity(theme.centerChannelColor, 0.5)}

View file

@ -284,6 +284,17 @@ class MoreChannels extends PureComponent {
if (adding) {
content = (<Loading/>);
} else {
const searchBarInput = {
backgroundColor: changeOpacity(theme.centerChannelColor, 0.2),
color: theme.centerChannelColor,
fontSize: 15,
...Platform.select({
android: {
marginBottom: -5
}
})
};
content = (
<View style={{flex: 1}}>
<View
@ -295,12 +306,7 @@ class MoreChannels extends PureComponent {
cancelTitle={formatMessage({id: 'mobile.post.cancel', defaultMessage: 'Cancel'})}
backgroundColor='transparent'
inputHeight={33}
inputStyle={{
backgroundColor: changeOpacity(theme.centerChannelColor, 0.2),
color: theme.centerChannelColor,
fontSize: 15,
lineHeight: 66
}}
inputStyle={searchBarInput}
placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.5)}
tintColorSearch={changeOpacity(theme.centerChannelColor, 0.5)}
tintColorDelete={changeOpacity(theme.centerChannelColor, 0.5)}

View file

@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
import {injectIntl, intlShape} from 'react-intl';
import {
InteractionManager,
Platform,
View
} from 'react-native';
@ -454,6 +455,17 @@ class MoreDirectMessages extends PureComponent {
);
}
const searchBarInput = {
backgroundColor: changeOpacity(theme.centerChannelColor, 0.2),
color: theme.centerChannelColor,
fontSize: 15,
...Platform.select({
android: {
marginBottom: -5
}
})
};
return (
<View style={style.container}>
<StatusBar/>
@ -464,12 +476,7 @@ class MoreDirectMessages extends PureComponent {
cancelTitle={this.props.intl.formatMessage({id: 'mobile.post.cancel', defaultMessage: 'Cancel'})}
backgroundColor='transparent'
inputHeight={33}
inputStyle={{
backgroundColor: changeOpacity(theme.centerChannelColor, 0.2),
color: theme.centerChannelColor,
fontSize: 15,
lineHeight: 66
}}
inputStyle={searchBarInput}
placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.5)}
tintColorSearch={changeOpacity(theme.centerChannelColor, 0.5)}
tintColorDelete={changeOpacity(theme.centerChannelColor, 0.5)}

View file

@ -603,8 +603,7 @@ class Search extends PureComponent {
const searchBarInput = {
backgroundColor: changeOpacity(theme.sidebarHeaderTextColor, 0.2),
color: theme.sidebarHeaderTextColor,
fontSize: 15,
lineHeight: 66
fontSize: 15
};
return (