From 9b54d15fcd2395fe9b5465f630db3e1044c43664 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Thu, 26 Mar 2020 16:51:24 +0100
Subject: [PATCH 1/4] add cancel button to verification panel

---
 .../views/right_panel/_VerificationPanel.scss | 15 +++++++++
 .../views/right_panel/EncryptionPanel.js      | 32 ++++++++++++++-----
 2 files changed, 39 insertions(+), 8 deletions(-)

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 = <AccessibleButton className="mx_EncryptionPanel_cancel" onClick={onCancel} title={_t('Cancel')}></AccessibleButton>;
+    }
+
     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 <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 +130,7 @@ const EncryptionPanel = (props) => {
                 request={request}
                 key={request.channel.transactionId}
                 phase={phase} />
-        );
+        </React.Fragment>;
     }
 };
 EncryptionPanel.propTypes = {

From 34b0c1b1e75907a6568ffdc7776c2fb98ff3cab5 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Thu, 26 Mar 2020 16:54:31 +0100
Subject: [PATCH 2/4] fix lint & other cleanup

---
 .../views/right_panel/EncryptionPanel.js           | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/views/right_panel/EncryptionPanel.js b/src/components/views/right_panel/EncryptionPanel.js
index 7ee9225a38..e67af0805a 100644
--- a/src/components/views/right_panel/EncryptionPanel.js
+++ b/src/components/views/right_panel/EncryptionPanel.js
@@ -93,7 +93,11 @@ const EncryptionPanel = (props) => {
     let cancelButton;
     if (request && request.pending) {
         const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
-        cancelButton = <AccessibleButton className="mx_EncryptionPanel_cancel" onClick={onCancel} title={_t('Cancel')}></AccessibleButton>;
+        cancelButton = (<AccessibleButton
+            className="mx_EncryptionPanel_cancel"
+            onClick={onCancel}
+            title={_t('Cancel')}
+        ></AccessibleButton>);
     }
 
     const onStartVerification = useCallback(async () => {
@@ -110,7 +114,7 @@ const EncryptionPanel = (props) => {
         (request && (phase === PHASE_REQUESTED || phase === PHASE_UNSENT || phase === undefined));
     if (!request || requested) {
         const initiatedByMe = (!request && isRequesting) || (request && request.initiatedByMe);
-        return <React.Fragment>
+        return (<React.Fragment>
             {cancelButton}
             <EncryptionInfo
                 isRoomEncrypted={isRoomEncrypted}
@@ -118,9 +122,9 @@ const EncryptionPanel = (props) => {
                 member={member}
                 waitingForOtherParty={requested && initiatedByMe}
                 waitingForNetwork={requested && !initiatedByMe} />
-        </React.Fragment>;
+        </React.Fragment>);
     } else {
-        return <React.Fragment>
+        return (<React.Fragment>
             {cancelButton}
             <VerificationPanel
                 isRoomEncrypted={isRoomEncrypted}
@@ -130,7 +134,7 @@ const EncryptionPanel = (props) => {
                 request={request}
                 key={request.channel.transactionId}
                 phase={phase} />
-        </React.Fragment>;
+        </React.Fragment>);
     }
 };
 EncryptionPanel.propTypes = {

From 4f3842d75e23e10f623509df0442bfe5911bbed6 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Thu, 26 Mar 2020 16:58:17 +0100
Subject: [PATCH 3/4] pick color similar to chevron for cancel X button

---
 res/css/views/right_panel/_VerificationPanel.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/views/right_panel/_VerificationPanel.scss b/res/css/views/right_panel/_VerificationPanel.scss
index a717495e43..459622b277 100644
--- a/res/css/views/right_panel/_VerificationPanel.scss
+++ b/res/css/views/right_panel/_VerificationPanel.scss
@@ -22,7 +22,7 @@ limitations under the License.
         mask-size: cover;
         width: 14px;
         height: 14px;
-        background-color: $dialog-close-fg-color;
+        background-color: $settings-subsection-fg-color;
         cursor: pointer;
         position: absolute;
         z-index: 100;

From a6fbb9825247faa2b93bf9019fb6fe9bc568891f Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Thu, 26 Mar 2020 17:02:32 +0100
Subject: [PATCH 4/4] only show close button when not in a dialog, which
 already has one

---
 src/components/views/right_panel/EncryptionPanel.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/right_panel/EncryptionPanel.js b/src/components/views/right_panel/EncryptionPanel.js
index e67af0805a..2c51662111 100644
--- a/src/components/views/right_panel/EncryptionPanel.js
+++ b/src/components/views/right_panel/EncryptionPanel.js
@@ -91,7 +91,7 @@ const EncryptionPanel = (props) => {
     }, [request]);
 
     let cancelButton;
-    if (request && request.pending) {
+    if (layout !== "dialog" && request && request.pending) {
         const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
         cancelButton = (<AccessibleButton
             className="mx_EncryptionPanel_cancel"