diff --git a/desktop/app/src/reducers/settings.tsx b/desktop/app/src/reducers/settings.tsx index ecc53dd15..ef672cd8d 100644 --- a/desktop/app/src/reducers/settings.tsx +++ b/desktop/app/src/reducers/settings.tsx @@ -45,6 +45,7 @@ export type Settings = { }; enableSandy: boolean; darkMode: boolean; + showWelcomeAtStartup: boolean; }; export type Action = @@ -79,6 +80,7 @@ const initialState: Settings = { }, enableSandy: false, darkMode: false, + showWelcomeAtStartup: true, }; export default function reducer( diff --git a/desktop/app/src/sandy-chrome/LeftRail.tsx b/desktop/app/src/sandy-chrome/LeftRail.tsx index a803bc449..e35756aaf 100644 --- a/desktop/app/src/sandy-chrome/LeftRail.tsx +++ b/desktop/app/src/sandy-chrome/LeftRail.tsx @@ -26,6 +26,7 @@ import {useDispatch, useStore} from '../utils/useStore'; import {toggleLeftSidebarVisible} from '../reducers/application'; import {theme} from './theme'; import SettingsSheet from '../chrome/SettingsSheet'; +import WelcomeScreen from './WelcomeScreen'; const LeftRailContainer = styled(FlexColumn)({ background: theme.backgroundDefault, @@ -119,11 +120,7 @@ export function LeftRail() { small title="Setup Doctor" /> - } - small - title="Help / Start Screen" - /> + } @@ -180,3 +177,32 @@ function ShowSettingsButton() { ); } + +function WelcomeScreenButton() { + const settings = useStore((state) => state.settingsState); + const showWelcomeScreenAtStartup = settings.showWelcomeAtStartup; + const dispatch = useDispatch(); + const [visible, setVisible] = useState(showWelcomeScreenAtStartup); + + return ( + <> + } + small + title="Help / Start Screen" + onClick={() => setVisible(true)} + /> + setVisible(false)} + showAtStartup={showWelcomeScreenAtStartup} + onCheck={(value) => + dispatch({ + type: 'UPDATE_SETTINGS', + payload: {...settings, showWelcomeAtStartup: value}, + }) + } + /> + + ); +} diff --git a/desktop/app/src/sandy-chrome/WelcomeScreen.tsx b/desktop/app/src/sandy-chrome/WelcomeScreen.tsx new file mode 100644 index 000000000..6dc442c12 --- /dev/null +++ b/desktop/app/src/sandy-chrome/WelcomeScreen.tsx @@ -0,0 +1,159 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + */ + +import React, {cloneElement} from 'react'; +import {styled, FlexRow, FlexColumn} from 'flipper'; +import {Modal, Button, Image, Checkbox, Space, Typography} from 'antd'; +import { + RocketOutlined, + AppstoreAddOutlined, + CodeOutlined, + BugOutlined, +} from '@ant-design/icons'; +import {theme} from './theme'; + +const {Text, Title} = Typography; + +import constants from '../fb-stubs/constants'; +import isProduction from '../utils/isProduction'; +import isHeadless from '../utils/isHeadless'; +const {shell, remote} = !isHeadless() + ? require('electron') + : {shell: undefined, remote: undefined}; + +const RowContainer = styled(FlexRow)({ + alignItems: 'flex-start', + padding: `${theme.space.small}px`, + cursor: 'pointer', + '&:hover, &:focus, &:active': { + backgroundColor: theme.backgroundTransparentHover, + borderRadius: theme.borderRadius, + textDecoration: 'none', + }, +}); + +function Row(props: { + icon: React.ReactElement; + title: string; + subtitle: string; + onClick?: () => void; +}) { + return ( + + + {cloneElement(props.icon, { + style: {fontSize: 36, color: theme.primaryColor}, + })} + + + {props.title} + + {props.subtitle} + + + + ); +} + +const FooterContainer = styled(FlexRow)({ + justifyContent: 'space-between', + alignItems: 'center', +}); + +function WelcomeFooter({ + onClose, + checked, + onCheck, +}: { + onClose: () => void; + checked: boolean; + onCheck: (value: boolean) => void; +}) { + return ( + + onCheck(e.target.checked)}> + + Show this when app opens (or use ? icon on left) + + + + + ); +} + +const openExternal = (url: string) => () => shell && shell.openExternal(url); + +export default function WelcomeScreen({ + visible, + onClose, + showAtStartup, + onCheck, +}: { + visible: boolean; + onClose: () => void; + showAtStartup: boolean; + onCheck: (value: boolean) => void; +}) { + return ( + + } + onCancel={onClose}> + + + Welcome to Flipper + + {isProduction() && remote + ? `Version ${remote.app.getVersion()}` + : 'Development Mode'} + + + + } + title="Using Flipper" + subtitle="Learn how Flipper can help you debug your App" + onClick={openExternal('https://fbflipper.com/docs/features/index')} + /> + } + title="Create Your Own Plugin" + subtitle="Get started with these pointers" + onClick={openExternal('https://fbflipper.com/docs/tutorial/intro')} + /> + } + title="Add Flipper Support to Your App" + subtitle="Get started with these pointers" + onClick={openExternal( + 'https://fbflipper.com/docs/getting-started/index', + )} + /> + } + title="Contributing and Feedback" + subtitle="Report issues and help us improve Flipper" + onClick={openExternal(constants.FEEDBACK_GROUP_LINK)} + /> + + + ); +} diff --git a/desktop/app/src/sandy-chrome/theme.tsx b/desktop/app/src/sandy-chrome/theme.tsx index 5315d04ad..31d13c33f 100644 --- a/desktop/app/src/sandy-chrome/theme.tsx +++ b/desktop/app/src/sandy-chrome/theme.tsx @@ -29,4 +29,7 @@ export const theme = { middle: 16, large: 24, } as const, + fontSize: { + smallBody: '12px', + }, };