Minor UI improvements (#3904)
* PLT-3917 - Adding cross icon to remove deleted post in the RHS. * PLT-3997 - Improving the integration confirmation screen
Этот коммит содержится в:
Asaad Mahmood
коммит произвёл
Joram Wilander
Joram Wilander
родитель
f6c183e749
Коммит
85f8b90aeb
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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}>
|
||||
|
||||
@@ -279,6 +279,10 @@
|
||||
padding: 40px 30px 30px;
|
||||
position: relative;
|
||||
|
||||
&.backstage-form__confirmation {
|
||||
padding: 30px 30px 20px;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
Ссылка в новой задаче
Block a user