Improve layout of oembed url and add omebeds to the end of the messag…

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;
 	}
 }
 

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

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
+		return this.meta.ogImage or this.meta.twitterImage
+
+	show: ->
+		return getDescription(this)? or getTitle(this)?

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}}}