diff options
author | Joram Wilander <jwawilander@gmail.com> | 2016-08-04 11:38:09 -0400 |
---|---|---|
committer | enahum <nahumhbl@gmail.com> | 2016-08-04 10:38:09 -0500 |
commit | 0184d6059bb1943fb74bf33d1d200a423c5bf5e6 (patch) | |
tree | 4b8480d65d5ec181b372a09f946bb7649809a467 /webapp/components/rhs_comment.jsx | |
parent | 9b50b5028391ee29922ad5549b785ac2312be368 (diff) | |
download | chat-0184d6059bb1943fb74bf33d1d200a423c5bf5e6.tar.gz chat-0184d6059bb1943fb74bf33d1d200a423c5bf5e6.tar.bz2 chat-0184d6059bb1943fb74bf33d1d200a423c5bf5e6.zip |
PLT-3506 Added flagged posts functionality (#3679)
* Added flagged posts functionality
* UI Improvements to flags (#3697)
* Added flag functionality for mobile
* Updating flagged text (#3699)
* Add back button to RHS thread when coming from flagged posts
* Updating position of flags (#3708)
* Plt 3506 - Reverting flag position (#3724)
* Revert "Updating position of flags (#3708)"
This reverts commit aaa05632c5d9eda35a048300a5bd7e99584c5b58.
* Fixing the icon in search
* Help text and white space improvements (#3730)
* Updatng help text and some white spacing.
* Updating help text
Diffstat (limited to 'webapp/components/rhs_comment.jsx')
-rw-r--r-- | webapp/components/rhs_comment.jsx | 116 |
1 files changed, 115 insertions, 1 deletions
diff --git a/webapp/components/rhs_comment.jsx b/webapp/components/rhs_comment.jsx index ed1f71b1e..a90380510 100644 --- a/webapp/components/rhs_comment.jsx +++ b/webapp/components/rhs_comment.jsx @@ -9,12 +9,14 @@ import TeamStore from 'stores/team_store.jsx'; import UserStore from 'stores/user_store.jsx'; import * as GlobalActions from 'actions/global_actions.jsx'; +import {flagPost, unflagPost} from 'actions/post_actions.jsx'; import * as TextFormatting from 'utils/text_formatting.jsx'; import * as Utils from 'utils/utils.jsx'; import Client from 'client/web_client.jsx'; import Constants from 'utils/constants.jsx'; +import {Tooltip, OverlayTrigger} from 'react-bootstrap'; import {FormattedMessage, FormattedDate} from 'react-intl'; @@ -27,13 +29,17 @@ export default class RhsComment extends React.Component { super(props); this.handlePermalink = this.handlePermalink.bind(this); + this.flagPost = this.flagPost.bind(this); + this.unflagPost = this.unflagPost.bind(this); this.state = {}; } + handlePermalink(e) { e.preventDefault(); GlobalActions.showGetPostLinkModal(this.props.post); } + shouldComponentUpdate(nextProps) { if (nextProps.compactDisplay !== this.props.compactDisplay) { return true; @@ -43,6 +49,10 @@ export default class RhsComment extends React.Component { return true; } + if (nextProps.isFlagged !== this.props.isFlagged) { + return true; + } + if (!Utils.areObjectsEqual(nextProps.post, this.props.post)) { return true; } @@ -53,6 +63,17 @@ export default class RhsComment extends React.Component { return false; } + + flagPost(e) { + e.preventDefault(); + flagPost(this.props.post.id); + } + + unflagPost(e) { + e.preventDefault(); + unflagPost(this.props.post.id); + } + createDropdown() { var post = this.props.post; @@ -66,6 +87,44 @@ export default class RhsComment extends React.Component { var dropdownContents = []; + if (Utils.isMobile()) { + if (this.props.isFlagged) { + dropdownContents.push( + <li + key='mobileFlag' + role='presentation' + > + <a + href='#' + onClick={this.unflagPost} + > + <FormattedMessage + id='rhs_root.mobile.unflag' + defaultMessage='Unflag' + /> + </a> + </li> + ); + } else { + dropdownContents.push( + <li + key='mobileFlag' + role='presentation' + > + <a + href='#' + onClick={this.flagPost} + > + <FormattedMessage + id='rhs_root.mobile.flag' + defaultMessage='Flag' + /> + </a> + </li> + ); + } + } + dropdownContents.push( <li key='rhs-root-permalink' @@ -151,8 +210,10 @@ export default class RhsComment extends React.Component { </div> ); } + render() { var post = this.props.post; + const flagIcon = Constants.FLAG_ICON_SVG; var currentUserCss = ''; if (this.props.currentUser === post.user_id) { @@ -225,6 +286,44 @@ export default class RhsComment extends React.Component { ); } + let flag; + let flagFunc; + let flagVisible = ''; + let flagTooltip = ( + <Tooltip id='flagTooltip'> + <FormattedMessage + id='flag_post.flag' + defaultMessage='Flag for follow up' + /> + </Tooltip> + ); + if (this.props.isFlagged) { + flagVisible = 'visible'; + flag = ( + <span + className='icon' + dangerouslySetInnerHTML={{__html: flagIcon}} + /> + ); + flagFunc = this.unflagPost; + flagTooltip = ( + <Tooltip id='flagTooltip'> + <FormattedMessage + id='flag_post.unflag' + defaultMessage='Unflag' + /> + </Tooltip> + ); + } else { + flag = ( + <span + className='icon' + dangerouslySetInnerHTML={{__html: flagIcon}} + /> + ); + flagFunc = this.flagPost; + } + return ( <div className={'post post--thread ' + currentUserCss + ' ' + compactClass}> <div className='post__content'> @@ -247,6 +346,20 @@ export default class RhsComment extends React.Component { minute='2-digit' /> </time> + <OverlayTrigger + key={'commentflagtooltipkey' + flagVisible} + delayShow={Constants.OVERLAY_TIME_DELAY} + placement='top' + overlay={flagTooltip} + > + <a + href='#' + className={'flag-icon__container ' + flagVisible} + onClick={flagFunc} + > + {flag} + </a> + </OverlayTrigger> </li> <li className='col col__reply'> {dropdown} @@ -271,5 +384,6 @@ RhsComment.propTypes = { user: React.PropTypes.object.isRequired, currentUser: React.PropTypes.object.isRequired, compactDisplay: React.PropTypes.bool, - useMilitaryTime: React.PropTypes.bool.isRequired + useMilitaryTime: React.PropTypes.bool.isRequired, + isFlagged: React.PropTypes.bool }; |