From f22e37313679e044c9d9fdda0a64d2eb7865b0b3 Mon Sep 17 00:00:00 2001 From: Michel Weststrate Date: Mon, 18 Nov 2019 02:18:04 -0800 Subject: [PATCH] Improve support request details import form Summary: Created as standard layout that can be used for both the import and export form Standardized components used, so that we work towards a Design Framework that is consistent. Took inspiration from some existing plugins. Also fixed weird sidebar transparency. Reviewed By: passy Differential Revision: D18504078 fbshipit-source-id: 7649abf7aa3eba8ba635337a41274bba93738e81 --- src/chrome/MainSidebar.tsx | 22 ++------------ src/ui/components/BottomSpaced.tsx | 21 +++++++++++++ src/ui/components/CenteredView.tsx | 40 +++++++++++++++++++++++++ src/ui/components/Labeled.tsx | 25 ++++++++++++++++ src/ui/components/RoundedSection.tsx | 45 ++++++++++++++++++++++++++++ src/ui/components/SmallText.tsx | 24 +++++++++++++++ src/ui/index.tsx | 6 ++++ src/utils/exportData.tsx | 7 +++++ src/utils/icons.js | 2 +- 9 files changed, 171 insertions(+), 21 deletions(-) create mode 100644 src/ui/components/BottomSpaced.tsx create mode 100644 src/ui/components/CenteredView.tsx create mode 100644 src/ui/components/Labeled.tsx create mode 100644 src/ui/components/RoundedSection.tsx create mode 100644 src/ui/components/SmallText.tsx diff --git a/src/chrome/MainSidebar.tsx b/src/chrome/MainSidebar.tsx index 5292b228a..ef00ae5ea 100644 --- a/src/chrome/MainSidebar.tsx +++ b/src/chrome/MainSidebar.tsx @@ -283,7 +283,6 @@ class MainSidebar extends PureComponent { staticView, selectPlugin, setStaticView, - windowIsFocused, numNotifications, uninitializedClients, } = this.props; @@ -291,12 +290,7 @@ class MainSidebar extends PureComponent { const client: Client | undefined = getClientById(clients, selectedApp); return ( - + {selectedDevice ? ( <> @@ -451,18 +445,6 @@ class MainSidebar extends PureComponent { const {staticView, setStaticView} = this.props; return ( <> - - Snapshot imported from: -
- {selectedDevice.source} - {this.state.showSupportForm && (selectedDevice as ArchivedDevice).supportRequestDetails && ( { color: colors.light30, fontStyle: 'italic', }}> - star your favorite plugins! + Star your favorite plugins! ) : ( diff --git a/src/ui/components/BottomSpaced.tsx b/src/ui/components/BottomSpaced.tsx new file mode 100644 index 000000000..95f2055ac --- /dev/null +++ b/src/ui/components/BottomSpaced.tsx @@ -0,0 +1,21 @@ +/** + * 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 styled from 'react-emotion'; +import FlexColumn from './FlexColumn'; + +/** + * Container that applies a standardized bottom margin for vertical spacing + */ +const BottomSpaced = styled(FlexColumn)({ + marginBottom: 10, +}); +BottomSpaced.displayName = 'BottomSpaced'; + +export default BottomSpaced; diff --git a/src/ui/components/CenteredView.tsx b/src/ui/components/CenteredView.tsx new file mode 100644 index 000000000..3e562b08e --- /dev/null +++ b/src/ui/components/CenteredView.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'; +import styled from 'react-emotion'; +import {colors} from './colors'; +import FlexColumn from './FlexColumn'; + +const Container = styled(FlexColumn)({ + height: '100%', + overflow: 'auto', + backgroundColor: colors.light02, +}); +Container.displayName = 'CenteredView:Container'; + +const ContentWrapper = styled('div')({ + width: 500, + marginLeft: 'auto', + marginRight: 'auto', + padding: '20px 0', +}); +ContentWrapper.displayName = 'CenteredView:ContentWrapper'; + +/** + * CenteredView creates a scrollable container with fixed with, centered content. + * Recommended to combine with RoundedSection + */ +const CenteredView: React.FC<{}> = ({children}) => ( + + {children} + +); + +export default CenteredView; diff --git a/src/ui/components/Labeled.tsx b/src/ui/components/Labeled.tsx new file mode 100644 index 000000000..f6ac9a677 --- /dev/null +++ b/src/ui/components/Labeled.tsx @@ -0,0 +1,25 @@ +/** + * 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 FlexColumn from './FlexColumn'; +import Label from './Label'; +import BottomSpaced from './BottomSpaced'; + +/** + * Vertically arranged section that starts with a label and includes standard margins + */ +const Labeled: React.FC<{title: string}> = ({title, children}) => ( + + + {children} + +); + +export default Labeled; diff --git a/src/ui/components/RoundedSection.tsx b/src/ui/components/RoundedSection.tsx new file mode 100644 index 000000000..1620fcdbc --- /dev/null +++ b/src/ui/components/RoundedSection.tsx @@ -0,0 +1,45 @@ +/** + * 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 styled from 'react-emotion'; +import {colors} from './colors'; +import Heading from './Heading'; + +const Divider = styled('hr')({ + margin: '16px -20px 20px -20px', + border: 'none', + borderTop: `1px solid ${colors.light05}`, +}); +Divider.displayName = 'RoundedSection:Divider'; + +const Container = styled('div')({ + background: colors.white, + borderRadius: 10, + boxShadow: '0 1px 3px rgba(0,0,0,0.25)', + marginBottom: '20px', + width: '100%', + padding: 20, +}); +Container.displayName = 'RoundedSection:Container'; + +/** + * Section with a title, dropshadow, rounded border and white backgorund. + * + * Recommended to be used inside a CenteredView + */ +const RoundedSection: React.FC<{title: string}> = ({title, children}) => ( + + {title} + + {children} + +); + +export default RoundedSection; diff --git a/src/ui/components/SmallText.tsx b/src/ui/components/SmallText.tsx new file mode 100644 index 000000000..5a6e668ba --- /dev/null +++ b/src/ui/components/SmallText.tsx @@ -0,0 +1,24 @@ +/** + * 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 styled from 'react-emotion'; +import {colors} from './colors'; +import Text from './Text'; + +/** + * Subtle text that should not draw attention + */ +const SmallText = styled(Text)({ + color: colors.light20, + size: 10, + fontStyle: 'italic', +}); +SmallText.displayName = 'SmallText'; + +export default SmallText; diff --git a/src/ui/index.tsx b/src/ui/index.tsx index 53f7a3d49..2f134f85b 100644 --- a/src/ui/index.tsx +++ b/src/ui/index.tsx @@ -159,3 +159,9 @@ export {Console} from './components/console'; export {default as Sheet} from './components/Sheet'; export {StarButton} from './components/StarButton'; + +export {default as BottomSpaced} from './components/BottomSpaced'; +export {default as SmallText} from './components/SmallText'; +export {default as Labeled} from './components/Labeled'; +export {default as RoundedSection} from './components/RoundedSection'; +export {default as CenteredView} from './components/CenteredView'; diff --git a/src/utils/exportData.tsx b/src/utils/exportData.tsx index a6f1b0b8d..56b0d091c 100644 --- a/src/utils/exportData.tsx +++ b/src/utils/exportData.tsx @@ -32,6 +32,7 @@ import {tryCatchReportPlatformFailures} from './metrics'; import {promisify} from 'util'; import promiseTimeout from './promiseTimeout'; import {Idler} from './Idler'; +import {setStaticView} from '../reducers/connections'; export const IMPORT_FLIPPER_TRACE_EVENT = 'import-flipper-trace'; export const EXPORT_FLIPPER_TRACE_EVENT = 'export-flipper-trace'; export const EXPORT_FLIPPER_TRACE_TIME_SERIALIZATION_EVENT = `${EXPORT_FLIPPER_TRACE_EVENT}:serialization`; @@ -664,6 +665,12 @@ export function importDataToStore(source: string, data: string, store: Store) { ), }); }); + if (supportRequestDetails) { + store.dispatch( + // Late require to avoid circular dependency issue + setStaticView(require('../fb-stubs/SupportRequestDetails').default), + ); + } } export const importFileToStore = (file: string, store: Store) => { diff --git a/src/utils/icons.js b/src/utils/icons.js index a70a388ff..8921462e5 100644 --- a/src/utils/icons.js +++ b/src/utils/icons.js @@ -48,7 +48,7 @@ const ICONS = { desktop: [12], directions: [12], internet: [12], - mobile: [12, 32], + mobile: [12, 16, 32], posts: [20], profile: [12], rocket: [20],