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

Style the QR code

Browse source
This commit is contained in:
Michael Telatynski 2020-01-27 17:17:05 +00:00
parent 50b491d7e5
commit ca5d4d88a2
5 changed files with 34 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
res/css/views/right_panel/_UserInfo.scss
View file

@ -111,6 +111,7 @@ limitations under the License.
// override the calculated sizes so that the letter isn't HUGE // override the calculated sizes so that the letter isn't HUGE
font-size: 56px !important; font-size: 56px !important;
width: 100% !important; width: 100% !important;
transition: font-size 1s;
} }
.mx_UserInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image { .mx_UserInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image {
@ -270,4 +271,8 @@ limitations under the License.
max-width: 72px; max-width: 72px;
margin: 0 auto; margin: 0 auto;
} }
.mx_UserInfo_avatar .mx_BaseAvatar_initial {
font-size: 40px !important; // override the other override because here the avatar is smaller
}
} }

16
res/css/views/right_panel/_VerificationPanel.scss
View file

@ -18,4 +18,20 @@ limitations under the License.
.mx_VerificationPanel_verified_section .mx_E2EIcon { .mx_VerificationPanel_verified_section .mx_E2EIcon {
margin: 0 auto; margin: 0 auto;
} }
.mx_VerificationPanel_qrCode {
padding: 4px 4px 0 4px;
background: white;
border-radius: 4px;
width: max-content;
max-width: 100%;
margin: 0 auto;
canvas {
// override height and width which are set on the element directly
height: auto !important;
width: 100% !important;
max-width: 240px;
}
}
} }

2
src/components/views/elements/crypto/VerificationQRCode.js
View file

@ -51,6 +51,6 @@ export default class VerificationQRCode extends React.PureComponent {
const uri = `https://matrix.to/#/${this.props.keyholderUserId}?${qs.stringify(query)}`; const uri = `https://matrix.to/#/${this.props.keyholderUserId}?${qs.stringify(query)}`;
return <QRCode value={uri} size={256} logoWidth={48} logo={require("../../../../../res/img/matrix-m.svg")} />; return <QRCode value={uri} size={512} logoWidth={64} logo={require("../../../../../res/img/matrix-m.svg")} />;
} }
} }

21
src/components/views/right_panel/VerificationPanel.js
View file

@ -48,22 +48,23 @@ export default class VerificationPanel extends React.PureComponent {
[myKeyId, myKeyId], [myKeyId, myKeyId],
]; ];
// TODO: add way to open camera to scan a QR code
return <React.Fragment> return <React.Fragment>
<div className="mx_UserInfo_container"> <div className="mx_UserInfo_container">
<h3>Verify by scanning</h3> <h3>Verify by scanning</h3>
<p>{_t("Ask %(displayName)s to scan your code, or <a>open your camera</a> to scan theirs:", { <p>{_t("Ask %(displayName)s to scan your code:", {
displayName: member.displayName || member.name || member.userId, displayName: member.displayName || member.name || member.userId,
}, {
a: t => <a>{ t }</a>,
})}</p> })}</p>
<VerificationQRCode <div className="mx_VerificationPanel_qrCode">
keyholderUserId={MatrixClientPeg.get().getUserId()} <VerificationQRCode
requestEventId={request.requestEvent.getId()} keyholderUserId={MatrixClientPeg.get().getUserId()}
otherUserKey={crossSigningInfo.getId("master")} requestEventId={request.requestEvent.getId()}
secret={request.encodedSharedSecret} otherUserKey={crossSigningInfo.getId("master")}
keys={qrCodeKeys} secret={request.encodedSharedSecret}
/> keys={qrCodeKeys}
/>
</div>
</div> </div>
<div className="mx_UserInfo_container"> <div className="mx_UserInfo_container">

2
src/i18n/strings/en_EN.json
View file

@ -1156,7 +1156,7 @@
"This client does not support end-to-end encryption.": "This client does not support end-to-end encryption.", "This client does not support end-to-end encryption.": "This client does not support end-to-end encryption.",
"Messages in this room are not end-to-end encrypted.": "Messages in this room are not end-to-end encrypted.", "Messages in this room are not end-to-end encrypted.": "Messages in this room are not end-to-end encrypted.",
"Security": "Security", "Security": "Security",
"Ask %(displayName)s to scan your code, or <a>open your camera</a> to scan theirs:": "Ask %(displayName)s to scan your code, or <a>open your camera</a> to scan theirs:", "Ask %(displayName)s to scan your code:": "Ask %(displayName)s to scan your code:",
"If you can't scan the code above, verify by comparing unique emoji.": "If you can't scan the code above, verify by comparing unique emoji.", "If you can't scan the code above, verify by comparing unique emoji.": "If you can't scan the code above, verify by comparing unique emoji.",
"Verify by emoji": "Verify by emoji", "Verify by emoji": "Verify by emoji",
"You've successfully verified %(displayName)s!": "You've successfully verified %(displayName)s!", "You've successfully verified %(displayName)s!": "You've successfully verified %(displayName)s!",