From 213a072b38d29d3c3ec8e150584685b1144a7d6a Mon Sep 17 00:00:00 2001 From: Chris Date: Tue, 29 Aug 2017 16:14:59 -0500 Subject: PLT-6403: Interactive messages (#7274) * wip * finish first pass * requested changes * add DoPostAction to Client4 --- webapp/actions/post_actions.jsx | 4 ++ webapp/components/post_view/post_attachment.jsx | 46 ++++++++++++++++++++++ .../components/post_view/post_attachment_list.jsx | 6 +++ .../post_view/post_body_additional_content.jsx | 1 + webapp/sass/layout/_webhooks.scss | 15 +++++++ webapp/utils/utils.jsx | 6 ++- 6 files changed, 76 insertions(+), 2 deletions(-) (limited to 'webapp') 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'; @@ -11,6 +13,11 @@ import PropTypes from 'prop-types'; export default class PostAttachment extends React.PureComponent { static propTypes = { + /** + * The post id + */ + postId: PropTypes.string.isRequired, + /** * The attachment to render */ @@ -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) + `
${localizeMessage('post_attachment.more', 'Show more...')}
`; } + 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( + + ); + }); + + return ( +
+ {buttons} +
+ ); + } + + 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} {thumb}
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 @@ -9,6 +9,11 @@ import PropTypes from 'prop-types'; export default class PostAttachmentList extends React.PureComponent { static propTypes = { + /** + * The post id + */ + postId: PropTypes.string.isRequired, + /** * Array of attachments to render */ @@ -21,6 +26,7 @@ export default class PostAttachmentList extends React.PureComponent { content.push( ); 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 ( ); 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)); -- cgit v1.2.3-1-g7c22