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 = ( + <> +

Support

+ + + ); + return ( +
+ +

Community Slack Channel

+

{_i18n._(t`Ask a question, see what's being discussed, join the conversation`)} shell.openExternal(slackUrl) }>here

+

Report an Issue

+

{_i18n._(t`Review existing issues or open a new one`)} shell.openExternal(issuesTrackerUrl) }>here

+

Commercial Support

+

TBD

+
+
+ ); + } +} diff --git a/src/renderer/components/cluster-manager/bottom-bar.scss b/src/renderer/components/cluster-manager/bottom-bar.scss index 359c123836..79f1f7e769 100644 --- a/src/renderer/components/cluster-manager/bottom-bar.scss +++ b/src/renderer/components/cluster-manager/bottom-bar.scss @@ -10,4 +10,9 @@ --flex-gap: #{$spacing}; cursor: pointer; } + + #support { + --flex-gap: #{$spacing}; + cursor: pointer; + } } diff --git a/src/renderer/components/cluster-manager/bottom-bar.tsx b/src/renderer/components/cluster-manager/bottom-bar.tsx index abbe81ec92..db52f04856 100644 --- a/src/renderer/components/cluster-manager/bottom-bar.tsx +++ b/src/renderer/components/cluster-manager/bottom-bar.tsx @@ -5,6 +5,9 @@ import { Icon } from "../icon"; import { WorkspaceMenu } from "../+workspaces/workspace-menu"; import { workspaceStore } from "../../../common/workspace-store"; +import { supportURL } from "../+support/support.route"; +import { navigate } from "../../navigation"; + @observer export class BottomBar extends React.Component { render() { @@ -16,6 +19,13 @@ export class BottomBar extends React.Component { {currentWorkspace.name} +
+ navigate(supportURL())} + /> +
) } diff --git a/src/renderer/components/cluster-manager/cluster-manager.tsx b/src/renderer/components/cluster-manager/cluster-manager.tsx index c658a31aa4..02e2441211 100644 --- a/src/renderer/components/cluster-manager/cluster-manager.tsx +++ b/src/renderer/components/cluster-manager/cluster-manager.tsx @@ -7,6 +7,7 @@ import { ClustersMenu } from "./clusters-menu"; import { BottomBar } from "./bottom-bar"; import { LandingPage, landingRoute, landingURL } from "../+landing-page"; import { Preferences, preferencesRoute } from "../+preferences"; +import { Support, supportRoute } from "../+support"; import { Workspaces, workspacesRoute } from "../+workspaces"; import { AddCluster, addClusterRoute } from "../+add-cluster"; import { ClusterView } from "./cluster-view"; @@ -59,6 +60,7 @@ export class ClusterManager extends React.Component { + diff --git a/src/renderer/components/icon/support.svg b/src/renderer/components/icon/support.svg new file mode 100644 index 0000000000..e5e775c32e --- /dev/null +++ b/src/renderer/components/icon/support.svg @@ -0,0 +1 @@ + \ No newline at end of file