6639b547dd
Summary: This PR fixes the missing hover effect for the `LeftRail` component buttons, when they have included the badge. To fix the issue, I had to wrap the whole `Button` with `Badge` component (instead wrapping only around icon). However, this solution required to added `offset` property to the `Badge` which moves the indicator to the position prior change (otherwise indicator was moved to the right corner of the button). The file has been formatted after the changes with ESLint. **Edit:** I have also spotted that this change fixes the icon placement inside the button, when badge is present. Earlier, as seen below, the log icon was moved towards the top of the button: <img width="111" alt="Screenshot 2022-01-31 at 00 57 49" src="https://user-images.githubusercontent.com/719641/151723422-0ffb83ee-5806-412e-9191-f9953f78532e.png"> ## Changelog [desktop] UI: fix hover effect of LeftRail icons with badge Pull Request resolved: https://github.com/facebook/flipper/pull/3372 Test Plan: The change has been testes by running the desktop Flipper app locally from source. ## Preview (before & after) #### Before <img width="1339" alt="Screenshot 2022-01-31 at 00 24 23" src="https://user-images.githubusercontent.com/719641/151722800-a2f3dd44-aa24-4858-b43e-0620b1f2ae65.png"> #### After > I have used mocked indicator values locally to ensure that the Badges are displayed correctly. <img width="1339" alt="Screenshot 2022-01-31 at 00 26 10" src="https://user-images.githubusercontent.com/719641/151722795-745b04ac-9ee4-49a8-8217-206d8d7456e6.png"> <img width="1339" alt="Screenshot 2022-01-31 at 00 45 08" src="https://user-images.githubusercontent.com/719641/151722940-aaaf0e9b-f2d1-4245-8b2b-cfc11052b39e.png"> Reviewed By: aigoncharov Differential Revision: D33975324 Pulled By: mweststrate fbshipit-source-id: fe4773b4825b9f22e01821e45259747d319233aa
Flipper Desktop
This folder contains everything to run the Flipper 'Desktop', that is, the UI which you use to interact with the device / app under debug.
Packages provided here:
- flipper-common: utilities & types shared between client, server, flipper-plugin
- flipper-server-core: all device & client management goes in here. Basically flipper's backend
- flipper-ui-core: all UI goes in here, as far as it doesn't depend on Electron
- flipper-ui-electron: the Electron app, will load server-core and ui-core, and glue them together, providing implementations for some electron * specific stuff like dialgos
- flipper-server: A node process hosting flipper-server-core, that can be connected to over websockets. And probably can serve a browser version of the UI as well.
- flipper-ui-browser: thin wrapper around flipper-ui-core, providing some browser specific behavior / stubs.
- flipper-dump: (might remove later), but want to hack a quick and dirt flipper dump in here, as alternative way to test flipper-server-core.
- flipper-plugin: The flipper SDK used by plugins. Exposes all API's that can be used by plugins
- pkg: CLI tool to manage building flipper plugins
- pkg-lib
- plugin-lib
- babel-transformer
- doctor
- eslint-plugin-flipper
Packages overview
flipper-ui-electron:
- flipper-server-core (directly embedded)
- flipper-ui-core
- plugins (prebundled)
- plugins (installable)
- flipper-plugin
flipper-server
- flipper-server-core
- flipper-ui-browser (served by webserver)
- flipper-ui-core (communicates using WebSocket with server-core)
- plugins (prebundled)
- plugins (installable)?
flipper-dump
- flipper-server-core