imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix UX issues with bug report dialog

Browse source 
* 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 • committed by Luke Barnard
parent fc136607f1
commit 37cb8abf13
4 changed files with 30 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

42
src/components/views/dialogs/BugReportDialog.js
View file

@ -1,5 +1,6 @@
/*
Copyright 2017 OpenMarket Ltd
Copyright 2018 New Vector Ltd
Licensed under the Apache License, Version 2.0 (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() {
const Loader = sdk.getComponent("elements.Spinner");
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
let error = null;
if (this.state.err) {
@ -113,13 +116,6 @@ export default class BugReportDialog extends React.Component {
</div>;
}
let cancelButton = null;
if (!this.state.busy) {
cancelButton = <button onClick={this._onCancel}>
{ _t("Cancel") }
</button>;
}
let progress = null;
if (this.state.busy) {
progress = (
@ -131,11 +127,11 @@ export default class BugReportDialog extends React.Component {
}
return (
<div className="mx_BugReportDialog">
<div className="mx_Dialog_title">
{ _t("Submit debug logs") }
</div>
<div className="mx_Dialog_content">
<BaseDialog className="mx_BugReportDialog" onFinished={this._onCancel}
title={_t('Submit debug logs')}
contentId='mx_Dialog_content'
>
<div className="mx_Dialog_content" id='mx_Dialog_content'>
<p>
{ _t(
"Debug logs contain application usage data including your " +
@ -146,7 +142,7 @@ export default class BugReportDialog extends React.Component {
</p>
<p>
{ _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
@ -191,19 +187,13 @@ export default class BugReportDialog extends React.Component {
{progress}
{error}
</div>
<div className="mx_Dialog_buttons">
<button
className="mx_Dialog_primary danger"
onClick={this._onSubmit}
autoFocus={true}
disabled={this.state.busy}
>
{ _t("Send logs") }
</button>
{cancelButton}
</div>
</div>
<DialogButtons primaryButton={_t("Send logs")}
onPrimaryButtonClick={this._onSubmit}
focus={true}
onCancel={this._onCancel}
disabled={this.state.busy}
/>
</BaseDialog>
);
}
}