mirror of https://github.com/vector-im/riot-web
Merge pull request #4283 from matrix-org/bwindels/cancelverifypanel
Add cancel button to verification panelpull/21833/head
commit
2278a724aa
|
@ -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;
|
||||
|
|
|
@ -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 = {
|
||||
|
|
Loading…
Reference in New Issue