From 002a5b8acdbc4a7c0c450fcde93bc4683e199a9c Mon Sep 17 00:00:00 2001 From: Martin Kraft Date: Tue, 14 Nov 2017 09:49:38 -0500 Subject: [PATCH] RN-44: Adds flag SVG to post header. (#1004) * Adds flag SVG to post header. * RN-44: Pushes flagged post icon up. --- app/components/flag_icon.js | 31 +++++++++++++++++++++++ app/components/post/index.js | 7 +++-- app/components/post/post.js | 8 ++++-- app/components/post_body/index.js | 6 ++--- app/components/post_header/post_header.js | 29 +++++++++++++++++++-- 5 files changed, 71 insertions(+), 10 deletions(-) create mode 100644 app/components/flag_icon.js diff --git a/app/components/flag_icon.js b/app/components/flag_icon.js new file mode 100644 index 000000000..b94f79b89 --- /dev/null +++ b/app/components/flag_icon.js @@ -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 ( + + + + + + ); + } +} \ No newline at end of file diff --git a/app/components/post/index.js b/app/components/post/index.js index cab594c04..63939620e 100644 --- a/app/components/post/index.js +++ b/app/components/post/index.js @@ -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) }; } diff --git a/app/components/post/post.js b/app/components/post/post.js index 71dbe90c5..d0d35bbd1 100644 --- a/app/components/post/post.js +++ b/app/components/post/post.js @@ -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} /> diff --git a/app/components/post_body/index.js b/app/components/post_body/index.js index 24ce72de4..1de64ab78 100644 --- a/app/components/post_body/index.js +++ b/app/components/post_body/index.js @@ -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), diff --git a/app/components/post_header/post_header.js b/app/components/post_header/post_header.js index 63bef90c9..b93985b1d 100644 --- a/app/components/post_header/post_header.js +++ b/app/components/post_header/post_header.js @@ -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 { {dateComponent} + {isFlagged && + + + + } {showReply && { fontWeight: '600', marginRight: 5, marginBottom: 3 + }, + flagContainer: { + marginLeft: 10, + alignSelf: 'center', + ...Platform.select({ + ios: { + marginBottom: 2 + }, + android: { + marginBottom: 1 + } + }) } }; });