Fixed the dialog height

pull/21833/head
Zoe 2020-04-29 14:29:36 +01:00
parent 3dbcc9fe99
commit 1afb09d257
2 changed files with 19 additions and 13 deletions

View File

@ -32,3 +32,9 @@ limitations under the License.
padding: 10px; padding: 10px;
} }
.mx_RestoreKeyBackupDialog_content {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 110px; /* Empirically measured */
}

View File

@ -293,10 +293,10 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
} else if (this.state.progress.stage === "prefetch") { } else if (this.state.progress.stage === "prefetch") {
details = _t("Fetching keys from server..."); details = _t("Fetching keys from server...");
} }
content = <div> content = <>
<div>{details}</div> <div>{details}</div>
<Spinner /> <Spinner />
</div>; </>;
} else if (this.state.loadError) { } else if (this.state.loadError) {
title = _t("Error"); title = _t("Error");
content = _t("Unable to load backup status"); content = _t("Unable to load backup status");
@ -304,20 +304,20 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
if (this.state.restoreError.errcode === MatrixClient.RESTORE_BACKUP_ERROR_BAD_KEY) { if (this.state.restoreError.errcode === MatrixClient.RESTORE_BACKUP_ERROR_BAD_KEY) {
if (this.state.restoreType === RESTORE_TYPE_RECOVERYKEY) { if (this.state.restoreType === RESTORE_TYPE_RECOVERYKEY) {
title = _t("Recovery key mismatch"); title = _t("Recovery key mismatch");
content = <div> content = <>
<p>{_t( <p>{_t(
"Backup could not be decrypted with this recovery key: " + "Backup could not be decrypted with this recovery key: " +
"please verify that you entered the correct recovery key.", "please verify that you entered the correct recovery key.",
)}</p> )}</p>
</div>; </>;
} else { } else {
title = _t("Incorrect recovery passphrase"); title = _t("Incorrect recovery passphrase");
content = <div> content = <>
<p>{_t( <p>{_t(
"Backup could not be decrypted with this recovery passphrase: " + "Backup could not be decrypted with this recovery passphrase: " +
"please verify that you entered the correct recovery passphrase.", "please verify that you entered the correct recovery passphrase.",
)}</p> )}</p>
</div>; </>;
} }
} else { } else {
title = _t("Error"); title = _t("Error");
@ -336,7 +336,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
{failedCount: this.state.recoverInfo.total - this.state.recoverInfo.imported}, {failedCount: this.state.recoverInfo.total - this.state.recoverInfo.imported},
)}</p>; )}</p>;
} }
content = <div> content = <>
<p>{_t("Successfully restored %(sessionCount)s keys", {sessionCount: this.state.recoverInfo.imported})}</p> <p>{_t("Successfully restored %(sessionCount)s keys", {sessionCount: this.state.recoverInfo.imported})}</p>
{failedToDecrypt} {failedToDecrypt}
<DialogButtons primaryButton={_t('OK')} <DialogButtons primaryButton={_t('OK')}
@ -344,12 +344,12 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
hasCancel={false} hasCancel={false}
focus={true} focus={true}
/> />
</div>; </>;
} else if (backupHasPassphrase && !this.state.forceRecoveryKey) { } else if (backupHasPassphrase && !this.state.forceRecoveryKey) {
const DialogButtons = sdk.getComponent('views.elements.DialogButtons'); const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
title = _t("Enter recovery passphrase"); title = _t("Enter recovery passphrase");
content = <div> content = <>
<p>{_t( <p>{_t(
"<b>Warning</b>: you should only set up key backup " + "<b>Warning</b>: you should only set up key backup " +
"from a trusted computer.", {}, "from a trusted computer.", {},
@ -394,7 +394,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
{s} {s}
</AccessibleButton>, </AccessibleButton>,
})} })}
</div>; </>;
} else { } else {
title = _t("Enter recovery key"); title = _t("Enter recovery key");
const DialogButtons = sdk.getComponent('views.elements.DialogButtons'); const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
@ -413,7 +413,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
</div>; </div>;
} }
content = <div> content = <>
<p>{_t( <p>{_t(
"<b>Warning</b>: You should only set up key backup " + "<b>Warning</b>: You should only set up key backup " +
"from a trusted computer.", {}, "from a trusted computer.", {},
@ -450,7 +450,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
{s} {s}
</AccessibleButton>, </AccessibleButton>,
})} })}
</div>; </>;
} }
return ( return (
@ -458,7 +458,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
onFinished={this.props.onFinished} onFinished={this.props.onFinished}
title={title} title={title}
> >
<div> <div className='mx_RestoreKeyBackupDialog_content'>
{content} {content}
</div> </div>
</BaseDialog> </BaseDialog>