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

Increased clickable area around send post button (#1139)

Browse source 
* Increased clickable area around send post button

* Fixed attachment icon not staying at the bottom when the post textbox gets taller
This commit is contained in:
Harrison Healey 2017-11-13 16:43:31 -05:00 committed by enahum
parent aa5f0c9557
commit c877d983cc
1 changed files with 25 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
app/components/post_textbox/post_textbox.js
View file

@ -259,47 +259,41 @@ class PostTextbox extends PureComponent {
this.props.actions.handleUploadFiles(images, this.props.rootId);
};
renderDisabledSendButton = () => {
const {theme} = this.props;
const style = getStyleSheet(theme);
return (
<View style={style.sendButtonContainer}>
<View style={[style.sendButton, style.disableButton]}>
<PaperPlane
height={13}
width={15}
color={theme.buttonColor}
/>
</View>
</View>
);
};
renderSendButton = () => {
const {theme, uploadFileRequestStatus} = this.props;
const style = getStyleSheet(theme);
const icon = (
<PaperPlane
height={13}
width={15}
color={theme.buttonColor}
/>
);
let button = null;
if (uploadFileRequestStatus === RequestStatus.STARTED) {
return this.renderDisabledSendButton();
button = (
<View style={style.sendButtonContainer}>
<View style={[style.sendButton, style.disableButton]}>
{icon}
</View>
</View>
);
} else if (this.canSend()) {
return (
button = (
<TouchableOpacity
onPress={this.handleSendMessage}
style={style.sendButtonContainer}
>
<View style={style.sendButton}>
<PaperPlane
height={13}
width={15}
color={theme.buttonColor}
/>
{icon}
</View>
</TouchableOpacity>
);
}
return null;
return button;
};
sendMessage = () => {
@ -455,7 +449,8 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
flex: 1,
flexDirection: 'row',
backgroundColor: '#fff',
alignItems: 'flex-end'
alignItems: 'stretch',
marginRight: 10
},
inputContainerWithoutFileUpload: {
marginLeft: 10
@ -469,27 +464,17 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
borderTopColor: changeOpacity(theme.centerChannelColor, 0.20)
},
sendButtonContainer: {
paddingRight: 10
justifyContent: 'flex-end',
paddingHorizontal: 5,
paddingVertical: 3
},
sendButton: {
backgroundColor: theme.buttonBg,
borderRadius: 18,
marginRight: 5,
height: 28,
width: 28,
alignItems: 'center',
justifyContent: 'center',
paddingLeft: 2,
...Platform.select({
ios: {
marginBottom: 3
},
android: {
height: 29,
marginBottom: 4,
width: 29
}
})
justifyContent: 'center'
}
};
});