add help links

This commit is contained in:
David Lechner
2021-01-15 16:07:11 -06:00
parent 355d09ea31
commit b15d00f797
7 changed files with 103 additions and 10 deletions
+3 -1
View File
@@ -16,6 +16,7 @@ import {
pybricksCopyright,
pybricksWebsiteUrl,
} from '../settings/ui';
import ExternalLinkIcon from './ExternalLinkIcon';
import { AboutStringId } from './about-i18n';
import en from './about-i18n.en.json';
@@ -47,7 +48,8 @@ class AboutDialog extends React.Component<AboutDialogProps> {
</p>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<AnchorButton href={pybricksWebsiteUrl} target="blank_">
{i18n.translate(AboutStringId.WebsiteButtonLabel)}
{i18n.translate(AboutStringId.WebsiteButtonLabel)}&nbsp;
<ExternalLinkIcon />
</AnchorButton>
</div>
</div>
+21
View File
@@ -0,0 +1,21 @@
// SPDX-License-Identifier: MIT
// Copyright (c) 2021 The Pybricks Authors
// Icon for indicating external links
import { Icon } from '@blueprintjs/core';
import React from 'react';
import './external-link.scss';
class ExternalLinkIcon extends React.Component {
render(): JSX.Element {
return (
<sup className="pb-external-link">
<Icon icon="share" iconSize={12} />
</sup>
);
}
}
export default ExternalLinkIcon;
+49 -9
View File
@@ -2,7 +2,9 @@
// Copyright (c) 2021 The Pybricks Authors
import {
AnchorButton,
Button,
ButtonGroup,
Classes,
Drawer,
FormGroup,
@@ -17,9 +19,15 @@ import { Action, Dispatch } from '../actions';
import { closeSettings, openAboutDialog } from '../actions/app';
import { setBoolean } from '../actions/settings';
import { RootState } from '../reducers';
import { tooltipDelay } from '../settings/ui';
import {
pybricksBugReportsUrl,
pybricksGitterUrl,
pybricksSupportUrl,
tooltipDelay,
} from '../settings/ui';
import { SettingId } from '../settings/user';
import { isMacOS } from '../utils/os';
import ExternalLinkIcon from './ExternalLinkIcon';
import { SettingsStringId } from './settings-i18n';
import en from './settings-i18n.en.json';
@@ -143,16 +151,48 @@ class SettingsDrawer extends React.PureComponent<SettingsProps> {
</Tooltip>
</FormGroup>
<FormGroup label={i18n.translate(SettingsStringId.HelpTitle)}>
<Button
icon="info-sign"
<ButtonGroup
minimal={true}
onClick={() => {
onAbout();
return true;
}}
vertical={true}
alignText="left"
>
{i18n.translate(SettingsStringId.HelpAboutLabel)}
</Button>
<AnchorButton
icon="help"
href={pybricksSupportUrl}
target="blank_"
>
{i18n.translate(SettingsStringId.HelpSupportLabel)}
&nbsp;
<ExternalLinkIcon />
</AnchorButton>
<AnchorButton
icon="chat"
href={pybricksGitterUrl}
target="blank_"
>
{i18n.translate(SettingsStringId.HelpChatLabel)}
&nbsp;
<ExternalLinkIcon />
</AnchorButton>
<AnchorButton
icon="virus"
href={pybricksBugReportsUrl}
target="blank_"
>
{i18n.translate(SettingsStringId.HelpBugsLabel)}
&nbsp;
<ExternalLinkIcon />
</AnchorButton>
<Button
icon="info-sign"
onClick={() => {
onAbout();
return true;
}}
>
{i18n.translate(SettingsStringId.HelpAboutLabel)}
</Button>
</ButtonGroup>
</FormGroup>
</div>
</div>
+9
View File
@@ -0,0 +1,9 @@
// SPDX-License-Identifier: MIT
// Copyright (c) 2021 The Pybricks Authors
@import '../variables.scss';
// override some button magic in case this is used in a button
.#{$ns}-button .pb-external-link .#{$ns}-icon:first-child:last-child {
margin: 0;
}
+9
View File
@@ -24,6 +24,15 @@
},
"help": {
"title": "Help",
"support": {
"label": "Support"
},
"chat": {
"label": "Chat"
},
"bugs": {
"label": "Bug Reports"
},
"about": {
"label": "About"
}
+3
View File
@@ -15,5 +15,8 @@ export enum SettingsStringId {
FirmwareCurrentProgramLabel = 'settings.firmware.flash-current-program.label',
FirmwareCurrentProgramTooltip = 'settings.firmware.flash-current-program.tooltip',
HelpTitle = 'settings.help.title',
HelpSupportLabel = 'settings.help.support.label',
HelpChatLabel = 'settings.help.chat.label',
HelpBugsLabel = 'settings.help.bugs.label',
HelpAboutLabel = 'settings.help.about.label',
}
+9
View File
@@ -12,6 +12,15 @@ export const appName = 'Pybricks Code';
/** URL to main Pybricks website. */
export const pybricksWebsiteUrl = 'https://pybricks.com';
/** URL to Pybricks support site. */
export const pybricksSupportUrl = 'https://github.com/pybricks/support/discussions';
/** URL to Pybricks bug report site. */
export const pybricksBugReportsUrl = 'https://github.com/pybricks/support/issues';
/** URL for Pybricks community chat on Gitter */
export const pybricksGitterUrl = 'https://gitter.im/pybricks/community';
/** Pybricks copyright statement. */
export const pybricksCopyright = 'Copyright (c) 2020-2021 The Pybricks Authors';