Added text and image buttons

RocketChat · Jul 16, 2018 · 5d64a48 · 5d64a48
1 parent f0f7ef2
commit 5d64a48
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 0 deletions.
diff --git a/packages/rocketchat-message-attachments/client/messageAttachment.html b/packages/rocketchat-message-attachments/client/messageAttachment.html
@@ -155,6 +155,33 @@
 				{{/if}}
 			{{/unless}}
 
+			{{#if actions}}
+				{{#each actions}}
+				<div class="action">
+					{{#if isButton}}
+						{{#if imageUrl}}
+							<a href="{{url}}" tabindex="0" target="_blank" type="button" rel="noopener noreferrer">
+								<img class="image-button" src="{{imageUrl}}"/>
+							</a>
+						{{/if}}
+						{{#if text}}
+							{{#if url}}
+								<a class="text-button" href="{{url}}" target="_blank" type="button" rel="noopener noreferrer">
+									<span class="overflow-ellipsis">{{text}}</span>
+								</a>
+							{{/if}}
+							{{#if msg}}
+								<!-- <button class="text-button button-send" onclick="this.sendMessage()"> -->
+								<button class="text-button button-send">
+									<span class="overflow-ellipsis button-send">{{text}}</span>
+								</button>
+							{{/if}}
+						{{/if}}
+					{{/if}}
+				</div>
+				{{/each}}
+			{{/if}}
+
 			{{#each attachments}}
 				{{injectIndex . ../index @index}} {{> messageAttachment}}
 			{{/each}}

diff --git a/packages/rocketchat-message-attachments/client/messageAttachment.js b/packages/rocketchat-message-attachments/client/messageAttachment.js
@@ -61,5 +61,20 @@ Template.messageAttachment.helpers({
 
 	isFile() {
 		return this.type === 'file';
+	},
+
+	isButton() {
+		return this.type === 'button';
 	}
 });
+
+Template.messageAttachment.events({
+
+	'click .button-send'() {
+		console.log('button');
+	}
+});
+
+// function sendMessage() {
+// 	console.log('sendMessage');
+// }
diff --git a/packages/rocketchat-message-attachments/client/stylesheets/messageAttachments.css b/packages/rocketchat-message-attachments/client/stylesheets/messageAttachments.css
@@ -135,4 +135,46 @@ html.rtl .attachment {
 		border-width: 1px;
 		border-radius: 5px;
 	}
+
+	& .action {
+		margin-top: 6px;
+	}
+
+	& .text-button {
+		color: #2c2d30;
+		min-width: 0;
+    	max-width: 220px;
+    	padding: 0 10px;
+    	margin: 2px 8px 2px 0;
+    	vertical-align: middle;
+		font-size: 13px;
+		height: 28px;
+		background: rgb(250, 250, 250);
+		font-weight: 500;
+		text-decoration: none;
+		user-select: none;
+		outline: none;
+		cursor: pointer;
+		border: 2px solid lightgray;
+		border-radius: 4px;
+		align-items: center;
+		position: relative;
+		display: inline-flex;
+		justify-content: center;
+		text-align: center;
+		white-space: nowrap;
+		-webkit-appearance: none;
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	& .overflow-ellipsis {
+		display: block;
+		text-overflow: ellipsis;
+		overflow: hidden;
+		white-space: nowrap;
+	}
+
+	& .image-button {
+		max-height: 200px;
+	}
 }