diff --git a/src/plugins/fresco/ImagesCacheOverview.js b/src/plugins/fresco/ImagesCacheOverview.js index 69a7d9a5f..e849ae4dd 100644 --- a/src/plugins/fresco/ImagesCacheOverview.js +++ b/src/plugins/fresco/ImagesCacheOverview.js @@ -19,7 +19,8 @@ import { LoadingIndicator, styled, Select, - Checkbox, + ToggleButton, + Text, } from 'flipper'; import type {ImagesMap} from './ImagePool.js'; import {clipboard} from 'electron'; @@ -33,6 +34,36 @@ function formatKB(bytes: number) { return Math.floor(bytes / 1024) + 'KB'; } +type ToggleProps = {| + label: string, + onClick?: (newValue: boolean) => void, + toggled: boolean, +|}; + +const ToolbarToggleButton = styled(ToggleButton)(_props => ({ + alignSelf: 'center', + marginRight: 4, + minWidth: 30, +})); + +const ToggleLabel = styled(Text)(_props => ({ + whiteSpace: 'nowrap', +})); + +function Toggle(props: ToggleProps) { + return ( + <> + { + props.onClick && props.onClick(!props.toggled); + }} + toggled={props.toggled} + /> + {props.label} + + ); +} + type ImagesCacheOverviewProps = { onColdStartChange: (checked: boolean) => void, coldStartFilter: boolean, @@ -61,12 +92,7 @@ const StyledSelect = styled(Select)(props => ({ marginLeft: 6, marginRight: 6, height: '100%', -})); - -const StyledCheckbox = styled(Checkbox)(props => ({ - marginLeft: 6, - marginRight: 6, - height: '100%', + maxWidth: 164, })); export default class ImagesCacheOverview extends PureComponent< @@ -137,23 +163,27 @@ export default class ImagesCacheOverview extends PureComponent< - - - + + - Show ColdStart Images { render() { return ( - + ); } }