diff --git a/packages/rocketchat-message-attachments/client/messageAttachment.html b/packages/rocketchat-message-attachments/client/messageAttachment.html index 7b3369edeb975..bb69377bf4b6e 100644 --- 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}} +
+ {{#if isButton}} + {{#if imageUrl}} + + + + {{/if}} + {{#if text}} + {{#if url}} + + {{text}} + + {{/if}} + {{#if msg}} + + + {{/if}} + {{/if}} + {{/if}} +
+ {{/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 index 37acc16c00bae..29c82a39f1d5f 100644 --- 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 index 446b8b41b6924..79f30b1093c9e 100644 --- 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; + } }