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

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
Show stats 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;
}
.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 {
text-align: center;
}
@ -75,10 +94,21 @@ limitations under the License.
}
.mx_CreateSecretStorageDialog_optionIcon {
display: inline-block;
width: 24px;
height: 24px;
margin-right: 8px;
position: relative;
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 {

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}
>
<div className="mx_CreateSecretStorageDialog_optionTitle">
<img className="mx_CreateSecretStorageDialog_optionIcon"
src={require("../../../../../res/img/feather-customised/secure-backup.svg")}
/>
<span className="mx_CreateSecretStorageDialog_optionIcon mx_CreateSecretStorageDialog_optionIcon_secureBackup"></span>
{_t("Generate a Security Key")}
</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}
>
<div className="mx_CreateSecretStorageDialog_optionTitle">
<img className="mx_CreateSecretStorageDialog_optionIcon"
src={require("../../../../../res/img/feather-customised/secure-phrase.svg")}
/>
<span className="mx_CreateSecretStorageDialog_optionIcon mx_CreateSecretStorageDialog_optionIcon_securePhrase"></span>
{_t("Enter a Security Phrase")}
</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) {
case PHASE_PASSPHRASE:
case PHASE_PASSPHRASE_CONFIRM:
headerImage = require("../../../../../res/img/feather-customised/secure-phrase.svg");
titleClass = ['mx_CreateSecretStorageDialog_titleWithIcon', 'mx_CreateSecretStorageDialog_securePhraseTitle'];
break;
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;
}
let titleClass = null;
if (this.state.phase === PHASE_CHOOSE_KEY_PASSPHRASE) {
titleClass = 'mx_CreateSecretStorageDialog_centeredTitle';
}
return (
@ -802,7 +796,6 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
onFinished={this.props.onFinished}
title={this._titleForPhase(this.state.phase)}
titleClass={titleClass}
headerImage={headerImage}
hasCancel={this.props.hasCancel && [PHASE_PASSPHRASE].includes(this.state.phase)}
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
contentId: PropTypes.string,
// optional additional class for the title element
titleClass: PropTypes.string,
// optional additional class for the title element (basically anything that can be passed to classnames)
titleClass: PropTypes.oneOfType([
PropTypes.string,
PropTypes.object,
PropTypes.arrayOf(PropTypes.string),
]),
},
getDefaultProps: function() {