diff --git a/desktop/plugins/layout/MultipleSelectionSection.tsx b/desktop/plugins/layout/MultipleSelectionSection.tsx index 214cbb8f1..3290dc55c 100644 --- a/desktop/plugins/layout/MultipleSelectionSection.tsx +++ b/desktop/plugins/layout/MultipleSelectionSection.tsx @@ -13,6 +13,7 @@ import { Element, ElementID, ElementsInspector, + Glyph, colors, styled, } from 'flipper'; @@ -38,6 +39,12 @@ const MultipleSelectorSectionTitle = styled(FlexBox)({ textAlign: 'center', }); +const Chevron = styled(Glyph)({ + marginRight: 4, + marginLeft: -2, + marginBottom: 1, +}); + type MultipleSelectorSectionProps = { initialSelectedElement: ElementID | null | undefined; elements: {[id: string]: Element}; @@ -59,23 +66,30 @@ const MultipleSelectorSection: React.FC = memo( const [selectedId, setSelectedId] = useState( initialSelectedElement, ); + const [collapsed, setCollapsed] = useState(false); return ( - + { + setCollapsed(!collapsed); + }}> + Multiple elements found at the target coordinates - { - setSelectedId(key); - onElementSelected(key); - }} - onElementHovered={onElementHovered} - onElementExpanded={() => {}} - onValueChanged={null} - root={null} - selected={selectedId} - elements={elements} - /> + {!collapsed && ( + { + setSelectedId(key); + onElementSelected(key); + }} + onElementHovered={onElementHovered} + onElementExpanded={() => {}} + onValueChanged={null} + root={null} + selected={selectedId} + elements={elements} + /> + )} ); },