From e1bebb2d776b12d6e1461e06f318e79fcb93ea2c Mon Sep 17 00:00:00 2001
From: samogot <samogot@gmail.com>
Date: Sat, 28 May 2016 02:31:02 +0300
Subject: 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"
---
 .../components/post_view/components/post_body.jsx  | 34 ++++++++++++++--------
 .../components/post_body_additional_content.jsx    | 23 +++++++++++----
 webapp/components/rhs_root_post.jsx                | 14 +++++----
 webapp/components/youtube_video.jsx                | 30 ++++++++++---------
 webapp/sass/layout/_post.scss                      |  6 +++-
 webapp/utils/text_formatting.jsx                   | 12 ++++++++
 6 files changed, 81 insertions(+), 38 deletions(-)

(limited to 'webapp')

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}
diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss
index e3818ea94..745439ed8 100644
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -914,9 +914,13 @@ body.ios {
         cursor: pointer;
         display: inline-block;
         font: normal normal normal 14px/1 FontAwesome;
-        margin: 5px 0 10px;
+        margin: 0 0 10px;
         text-rendering: auto;
 
+        &.pull-left{
+            margin: 5px 5px 0 0;
+        }
+
         &:hover {
             text-decoration: none;
         }
diff --git a/webapp/utils/text_formatting.jsx b/webapp/utils/text_formatting.jsx
index 623fe0660..a4622ad9e 100644
--- a/webapp/utils/text_formatting.jsx
+++ b/webapp/utils/text_formatting.jsx
@@ -34,6 +34,8 @@ export function formatText(text, options = {}) {
         output = replaceNewlines(output);
     }
 
+    output = insertLongLinkWbr(output);
+
     return output;
 }
 
@@ -76,6 +78,9 @@ export function doFormatText(text, options) {
         });
     }
 
+    //replace all "/" to "/<wbr />"
+    output = output.replace(/\//g, '/<wbr />');
+
     // reinsert tokens with formatted versions of the important words and phrases
     output = replaceTokens(output, tokens);
 
@@ -425,3 +430,10 @@ export function handleClick(e) {
         browserHistory.push(linkAttribute.value);
     }
 }
+
+//replace all "/" inside <a> tags to "/<wbr />"
+function insertLongLinkWbr(test) {
+    return test.replace(/\//g, (match, position, string) => {
+        return match + ((/a[^>]*>[^<]*$/).test(string.substr(0, position)) ? '<wbr />' : '');
+    });
+}
\ No newline at end of file
-- 
cgit v1.2.3-1-g7c22