From 2d09bb10b402109895c00ad352c1cea538d619bd Mon Sep 17 00:00:00 2001
From: Rodrigo Nascimento <rodrigoknascimento@gmail.com>
Date: Wed, 2 Sep 2015 14:24:42 -0300
Subject: [PATCH] Improve layout of oembed url and add omebeds to the end of
 the message instead replace link with oembed

---
 client/stylesheets/base.less                  |  5 +--
 client/views/app/message.coffee               |  2 +-
 .../client/oembedUrlWidget.coffee             | 36 ++++++++++++-------
 .../client/oembedUrlWidget.html               | 11 +++---
 4 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/client/stylesheets/base.less b/client/stylesheets/base.less
index 9494de9de909..d8b328635f35 100644
--- a/client/stylesheets/base.less
+++ b/client/stylesheets/base.less
@@ -67,11 +67,12 @@ blockquote {
 	position: relative;
 	&:before {
 		content: ' ';
-		background-color: #ccc;
+		background-color: #eaeaea;
 		height: 100%;
-		width: 3px;
+		width: 4px;
 		position: absolute;
 		left: 0px;
+		border-radius: 10px;
 	}
 }
 
diff --git a/client/views/app/message.coffee b/client/views/app/message.coffee
index 94bc4959f0e1..1b58609d16af 100644
--- a/client/views/app/message.coffee
+++ b/client/views/app/message.coffee
@@ -76,7 +76,7 @@ Template.message.onViewRendered = (context) ->
 				do (item) ->
 					urlNode = lastNode.querySelector('.body a[href="'+item.url+'"]')
 					if urlNode?
-						$(urlNode).replaceWith Blaze.toHTMLWithData Template.oembedBaseWidget, item
+						$(lastNode.querySelector('.body')).append Blaze.toHTMLWithData Template.oembedBaseWidget, item
 
 		if not lastNode.nextElementSibling?
 			if lastNode.classList.contains('own') is true
diff --git a/packages/rocketchat-oembed/client/oembedUrlWidget.coffee b/packages/rocketchat-oembed/client/oembedUrlWidget.coffee
index 33665321475e..95dd16ab0127 100644
--- a/packages/rocketchat-oembed/client/oembedUrlWidget.coffee
+++ b/packages/rocketchat-oembed/client/oembedUrlWidget.coffee
@@ -1,22 +1,32 @@
-Template.oembedUrlWidget.helpers
-	description: ->
-		if not this.meta?
-			return
+getTitle = (self) ->
+	if not self.meta?
+		return
 
-		description = this.meta.ogDescription or this.meta.twitterDescription or this.meta.description
-		if not description?
-			return
+	return self.meta.ogTitle or self.meta.twitterTitle or self.meta.title or self.meta.pageTitle
 
-		return description.replace /(^“)|(”$)/g, ''
+getDescription = (self) ->
+	if not self.meta?
+		return
 
-	title: ->
-		if not this.meta?
-			return
+	description = self.meta.ogDescription or self.meta.twitterDescription or self.meta.description
+	if not description?
+		return
 
-		return this.meta.ogTitle or this.meta.twitterTitle or this.meta.title or this.meta.pageTitle
+	return description.replace /(^“)|(”$)/g, ''
+
+
+Template.oembedUrlWidget.helpers
+	description: ->
+		return getDescription this
+
+	title: ->
+		return getTitle this
 
 	image: ->
 		if not this.meta?
 			return
 
-		return this.meta.ogImage or this.meta.twitterImage
\ No newline at end of file
+		return this.meta.ogImage or this.meta.twitterImage
+
+	show: ->
+		return getDescription(this)? or getTitle(this)?
diff --git a/packages/rocketchat-oembed/client/oembedUrlWidget.html b/packages/rocketchat-oembed/client/oembedUrlWidget.html
index 596803202121..56115decb6de 100644
--- a/packages/rocketchat-oembed/client/oembedUrlWidget.html
+++ b/packages/rocketchat-oembed/client/oembedUrlWidget.html
@@ -1,9 +1,7 @@
 <template name="oembedUrlWidget">
-	<a href="{{url}}" target="_blank">{{url}}</a>
-	{{#if parsedUrl}}
+	{{#if show}}
 		<blockquote>
-			<a href="{{url}}" target="_blank">{{parsedUrl.host}}</a>
-			<div style="{{#if image}}min-height: 60px;{{/if}}">
+			<div style="{{#if image}}min-height: 60px;{{/if}} padding: 10px 3px;">
 				{{#if image}}
 					{{#if meta.ogImageUserGenerated}}
 						<div>
@@ -13,13 +11,14 @@
 						</div>
 					{{else}}
 						<a href="{{url}}" target="_blank">
-							<img src="{{image}}" height="60" align="left" style="margin-right: 5px;"/>
+							<img src="{{image}}" height="60" align="left" style="margin-right: 10px;"/>
 						</a>
 					{{/if}}
 				{{/if}}
+				<div style="color: #AAA;">{{parsedUrl.host}}</div>
 				{{#if title}}
 					<div>
-						<strong>{{title}}</strong>
+						<a href="{{url}}" target="_blank"><strong>{{title}}</strong></a>
 					</div>
 				{{/if}}
 				{{{description}}}