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

Add header icons & justification

Browse source
This commit is contained in:
David Baker 2020-06-24 16:12:46 +01:00
parent a23b784e00
commit 966837232c
3 changed files with 21 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

2
res/css/_common.scss
View file

@ -319,7 +319,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
} }
.mx_Dialog_titleImage { .mx_Dialog_titleImage {
vertical-align: middle; vertical-align: sub;
width: 25px; width: 25px;
height: 25px; height: 25px;
margin-left: -2px; margin-left: -2px;

4
res/css/views/dialogs/secretstorage/_CreateSecretStorageDialog.scss
View file

@ -48,6 +48,10 @@ limitations under the License.
margin-bottom: 1em; margin-bottom: 1em;
} }
.mx_CreateSecretStorageDialog_centeredTitle, .mx_CreateSecretStorageDialog_centeredBody {
text-align: center;
}
.mx_CreateSecretStorageDialog_primaryContainer { .mx_CreateSecretStorageDialog_primaryContainer {
/* FIXME: plinth colour in new theme(s). background-color: $accent-color; */ /* FIXME: plinth colour in new theme(s). background-color: $accent-color; */
padding-top: 20px; padding-top: 20px;

20
src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js
View file

@ -437,7 +437,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
_renderPhaseChooseKeyPassphrase() { _renderPhaseChooseKeyPassphrase() {
return <form onSubmit={this._onChooseKeyPassphraseFormSubmit}> return <form onSubmit={this._onChooseKeyPassphraseFormSubmit}>
<p>{_t( <p className="mx_CreateSecretStorageDialog_centeredBody">{_t(
"Safeguard against losing access to encrypted messages & data by " + "Safeguard against losing access to encrypted messages & data by " +
"backing up encryption keys on your server.", "backing up encryption keys on your server.",
)}</p> )}</p>
@ -802,15 +802,27 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
} }
} }
let headerImage; let headerImage = null;
if (this._titleForPhase(this.state.phase)) { switch (this.state.phase) {
headerImage = require("../../../../../res/img/e2e/normal.svg"); case PHASE_PASSPHRASE:
case PHASE_PASSPHRASE_CONFIRM:
headerImage = require("../../../../../res/img/feather-customised/secure-phrase.svg");
break;
case PHASE_SHOWKEY:
headerImage = require("../../../../../res/img/feather-customised/secure-backup.svg");
break;
}
let titleClass = null;
if (this.state.phase === PHASE_CHOOSE_KEY_PASSPHRASE) {
titleClass = 'mx_CreateSecretStorageDialog_centeredTitle';
} }
return ( return (
<BaseDialog className='mx_CreateSecretStorageDialog' <BaseDialog className='mx_CreateSecretStorageDialog'
onFinished={this.props.onFinished} onFinished={this.props.onFinished}
title={this._titleForPhase(this.state.phase)} title={this._titleForPhase(this.state.phase)}
titleClass={titleClass}
headerImage={headerImage} headerImage={headerImage}
hasCancel={this.props.hasCancel && [PHASE_PASSPHRASE].includes(this.state.phase)} hasCancel={this.props.hasCancel && [PHASE_PASSPHRASE].includes(this.state.phase)}
fixedWidth={false} fixedWidth={false}