Fix UX issues with bug report dialog

* Make it use BaseDialog / DialogButtons (also gives it has a top-right 'x' &
   escape to cancel works)
 * Stop misusing the 'danger' CSS class on the buttons. There is nothing dangerous
   about submitting logs.
 * Continued campaign against 'Click here' links.

Fixes https://github.com/vector-im/riot-web/issues/6622
This commit is contained in:
David Baker 2018-04-27 15:19:08 +01:00
parent dc06c52985
commit efd29193b7
4 changed files with 30 additions and 32 deletions

View file

@ -1,7 +1,7 @@
/* /*
Copyright 2015, 2016 OpenMarket Ltd Copyright 2015, 2016 OpenMarket Ltd
Copyright 2017 Vector Creations Ltd Copyright 2017 Vector Creations Ltd
Copyright 2017 New Vector Ltd Copyright 2017, 2018 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. you may not use this file except in compliance with the License.
@ -804,7 +804,7 @@ module.exports = React.createClass({
"other users. They do not contain messages.", "other users. They do not contain messages.",
) )
}</p> }</p>
<button className="mx_UserSettings_button danger" <button className="mx_UserSettings_button"
onClick={this._onBugReportClicked}>{ _t('Submit debug logs') } onClick={this._onBugReportClicked}>{ _t('Submit debug logs') }
</button> </button>
</div> </div>

View file

@ -1,5 +1,6 @@
/* /*
Copyright 2017 OpenMarket Ltd Copyright 2017 OpenMarket Ltd
Copyright 2018 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. you may not use this file except in compliance with the License.
@ -105,6 +106,8 @@ export default class BugReportDialog extends React.Component {
render() { render() {
const Loader = sdk.getComponent("elements.Spinner"); const Loader = sdk.getComponent("elements.Spinner");
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
let error = null; let error = null;
if (this.state.err) { if (this.state.err) {
@ -113,13 +116,6 @@ export default class BugReportDialog extends React.Component {
</div>; </div>;
} }
let cancelButton = null;
if (!this.state.busy) {
cancelButton = <button onClick={this._onCancel}>
{ _t("Cancel") }
</button>;
}
let progress = null; let progress = null;
if (this.state.busy) { if (this.state.busy) {
progress = ( progress = (
@ -131,11 +127,11 @@ export default class BugReportDialog extends React.Component {
} }
return ( return (
<div className="mx_BugReportDialog"> <BaseDialog className="mx_BugReportDialog" onFinished={this._onCancel}
<div className="mx_Dialog_title"> title={_t('Submit debug logs')}
{ _t("Submit debug logs") } contentId='mx_Dialog_content'
</div> >
<div className="mx_Dialog_content"> <div className="mx_Dialog_content" id='mx_Dialog_content'>
<p> <p>
{ _t( { _t(
"Debug logs contain application usage data including your " + "Debug logs contain application usage data including your " +
@ -146,7 +142,7 @@ export default class BugReportDialog extends React.Component {
</p> </p>
<p> <p>
{ _t( { _t(
"<a>Click here</a> to create a GitHub issue.", "Riot bugs are tracked on GitHub: <a>create a GitHub issue</a>.",
{}, {},
{ {
a: (sub) => <a a: (sub) => <a
@ -191,19 +187,13 @@ export default class BugReportDialog extends React.Component {
{progress} {progress}
{error} {error}
</div> </div>
<div className="mx_Dialog_buttons"> <DialogButtons primaryButton={_t("Send logs")}
<button onPrimaryButtonClick={this._onSubmit}
className="mx_Dialog_primary danger" focus={true}
onClick={this._onSubmit} onCancel={this._onCancel}
autoFocus={true} disabled={this.state.busy}
disabled={this.state.busy} />
> </BaseDialog>
{ _t("Send logs") }
</button>
{cancelButton}
</div>
</div>
); );
} }
} }

View file

@ -39,11 +39,14 @@ module.exports = React.createClass({
onCancel: PropTypes.func, onCancel: PropTypes.func,
focus: PropTypes.bool, focus: PropTypes.bool,
disabled: PropTypes.bool,
}, },
getDefaultProps: function() { getDefaultProps: function() {
return { return {
hasCancel: true, hasCancel: true,
disabled: false,
} }
}, },
@ -56,18 +59,23 @@ module.exports = React.createClass({
if (this.props.primaryButtonClass) { if (this.props.primaryButtonClass) {
primaryButtonClassName += " " + this.props.primaryButtonClass; primaryButtonClassName += " " + this.props.primaryButtonClass;
} }
let cancelButton;
if (this.props.hasCancel) {
cancelButton = <button onClick={this._onCancelClick} disabled={this.props.disabled}>
{ _t("Cancel") }
</button>;
}
return ( return (
<div className="mx_Dialog_buttons"> <div className="mx_Dialog_buttons">
<button className={primaryButtonClassName} <button className={primaryButtonClassName}
onClick={this.props.onPrimaryButtonClick} onClick={this.props.onPrimaryButtonClick}
autoFocus={this.props.focus} autoFocus={this.props.focus}
disabled={this.props.disabled}
> >
{ this.props.primaryButton } { this.props.primaryButton }
</button> </button>
{ this.props.children } { this.props.children }
{ this.props.hasCancel ? <button onClick={this._onCancelClick}> { cancelButton }
{ _t("Cancel") }
</button> : null }
</div> </div>
); );
}, },

View file

@ -745,7 +745,7 @@
"Failed to send logs: ": "Failed to send logs: ", "Failed to send logs: ": "Failed to send logs: ",
"Submit debug logs": "Submit debug logs", "Submit debug logs": "Submit debug logs",
"Debug logs contain application usage data including your username, the IDs or aliases of the rooms or groups you have visited and the usernames of other users. They do not contain messages.": "Debug logs contain application usage data including your username, the IDs or aliases of the rooms or groups you have visited and the usernames of other users. They do not contain messages.", "Debug logs contain application usage data including your username, the IDs or aliases of the rooms or groups you have visited and the usernames of other users. They do not contain messages.": "Debug logs contain application usage data including your username, the IDs or aliases of the rooms or groups you have visited and the usernames of other users. They do not contain messages.",
"<a>Click here</a> to create a GitHub issue.": "<a>Click here</a> to create a GitHub issue.", "Riot bugs are tracked on GitHub: <a>create a GitHub issue</a>.": "Riot bugs are tracked on GitHub: <a>create a GitHub issue</a>.",
"GitHub issue link:": "GitHub issue link:", "GitHub issue link:": "GitHub issue link:",
"Notes:": "Notes:", "Notes:": "Notes:",
"Send logs": "Send logs", "Send logs": "Send logs",