toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Polishing search box text size and icon styling (#1034)

Browse source 
* Channel Switcher and search box text size and icon styling

* minor UI fixes and android fixes
This commit is contained in:
enahum 2017-10-19 18:49:21 -03:00 committed by GitHub
parent 02aef861b7
commit e84af2bfa7
11 changed files with 69 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
app/components/channel_drawer/channels_list/channels_list.js
View file

@ -144,17 +144,18 @@ class ChannelsList extends React.PureComponent {
<View style={styles.searchContainer}>
<SearchBar
ref='search_bar'
placeholder={intl.formatMessage({id: 'mobile.channel_drawer.search', defaultMessage: 'Jump to a conversation'})}
placeholder={intl.formatMessage({id: 'mobile.channel_drawer.search', defaultMessage: 'Jump to...'})}
cancelTitle={intl.formatMessage({id: 'mobile.post.cancel', defaultMessage: 'Cancel'})}
backgroundColor='transparent'
inputHeight={33}
inputStyle={{
backgroundColor: changeOpacity(theme.sidebarHeaderTextColor, 0.2),
color: theme.sidebarHeaderTextColor,
fontSize: 13
fontSize: 15,
lineHeight: 66
}}
placeholderTextColor={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
tintColorSearch={changeOpacity(theme.sidebarHeaderTextColor, 0.8)}
tintColorSearch={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
tintColorDelete={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
titleCancelColor={theme.sidebarHeaderTextColor}
selectionColor={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
@ -173,10 +174,12 @@ class ChannelsList extends React.PureComponent {
>
<View style={styles.statusBar}>
<View style={styles.headerContainer}>
<SwitchTeamsButton
searching={searching}
onShowTeams={onShowTeams}
/>
<View style={styles.switchContainer}>
<SwitchTeamsButton
searching={searching}
onShowTeams={onShowTeams}
/>
</View>
{title}
{settings}
</View>
@ -224,6 +227,10 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
fontWeight: 'normal',
paddingLeft: 16
},
switchContainer: {
position: 'relative',
top: -1
},
settingsContainer: {
alignItems: 'center',
justifyContent: 'center',

2
app/components/channel_drawer/channels_list/switch_teams_button/switch_teams_button.js
View file

@ -93,7 +93,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
height: 32,
justifyContent: 'center',
marginLeft: 6,
marginRight: 10,
marginRight: 5,
paddingHorizontal: 6
},
switcherDivider: {

25
app/components/search_bar/search_bar.android.js
View file

@ -49,8 +49,8 @@ export default class SearchBarAndroid extends PureComponent {
static defaultProps = {
backArrowSize: 24,
deleteIconSize: 16,
searchIconSize: 16,
deleteIconSize: 20,
searchIconSize: 24,
blurOnSubmit: true,
placeholder: 'Search',
showCancelButton: true,
@ -99,6 +99,10 @@ export default class SearchBarAndroid extends PureComponent {
});
};
onClearPress = () => {
this.onChangeText('');
};
onChangeText = (value) => {
this.props.onChangeText(value);
};
@ -170,7 +174,7 @@ export default class SearchBarAndroid extends PureComponent {
{
backgroundColor: inputColor,
height: inputHeight,
paddingLeft: isFocused ? 0 : inputHeight * 0.25
paddingLeft: 7
}
]}
>
@ -212,13 +216,14 @@ export default class SearchBarAndroid extends PureComponent {
style={[
styles.searchBarInput,
inputNoBackground,
{height: this.props.inputHeight}
{height: this.props.inputHeight},
isFocused ? {} : styles.searchBarBlurredInput
]}
/>
{isFocused && value ?
<TouchableWithoutFeedback onPress={() => this.onChangeText('')}>
<TouchableWithoutFeedback onPress={this.onClearPress}>
<Icon
style={[{paddingRight: (inputHeight * 0.2)}]}
style={[{paddingRight: 7}]}
name='close'
size={deleteIconSize}
color={tintColorDelete || placeholderTextColor}
@ -236,8 +241,7 @@ const styles = StyleSheet.create({
backgroundColor: 'grey',
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
padding: 5
alignItems: 'center'
},
searchBar: {
flex: 1,
@ -248,7 +252,10 @@ const styles = StyleSheet.create({
flex: 1,
fontWeight: 'normal',
textAlignVertical: 'center',
padding: 0,
fontSize: 15,
includeFontPadding: false
},
searchBarBlurredInput: {
padding: 0
}
});

8
app/components/search_bar/search_bar.ios.js
View file

@ -101,10 +101,10 @@ export default class SearchBarIos extends PureComponent {
<Search
{...this.props}
ref='search'
placeholderCollapsedMargin={25}
placeholderExpandedMargin={25}
searchIconCollapsedMargin={15}
searchIconExpandedMargin={15}
placeholderCollapsedMargin={33}
placeholderExpandedMargin={33}
searchIconCollapsedMargin={10}
searchIconExpandedMargin={10}
shadowVisible={false}
onCancel={this.onCancel}
onChangeText={this.onChangeText}

36
app/components/search_bar/search_box.js
View file

@ -15,10 +15,12 @@ import {
StyleSheet,
View
} from 'react-native';
import EvilIcon from 'react-native-vector-icons/EvilIcons';
import IonIcon from 'react-native-vector-icons/Ionicons';
const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
const AnimatedIcon = Animated.createAnimatedComponent(IonIcon);
const AnimatedIonIcon = Animated.createAnimatedComponent(IonIcon);
const AnimatedEvilcon = Animated.createAnimatedComponent(EvilIcon);
const containerHeight = 40;
const middleHeight = 20;
@ -328,11 +330,6 @@ export default class Search extends Component {
};
render() {
let iconSize = 16;
if (this.props.inputStyle && this.props.inputStyle.fontSize) {
iconSize = this.props.inputStyle.fontSize + 2;
}
return (
<Animated.View
ref='searchContainer'
@ -391,16 +388,16 @@ export default class Search extends Component {
>
{this.props.iconSearch}
</Animated.View> :
<AnimatedIcon
name='ios-search-outline'
size={iconSize}
<AnimatedEvilcon
name='search'
size={24}
style={[
styles.iconSearch,
styles.iconSearchDefault,
this.props.tintColorSearch && {color: this.props.tintColorSearch},
{
left: this.iconSearchAnimated,
top: middleHeight - (iconSize / 2)
top: middleHeight - 10
}
]}
/>
@ -417,10 +414,10 @@ export default class Search extends Component {
>
{this.props.iconDelete}
</Animated.View> :
<View style={[styles.iconDelete, this.props.inputHeight && {height: this.props.inputHeight, width: iconSize + 5}]}>
<AnimatedIcon
<View style={[styles.iconDelete, this.props.inputHeight && {height: this.props.inputHeight}]}>
<AnimatedIonIcon
name='ios-close-circle'
size={iconSize}
size={17}
style={[
styles.iconDeleteDefault,
this.props.tintColorDelete && {color: this.props.tintColorDelete},
@ -468,13 +465,13 @@ const styles = StyleSheet.create({
},
input: {
height: containerHeight - 10,
paddingTop: 5,
paddingTop: 7,
paddingBottom: 5,
paddingRight: 20,
paddingRight: 32,
borderColor: '#444',
backgroundColor: '#f7f7f7',
borderRadius: 5,
fontSize: 13
fontSize: 15
},
iconSearch: {
flex: 1,
@ -484,10 +481,13 @@ const styles = StyleSheet.create({
color: 'grey'
},
iconDelete: {
alignItems: 'center',
alignItems: 'flex-start',
justifyContent: 'center',
position: 'absolute',
right: 70
paddingLeft: 1,
paddingTop: 3,
right: 65,
width: 25
},
iconDeleteDefault: {
color: 'grey'

5
app/screens/channel_add_members/channel_add_members.js
View file

@ -246,10 +246,11 @@ class ChannelAddMembers extends PureComponent {
inputStyle={{
backgroundColor: changeOpacity(theme.centerChannelColor, 0.2),
color: theme.centerChannelColor,
fontSize: 13
fontSize: 15,
lineHeight: 66
}}
placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.5)}
tintColorSearch={changeOpacity(theme.centerChannelColor, 0.8)}
tintColorSearch={changeOpacity(theme.centerChannelColor, 0.5)}
tintColorDelete={changeOpacity(theme.centerChannelColor, 0.5)}
titleCancelColor={theme.centerChannelColor}
onChangeText={this.searchProfiles}

5
app/screens/channel_members/channel_members.js
View file

@ -293,10 +293,11 @@ class ChannelMembers extends PureComponent {
inputStyle={{
backgroundColor: changeOpacity(theme.centerChannelColor, 0.2),
color: theme.centerChannelColor,
fontSize: 13
fontSize: 15,
lineHeight: 66
}}
placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.5)}
tintColorSearch={changeOpacity(theme.centerChannelColor, 0.8)}
tintColorSearch={changeOpacity(theme.centerChannelColor, 0.5)}
tintColorDelete={changeOpacity(theme.centerChannelColor, 0.5)}
titleCancelColor={theme.centerChannelColor}
onChangeText={this.searchProfiles}

5
app/screens/more_channels/more_channels.js
View file

@ -290,10 +290,11 @@ class MoreChannels extends PureComponent {
inputStyle={{
backgroundColor: changeOpacity(theme.centerChannelColor, 0.2),
color: theme.centerChannelColor,
fontSize: 13
fontSize: 15,
lineHeight: 66
}}
placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.5)}
tintColorSearch={changeOpacity(theme.centerChannelColor, 0.8)}
tintColorSearch={changeOpacity(theme.centerChannelColor, 0.5)}
tintColorDelete={changeOpacity(theme.centerChannelColor, 0.5)}
titleCancelColor={theme.centerChannelColor}
onChangeText={this.searchProfiles}

5
app/screens/more_dms/more_dms.js
View file

@ -387,10 +387,11 @@ class MoreDirectMessages extends PureComponent {
inputStyle={{
backgroundColor: changeOpacity(theme.centerChannelColor, 0.2),
color: theme.centerChannelColor,
fontSize: 13
fontSize: 15,
lineHeight: 66
}}
placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.5)}
tintColorSearch={changeOpacity(theme.centerChannelColor, 0.8)}
tintColorSearch={changeOpacity(theme.centerChannelColor, 0.5)}
tintColorDelete={changeOpacity(theme.centerChannelColor, 0.5)}
titleCancelColor={theme.centerChannelColor}
onChangeText={this.onSearch}

12
app/screens/search/search.js
View file

@ -592,18 +592,12 @@ class Search extends Component {
inputStyle={{
backgroundColor: changeOpacity(theme.sidebarHeaderTextColor, 0.2),
color: theme.sidebarHeaderTextColor,
...Platform.select({
android: {
fontSize: 15
},
ios: {
fontSize: 13
}
})
fontSize: 15,
lineHeight: 66
}}
placeholderTextColor={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
selectionColor={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
tintColorSearch={changeOpacity(theme.sidebarHeaderTextColor, 0.8)}
tintColorSearch={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
tintColorDelete={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
titleCancelColor={theme.sidebarHeaderTextColor}
onChangeText={this.handleTextChanged}

2
assets/base/i18n/en.json
View file

@ -1874,7 +1874,7 @@
"mobile.advanced_settings.reset_message": "\nThis will reset all offline data and restart the app. You will be automatically logged back in once the app restarts.\n",
"mobile.advanced_settings.reset_title": "Reset Cache",
"mobile.advanced_settings.title": "Advanced Settings",
"mobile.channel_drawer.search": "Jump to a conversation",
"mobile.channel_drawer.search": "Jump to...",
"mobile.channel_info.alertMessageDeleteChannel": "Are you sure you want to delete the {term} {name}?",
"mobile.channel_info.alertMessageLeaveChannel": "Are you sure you want to leave the {term} {name}?",
"mobile.channel_info.alertNo": "No",