PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Convert show recovery key to flexbox

Browse source 
This allows the buttons to fit on a single line and flows a bit better at low
widths.

Signed-off-by: J. Ryan Stinnett <jryans@gmail.com>
This commit is contained in:
J. Ryan Stinnett 2018-12-18 17:26:11 +00:00
parent a22a9492a0
commit 9c4ff4048a
2 changed files with 28 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss
View file

@ -52,13 +52,24 @@ limitations under the License.
float: right;
}
.mx_CreateKeyBackupDialog_recoveryKeyButtons {
float: right;
.mx_CreateKeyBackupDialog_recoveryKeyHeader {
margin-bottom: 1em;
}
.mx_CreateKeyBackupDialog_recoveryKeyContainer {
display: flex;
}
.mx_CreateKeyBackupDialog_recoveryKey {
width: 300px;
width: 275px;
padding: 20px;
color: $info-plinth-fg-color;
background-color: $info-plinth-bg-color;
margin-right: 8px;
}
.mx_CreateKeyBackupDialog_recoveryKeyButtons {
flex: 1;
display: flex;
align-items: center;
}

28
src/async-components/views/dialogs/keybackup/CreateKeyBackupDialog.js
View file

@ -351,21 +351,21 @@ export default React.createClass({
<p>{_t("Make a copy of this Recovery Key and keep it safe.")}</p>
<p>{bodyText}</p>
<p className="mx_CreateKeyBackupDialog_primaryContainer">
<div>{_t("Your Recovery Key")}</div>
<div className="mx_CreateKeyBackupDialog_recoveryKeyButtons">
<button onClick={this._onCopyClick}>
{_t("Copy to clipboard")}
</button>
{
// FIXME REDESIGN: buttons should be adjacent but insufficient room in current design
}
<br /><br />
<button onClick={this._onDownloadClick}>
{_t("Download")}
</button>
<div className="mx_CreateKeyBackupDialog_recoveryKeyHeader">
{_t("Your Recovery Key")}
</div>
<div className="mx_CreateKeyBackupDialog_recoveryKey">
<code ref={this._collectRecoveryKeyNode}>{this._keyBackupInfo.recovery_key}</code>
<div className="mx_CreateKeyBackupDialog_recoveryKeyContainer">
<div className="mx_CreateKeyBackupDialog_recoveryKey">
<code ref={this._collectRecoveryKeyNode}>{this._keyBackupInfo.recovery_key}</code>
</div>
<div className="mx_CreateKeyBackupDialog_recoveryKeyButtons">
<button onClick={this._onCopyClick}>
{_t("Copy to clipboard")}
</button>
<button onClick={this._onDownloadClick}>
{_t("Download")}
</button>
</div>
</div>
</p>
<br />