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

Use mask images in key entry dialogs

Browse source
This commit is contained in:
David Baker 2020-06-26 12:56:41 +01:00
parent 919c3bd360
commit 178cbca934
2 changed files with 23 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

19
res/css/views/dialogs/secretstorage/_AccessSecretStorageDialog.scss
View file

@ -15,6 +15,25 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.mx_AccessSecretStorageDialog_titleWithIcon::before {
content: '';
display: inline-block;
width: 24px;
height: 24px;
margin-right: 8px;
position: relative;
top: 5px;
background-color: $primary-fg-color;
}
.mx_AccessSecretStorageDialog_secureBackupTitle::before {
mask-image: url('$(res)/img/feather-customised/secure-backup.svg');
}
.mx_AccessSecretStorageDialog_securePhraseTitle::before {
mask-image: url('$(res)/img/feather-customised/secure-phrase.svg');
}
.mx_AccessSecretStorageDialog_keyStatus { .mx_AccessSecretStorageDialog_keyStatus {
height: 30px; height: 30px;
} }

8
src/components/views/dialogs/secretstorage/AccessSecretStorageDialog.js
View file

@ -111,12 +111,12 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
let content; let content;
let title; let title;
let headerImage; let titleClass;
if (hasPassphrase && !this.state.forceRecoveryKey) { if (hasPassphrase && !this.state.forceRecoveryKey) {
const DialogButtons = sdk.getComponent('views.elements.DialogButtons'); const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
title = _t("Security Phrase"); title = _t("Security Phrase");
headerImage = require("../../../../../res/img/feather-customised/secure-phrase.svg"); titleClass = ['mx_AccessSecretStorageDialog_titleWithIcon mx_AccessSecretStorageDialog_securePhraseTitle'];
let keyStatus; let keyStatus;
if (this.state.keyMatches === false) { if (this.state.keyMatches === false) {
@ -166,7 +166,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
</div>; </div>;
} else { } else {
title = _t("Security Key"); title = _t("Security Key");
headerImage = require("../../../../../res/img/feather-customised/secure-backup.svg"); titleClass = ['mx_AccessSecretStorageDialog_titleWithIcon mx_AccessSecretStorageDialog_secureBackupTitle'];
const DialogButtons = sdk.getComponent('views.elements.DialogButtons'); const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
let keyStatus; let keyStatus;
@ -213,9 +213,9 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
return ( return (
<BaseDialog className='mx_AccessSecretStorageDialog' <BaseDialog className='mx_AccessSecretStorageDialog'
headerImage={headerImage}
onFinished={this.props.onFinished} onFinished={this.props.onFinished}
title={title} title={title}
titleClass={titleClass}
> >
<div> <div>
{content} {content}