Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-16 13:14:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #4283 from matrix-org/bwindels/cancelverifypanel

Browse Source 
Add cancel button to verification panel
This commit is contained in:
Bruno Windels 2020-03-27 10:20:02 +00:00 committed by GitHub
commit 2278a724aa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 43 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
res/css/views/right_panel/_VerificationPanel.scss
View File

@ -15,6 +15,21 @@ limitations under the License.
*/
.mx_UserInfo {
.mx_EncryptionPanel_cancel {
mask: url('$(res)/img/feather-customised/cancel.svg');
mask-repeat: no-repeat;
mask-position: center;
mask-size: cover;
width: 14px;
height: 14px;
background-color: $settings-subsection-fg-color;
cursor: pointer;
position: absolute;
z-index: 100;
top: 14px;
right: 14px;
}
.mx_VerificationPanel_verified_section .mx_E2EIcon {
// Override general user info margin
margin: 0 auto !important;

36
src/components/views/right_panel/EncryptionPanel.js
View File

@ -84,6 +84,22 @@ const EncryptionPanel = (props) => {
}, [onClose, request]);
useEventEmitter(request, "change", changeHandler);
const onCancel = useCallback(function() {
if (request) {
request.cancel();
}
}, [request]);
let cancelButton;
if (layout !== "dialog" && request && request.pending) {
const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
cancelButton = (<AccessibleButton
className="mx_EncryptionPanel_cancel"
onClick={onCancel}
title={_t('Cancel')}
></AccessibleButton>);
}
const onStartVerification = useCallback(async () => {
setRequesting(true);
const cli = MatrixClientPeg.get();
@ -98,14 +114,18 @@ const EncryptionPanel = (props) => {
(request && (phase === PHASE_REQUESTED || phase === PHASE_UNSENT || phase === undefined));
if (!request || requested) {
const initiatedByMe = (!request && isRequesting) || (request && request.initiatedByMe);
return <EncryptionInfo
isRoomEncrypted={isRoomEncrypted}
onStartVerification={onStartVerification}
member={member}
waitingForOtherParty={requested && initiatedByMe}
waitingForNetwork={requested && !initiatedByMe} />;
return (<React.Fragment>
{cancelButton}
<EncryptionInfo
isRoomEncrypted={isRoomEncrypted}
onStartVerification={onStartVerification}
member={member}
waitingForOtherParty={requested && initiatedByMe}
waitingForNetwork={requested && !initiatedByMe} />
</React.Fragment>);
} else {
return (
return (<React.Fragment>
{cancelButton}
<VerificationPanel
isRoomEncrypted={isRoomEncrypted}
layout={layout}
@ -114,7 +134,7 @@ const EncryptionPanel = (props) => {
request={request}
key={request.channel.transactionId}
phase={phase} />
);
</React.Fragment>);
}
};
EncryptionPanel.propTypes = {