diff options
-rw-r--r-- | webapp/components/integrations/components/confirm_integration.jsx | 68 | ||||
-rw-r--r-- | webapp/components/rhs_comment.jsx | 37 | ||||
-rw-r--r-- | webapp/sass/routes/_backstage.scss | 4 |
3 files changed, 73 insertions, 36 deletions
diff --git a/webapp/components/integrations/components/confirm_integration.jsx b/webapp/components/integrations/components/confirm_integration.jsx index 96e24c575..1b95824ca 100644 --- a/webapp/components/integrations/components/confirm_integration.jsx +++ b/webapp/components/integrations/components/confirm_integration.jsx @@ -74,15 +74,15 @@ export default class ConfirmIntegration extends React.Component { /> ); helpText = ( - <div className='backstage-list__help'> + <p> <FormattedHTMLMessage id='add_command.doneHelp' defaultMessage='Your slash command has been set up. The following token will be sent in the outgoing payload. Please use it to verify the request came from your Mattermost team (see <a href="https://docs.mattermost.com/developer/slash-commands.html">documentation</a> for further details).' /> - </div> + </p> ); tokenText = ( - <div className='backstage-list__help'> + <p> <FormattedHTMLMessage id='add_command.token' defaultMessage='<b>Token</b>: {token}' @@ -90,7 +90,7 @@ export default class ConfirmIntegration extends React.Component { token: this.state.id }} /> - </div> + </p> ); } else if (this.state.type === Constants.Integrations.INCOMING_WEBHOOK) { headerText = ( @@ -100,15 +100,15 @@ export default class ConfirmIntegration extends React.Component { /> ); helpText = ( - <div className='backstage-list__help'> + <p> <FormattedHTMLMessage id='add_incoming_webhook.doneHelp' defaultMessage='Your incoming webhook has been set up. Please send data to the following URL (see <a href=\"https://docs.mattermost.com/developer/webhooks-incoming.html\">documentation</a> for further details).' /> - </div> + </p> ); tokenText = ( - <div className='backstage-list__help'> + <p> <FormattedHTMLMessage id='add_incoming_webhook.url' defaultMessage='<b>URL</b>: {url}' @@ -116,7 +116,7 @@ export default class ConfirmIntegration extends React.Component { url: window.location.origin + '/hooks/' + this.state.id }} /> - </div> + </p> ); } else if (this.state.type === Constants.Integrations.OUTGOING_WEBHOOK) { headerText = ( @@ -126,15 +126,15 @@ export default class ConfirmIntegration extends React.Component { /> ); helpText = ( - <div className='backstage-list__help'> + <p> <FormattedHTMLMessage id='add_outgoing_webhook.doneHelp' defaultMessage='Your outgoing webhook has been set up. The following token will be sent in the outgoing payload. Please use it to verify the request came from your Mattermost team (see <a href=\"https://docs.mattermost.com/developer/webhooks-outgoing.html\">documentation</a> for further details).' /> - </div> + </p> ); tokenText = ( - <div className='backstage-list__help'> + <p> <FormattedHTMLMessage id='add_outgoing_webhook.token' defaultMessage='<b>Token</b>: {token}' @@ -142,7 +142,7 @@ export default class ConfirmIntegration extends React.Component { token: this.state.id }} /> - </div> + </p> ); } else if (this.state.type === Constants.Integrations.OAUTH_APP) { let oauthApp = {}; @@ -163,15 +163,15 @@ export default class ConfirmIntegration extends React.Component { helpText = []; helpText.push( - <div className='backstage-list__help'> + <p> <FormattedMessage id='add_oauth_app.doneHelp' defaultMessage='Your OAuth 2.0 application has been set up. Please use the following Client ID and Client Secret when requesting authorization for your application.' /> - </div> + </p> ); helpText.push( - <div className='backstage-list__help'> + <p> <FormattedHTMLMessage id='add_oauth_app.clientId' defaultMessage='<b>Client ID:</b> {id}' @@ -186,20 +186,20 @@ export default class ConfirmIntegration extends React.Component { secret: oauthApp.client_secret }} /> - </div> + </p> ); helpText.push( - <div className='backstage-list__help'> + <p> <FormattedHTMLMessage id='add_oauth_app.doneUrlHelp' defaultMessage='Please send data to the following URL.' /> - </div> + </p> ); tokenText = ( - <div className='backstage-list__help'> + <p> <FormattedHTMLMessage id='add_oauth_app.url' defaultMessage='<b>URL(s)</b>: {url}' @@ -207,7 +207,7 @@ export default class ConfirmIntegration extends React.Component { url: oauthApp.callback_urls }} /> - </div> + </p> ); } } @@ -223,19 +223,21 @@ export default class ConfirmIntegration extends React.Component { defaultMessage='Add' /> </BackstageHeader> - {helpText} - {tokenText} - <div className='backstage-list__help'> - <SpinnerButton - className='btn btn-primary' - type='submit' - onClick={this.handleDone} - > - <FormattedMessage - id='integrations.done' - defaultMessage='Done' - /> - </SpinnerButton> + <div className='backstage-form backstage-form__confirmation'> + {helpText} + {tokenText} + <div className='backstage-form__footer'> + <SpinnerButton + className='btn btn-primary' + type='submit' + onClick={this.handleDone} + > + <FormattedMessage + id='integrations.done' + defaultMessage='Done' + /> + </SpinnerButton> + </div> </div> </div> ); diff --git a/webapp/components/rhs_comment.jsx b/webapp/components/rhs_comment.jsx index c9588eb33..dcd5ee37f 100644 --- a/webapp/components/rhs_comment.jsx +++ b/webapp/components/rhs_comment.jsx @@ -30,6 +30,7 @@ export default class RhsComment extends React.Component { super(props); this.handlePermalink = this.handlePermalink.bind(this); + this.removePost = this.removePost.bind(this); this.flagPost = this.flagPost.bind(this); this.unflagPost = this.unflagPost.bind(this); @@ -41,6 +42,23 @@ export default class RhsComment extends React.Component { GlobalActions.showGetPostLinkModal(this.props.post); } + removePost() { + GlobalActions.emitRemovePost(this.props.post); + } + + createRemovePostButton() { + return ( + <a + href='#' + className='post__remove theme' + type='button' + onClick={this.removePost} + > + {'×'} + </a> + ); + } + shouldComponentUpdate(nextProps) { if (nextProps.status !== this.props.status) { return true; @@ -344,6 +362,21 @@ export default class RhsComment extends React.Component { ); } + let options; + if (Utils.isPostEphemeral(post)) { + options = ( + <li className='col col__remove'> + {this.createRemovePostButton()} + </li> + ); + } else { + options = ( + <li className='col col__reply'> + {dropdown} + </li> + ); + } + return ( <div className={'post post--thread ' + currentUserCss + ' ' + compactClass}> <div className='post__content'> @@ -368,9 +401,7 @@ export default class RhsComment extends React.Component { </time> {flagTrigger} </li> - <li className='col col__reply'> - {dropdown} - </li> + {options} </ul> <div className='post__body'> <div className={postClass}> diff --git a/webapp/sass/routes/_backstage.scss b/webapp/sass/routes/_backstage.scss index 5861b778e..871189f45 100644 --- a/webapp/sass/routes/_backstage.scss +++ b/webapp/sass/routes/_backstage.scss @@ -279,6 +279,10 @@ padding: 40px 30px 30px; position: relative; + &.backstage-form__confirmation { + padding: 30px 30px 20px; + } + label { font-weight: normal; } |