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

Adjust recovery key button sizes depending on text width (#7134)

Browse source
This commit is contained in:
Michael Weimann 2021-11-17 10:34:59 +01:00 • committed by GitHub
parent 1cb0e92768
commit f27eb04133
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 38 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

30
res/css/views/dialogs/security/_CreateSecretStorageDialog.scss
View file

@ -74,6 +74,11 @@ limitations under the License.
.mx_CreateSecretStorageDialog_primaryContainer { .mx_CreateSecretStorageDialog_primaryContainer {
/* FIXME: plinth colour in new theme(s). background-color: $accent; */ /* FIXME: plinth colour in new theme(s). background-color: $accent; */
padding-top: 20px; padding-top: 20px;
&.mx_CreateSecretStorageDialog_recoveryKeyPrimarycontainer {
display: flex;
justify-content: center;
}
} }
.mx_CreateSecretStorageDialog_primaryContainer::after { .mx_CreateSecretStorageDialog_primaryContainer::after {
@ -127,9 +132,7 @@ limitations under the License.
} }
.mx_CreateSecretStorageDialog_recoveryKeyContainer { .mx_CreateSecretStorageDialog_recoveryKeyContainer {
width: 380px; display: inline-block;
margin-left: auto;
margin-right: auto;
} }
.mx_CreateSecretStorageDialog_recoveryKey { .mx_CreateSecretStorageDialog_recoveryKey {
@ -141,18 +144,29 @@ limitations under the License.
border-radius: 6px; border-radius: 6px;
word-spacing: 1em; word-spacing: 1em;
margin-bottom: 20px; margin-bottom: 20px;
code {
display: inline-block;
width: 30rem;
}
} }
.mx_CreateSecretStorageDialog_recoveryKeyButtons { .mx_CreateSecretStorageDialog_recoveryKeyButtons {
display: flex;
justify-content: space-between;
align-items: center; align-items: center;
display: flex;
gap: 16px;
}
.mx_CreateSecretStorageDialog_recoveryKeyButtons_copyBtn {
flex-direction: column;
}
.mx_CreateSecretStorageDialog_recoveryKeyCopyButtonText {
overflow-y: hidden;
} }
.mx_CreateSecretStorageDialog_recoveryKeyButtons .mx_AccessibleButton { .mx_CreateSecretStorageDialog_recoveryKeyButtons .mx_AccessibleButton {
width: 160px; flex-grow: 1;
padding-left: 0px;
padding-right: 0px;
white-space: nowrap; white-space: nowrap;
} }

18
src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx
View file

@ -714,12 +714,13 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
<InlineSpinner /> <InlineSpinner />
</div>; </div>;
} }
return <div> return <div>
<p>{ _t( <p>{ _t(
"Store your Security Key somewhere safe, like a password manager or a safe, " + "Store your Security Key somewhere safe, like a password manager or a safe, " +
"as it's used to safeguard your encrypted data.", "as it's used to safeguard your encrypted data.",
) }</p> ) }</p>
<div className="mx_CreateSecretStorageDialog_primaryContainer"> <div className="mx_CreateSecretStorageDialog_primaryContainer mx_CreateSecretStorageDialog_recoveryKeyPrimarycontainer">
<div className="mx_CreateSecretStorageDialog_recoveryKeyContainer"> <div className="mx_CreateSecretStorageDialog_recoveryKeyContainer">
<div className="mx_CreateSecretStorageDialog_recoveryKey"> <div className="mx_CreateSecretStorageDialog_recoveryKey">
<code ref={this.recoveryKeyNode}>{ this.recoveryKey.encodedPrivateKey }</code> <code ref={this.recoveryKeyNode}>{ this.recoveryKey.encodedPrivateKey }</code>
@ -739,7 +740,20 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
onClick={this.onCopyClick} onClick={this.onCopyClick}
disabled={this.state.phase === Phase.Storing} disabled={this.state.phase === Phase.Storing}
> >
{ this.state.copied ? _t("Copied!") : _t("Copy") } <span
className="mx_CreateSecretStorageDialog_recoveryKeyCopyButtonText"
style={{ height: this.state.copied ? '0' : 'auto' }}
aria-hidden={this.state.copied}
>
{ _t("Copy") }
</span>
<span
className="mx_CreateSecretStorageDialog_recoveryKeyCopyButtonText"
style={{ height: this.state.copied ? 'auto' : '0' }}
aria-hidden={!this.state.copied}
>
{ _t("Copied!") }
</span>
</AccessibleButton> </AccessibleButton>
</div> </div>
</div> </div>