diff --git a/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx b/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx index 5288dc8977..6147265a51 100644 --- a/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx @@ -68,6 +68,18 @@ export default class HelpUserSettingsTab extends React.Component if (this.closeCopiedTooltip) this.closeCopiedTooltip(); } + private getVersionInfo(): { appVersion: string, olmVersion: string } { + const brand = SdkConfig.get().brand; + const appVersion = this.state.appVersion || 'unknown'; + let olmVersion = MatrixClientPeg.get().olmVersion; + olmVersion = olmVersion ? `${olmVersion[0]}.${olmVersion[1]}.${olmVersion[2]}` : ''; + + return { + appVersion: `${_t("%(brand)s version:", { brand })} ${appVersion}`, + olmVersion: `${_t("Olm version:")} ${olmVersion}`, + }; + } + private onClearCacheAndReload = (e) => { if (!PlatformPeg.get()) return; @@ -179,6 +191,21 @@ export default class HelpUserSettingsTab extends React.Component this.closeCopiedTooltip = target.onmouseleave = close; } + private onCopyVersionClicked = async (e) => { + e.preventDefault(); + const target = e.target; // copy target before we go async and React throws it away + + const { appVersion, olmVersion } = this.getVersionInfo(); + const successful = await copyPlaintext(`${appVersion}\n${olmVersion}`); + const buttonRect = target.getBoundingClientRect(); + const GenericTextContextMenu = sdk.getComponent('context_menus.GenericTextContextMenu'); + const { close } = ContextMenu.createMenu(GenericTextContextMenu, { + ...toRightOf(buttonRect, 2), + message: successful ? _t('Copied!') : _t('Failed to copy'), + }); + this.closeCopiedTooltip = target.onmouseleave = close; + }; + render() { const brand = SdkConfig.get().brand; @@ -225,11 +252,6 @@ export default class HelpUserSettingsTab extends React.Component ); } - const appVersion = this.state.appVersion || 'unknown'; - - let olmVersion = MatrixClientPeg.get().olmVersion; - olmVersion = olmVersion ? `${olmVersion[0]}.${olmVersion[1]}.${olmVersion[2]}` : ''; - let updateButton = null; if (this.state.canUpdate) { updateButton = ; @@ -267,6 +289,8 @@ export default class HelpUserSettingsTab extends React.Component ); } + const { appVersion, olmVersion } = this.getVersionInfo(); + return (
{_t("Help & About")}
@@ -283,8 +307,15 @@ export default class HelpUserSettingsTab extends React.Component
{_t("Versions")}
- {_t("%(brand)s version:", { brand })} {appVersion}
- {_t("olm version:")} {olmVersion}
+
+ { appVersion }
+ { olmVersion }
+ +
{updateButton}