diff --git a/desktop/app/package.json b/desktop/app/package.json index cb2fcc207..3f17d825d 100644 --- a/desktop/app/package.json +++ b/desktop/app/package.json @@ -10,6 +10,7 @@ "privileged": true, "license": "MIT", "dependencies": { + "@ant-design/icons": "^4.2.2", "@emotion/core": "^10.0.22", "@emotion/styled": "^10.0.23", "@iarna/toml": "^2.2.5", diff --git a/desktop/app/src/sandy-chrome/LeftRail.tsx b/desktop/app/src/sandy-chrome/LeftRail.tsx new file mode 100644 index 000000000..cdc8b819f --- /dev/null +++ b/desktop/app/src/sandy-chrome/LeftRail.tsx @@ -0,0 +1,132 @@ +/** + * 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, FlexColumn} from 'flipper'; +import {Button, Divider, Badge, Tooltip} from 'antd'; +import { + MobileFilled, + AppstoreOutlined, + BellOutlined, + FileExclamationOutlined, + LoginOutlined, + BugOutlined, + SettingOutlined, + QuestionCircleOutlined, + MedicineBoxOutlined, +} from '@ant-design/icons'; +import {SidebarLeft, SidebarRight} from './SandyIcons'; + +const LeftRailContainer = styled(FlexColumn)({ + width: 48, + boxShadow: 'inset -1px 0px 0px rgba(0, 0, 0, 0.1)', + justifyContent: 'space-between', +}); +LeftRailContainer.displayName = 'LeftRailContainer'; + +const LeftRailSection = styled(FlexColumn)({ + padding: '8px 0px', + alignItems: 'center', +}); +LeftRailSection.displayName = 'LeftRailSection'; + +const LeftRailButtonElem = styled(Button)<{small?: boolean}>(({small}) => ({ + width: 36, + height: 36, + margin: small ? 2 : 6, + padding: '5px 0', + border: 'none', +})); +LeftRailButtonElem.displayName = 'LeftRailButtonElem'; + +function LeftRailButton({ + icon, + small, + active, + count, + title, +}: { + icon?: React.ReactElement; + small?: boolean; + active?: boolean; + count?: number; + title: string; +}) { + let iconElement = + icon && cloneElement(icon, {style: {fontSize: small ? 16 : 24}}); + if (count !== undefined) { + iconElement = {iconElement}; + } + return ( + + + + ); +} + +const LeftRailDivider = styled(Divider)({ + margin: 10, + width: 36, + minWidth: 36, +}); +LeftRailDivider.displayName = 'LeftRailDividier'; + +export function LeftRail() { + return ( + + + } active title="App Inspect" /> + } title="Plugin Manager" /> + } + title="Notifications" + /> + + } + title="Flipper Logs" + /> + + + } + small + title="Setup Doctor" + /> + } + small + title="Help / Start Screen" + /> + } small title="Settings" /> + } + small + title="Feedback / Bug Reporter" + /> + } + small + title="Right Sidebar Toggle" + /> + } + small + title="Left Sidebar Toggle" + /> + } title="Log In" /> + + + ); +} diff --git a/desktop/app/src/sandy-chrome/SandyApp.tsx b/desktop/app/src/sandy-chrome/SandyApp.tsx new file mode 100644 index 000000000..bbbdaec5c --- /dev/null +++ b/desktop/app/src/sandy-chrome/SandyApp.tsx @@ -0,0 +1,139 @@ +/** + * 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 from 'react'; +import {connect} from 'react-redux'; +import {State as Store} from '../reducers'; +import {Settings, updateSettings} from '../reducers/settings'; +import {styled, FlexColumn, colors, Text} from 'flipper'; +import {DatePicker, Button} from 'antd'; +import {Layout, FlexBox} from '../ui'; + +import {LeftRail} from './LeftRail'; +import {CloseCircleOutlined} from '@ant-design/icons'; + +type StateFromProps = {settings: Settings}; +type DispatchFromProps = {disableSandy: (settings: Settings) => void}; +type OwnProps = {}; + +type Props = StateFromProps & DispatchFromProps & OwnProps; + +const Container = styled(FlexColumn)({ + height: '100%', + width: '100%', + justifyContent: 'center', + alignItems: 'center', + backgroundColor: colors.light02, +}); + +const Box = styled(FlexColumn)({ + justifyContent: 'center', + alignItems: 'center', + background: colors.white, + borderRadius: 10, + boxShadow: '0 1px 3px rgba(0,0,0,0.25)', + paddingBottom: 16, +}); + +const AnnoucementText = styled(Text)({ + fontSize: 24, + fontWeight: 300, + textAlign: 'center', + margin: 16, +}); + +const LeftContainer = styled(FlexBox)({ + height: '100% ', +}); + +// This component should be dropped, and insetTitlebar should be removed from Electron startup once Sandy is the default +const TemporarilyTitlebar = styled('div')<{focused?: boolean}>(({focused}) => ({ + textAlign: 'center', + userSelect: 'none', + height: '38px', + lineHeight: '38px', + fontSize: '10pt', + color: colors.macOSTitleBarIcon, + background: true + ? `linear-gradient(to bottom, ${colors.macOSTitleBarBackgroundTop} 0%, ${colors.macOSTitleBarBackgroundBottom} 100%)` + : colors.macOSTitleBarBackgroundBlur, + borderBottom: `1px solid ${ + focused ? colors.macOSTitleBarBorder : colors.macOSTitleBarBorderBlur + }`, + WebkitAppRegion: 'drag', +})); + +function SandyApp(props: Props) { + return ( + + + [Sandy] Flipper{' '} + + + + + + + + + + + + + + + + ); +} + +function LeftMenu() { + return
LeftMenu
; +} + +function RightMenu() { + return
RightMenu
; +} + +function MainContainer({children}: any) { + return ( +
+ MainContainer +
+ {children} +
+ ); +} + +function TemporarilyContent(props: Props) { + return ( + + + + New UI for Flipper, Sandy Project! Nothing to see now. Go back to + current Flipper + + + + + ); +} + +export default connect( + ({settingsState}) => ({settings: settingsState}), + (dispatch) => ({ + disableSandy: (settings: Settings) => { + console.log(settings); + dispatch(updateSettings({...settings, enableSandy: false})); + }, + }), +)(SandyApp); diff --git a/desktop/app/src/sandy-chrome/SandyIcons.tsx b/desktop/app/src/sandy-chrome/SandyIcons.tsx new file mode 100644 index 000000000..693bdc11f --- /dev/null +++ b/desktop/app/src/sandy-chrome/SandyIcons.tsx @@ -0,0 +1,40 @@ +/** + * 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 from 'react'; + +export const SidebarLeft = (props: React.SVGProps) => ( + + + + +); + +export const SidebarRight = (props: React.SVGProps) => ( + + + + +); diff --git a/desktop/themes/dark.less b/desktop/themes/dark.less index 9bd20bd2a..065a83933 100644 --- a/desktop/themes/dark.less +++ b/desktop/themes/dark.less @@ -1,4 +1,64 @@ @import '../node_modules/antd/lib/style/themes/dark.less'; -@import '../node_modules/antd/dist/antd.less'; +@import '../node_modules/antd/dist/antd.less'; -@primary-color: yellow; +/* Based on: https://www.figma.com/file/4e6BMdm2SuZ1L7FSuOPQVC/Flipper?node-id=620%3A84636 */ +@border-radius-base: 6px; + +@font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, + 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', + 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; +@code-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, + monospace; + +// Link Text & Icon +@primary-color: @purple-8; +// Success +@success-color: @green-7; +// Negative +@error-color: @red-6; +@highlight-color: @red-6; +@badge-color: @red-6; +// Warning +@warning-color: @gold-6; + +// Primary Text & Icon +@text-color: @white; +// Secondary Text & Icon +@text-color-secondary: fade(@white, 60%); +// Placeholder Text & Icon +@input-placeholder-color: fade(@white, 45%); +// Disabled & Icon +@disabled-color: fade(@white, 25%); +// Background - default +@body-background: @black; // Background color for `` +// @component-background: @black; // Base background color for most components +// Background - Wash +@normal-color:fade( + @white, + 5% + ); +// @background-color-light: fade( +// @white, +// 5% +// ); // background of header and selected item +// Background - Wash +// @background-color-base: fade(@white, 10%); // Default grey background color +// Background - Primary Button +// @btn-primary-bg: @primary-color; +// Background - Primary Hoever +// ??? : @purple-7 +// Background - Default Button +// @btn-default-bg: fade(@white, 10%); +// Background - Default Hover +// @btn-text-hover-bg: fade(@white, 15%); +// Background - Button Disabled +// @btn-disable-bg: fade(@white, 10%); +// Background - Transparent Hover +// @btn-link-hover-bg: fade(@white, 10%); +// Background - Navigation Active +// ???: fade(@white, 8%) +// Dividers and Borders +@divider-color: fade(@white, 10%); + +@tooltip-color: @black; +@tooltip-bg: @white; diff --git a/desktop/themes/light.less b/desktop/themes/light.less index 77d1fb2aa..bc479b3b0 100644 --- a/desktop/themes/light.less +++ b/desktop/themes/light.less @@ -1,4 +1,63 @@ @import '../node_modules/antd/lib/style/themes/default.less'; -@import '../node_modules/antd/dist/antd.less'; +@import '../node_modules/antd/dist/antd.less'; -@primary-color: red; +/* Based on: https://www.figma.com/file/4e6BMdm2SuZ1L7FSuOPQVC/Flipper?node-id=620%3A84636 */ +@border-radius-base: 6px; + +@font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, + 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', + 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; +@code-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, + monospace; + +// Link Text & Icon +@primary-color: @purple-7; +// Success +@success-color: @green-7; +// Negative +@error-color: @red-6; +@highlight-color: @red-6; +// Warning +@warning-color: @gold-6; + +// Primary Text & Icon +@text-color: @black; +// Secondary Text & Icon +@text-color-secondary: fade(@black, 60%); +// Placeholder Text & Icon +@input-placeholder-color: fade(@black, 45%); +// Disabled & Icon +@disabled-color: fade(@black, 25%); +// Background - default +@body-background: @white; // Background color for `` +// @component-background: @white; // Base background color for most components +// Background - Wash +@normal-color:fade( + @black, + 5% + ); +// @background-color-light: fade( +// @black, +// 5% +// ); // background of header and selected item +// Background - Wash +// @background-color-base: fade(@black, 10%); // Default grey background color +// Background - Primary Button +// @btn-primary-bg: @primary-color; +// Background - Primary Hoever +// ??? : @purple-7 +// Background - Default Button +// @btn-default-bg: fade(@black, 10%); +// Background - Default Hover +// @btn-text-hover-bg: fade(@black, 15%); +// Background - Button Disabled +// @btn-disable-bg: fade(@black, 10%); +// Background - Transparent Hover +// @btn-link-hover-bg: fade(@black, 10%); +// Background - Navigation Active +// ???: fade(@black, 8%) +// Dividers and Borders +@divider-color: fade(@black, 10%); + +@tooltip-color: @white; +@tooltip-bg: @black;