diff --git a/src/renderer/components/+support/index.tsx b/src/renderer/components/+support/index.tsx new file mode 100644 index 0000000000..9bcdff5650 --- /dev/null +++ b/src/renderer/components/+support/index.tsx @@ -0,0 +1,2 @@ +export * from "./support.route" +export * from "./support" diff --git a/src/renderer/components/+support/support.route.ts b/src/renderer/components/+support/support.route.ts new file mode 100644 index 0000000000..f3ac828902 --- /dev/null +++ b/src/renderer/components/+support/support.route.ts @@ -0,0 +1,8 @@ +import { RouteProps } from "react-router"; +import { buildURL } from "../../navigation"; + +export const supportRoute: RouteProps = { + path: "/support" +} + +export const supportURL = buildURL(supportRoute.path) diff --git a/src/renderer/components/+support/support.scss b/src/renderer/components/+support/support.scss new file mode 100644 index 0000000000..473e638558 --- /dev/null +++ b/src/renderer/components/+support/support.scss @@ -0,0 +1,67 @@ +.Support { + position: fixed!important; // Allows to cover ClustersMenu + z-index: 1; + + .WizardLayout { + grid-template-columns: unset; + grid-template-rows: 76px 1fr; + padding: 0; + + .content-col { + padding: $padding * 8 0; + background-color: $clusterSettingsBackground; + + h2 { + margin-bottom: $margin * 2; + + &:not(:first-child) { + margin-top: $margin * 3; + } + } + + .SubTitle { + text-transform: none; + margin: 0!important; + } + + .repos { + position: relative; + + .Badge { + display: flex; + margin: 0; + margin-bottom: 1px; + padding: $padding $padding * 2; + } + } + + .hint { + margin-top: -$margin; + } + } + + span.supportLink { + cursor: pointer; + color: $primary; + text-decoration: underline; + position: relative; + } + } + + .is-mac & { + .WizardLayout .head-col { + padding-top: 32px; + overflow: hidden; + + .Icon { + margin-top: -$margin * 2; + } + } + } + + .Select { + &__control { + box-shadow: 0 0 0 1px $borderFaintColor; + } + } +} \ No newline at end of file diff --git a/src/renderer/components/+support/support.tsx b/src/renderer/components/+support/support.tsx new file mode 100644 index 0000000000..5b2e067984 --- /dev/null +++ b/src/renderer/components/+support/support.tsx @@ -0,0 +1,51 @@ +import "./support.scss" +import React from "react" +import { observer } from "mobx-react" +import { Icon } from "../icon" +import { WizardLayout } from "../layout/wizard-layout" +import { history } from "../../navigation" +import { Trans } from "@lingui/macro" +import { shell } from "electron" +import { issuesTrackerUrl, slackUrl } from "../../../common/vars"; +import { t } from "@lingui/macro"; +import { _i18n } from "../../i18n"; + +@observer +export class Support extends React.Component { + + async componentDidMount() { + window.addEventListener('keydown', this.onEscapeKey); + } + + componentWillUnmount() { + window.removeEventListener('keydown', this.onEscapeKey); + } + + onEscapeKey = (evt: KeyboardEvent) => { + if (evt.code === "Escape") { + evt.stopPropagation(); + history.goBack(); + } + } + + render() { + const header = ( + <> +
{_i18n._(t`Ask a question, see what's being discussed, join the conversation`)} shell.openExternal(slackUrl) }>here
+{_i18n._(t`Review existing issues or open a new one`)} shell.openExternal(issuesTrackerUrl) }>here
+TBD
+