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

Convert pass phrase entry to flexbox

Browse source 
Signed-off-by: J. Ryan Stinnett <jryans@gmail.com>
This commit is contained in:
J. Ryan Stinnett 2018-12-19 10:56:50 +00:00
parent a597ad10b0
commit 24f0123ded
2 changed files with 35 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -29,9 +29,13 @@ limitations under the License.
display: block; display: block;
} }
.mx_CreateKeyBackupDialog_passPhraseContainer {
display: flex;
align-items: start;
}
.mx_CreateKeyBackupDialog_passPhraseHelp { .mx_CreateKeyBackupDialog_passPhraseHelp {
float: right; flex: 1;
width: 230px;
height: 85px; height: 85px;
margin-left: 20px; margin-left: 20px;
font-size: 80%; font-size: 80%;
@ -42,14 +46,16 @@ limitations under the License.
} }
.mx_CreateKeyBackupDialog_passPhraseInput { .mx_CreateKeyBackupDialog_passPhraseInput {
flex: none;
width: 250px; width: 250px;
border: 1px solid $accent-color; border: 1px solid $accent-color;
border-radius: 5px; border-radius: 5px;
padding: 10px; padding: 10px;
margin-bottom: 1em;
} }
.mx_CreateKeyBackupDialog_passPhraseMatch { .mx_CreateKeyBackupDialog_passPhraseMatch {
float: right; margin-left: 20px;
} }
.mx_CreateKeyBackupDialog_recoveryKeyHeader { .mx_CreateKeyBackupDialog_recoveryKeyHeader {
@ -61,11 +67,11 @@ limitations under the License.
} }
.mx_CreateKeyBackupDialog_recoveryKey { .mx_CreateKeyBackupDialog_recoveryKey {
width: 275px; width: 262px;
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; margin-right: 12px;
} }
.mx_CreateKeyBackupDialog_recoveryKeyButtons { .mx_CreateKeyBackupDialog_recoveryKeyButtons {

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

@ -239,17 +239,19 @@ export default React.createClass({
<p>{_t("You'll need it if you log out or lose access to this device.")}</p> <p>{_t("You'll need it if you log out or lose access to this device.")}</p>
<div className="mx_CreateKeyBackupDialog_primaryContainer"> <div className="mx_CreateKeyBackupDialog_primaryContainer">
<div className="mx_CreateKeyBackupDialog_passPhraseHelp"> <div className="mx_CreateKeyBackupDialog_passPhraseContainer">
{strengthMeter} <input type="password"
{helpText} onChange={this._onPassPhraseChange}
onKeyPress={this._onPassPhraseKeyPress}
value={this.state.passPhrase}
className="mx_CreateKeyBackupDialog_passPhraseInput"
placeholder={_t("Enter a passphrase...")}
/>
<div className="mx_CreateKeyBackupDialog_passPhraseHelp">
{strengthMeter}
{helpText}
</div>
</div> </div>
<input type="password"
onChange={this._onPassPhraseChange}
onKeyPress={this._onPassPhraseKeyPress}
value={this.state.passPhrase}
className="mx_CreateKeyBackupDialog_passPhraseInput"
placeholder={_t("Enter a passphrase...")}
/>
</div> </div>
<DialogButtons primaryButton={_t('Next')} <DialogButtons primaryButton={_t('Next')}
@ -317,16 +319,18 @@ export default React.createClass({
"somewhere safe.", "somewhere safe.",
)}</p> )}</p>
<div className="mx_CreateKeyBackupDialog_primaryContainer"> <div className="mx_CreateKeyBackupDialog_primaryContainer">
{passPhraseMatch} <div className="mx_CreateKeyBackupDialog_passPhraseContainer">
<div> <div>
<input type="password" <input type="password"
onChange={this._onPassPhraseConfirmChange} onChange={this._onPassPhraseConfirmChange}
onKeyPress={this._onPassPhraseConfirmKeyPress} onKeyPress={this._onPassPhraseConfirmKeyPress}
value={this.state.passPhraseConfirm} value={this.state.passPhraseConfirm}
className="mx_CreateKeyBackupDialog_passPhraseInput" className="mx_CreateKeyBackupDialog_passPhraseInput"
placeholder={_t("Repeat your passphrase...")} placeholder={_t("Repeat your passphrase...")}
autoFocus={true} autoFocus={true}
/> />
</div>
{passPhraseMatch}
</div> </div>
</div> </div>
<DialogButtons primaryButton={_t('Next')} <DialogButtons primaryButton={_t('Next')}