diff --git a/res/css/views/right_panel/_VerificationPanel.scss b/res/css/views/right_panel/_VerificationPanel.scss index 2a733d11a7..a717495e43 100644 --- a/res/css/views/right_panel/_VerificationPanel.scss +++ b/res/css/views/right_panel/_VerificationPanel.scss @@ -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: $dialog-close-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; diff --git a/src/components/views/right_panel/EncryptionPanel.js b/src/components/views/right_panel/EncryptionPanel.js index 3a4aa2edc3..7ee9225a38 100644 --- a/src/components/views/right_panel/EncryptionPanel.js +++ b/src/components/views/right_panel/EncryptionPanel.js @@ -84,6 +84,18 @@ const EncryptionPanel = (props) => { }, [onClose, request]); useEventEmitter(request, "change", changeHandler); + const onCancel = useCallback(function() { + if (request) { + request.cancel(); + } + }, [request]); + + let cancelButton; + if (request && request.pending) { + const AccessibleButton = sdk.getComponent("elements.AccessibleButton"); + cancelButton = ; + } + const onStartVerification = useCallback(async () => { setRequesting(true); const cli = MatrixClientPeg.get(); @@ -98,14 +110,18 @@ const EncryptionPanel = (props) => { (request && (phase === PHASE_REQUESTED || phase === PHASE_UNSENT || phase === undefined)); if (!request || requested) { const initiatedByMe = (!request && isRequesting) || (request && request.initiatedByMe); - return ; + return + {cancelButton} + + ; } else { - return ( + return + {cancelButton} { request={request} key={request.channel.transactionId} phase={phase} /> - ); + ; } }; EncryptionPanel.propTypes = {