diff --git a/src/components/AboutDialog.tsx b/src/components/AboutDialog.tsx index 261098e1..162acf9e 100644 --- a/src/components/AboutDialog.tsx +++ b/src/components/AboutDialog.tsx @@ -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 {

- {i18n.translate(AboutStringId.WebsiteButtonLabel)} + {i18n.translate(AboutStringId.WebsiteButtonLabel)}  +
diff --git a/src/components/ExternalLinkIcon.tsx b/src/components/ExternalLinkIcon.tsx new file mode 100644 index 00000000..810b968a --- /dev/null +++ b/src/components/ExternalLinkIcon.tsx @@ -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 ( + + + + ); + } +} + +export default ExternalLinkIcon; diff --git a/src/components/SettingsDrawer.tsx b/src/components/SettingsDrawer.tsx index b1d4b7bf..0b10358c 100644 --- a/src/components/SettingsDrawer.tsx +++ b/src/components/SettingsDrawer.tsx @@ -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 { - + + {i18n.translate(SettingsStringId.HelpSupportLabel)} +   + + + + {i18n.translate(SettingsStringId.HelpChatLabel)} +   + + + + {i18n.translate(SettingsStringId.HelpBugsLabel)} +   + + + + diff --git a/src/components/external-link.scss b/src/components/external-link.scss new file mode 100644 index 00000000..fb81f8d9 --- /dev/null +++ b/src/components/external-link.scss @@ -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; +} diff --git a/src/components/settings-i18n.en.json b/src/components/settings-i18n.en.json index f13be9a3..8e30f8bf 100644 --- a/src/components/settings-i18n.en.json +++ b/src/components/settings-i18n.en.json @@ -24,6 +24,15 @@ }, "help": { "title": "Help", + "support": { + "label": "Support" + }, + "chat": { + "label": "Chat" + }, + "bugs": { + "label": "Bug Reports" + }, "about": { "label": "About" } diff --git a/src/components/settings-i18n.ts b/src/components/settings-i18n.ts index 48a11306..13c68db1 100644 --- a/src/components/settings-i18n.ts +++ b/src/components/settings-i18n.ts @@ -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', } diff --git a/src/settings/ui.ts b/src/settings/ui.ts index 9bb44b99..4ae33657 100644 --- a/src/settings/ui.ts +++ b/src/settings/ui.ts @@ -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';