Improve layout of oembed url and add omebeds to the end of the message instead...

Improve layout of oembed url and add omebeds to the end of the message instead replace link with oembed

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

-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)?

packages/rocketchat-oembed/client/oembedUrlWidget.html

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