diff options
author | samogot <samogot@gmail.com> | 2016-05-28 02:31:02 +0300 |
---|---|---|
committer | Harrison Healey <harrisonmhealey@gmail.com> | 2016-05-27 19:31:02 -0400 |
commit | e1bebb2d776b12d6e1461e06f318e79fcb93ea2c (patch) | |
tree | 9cac8e57867a3b16589162f620f991c0ea6ea94d /webapp/components/post_view/components | |
parent | c7615920df6b25d0e8d59e0aaf00d2f772ef55e4 (diff) | |
download | chat-e1bebb2d776b12d6e1461e06f318e79fcb93ea2c.tar.gz chat-e1bebb2d776b12d6e1461e06f318e79fcb93ea2c.tar.bz2 chat-e1bebb2d776b12d6e1461e06f318e79fcb93ea2c.zip |
PLT-2321 Move the toggle icon next to the link being previewed (#3071)
* PLT-2321 Move the toggle icon next to the link being previewed
only applicable to one-line messages started with link
* remove useless "Youtube" header when no title is available
* allow breaking long links instead of toggle
* simplify "/" to "/<wbr />" replacing
fix empty post without additional content body
* discard buggy "simplification"
Diffstat (limited to 'webapp/components/post_view/components')
-rw-r--r-- | webapp/components/post_view/components/post_body.jsx | 34 | ||||
-rw-r--r-- | webapp/components/post_view/components/post_body_additional_content.jsx | 23 |
2 files changed, 39 insertions, 18 deletions
diff --git a/webapp/components/post_view/components/post_body.jsx b/webapp/components/post_view/components/post_body.jsx index 3c57db0cd..75ba30f23 100644 --- a/webapp/components/post_view/components/post_body.jsx +++ b/webapp/components/post_view/components/post_body.jsx @@ -136,7 +136,6 @@ export default class PostBody extends React.Component { } let message; - let additionalContent = null; if (this.props.post.state === Constants.POST_DELETED) { message = ( <FormattedMessage @@ -151,9 +150,28 @@ export default class PostBody extends React.Component { dangerouslySetInnerHTML={{__html: TextFormatting.formatText(this.props.post.message)}} /> ); + } + + let messageWrapper = ( + <div + key={`${post.id}_message`} + id={`${post.id}_message`} + className={postClass} + > + {loading} + {message} + </div> + ); - additionalContent = ( - <PostBodyAdditionalContent post={this.props.post}/> + let messageWithAdditionalContent; + if (this.props.post.state === Constants.POST_DELETED) { + messageWithAdditionalContent = messageWrapper; + } else { + messageWithAdditionalContent = ( + <PostBodyAdditionalContent + post={this.props.post} + message={messageWrapper} + /> ); } @@ -161,16 +179,8 @@ export default class PostBody extends React.Component { <div> {comment} <div className='post__body'> - <div - key={`${post.id}_message`} - id={`${post.id}_message`} - className={postClass} - > - {loading} - {message} - </div> + {messageWithAdditionalContent} {fileAttachmentHolder} - {additionalContent} </div> </div> ); diff --git a/webapp/components/post_view/components/post_body_additional_content.jsx b/webapp/components/post_view/components/post_body_additional_content.jsx index deabaaa9b..89941f5b2 100644 --- a/webapp/components/post_view/components/post_body_additional_content.jsx +++ b/webapp/components/post_view/components/post_body_additional_content.jsx @@ -117,21 +117,31 @@ export default class PostBodyAdditionalContent extends React.Component { const generateEmbed = this.generateEmbed(); if (generateEmbed) { - let toggle; + let messageWithToggle = []; if (Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMBED_TOGGLE)) { - toggle = ( + // if message has only one line and starts with a link place toggle in this only line + // else - place it in new line between message and embed + const prependToggle = (/^\s*https?:\/\/.*$/).test(this.props.post.message); + messageWithToggle.push( <a - className='post__embed-visibility' + className={`post__embed-visibility ${prependToggle ? 'pull-left' : ''}`} data-expanded={this.state.embedVisible} aria-label='Toggle Embed Visibility' onClick={this.toggleEmbedVisibility} /> ); + if (prependToggle) { + messageWithToggle.push(this.props.message); + } else { + messageWithToggle.unshift(this.props.message); + } + } else { + messageWithToggle.push(this.props.message); } return ( <div> - {toggle} + {messageWithToggle} <div className='post__embed-container' hidden={!this.state.embedVisible} @@ -142,10 +152,11 @@ export default class PostBodyAdditionalContent extends React.Component { ); } - return null; + return this.props.message; } } PostBodyAdditionalContent.propTypes = { - post: React.PropTypes.object.isRequired + post: React.PropTypes.object.isRequired, + message: React.PropTypes.element.isRequired }; |