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

Convert icons to masks

Browse source 
so they're a sensible colour in other themes
This commit is contained in:
David Baker 2020-06-26 12:41:24 +01:00
parent bf45cb0588
commit e18ea55d20
3 changed files with 44 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -48,6 +48,25 @@ limitations under the License.
margin-bottom: 1em; margin-bottom: 1em;
} }
.mx_CreateSecretStorageDialog_titleWithIcon::before {
content: '';
display: inline-block;
width: 24px;
height: 24px;
margin-right: 8px;
position: relative;
top: 5px;
background-color: $primary-fg-color;
}
.mx_CreateSecretStorageDialog_secureBackupTitle::before {
mask-image: url('$(res)/img/feather-customised/secure-backup.svg');
}
.mx_CreateSecretStorageDialog_securePhraseTitle::before {
mask-image: url('$(res)/img/feather-customised/secure-phrase.svg');
}
.mx_CreateSecretStorageDialog_centeredTitle, .mx_CreateSecretStorageDialog_centeredBody { .mx_CreateSecretStorageDialog_centeredTitle, .mx_CreateSecretStorageDialog_centeredBody {
text-align: center; text-align: center;
} }
@ -75,10 +94,21 @@ limitations under the License.
} }
.mx_CreateSecretStorageDialog_optionIcon { .mx_CreateSecretStorageDialog_optionIcon {
display: inline-block;
width: 24px; width: 24px;
height: 24px;
margin-right: 8px; margin-right: 8px;
position: relative; position: relative;
top: 5px; top: 5px;
background-color: $primary-fg-color;
}
.mx_CreateSecretStorageDialog_optionIcon_securePhrase {
mask-image: url('$(res)/img/feather-customised/secure-phrase.svg');
}
.mx_CreateSecretStorageDialog_optionIcon_secureBackup {
mask-image: url('$(res)/img/feather-customised/secure-backup.svg');
} }
.mx_CreateSecretStorageDialog_passPhraseContainer { .mx_CreateSecretStorageDialog_passPhraseContainer {

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

@ -446,9 +446,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
checked={this.state.passPhraseKeySelected === CREATE_STORAGE_OPTION_KEY} checked={this.state.passPhraseKeySelected === CREATE_STORAGE_OPTION_KEY}
> >
<div className="mx_CreateSecretStorageDialog_optionTitle"> <div className="mx_CreateSecretStorageDialog_optionTitle">
<img className="mx_CreateSecretStorageDialog_optionIcon" <span className="mx_CreateSecretStorageDialog_optionIcon mx_CreateSecretStorageDialog_optionIcon_secureBackup"></span>
src={require("../../../../../res/img/feather-customised/secure-backup.svg")}
/>
{_t("Generate a Security Key")} {_t("Generate a Security Key")}
</div> </div>
<div>{_t("We’ll generate a Security Key for you to store somewhere safe, like a password manager or a safe.")}</div> <div>{_t("We’ll generate a Security Key for you to store somewhere safe, like a password manager or a safe.")}</div>
@ -460,9 +458,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
checked={this.state.passPhraseKeySelected === CREATE_STORAGE_OPTION_PASSPHRASE} checked={this.state.passPhraseKeySelected === CREATE_STORAGE_OPTION_PASSPHRASE}
> >
<div className="mx_CreateSecretStorageDialog_optionTitle"> <div className="mx_CreateSecretStorageDialog_optionTitle">
<img className="mx_CreateSecretStorageDialog_optionIcon" <span className="mx_CreateSecretStorageDialog_optionIcon mx_CreateSecretStorageDialog_optionIcon_securePhrase"></span>
src={require("../../../../../res/img/feather-customised/secure-phrase.svg")}
/>
{_t("Enter a Security Phrase")} {_t("Enter a Security Phrase")}
</div> </div>
<div>{_t("Use a secret phrase only you know, and optionally save a Security Key to use for backup.")}</div> <div>{_t("Use a secret phrase only you know, and optionally save a Security Key to use for backup.")}</div>
@ -781,20 +777,18 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
} }
} }
let headerImage = null; let titleClass = null;
switch (this.state.phase) { switch (this.state.phase) {
case PHASE_PASSPHRASE: case PHASE_PASSPHRASE:
case PHASE_PASSPHRASE_CONFIRM: case PHASE_PASSPHRASE_CONFIRM:
headerImage = require("../../../../../res/img/feather-customised/secure-phrase.svg"); titleClass = ['mx_CreateSecretStorageDialog_titleWithIcon', 'mx_CreateSecretStorageDialog_securePhraseTitle'];
break; break;
case PHASE_SHOWKEY: case PHASE_SHOWKEY:
headerImage = require("../../../../../res/img/feather-customised/secure-backup.svg"); titleClass = ['mx_CreateSecretStorageDialog_titleWithIcon', 'mx_CreateSecretStorageDialog_secureBackupTitle'];
break;
case PHASE_CHOOSE_KEY_PASSPHRASE:
titleClass = 'mx_CreateSecretStorageDialog_centeredTitle';
break; break;
}
let titleClass = null;
if (this.state.phase === PHASE_CHOOSE_KEY_PASSPHRASE) {
titleClass = 'mx_CreateSecretStorageDialog_centeredTitle';
} }
return ( return (
@ -802,7 +796,6 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
onFinished={this.props.onFinished} onFinished={this.props.onFinished}
title={this._titleForPhase(this.state.phase)} title={this._titleForPhase(this.state.phase)}
titleClass={titleClass} titleClass={titleClass}
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}
> >

8
src/components/views/dialogs/BaseDialog.js
View file

@ -75,8 +75,12 @@ export default createReactClass({
// If provided, this is used to add a aria-describedby attribute // If provided, this is used to add a aria-describedby attribute
contentId: PropTypes.string, contentId: PropTypes.string,
// optional additional class for the title element // optional additional class for the title element (basically anything that can be passed to classnames)
titleClass: PropTypes.string, titleClass: PropTypes.oneOfType([
PropTypes.string,
PropTypes.object,
PropTypes.arrayOf(PropTypes.string),
]),
}, },
getDefaultProps: function() { getDefaultProps: function() {