mirror of https://github.com/vector-im/riot-web
Merge pull request #6227 from SimonBrandner/feature/copy-version/17603
commit
381108a9c2
|
@ -28,28 +28,32 @@ limitations under the License.
|
||||||
user-select: all;
|
user-select: all;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_HelpUserSettingsTab_accessToken {
|
.mx_HelpUserSettingsTab_copy {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
border: solid 1px $light-fg-color;
|
border: solid 1px $light-fg-color;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
width: max-content;
|
||||||
|
|
||||||
.mx_HelpUserSettingsTab_accessToken_copy {
|
.mx_HelpUserSettingsTab_copyButton {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
cursor: pointer;
|
width: 20px;
|
||||||
margin-left: 20px;
|
height: 20px;
|
||||||
display: inherit;
|
cursor: pointer;
|
||||||
}
|
margin-left: 20px;
|
||||||
|
display: block;
|
||||||
|
|
||||||
.mx_HelpUserSettingsTab_accessToken_copy > div {
|
&::before {
|
||||||
mask-image: url($copy-button-url);
|
content: "";
|
||||||
background-color: $message-action-bar-fg-color;
|
|
||||||
margin-left: 5px;
|
mask-image: url($copy-button-url);
|
||||||
width: 20px;
|
background-color: $message-action-bar-fg-color;
|
||||||
height: 20px;
|
width: 20px;
|
||||||
background-repeat: no-repeat;
|
height: 20px;
|
||||||
|
display: block;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -15,9 +15,9 @@ limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import AccessibleButton, { ButtonEvent } from "../../../elements/AccessibleButton";
|
||||||
import { _t, getCurrentLanguage } from "../../../../../languageHandler";
|
import { _t, getCurrentLanguage } from "../../../../../languageHandler";
|
||||||
import { MatrixClientPeg } from "../../../../../MatrixClientPeg";
|
import { MatrixClientPeg } from "../../../../../MatrixClientPeg";
|
||||||
import AccessibleButton from "../../../elements/AccessibleButton";
|
|
||||||
import AccessibleTooltipButton from '../../../elements/AccessibleTooltipButton';
|
import AccessibleTooltipButton from '../../../elements/AccessibleTooltipButton';
|
||||||
import SdkConfig from "../../../../../SdkConfig";
|
import SdkConfig from "../../../../../SdkConfig";
|
||||||
import createRoom from "../../../../../createRoom";
|
import createRoom from "../../../../../createRoom";
|
||||||
|
@ -69,6 +69,18 @@ export default class HelpUserSettingsTab extends React.Component<IProps, IState>
|
||||||
if (this.closeCopiedTooltip) this.closeCopiedTooltip();
|
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]}` : '<not-enabled>';
|
||||||
|
|
||||||
|
return {
|
||||||
|
appVersion: `${_t("%(brand)s version:", { brand })} ${appVersion}`,
|
||||||
|
olmVersion: `${_t("Olm version:")} ${olmVersion}`,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
private onClearCacheAndReload = (e) => {
|
private onClearCacheAndReload = (e) => {
|
||||||
if (!PlatformPeg.get()) return;
|
if (!PlatformPeg.get()) return;
|
||||||
|
|
||||||
|
@ -173,17 +185,26 @@ export default class HelpUserSettingsTab extends React.Component<IProps, IState>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
onAccessTokenCopyClick = async (e) => {
|
private async copy(text: string, e: ButtonEvent) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
const target = e.target; // copy target before we go async and React throws it away
|
const target = e.target as HTMLDivElement; // copy target before we go async and React throws it away
|
||||||
|
|
||||||
const successful = await copyPlaintext(MatrixClientPeg.get().getAccessToken());
|
const successful = await copyPlaintext(text);
|
||||||
const buttonRect = target.getBoundingClientRect();
|
const buttonRect = target.getBoundingClientRect();
|
||||||
const { close } = ContextMenu.createMenu(GenericTextContextMenu, {
|
const { close } = ContextMenu.createMenu(GenericTextContextMenu, {
|
||||||
...toRightOf(buttonRect, 2),
|
...toRightOf(buttonRect, 2),
|
||||||
message: successful ? _t('Copied!') : _t('Failed to copy'),
|
message: successful ? _t('Copied!') : _t('Failed to copy'),
|
||||||
});
|
});
|
||||||
this.closeCopiedTooltip = target.onmouseleave = close;
|
this.closeCopiedTooltip = target.onmouseleave = close;
|
||||||
|
}
|
||||||
|
|
||||||
|
private onAccessTokenCopyClick = (e: ButtonEvent) => {
|
||||||
|
this.copy(MatrixClientPeg.get().getAccessToken(), e);
|
||||||
|
};
|
||||||
|
|
||||||
|
private onCopyVersionClicked = (e: ButtonEvent) => {
|
||||||
|
const { appVersion, olmVersion } = this.getVersionInfo();
|
||||||
|
this.copy(`${appVersion}\n${olmVersion}`, e);
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
@ -232,11 +253,6 @@ export default class HelpUserSettingsTab extends React.Component<IProps, IState>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const appVersion = this.state.appVersion || 'unknown';
|
|
||||||
|
|
||||||
let olmVersion = MatrixClientPeg.get().olmVersion;
|
|
||||||
olmVersion = olmVersion ? `${olmVersion[0]}.${olmVersion[1]}.${olmVersion[2]}` : '<not-enabled>';
|
|
||||||
|
|
||||||
let updateButton = null;
|
let updateButton = null;
|
||||||
if (this.state.canUpdate) {
|
if (this.state.canUpdate) {
|
||||||
updateButton = <UpdateCheckButton />;
|
updateButton = <UpdateCheckButton />;
|
||||||
|
@ -275,6 +291,8 @@ export default class HelpUserSettingsTab extends React.Component<IProps, IState>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const { appVersion, olmVersion } = this.getVersionInfo();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="mx_SettingsTab mx_HelpUserSettingsTab">
|
<div className="mx_SettingsTab mx_HelpUserSettingsTab">
|
||||||
<div className="mx_SettingsTab_heading">{ _t("Help & About") }</div>
|
<div className="mx_SettingsTab_heading">{ _t("Help & About") }</div>
|
||||||
|
@ -291,8 +309,15 @@ export default class HelpUserSettingsTab extends React.Component<IProps, IState>
|
||||||
<div className='mx_SettingsTab_section mx_HelpUserSettingsTab_versions'>
|
<div className='mx_SettingsTab_section mx_HelpUserSettingsTab_versions'>
|
||||||
<span className='mx_SettingsTab_subheading'>{ _t("Versions") }</span>
|
<span className='mx_SettingsTab_subheading'>{ _t("Versions") }</span>
|
||||||
<div className='mx_SettingsTab_subsectionText'>
|
<div className='mx_SettingsTab_subsectionText'>
|
||||||
{ _t("%(brand)s version:", { brand }) } { appVersion }<br />
|
<div className="mx_HelpUserSettingsTab_copy">
|
||||||
{ _t("olm version:") } { olmVersion }<br />
|
{ appVersion }<br />
|
||||||
|
{ olmVersion }<br />
|
||||||
|
<AccessibleTooltipButton
|
||||||
|
title={_t("Copy")}
|
||||||
|
onClick={this.onCopyVersionClicked}
|
||||||
|
className="mx_HelpUserSettingsTab_copyButton"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
{ updateButton }
|
{ updateButton }
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -308,12 +333,12 @@ export default class HelpUserSettingsTab extends React.Component<IProps, IState>
|
||||||
<summary>{ _t("Access Token") }</summary><br />
|
<summary>{ _t("Access Token") }</summary><br />
|
||||||
<b>{ _t("Your access token gives full access to your account."
|
<b>{ _t("Your access token gives full access to your account."
|
||||||
+ " Do not share it with anyone." ) }</b>
|
+ " Do not share it with anyone." ) }</b>
|
||||||
<div className="mx_HelpUserSettingsTab_accessToken">
|
<div className="mx_HelpUserSettingsTab_copy">
|
||||||
<code>{ MatrixClientPeg.get().getAccessToken() }</code>
|
<code>{ MatrixClientPeg.get().getAccessToken() }</code>
|
||||||
<AccessibleTooltipButton
|
<AccessibleTooltipButton
|
||||||
title={_t("Copy")}
|
title={_t("Copy")}
|
||||||
onClick={this.onAccessTokenCopyClick}
|
onClick={this.onAccessTokenCopyClick}
|
||||||
className="mx_HelpUserSettingsTab_accessToken_copy"
|
className="mx_HelpUserSettingsTab_copyButton"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</details><br />
|
</details><br />
|
||||||
|
|
|
@ -1276,6 +1276,8 @@
|
||||||
"Deactivate Account": "Deactivate Account",
|
"Deactivate Account": "Deactivate Account",
|
||||||
"Deactivate account": "Deactivate account",
|
"Deactivate account": "Deactivate account",
|
||||||
"Discovery": "Discovery",
|
"Discovery": "Discovery",
|
||||||
|
"%(brand)s version:": "%(brand)s version:",
|
||||||
|
"Olm version:": "Olm version:",
|
||||||
"Legal": "Legal",
|
"Legal": "Legal",
|
||||||
"Credits": "Credits",
|
"Credits": "Credits",
|
||||||
"For help with using %(brand)s, click <a>here</a>.": "For help with using %(brand)s, click <a>here</a>.",
|
"For help with using %(brand)s, click <a>here</a>.": "For help with using %(brand)s, click <a>here</a>.",
|
||||||
|
@ -1289,13 +1291,11 @@
|
||||||
"FAQ": "FAQ",
|
"FAQ": "FAQ",
|
||||||
"Keyboard Shortcuts": "Keyboard Shortcuts",
|
"Keyboard Shortcuts": "Keyboard Shortcuts",
|
||||||
"Versions": "Versions",
|
"Versions": "Versions",
|
||||||
"%(brand)s version:": "%(brand)s version:",
|
"Copy": "Copy",
|
||||||
"olm version:": "olm version:",
|
|
||||||
"Homeserver is": "Homeserver is",
|
"Homeserver is": "Homeserver is",
|
||||||
"Identity server is": "Identity server is",
|
"Identity server is": "Identity server is",
|
||||||
"Access Token": "Access Token",
|
"Access Token": "Access Token",
|
||||||
"Your access token gives full access to your account. Do not share it with anyone.": "Your access token gives full access to your account. Do not share it with anyone.",
|
"Your access token gives full access to your account. Do not share it with anyone.": "Your access token gives full access to your account. Do not share it with anyone.",
|
||||||
"Copy": "Copy",
|
|
||||||
"Clear cache and reload": "Clear cache and reload",
|
"Clear cache and reload": "Clear cache and reload",
|
||||||
"Labs": "Labs",
|
"Labs": "Labs",
|
||||||
"Feeling experimental? Labs are the best way to get things early, test out new features and help shape them before they actually launch. <a>Learn more</a>.": "Feeling experimental? Labs are the best way to get things early, test out new features and help shape them before they actually launch. <a>Learn more</a>.",
|
"Feeling experimental? Labs are the best way to get things early, test out new features and help shape them before they actually launch. <a>Learn more</a>.": "Feeling experimental? Labs are the best way to get things early, test out new features and help shape them before they actually launch. <a>Learn more</a>.",
|
||||||
|
|
Loading…
Reference in New Issue