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

RN-216 Hid file upload button when files are disabled (#656)

Browse source
This commit is contained in:
Harrison Healey 2017-06-21 15:49:54 -04:00 committed by enahum
parent 48a276b632
commit 8a38ca86d3
3 changed files with 85 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/components/post_textbox/index.js
View file

@ -8,6 +8,7 @@ import {userTyping} from 'mattermost-redux/actions/websocket';
import {handleClearFiles, handleRemoveLastFile, handleUploadFiles} from 'app/actions/views/file_upload';
import {getTheme} from 'app/selectors/preferences';
import {getConfig} from 'mattermost-redux/selectors/entities/general';
import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
import {getUsersTyping} from 'mattermost-redux/selectors/entities/typing';
@ -17,6 +18,7 @@ function mapStateToProps(state, ownProps) {
return {
...ownProps,
channelIsLoading: state.views.channel.loading,
config: getConfig(state),
currentUserId: getCurrentUserId(state),
typing: getUsersTyping(state),
theme: getTheme(state),

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

@ -40,6 +40,7 @@ class PostTextbox extends PureComponent {
}).isRequired,
channelId: PropTypes.string.isRequired,
channelIsLoading: PropTypes.bool.isRequired,
config: PropTypes.object.isRequired,
currentUserId: PropTypes.string.isRequired,
files: PropTypes.array,
intl: intlShape.isRequired,
@ -97,10 +98,10 @@ class PostTextbox extends PureComponent {
);
}
const canSend = (
(valueLength > 0 && valueLength <= MAX_MESSAGE_LENGTH) ||
files.filter((f) => !f.failed).length > 0
) && uploadFileRequestStatus !== RequestStatus.STARTED;
const canSend =
(valueLength > 0 && valueLength <= MAX_MESSAGE_LENGTH) &&
files.filter((f) => !f.failed).length === 0 &&
uploadFileRequestStatus !== RequestStatus.STARTED;
this.setState({
canSend
});
@ -387,6 +388,26 @@ class PostTextbox extends PureComponent {
placeholder = {id: 'create_post.write', defaultMessage: 'Write a message...'};
}
let fileUpload = null;
const inputContainerStyle = [style.inputContainer];
if (this.props.config.EnableFileAttachments === 'true') {
fileUpload = (
<TouchableOpacity
onPress={this.showFileAttachmentOptions}
style={style.buttonContainer}
>
<Icon
size={30}
style={style.attachIcon}
color={changeOpacity(theme.centerChannelColor, 0.9)}
name='md-add'
/>
</TouchableOpacity>
);
} else {
inputContainerStyle.push(style.inputContainerWithoutFileUpload);
}
return (
<View>
<Text
@ -415,49 +436,35 @@ class PostTextbox extends PureComponent {
onChangeText={this.props.onChangeText}
rootId={this.props.rootId}
/>
<View style={{backgroundColor: theme.centerChannelBg, elevation: 5}}>
<View
style={style.inputWrapper}
>
<TouchableOpacity
onPress={this.showFileAttachmentOptions}
style={style.buttonContainer}
>
<Icon
size={30}
style={style.attachIcon}
color={changeOpacity(theme.centerChannelColor, 0.9)}
name='md-add'
/>
</TouchableOpacity>
<View style={style.inputContainer}>
<TextInput
ref='input'
value={textValue}
onChangeText={this.handleTextChange}
onSelectionChange={this.handleSelectionChange}
placeholder={intl.formatMessage(placeholder)}
placeholderTextColor={changeOpacity('#000', 0.5)}
multiline={true}
numberOfLines={10}
blurOnSubmit={false}
underlineColorAndroid='transparent'
style={[style.input, {height: textInputHeight}]}
onLayout={this.handleInputSizeChange}
/>
{this.state.canSend &&
<TouchableOpacity
onPress={this.handleSendMessage}
style={style.sendButton}
>
<PaperPlane
height={13}
width={15}
color={theme.buttonColor}
/>
</TouchableOpacity>
}
</View>
<View style={style.inputWrapper}>
{fileUpload}
<View style={inputContainerStyle}>
<TextInput
ref='input'
value={textValue}
onChangeText={this.handleTextChange}
onSelectionChange={this.handleSelectionChange}
placeholder={intl.formatMessage(placeholder)}
placeholderTextColor={changeOpacity('#000', 0.5)}
multiline={true}
numberOfLines={10}
blurOnSubmit={false}
underlineColorAndroid='transparent'
style={[style.input, {height: textInputHeight}]}
onLayout={this.handleInputSizeChange}
/>
{this.state.canSend &&
<TouchableOpacity
onPress={this.handleSendMessage}
style={style.sendButton}
>
<PaperPlane
height={13}
width={15}
color={theme.buttonColor}
/>
</TouchableOpacity>
}
</View>
</View>
</View>
@ -468,7 +475,10 @@ class PostTextbox extends PureComponent {
const getStyleSheet = makeStyleSheetFromTheme((theme) => {
return StyleSheet.create({
buttonContainer: {
height: 36,
height: Platform.select({
ios: 34,
android: 36
}),
width: 45,
alignItems: 'center',
justifyContent: 'center'
@ -485,7 +495,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
},
hidden: {
position: 'absolute',
top: 10000, // way off screen
top: 10000, // way off screen
left: 10000, // way off screen
backgroundColor: 'transparent',
borderColor: 'transparent',
@ -498,22 +508,21 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
alignItems: 'flex-end',
marginRight: 10
},
inputContainerWithoutFileUpload: {
marginLeft: 10
},
inputWrapper: {
alignItems: 'flex-end',
flexDirection: 'row',
paddingVertical: 4,
backgroundColor: changeOpacity(theme.centerChannelColor, 0.05),
backgroundColor: theme.centerChannelBg,
borderTopWidth: 1,
borderTopColor: changeOpacity(theme.centerChannelColor, 0.20)
},
attachIcon: {
...Platform.select({
ios: {
marginTop: 2
},
android: {
marginTop: 0
}
marginTop: Platform.select({
ios: 2,
android: 0
})
},
sendButton: {

21
app/screens/channel/channel.js
View file

@ -171,16 +171,17 @@ class Channel extends PureComponent {
theme
} = this.props;
const style = getStyleFromTheme(theme);
if (!currentTeam || !currentChannel) {
return (
<View style={{flex: 1, backgroundColor: theme.centerChannelBg}}>
<View style={style.loading}>
<Loading/>
</View>
);
}
const channelDraft = this.props.drafts[currentChannel.id] || {};
const style = getStyleFromTheme(theme);
return (
<ChannelDrawer
@ -190,7 +191,7 @@ class Channel extends PureComponent {
<StatusBar/>
<KeyboardLayout
behavior='padding'
style={{flex: 1, backgroundColor: theme.centerChannelBg}}
style={style.keyboardLayout}
keyboardVerticalOffset={0}
>
<View style={style.postList}>
@ -208,7 +209,7 @@ class Channel extends PureComponent {
navigator={navigator}
/>
</KeyboardLayout>
<View style={{flex: 1, position: 'absolute'}}>
<View style={style.headerContainer}>
<View style={style.header}>
<ChannelDrawerButton/>
<ChannelTitle
@ -224,6 +225,10 @@ class Channel extends PureComponent {
const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
return StyleSheet.create({
headerContainer: {
flex: 1,
position: 'absolute'
},
header: {
backgroundColor: theme.sidebarHeaderBg,
flexDirection: 'row',
@ -251,6 +256,14 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
marginTop: 64
}
})
},
loading: {
backgroundColor: theme.centerChannelBg,
flex: 1
},
keyboardLayout: {
backgroundColor: theme.centerChannelBg,
flex: 1
}
});
});