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

RN-44: Adds flag SVG to post header. (#1004)

Browse source 
* Adds flag SVG to post header.

* RN-44: Pushes flagged post icon up.
This commit is contained in:
Martin Kraft 2017-11-14 09:49:38 -05:00 committed by Harrison Healey
parent d1339b5423
commit 002a5b8acd
5 changed files with 71 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
app/components/flag_icon.js Normal file
View file

@ -0,0 +1,31 @@
// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import Svg, {Path, G} from 'react-native-svg';
export default class FlagIcon extends PureComponent {
static propTypes = {
width: PropTypes.number.isRequired,
height: PropTypes.number.isRequired,
color: PropTypes.string.isRequired
};
render() {
return (
<Svg
width={this.props.width}
height={this.props.height}
viewBox='0 0 16 16'
>
<G fill={this.props.color}>
<Path
d='M8,1 L2,1 C2,0.447 1.553,0 1,0 C0.447,0 0,0.447 0,1 L0,15.5 C0,15.776 0.224,16 0.5,16 L1.5,16 C1.776,16 2,15.776 2,15.5 L2,11 L7,11 L7,12 C7,12.553 7.447,13 8,13 L15,13 C15.553,13 16,12.553 16,12 L16,4 C16,3.447 15.553,3 15,3 L9,3 L9,2 C9,1.447 8.553,1 8,1 Z'
fill={this.props.color}
/>
</G>
</Svg>
);
}
}

7
app/components/post/index.js
View file

@ -7,9 +7,10 @@ import {bindActionCreators} from 'redux';
import {addReaction, createPost, deletePost, removePost} from 'mattermost-redux/actions/posts';
import {getPost} from 'mattermost-redux/selectors/entities/posts';
import {getCurrentUserId, getCurrentUserRoles} from 'mattermost-redux/selectors/entities/users';
import {getMyPreferences, getTheme} from 'mattermost-redux/selectors/entities/preferences';
import {isPostFlagged} from 'mattermost-redux/utils/post_utils';
import {insertToDraft, setPostTooltipVisible} from 'app/actions/views/channel';
import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
import Post from './post';
@ -18,6 +19,7 @@ function mapStateToProps(state, ownProps) {
const {config, license} = state.entities.general;
const roles = getCurrentUserId(state) ? getCurrentUserRoles(state) : '';
const myPreferences = getMyPreferences(state);
let isFirstReply = true;
let isLastReply = true;
@ -53,7 +55,8 @@ function mapStateToProps(state, ownProps) {
commentedOnPost,
license,
roles,
theme: getTheme(state)
theme: getTheme(state),
isFlagged: isPostFlagged(post.id, myPreferences)
};
}

8
app/components/post/post.js
View file

@ -58,7 +58,8 @@ class Post extends PureComponent {
showFullDate: PropTypes.bool,
theme: PropTypes.object.isRequired,
onPress: PropTypes.func,
onReply: PropTypes.func
onReply: PropTypes.func,
isFlagged: PropTypes.bool
};
static defaultProps = {
@ -347,7 +348,8 @@ class Post extends PureComponent {
shouldRenderReplyButton,
showFullDate,
theme,
managedConfig
managedConfig,
isFlagged
} = this.props;
if (!post) {
@ -382,6 +384,7 @@ class Post extends PureComponent {
onUsernamePress={onUsernamePress}
renderReplies={renderReplies}
theme={theme}
isFlagged={isFlagged}
/>
<PostBody
canDelete={this.state.canDelete}
@ -398,6 +401,7 @@ class Post extends PureComponent {
renderReplyBar={commentedOnPost ? this.renderReplyBar : emptyFunction}
toggleSelected={this.toggleSelected}
managedConfig={managedConfig}
isFlagged={isFlagged}
/>
</View>
</View>

6
app/components/post_body/index.js
View file

@ -7,14 +7,13 @@ import {bindActionCreators} from 'redux';
import {flagPost, unflagPost} from 'mattermost-redux/actions/posts';
import {Posts} from 'mattermost-redux/constants';
import {getPost} from 'mattermost-redux/selectors/entities/posts';
import {getMyPreferences, getTheme} from 'mattermost-redux/selectors/entities/preferences';
import {isPostFlagged, isPostEphemeral, isSystemMessage} from 'mattermost-redux/utils/post_utils';
import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
import {isPostEphemeral, isSystemMessage} from 'mattermost-redux/utils/post_utils';
import PostBody from './post_body';
function mapStateToProps(state, ownProps) {
const post = getPost(state, ownProps.postId);
const myPreferences = getMyPreferences(state);
return {
...ownProps,
@ -23,7 +22,6 @@ function mapStateToProps(state, ownProps) {
hasBeenDeleted: post.state === Posts.POST_DELETED,
hasReactions: post.has_reactions,
isFailed: post.failed,
isFlagged: isPostFlagged(post.id, myPreferences),
isPending: post.id === post.pending_post_id,
isPostEphemeral: isPostEphemeral(post),
isSystemMessage: isSystemMessage(post),

29
app/components/post_header/post_header.js
View file

@ -4,6 +4,7 @@
import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {
Platform,
Text,
TouchableOpacity,
View
@ -13,6 +14,7 @@ import FormattedText from 'app/components/formatted_text';
import FormattedTime from 'app/components/formatted_time';
import FormattedDate from 'app/components/formatted_date';
import ReplyIcon from 'app/components/reply_icon';
import FlagIcon from 'app/components/flag_icon';
import {emptyFunction} from 'app/utils/general';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
@ -37,7 +39,8 @@ export default class PostHeader extends PureComponent {
shouldRenderReplyButton: PropTypes.bool,
showFullDate: PropTypes.bool,
theme: PropTypes.object.isRequired,
username: PropTypes.string.isRequired
username: PropTypes.string.isRequired,
isFlagged: PropTypes.bool
};
static defaultProps = {
@ -152,7 +155,8 @@ export default class PostHeader extends PureComponent {
renderReplies,
shouldRenderReplyButton,
showFullDate,
theme
theme,
isFlagged
} = this.props;
const style = getStyleSheet(theme);
const showReply = shouldRenderReplyButton || (!commentedOnDisplayName && commentCount > 0 && renderReplies);
@ -191,6 +195,15 @@ export default class PostHeader extends PureComponent {
<View style={style.timeContainer}>
{dateComponent}
</View>
{isFlagged &&
<View style={style.flagContainer}>
<FlagIcon
height={11}
width={11}
color={theme.linkColor}
/>
</View>
}
</View>
{showReply &&
<TouchableOpacity
@ -277,6 +290,18 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
fontWeight: '600',
marginRight: 5,
marginBottom: 3
},
flagContainer: {
marginLeft: 10,
alignSelf: 'center',
...Platform.select({
ios: {
marginBottom: 2
},
android: {
marginBottom: 1
}
})
}
};
});