jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve multiple element selector UI

Browse Source 
Summary:
Layer selection is pretty easy to miss, as reported in for example: https://fb.workplace.com/groups/flippersupport/permalink/1098169193997071/

Moved the layer selection to the top of the view and gave it some highlighting + dynamic height. The section is no longer collapsible.

Changelog: [Layout] Make the layer selection more prominent

Reviewed By: priteshrnandgaonkar

Differential Revision: D27708650

fbshipit-source-id: c86a55c3a20794aee86e64b6766b2ca4dd6b563f
This commit is contained in:
Michel Weststrate
2021-04-15 07:46:28 -07:00
committed by Facebook GitHub Bot
parent 5db2ef1275
commit 0fe879c838
5 changed files with 62 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
desktop/plugins/public/layout/__tests__/MultipleSelectionSection.node.tsx
View File

@@ -40,30 +40,6 @@ test('rendering a single element', () => {
expect(res.queryAllByText(name).length).toBe(1);
});
test('collapsing an element', () => {
const id = 'id1';
const name = 'id_name';
const element: Element = {...dummyElmentData, id, name};
const res = render(
<MultipleSelectorSection
initialSelectedElement={null}
elements={{[id]: element}}
onElementSelected={() => {}}
onElementHovered={null}
/>,
);
expect(res.queryAllByText(name).length).toBe(1);
// collapse the view
fireEvent.click(res.getByText(TITLE_STRING));
expect(res.queryAllByText(name).length).toBe(0);
// re-expand the view
fireEvent.click(res.getByText(TITLE_STRING));
expect(res.queryAllByText(name).length).toBe(1);
});
test('clicking on elements', () => {
const ids = ['id1', 'id2', 'id3'];
const names = ['id_name_first', 'id_name_second', 'id_name_third'];