OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

polish design and disable buttons after click

pull/21833/head
Bruno Windels 2020-04-02 13:00:45 +02:00
parent ccf6c9efdc
commit 1f65cfb7f6
2 changed files with 39 additions and 4 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

@ -132,4 +132,19 @@ limitations under the License.
float: right;
}
}
.mx_VerificationPanel_reciprocate_section {
.mx_FormButton {
margin: 0 10px;
padding: 10px;
flex: 1;
}
// show Yes/No buttons next to each other
.mx_VerificationPanel_reciprocateButtons {
display: flex;
flex-direction: row;
}
}
}

28
src/components/views/right_panel/VerificationPanel.js
View File

@ -144,6 +144,16 @@ export default class VerificationPanel extends React.PureComponent {
</React.Fragment>;
}
_onReciprocateYesClick = () => {
this.setState({reciprocateButtonClicked: true});
this.state.reciprocateQREvent.confirm();
};
_onReciprocateNoClick = () => {
this.setState({reciprocateButtonClicked: true});
this.state.reciprocateQREvent.cancel();
};
renderQRReciprocatePhase() {
const {member} = this.props;
const FormButton = sdk.getComponent("elements.FormButton");
@ -152,15 +162,25 @@ export default class VerificationPanel extends React.PureComponent {
if (this.state.reciprocateQREvent) {
// riot web doesn't support scanning yet, so assume here we're the client being scanned.
body = <React.Fragment>
<p>{_t("Almost there! Is %(displayName)s show the same shield?", {
<p>{_t("Almost there! Is %(displayName)s showing the same shield?", {
displayName: member.displayName || member.name || member.userId,
})}</p>
<E2EIcon isUser={true} status="verified" size={128} hideTooltip={true} />
<FormButton label={_t("No")} kind="danger" onClick={this.state.reciprocateQREvent.cancel} />
<FormButton label={_t("Yes")} onClick={this.state.reciprocateQREvent.confirm} />
<div className="mx_VerificationPanel_reciprocateButtons">
<FormButton
label={_t("No")} kind="danger"
disabled={this.state.reciprocateButtonClicked}
onClick={this._onReciprocateNoClick}
/>
<FormButton
label={_t("Yes")}
disabled={this.state.reciprocateButtonClicked}
onClick={this._onReciprocateYesClick}
/>
</div>
</React.Fragment>;
} else {
body = <p><Spinner/></p>;
body = <p><Spinner /></p>;
}
return <div className="mx_UserInfo_container mx_VerificationPanel_reciprocate_section">
<h3>{_t("Verify by scanning")}</h3>