mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-23 17:56:01 +03:00
Code Issues Projects Releases Packages Wiki Activity

add cancel button to verification panel

Browse source
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
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: $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;

32
src/components/views/right_panel/EncryptionPanel.js
View file

@ -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 = {