diff options
author | Chris <ccbrown112@gmail.com> | 2017-08-29 16:14:59 -0500 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-08-29 16:14:59 -0500 |
commit | 213a072b38d29d3c3ec8e150584685b1144a7d6a (patch) | |
tree | 1da10a494e49914b0f6641db79e7dcf8ad3886f6 /webapp | |
parent | 59798c137584a0b7e008ec713b489929dd83a690 (diff) | |
download | chat-213a072b38d29d3c3ec8e150584685b1144a7d6a.tar.gz chat-213a072b38d29d3c3ec8e150584685b1144a7d6a.tar.bz2 chat-213a072b38d29d3c3ec8e150584685b1144a7d6a.zip |
PLT-6403: Interactive messages (#7274)
* wip
* finish first pass
* requested changes
* add DoPostAction to Client4
Diffstat (limited to 'webapp')
-rw-r--r-- | webapp/actions/post_actions.jsx | 4 | ||||
-rw-r--r-- | webapp/components/post_view/post_attachment.jsx | 46 | ||||
-rw-r--r-- | webapp/components/post_view/post_attachment_list.jsx | 6 | ||||
-rw-r--r-- | webapp/components/post_view/post_body_additional_content.jsx | 1 | ||||
-rw-r--r-- | webapp/sass/layout/_webhooks.scss | 15 | ||||
-rw-r--r-- | webapp/utils/utils.jsx | 6 |
6 files changed, 76 insertions, 2 deletions
diff --git a/webapp/actions/post_actions.jsx b/webapp/actions/post_actions.jsx index 60913b171..cb111ec39 100644 --- a/webapp/actions/post_actions.jsx +++ b/webapp/actions/post_actions.jsx @@ -351,3 +351,7 @@ export function unpinPost(postId) { }); }; } + +export function doPostAction(postId, actionId) { + PostActions.doPostAction(postId, actionId)(dispatch, getState); +} diff --git a/webapp/components/post_view/post_attachment.jsx b/webapp/components/post_view/post_attachment.jsx index 36fe3bf9f..cc7aa509c 100644 --- a/webapp/components/post_view/post_attachment.jsx +++ b/webapp/components/post_view/post_attachment.jsx @@ -4,6 +4,8 @@ import * as TextFormatting from 'utils/text_formatting.jsx'; import {localizeMessage} from 'utils/utils.jsx'; +import * as PostActions from 'actions/post_actions.jsx'; + import $ from 'jquery'; import React from 'react'; import PropTypes from 'prop-types'; @@ -12,6 +14,11 @@ export default class PostAttachment extends React.PureComponent { static propTypes = { /** + * The post id + */ + postId: PropTypes.string.isRequired, + + /** * The attachment to render */ attachment: PropTypes.object.isRequired @@ -20,6 +27,8 @@ export default class PostAttachment extends React.PureComponent { constructor(props) { super(props); + this.handleActionButtonClick = this.handleActionButtonClick.bind(this); + this.getActionView = this.getActionView.bind(this); this.getFieldsTable = this.getFieldsTable.bind(this); this.getInitState = this.getInitState.bind(this); this.shouldCollapse = this.shouldCollapse.bind(this); @@ -80,6 +89,41 @@ export default class PostAttachment extends React.PureComponent { return TextFormatting.formatText(text) + `<div><a class="attachment-link-more" href="#">${localizeMessage('post_attachment.more', 'Show more...')}</a></div>`; } + getActionView() { + const actions = this.props.attachment.actions; + if (!actions || !actions.length) { + return ''; + } + + const buttons = []; + + actions.forEach((action) => { + if (!action.id || !action.name) { + return; + } + buttons.push( + <button + key={action.id} + onClick={() => this.handleActionButtonClick(action.id)} + > + {action.name} + </button> + ); + }); + + return ( + <div + className='attachment-actions' + > + {buttons} + </div> + ); + } + + handleActionButtonClick(actionId) { + PostActions.doPostAction(this.props.postId, actionId); + } + getFieldsTable() { const fields = this.props.attachment.fields; if (!fields || !fields.length) { @@ -275,6 +319,7 @@ export default class PostAttachment extends React.PureComponent { } const fields = this.getFieldsTable(); + const actions = this.getActionView(); let useBorderStyle; if (data.color && data.color[0] === '#') { @@ -301,6 +346,7 @@ export default class PostAttachment extends React.PureComponent { {text} {image} {fields} + {actions} </div> {thumb} <div style={{clear: 'both'}}/> diff --git a/webapp/components/post_view/post_attachment_list.jsx b/webapp/components/post_view/post_attachment_list.jsx index cfd2f81f8..ce60a0155 100644 --- a/webapp/components/post_view/post_attachment_list.jsx +++ b/webapp/components/post_view/post_attachment_list.jsx @@ -10,6 +10,11 @@ export default class PostAttachmentList extends React.PureComponent { static propTypes = { /** + * The post id + */ + postId: PropTypes.string.isRequired, + + /** * Array of attachments to render */ attachments: PropTypes.array.isRequired @@ -21,6 +26,7 @@ export default class PostAttachmentList extends React.PureComponent { content.push( <PostAttachment attachment={attachment} + postId={this.props.postId} key={'att_' + i} /> ); diff --git a/webapp/components/post_view/post_body_additional_content.jsx b/webapp/components/post_view/post_body_additional_content.jsx index ddc73d554..88e8f2ba8 100644 --- a/webapp/components/post_view/post_body_additional_content.jsx +++ b/webapp/components/post_view/post_body_additional_content.jsx @@ -90,6 +90,7 @@ export default class PostBodyAdditionalContent extends React.PureComponent { return ( <PostAttachmentList attachments={attachments} + postId={this.props.post.id} key={this.props.post.id} /> ); diff --git a/webapp/sass/layout/_webhooks.scss b/webapp/sass/layout/_webhooks.scss index 15572ce85..ed3e2555a 100644 --- a/webapp/sass/layout/_webhooks.scss +++ b/webapp/sass/layout/_webhooks.scss @@ -284,5 +284,20 @@ } } } + + .attachment-actions { + margin-top: 9px; + + button { + @include border-radius(3px); + outline: 0; + margin: 8px 8px 0 0; + border-width: 1px; + border-style: solid; + height: 30px; + font-size: 13px; + font-weight: 700; + } + } } } diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index 52574e735..93ba39f30 100644 --- a/webapp/utils/utils.jsx +++ b/webapp/utils/utils.jsx @@ -602,7 +602,7 @@ export function applyTheme(theme) { changeCss('.app__body .popover.top>.arrow:after, .app__body .tip-overlay.tip-overlay--chat .arrow', 'border-top-color:' + theme.centerChannelBg); changeCss('@media(min-width: 768px){.app__body .form-control', 'background:' + theme.centerChannelBg); changeCss('@media(min-width: 768px){.app__body .sidebar--right.sidebar--right--expanded .sidebar-right-container', 'background:' + theme.centerChannelBg); - changeCss('.app__body .attachment__content', 'background:' + theme.centerChannelBg); + changeCss('.app__body .attachment__content, .app__body .attachment-actions button', 'background:' + theme.centerChannelBg); changeCss('body.app__body', 'scrollbar-face-color:' + theme.centerChannelBg); changeCss('body.app__body', 'scrollbar-track-color:' + theme.centerChannelBg); changeCss('.app__body .shortcut-key, .app__body .post-list__new-messages-below', 'color:' + theme.centerChannelBg); @@ -653,7 +653,9 @@ export function applyTheme(theme) { changeCss('.app__body .input-group-addon, .app__body .form-control, .app__body .post-create__container .post-body__actions > span', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1)); changeCss('@media(min-width: 768px){.app__body .post-list__table .post-list__content .dropdown-menu a:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.1)); changeCss('.app__body .form-control:focus', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2)); - changeCss('.app__body .attachment .attachment__content', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3)); + changeCss('.app__body .attachment .attachment__content, .app__body .attachment-actions button', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3)); + changeCss('.app__body .attachment-actions button:focus, .app__body .attachment-actions button:hover', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.5)); + changeCss('.app__body .attachment-actions button:focus, .app__body .attachment-actions button:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.03)); changeCss('.app__body .input-group-addon, .app__body .channel-intro .channel-intro__content, .app__body .webhooks__container', 'background:' + changeOpacity(theme.centerChannelColor, 0.05)); changeCss('.app__body .date-separator .separator__text', 'color:' + theme.centerChannelColor); changeCss('.app__body .date-separator .separator__hr, .app__body .modal-footer, .app__body .modal .custom-textarea', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2)); |