add cancel button to verification panel

This commit is contained in:
Bruno Windels 2020-03-26 16:51:24 +01:00
parent 053a5a5ff4
commit 9b54d15fcd
2 changed files with 39 additions and 8 deletions

View file

@ -15,6 +15,21 @@ limitations under the License.
*/ */
.mx_UserInfo { .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 { .mx_VerificationPanel_verified_section .mx_E2EIcon {
// Override general user info margin // Override general user info margin
margin: 0 auto !important; margin: 0 auto !important;

View file

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