MM-9637 Fix text not visible when typing on Android search box (#1450)
This commit is contained in:
parent
f75d35b66e
commit
4959af54ed
8 changed files with 71 additions and 36 deletions
|
|
@ -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)}
|
||||
|
|
|
|||
|
|
@ -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)}
|
||||
|
|
|
|||
|
|
@ -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 ?
|
||||
|
|
|
|||
|
|
@ -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)}
|
||||
|
|
|
|||
|
|
@ -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)}
|
||||
|
|
|
|||
|
|
@ -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)}
|
||||
|
|
|
|||
|
|
@ -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)}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
|
|
|
|||
Loading…
Reference in a new issue