Merge pull request #2027 from mozilla/PLT-1751

PLT-1751: Add the ability to collapse a link preview

4 files changed, 81 insertions, 7 deletions

diff --git a/web/react/components/post_body_additional_content.jsx b/web/react/components/post_body_additional_content.jsx
index a76c59fb3..c2a928f3b 100644
--- a/web/react/components/post_body_additional_content.jsx
+++ b/web/react/components/post_body_additional_content.jsx
@@ -16,16 +16,28 @@ export default class PostBodyAdditionalContent extends React.Component {
 
         this.getSlackAttachment = this.getSlackAttachment.bind(this);
         this.getOEmbedProvider = this.getOEmbedProvider.bind(this);
+        this.generateEmbed = this.generateEmbed.bind(this);
+        this.toggleEmbedVisibility = this.toggleEmbedVisibility.bind(this);
+
+        this.state = {
+            embedVisible: true
+        };
     }
 
-    shouldComponentUpdate(nextProps) {
+    shouldComponentUpdate(nextProps, nextState) {
         if (!Utils.areObjectsEqual(nextProps.post, this.props.post)) {
             return true;
         }
-
+        if (nextState.embedVisible !== this.state.embedVisible) {
+            return true;
+        }
         return false;
     }
 
+    toggleEmbedVisibility() {
+        this.setState({embedVisible: !this.state.embedVisible});
+    }
+
     getSlackAttachment() {
         let attachments = [];
         if (this.props.post.props && this.props.post.props.attachments) {
@@ -51,7 +63,7 @@ export default class PostBodyAdditionalContent extends React.Component {
         return null;
     }
 
-    render() {
+    generateEmbed() {
         if (this.props.post.type === 'slack_attachment') {
             return this.getSlackAttachment();
         }
@@ -98,6 +110,28 @@ export default class PostBodyAdditionalContent extends React.Component {
 
         return null;
     }
+
+    render() {
+        var generateEmbed = this.generateEmbed();
+        if (generateEmbed) {
+            return (
+                <div>
+                    <a className='post__embed-visibility'
+                        data-expanded={this.state.embedVisible}
+                        aria-label='Toggle Embed Visibility'
+                        onClick={this.toggleEmbedVisibility}
+                    >
+                    </a>
+                    <div className='post__embed-container'
+                        hidden={!this.state.embedVisible}
+                    >
+                    {generateEmbed}
+                    </div>
+                </div>
+                );
+        }
+        return null;
+    }
 }
 
 PostBodyAdditionalContent.propTypes = {
diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx
index 766a86686..0a4944708 100644
--- a/web/react/utils/constants.jsx
+++ b/web/react/utils/constants.jsx
@@ -479,6 +479,10 @@ export default {
         EMBED_PREVIEW: {
             label: 'embed_preview',
             description: 'Show preview snippet of links below message'
+        },
+        EMBED_TOGGLE: {
+            label: 'embed_toggle',
+            description: 'Show toggle for all embed previews'
         }
     },
     OVERLAY_TIME_DELAY: 400,
diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss
index 0847318c1..4478b3f15 100644
--- a/web/sass-files/sass/partials/_post.scss
+++ b/web/sass-files/sass/partials/_post.scss
@@ -408,7 +408,7 @@ body.ios {
 
 .post {
 	word-wrap: break-word;
-	padding: 8px 1em 0;
+	padding: 8px .5em 0 1em;
 	position: relative;
 	max-width: 100%;
 	@include legacy-pie-clearfix;
@@ -457,7 +457,7 @@ body.ios {
 	&.same--root {
 
 		&.same--user {
-			padding: 0 1em;
+			padding: 0 .5em 0 1em;
 
 			&:hover {
 
@@ -629,6 +629,16 @@ body.ios {
 		}
 	}
 
+	.post__embed-container{
+		display: block;
+		max-height: 1000px;
+		transition: max-height .5s ease;
+		overflow: hidden;
+		&[hidden]{
+			max-height: 0;
+		}
+	}
+
 	.dropdown {
 		display: inline-block;
 		visibility: hidden;
@@ -687,7 +697,7 @@ body.ios {
 
 	.post__body {
 		word-wrap: break-word;
-		padding: 0.2em 0.5em 0em;
+		padding: 0.2em 0.5em;
 		@include legacy-pie-clearfix;
 		width: calc(100% - 75px);
 
@@ -753,7 +763,32 @@ body.ios {
 		white-space: nowrap;
 	}
 
-	.post__time {
+	.post__embed-visibility {
+		cursor: pointer;
+		display: block;
+		font: normal normal normal 14px/1 FontAwesome;
+		text-rendering: auto;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+		font-size: 0;
+		width: 30px;
+		margin-top: -5px;
+
+		&:hover{
+			text-decoration: none;
+		}
+
+		&:before {
+			content: "\f065";
+			font-size: 14px;
+		}
+
+		&[data-expanded="true"]:before{
+			content: "\f066";
+		}
+	}
+
+	.post__time{
 		font-size: 0.9em;
 	}
 
diff --git a/web/static/i18n/en.json b/web/static/i18n/en.json
index 1e68ac1f6..c3ce23280 100644
--- a/web/static/i18n/en.json
+++ b/web/static/i18n/en.json
@@ -1058,6 +1058,7 @@
   "tutorial_tip.out": "Opt out of these tips.",
   "tutorial_tip.seen": "Seen this before? ",
   "upload_overlay.info": "Drop a file to upload it.",
+  "user.settings.advance.embed_toggle": "Show toggle for all embed previews",
   "user.settings.advance.embed_preview": "Show preview snippet of links below message",
   "user.settings.advance.enabled": "enabled",
   "user.settings.advance.feature": " Feature ",