diff --git a/src/components/LinkButton.tsx b/src/components/LinkButton.tsx new file mode 100644 index 00000000..3efcfa33 --- /dev/null +++ b/src/components/LinkButton.tsx @@ -0,0 +1,53 @@ +// SPDX-License-Identifier: MIT +// Copyright (c) 2020 The Pybricks Authors + +import { Button, Intent, Position, Tooltip } from '@blueprintjs/core'; +import { WithI18nProps, withI18n } from '@shopify/react-i18n'; +import React from 'react'; +import { TooltipId } from './button'; +import en from './button.en.json'; + +export interface LinkButtonProps { + /** A unique id for each instance. */ + readonly id: string; + /** The URL to open. */ + readonly url: string; + /** Tooltip text that appears when hovering over the button. */ + readonly tooltip: TooltipId; + /** Icon shown on the button. */ + readonly icon: string; + /** When true or undefined, the button is enabled. */ + readonly enabled?: boolean; +} + +type Props = LinkButtonProps & WithI18nProps; + +class LinkButton extends React.Component { + render(): JSX.Element { + return ( + + + + ); + } +} + +export default withI18n({ id: 'linkButton', fallback: en, translations: { en } })( + LinkButton, +); diff --git a/src/components/SupportButton.tsx b/src/components/SupportButton.tsx new file mode 100644 index 00000000..b57483b6 --- /dev/null +++ b/src/components/SupportButton.tsx @@ -0,0 +1,24 @@ +// SPDX-License-Identifier: MIT +// Copyright (c) 2020 The Pybricks Authors + +import { connect } from 'react-redux'; +import LinkButton, { LinkButtonProps } from './LinkButton'; +import { TooltipId } from './button'; +import supportIcon from './images/stop.svg'; // FIXME: replace with correct icon + +type StateProps = undefined; +type DispatchProps = undefined; +type OwnProps = Pick; + +const mergeProps = ( + _stateProps: StateProps, + _dispatchProps: DispatchProps, + ownProps: OwnProps, +): LinkButtonProps => ({ + url: 'https://github.com/pybricks/support/issues', + tooltip: TooltipId.Support, + icon: supportIcon, + ...ownProps, +}); + +export default connect(undefined, undefined, mergeProps)(LinkButton); diff --git a/src/components/Toolbar.tsx b/src/components/Toolbar.tsx index 1a00c6c6..3b7608ab 100644 --- a/src/components/Toolbar.tsx +++ b/src/components/Toolbar.tsx @@ -11,6 +11,7 @@ import ReplButton from './ReplButton'; import RunButton from './RunButton'; import SaveAsButton from './SaveAsButton'; import StopButton from './StopButton'; +import SupportButton from './SupportButton'; class Toolbar extends React.Component { render(): JSX.Element { @@ -39,6 +40,7 @@ class Toolbar extends React.Component { + diff --git a/src/components/button.en.json b/src/components/button.en.json index b339c710..077e559f 100644 --- a/src/components/button.en.json +++ b/src/components/button.en.json @@ -9,5 +9,6 @@ "disconnect": { "tooltip": "Disconnect Bluetooth" } }, "flash": { "tooltip": "Flash hub firmware" }, - "docs": { "tooltip": "Show/hide documentation" } + "docs": { "tooltip": "Show/hide documentation" }, + "support": { "tooltip": "Open Pybricks Support web site" } } diff --git a/src/components/button.ts b/src/components/button.ts index bea206e8..b2bac0fd 100644 --- a/src/components/button.ts +++ b/src/components/button.ts @@ -11,4 +11,5 @@ export enum TooltipId { BluetoothConnect = 'bluetooth.connect.tooltip', BluetoothDisconnect = 'bluetooth.disconnect.tooltip', Docs = 'docs.tooltip', + Support = 'support.tooltip', }