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 | |
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')
-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 | ||||
-rw-r--r-- | webapp/components/rhs_root_post.jsx | 14 | ||||
-rw-r--r-- | webapp/components/youtube_video.jsx | 30 |
4 files changed, 64 insertions, 37 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 }; diff --git a/webapp/components/rhs_root_post.jsx b/webapp/components/rhs_root_post.jsx index 051d68f34..e6edcb86a 100644 --- a/webapp/components/rhs_root_post.jsx +++ b/webapp/components/rhs_root_post.jsx @@ -210,6 +210,14 @@ export default class RhsRootPost extends React.Component { /> ); + const messageWrapper = ( + <div + ref='message_holder' + onClick={TextFormatting.handleClick} + dangerouslySetInnerHTML={{__html: TextFormatting.formatText(post.message)}} + /> + ); + return ( <div className={'post post--root ' + userCss + ' ' + systemMessageClass}> <div className='post-right-channel__name'>{channelName}</div> @@ -241,13 +249,9 @@ export default class RhsRootPost extends React.Component { </li> </ul> <div className='post__body'> - <div - ref='message_holder' - onClick={TextFormatting.handleClick} - dangerouslySetInnerHTML={{__html: TextFormatting.formatText(post.message)}} - /> <PostBodyAdditionalContent post={post} + message={messageWrapper} /> {fileAttachment} </div> diff --git a/webapp/components/youtube_video.jsx b/webapp/components/youtube_video.jsx index dc2d368d7..42b193612 100644 --- a/webapp/components/youtube_video.jsx +++ b/webapp/components/youtube_video.jsx @@ -144,9 +144,22 @@ export default class YoutubeVideo extends React.Component { return <div className='video-loading'/>; } - let header = 'Youtube'; + let header; if (this.state.title) { - header = header + ' - '; + header = ( + <h4> + <span className='video-type'>{'Youtube - '}</span> + <span className='video-title'> + <a + href={this.props.link} + target='blank' + rel='noopener noreferrer' + > + {this.state.title} + </a> + </span> + </h4> + ); } let content; @@ -190,18 +203,7 @@ export default class YoutubeVideo extends React.Component { return ( <div> - <h4> - <span className='video-type'>{header}</span> - <span className='video-title'> - <a - href={this.props.link} - target='blank' - rel='noopener noreferrer' - > - {this.state.title} - </a> - </span> - </h4> + {header} <div className='video-div embed-responsive-item' onClick={this.play} |