OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Convert show recovery key to flexbox 

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>
pull/21833/head
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; float: right;
} }
.mx_CreateKeyBackupDialog_recoveryKeyButtons { .mx_CreateKeyBackupDialog_recoveryKeyHeader {
float: right; margin-bottom: 1em;
}
.mx_CreateKeyBackupDialog_recoveryKeyContainer {
display: flex;
} }
.mx_CreateKeyBackupDialog_recoveryKey { .mx_CreateKeyBackupDialog_recoveryKey {
width: 300px; width: 275px;
padding: 20px; padding: 20px;
color: $info-plinth-fg-color; color: $info-plinth-fg-color;
background-color: $info-plinth-bg-color; background-color: $info-plinth-bg-color;
margin-right: 8px;
}
.mx_CreateKeyBackupDialog_recoveryKeyButtons {
flex: 1;
display: flex;
align-items: center;
} }

14
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>{_t("Make a copy of this Recovery Key and keep it safe.")}</p>
<p>{bodyText}</p> <p>{bodyText}</p>
<p className="mx_CreateKeyBackupDialog_primaryContainer"> <p className="mx_CreateKeyBackupDialog_primaryContainer">
<div>{_t("Your Recovery Key")}</div> <div className="mx_CreateKeyBackupDialog_recoveryKeyHeader">
{_t("Your Recovery Key")}
</div>
<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"> <div className="mx_CreateKeyBackupDialog_recoveryKeyButtons">
<button onClick={this._onCopyClick}> <button onClick={this._onCopyClick}>
{_t("Copy to clipboard")} {_t("Copy to clipboard")}
</button> </button>
{
// FIXME REDESIGN: buttons should be adjacent but insufficient room in current design
}
<br /><br />
<button onClick={this._onDownloadClick}> <button onClick={this._onDownloadClick}>
{_t("Download")} {_t("Download")}
</button> </button>
</div> </div>
<div className="mx_CreateKeyBackupDialog_recoveryKey">
<code ref={this._collectRecoveryKeyNode}>{this._keyBackupInfo.recovery_key}</code>
</div> </div>
</p> </p>
<br /> <br />