Summary:
Importing CSS from nested node_modules residing inside of the plugins folder breaks publish-static-docs-flipper-diff job. See D40717045.
Reverting it to unblock the release
Reviewed By: lblasa
Differential Revision: D40717654
fbshipit-source-id: ac3f4ce92d69b0e3bed9cd116678785390e26e4e
Summary:
Upgraded from ant tree library to the much more capable React complex tree. Added the following:
1. Ability to expand / collapse nodes while automatically expanding / collapsing active/inactive children when they change
2. Keyboard controls of tree all the time
3. Basic search functionality
4. Selecting node in tree focuses and scrolls in the tree
5. Hover state for tree
Reviewed By: lblasa
Differential Revision: D40633876
fbshipit-source-id: 8dcef5ec2c277e476a3eb3cdaef62b15c25323c0
Summary:
DataTable selected rows are a bit hard to spot when changing search, scrolling etc, so give them a bit more prominent background
Changelog: DataTable: more pronounced background color for selections
Reviewed By: aigoncharov
Differential Revision: D36736495
fbshipit-source-id: 2cab9eb99594ffaaccdd9ebe0d922691adb27bdc
Summary:
Currently the design of `LeftRail` varies a bit between light and dark modes. Additionally washed background color is hard to differentiate from the main background color in comparison to the light theme (See `LeftRail` sidebars toggle buttons background for example). This lead to few contrast related issues, for example the hover effect on the WelcomeScreen elements is not visible in dark mode.
The PR tweaks the dark mode theme colors and fixes the unnecessary background of Settings icon in dark mode.
I have also spotted that icon `hover` effect is not working when icon has a badge (pure dot or count), I might have an idea how to fix this and I will push another PR for that. 🙂
## Changelog
* tweak dark mode theme colors, improve LeftRail UI
Pull Request resolved: https://github.com/facebook/flipper/pull/3335
Test Plan:
The change has been testes by running the desktop Flipper app locally from source.
## Preview (before & after)
<img width="390" alt="Screenshot 2022-01-24 at 13 37 20" align="left" src="https://user-images.githubusercontent.com/719641/150784627-36e222a8-e53e-4409-ab72-783d4a594f8e.png">
<img width="390" alt="Screenshot 2022-01-24 at 13 46 08" src="https://user-images.githubusercontent.com/719641/150785438-bb496adf-83ab-4b1c-928d-07f4b0098f1a.png">
Reviewed By: antonk52
Differential Revision: D33741513
Pulled By: lblasa
fbshipit-source-id: ef187db0725ac2b04c09b7f06823e713b50be88f
Summary: Went over all plugins and did superficial fixes to make most plugins look decent or at least usable in dark mode, which before they weren't :)
Reviewed By: priteshrnandgaonkar
Differential Revision: D29456680
fbshipit-source-id: 3952e5da512c68b89434eea081faf121d1049908
Summary:
This diff adds OS support for dark mode (at least on Mac), by making sure system elements are styled according to system dark theme.
For some unknown reason, this does apply to all system dialogs, titlebars etc, but not for scrollbars, so they got custom themed.
Differential Revision: D29436058
fbshipit-source-id: bac649b6cd81f0142c607ed567eeb00f41625041
Summary: Added wash color option to Toolbar, made codeblocks transparent rather than gray & bordered, which looks cleaner
Reviewed By: passy
Differential Revision: D28119720
fbshipit-source-id: 9d1f4db5b39a91d9d117046bd5482726ac2f555d
Summary:
Per title, if a plugin makes a client call, show a quick notif so that the user knows why his plugin interactions aren't responding in case the plugin doesn't use `isConnected` guards.
This might turn out to be too spammy, but I think it should be ok.
Reviewed By: nikoant
Differential Revision: D26277099
fbshipit-source-id: bd555ea84acae6189ec7f8fff0fc0a088dbc5337
Summary: Button fills out by default in Ant design if used in a flex container. Dropdown.Button doesn't do so. With this change
Reviewed By: jknoxville
Differential Revision: D26045409
fbshipit-source-id: 593b767aa7e38a98c8887b426f36fe41cb41bfd3
Summary: Replaced in-your-face warning with a but more subtle one. Means also less usage of component lib.
Reviewed By: nikoant
Differential Revision: D25944965
fbshipit-source-id: 02a66ff96df2ab8b648f8b8cbeb30d025adfd5a8
Summary:
This diff adds the rough navigation to open pugins, there are some rough egdes still, and tests will be added later, but wanted to keep diffs small, and land the feature early to get some initial dogfooding going on early.
Note that we now also show all disabled plugins to help people with trouble shooting.
Reviewed By: nikoant
Differential Revision: D24418411
fbshipit-source-id: 1402d69efe2e52bc2c81336cfb4f4c9928ea4d80
Summary:
Render a plugin list
Will add tests once the entire feature is complete
Reviewed By: cekkaewnumchai
Differential Revision: D24079897
fbshipit-source-id: db7250ff612b67ab18dfcacdcb9c44dab596933d
Summary:
As designed by Vince [here](https://www.figma.com/file/4e6BMdm2SuZ1L7FSuOPQVC/Flipper?node-id=585%3A127550), this diff adds Flipper Doctor into Sandy
Note:
- The dot on Doctor icon will act similarly to `DoctorBar`
- add type to `count` for `LeftRailButton` to act like dot badge
- Get rid of padding in `antd` modal
Reviewed By: nikoant, mweststrate
Differential Revision: D24137349
fbshipit-source-id: 8ce441e0ed96083eba09d98dfd3a45ff9b5be027
Summary:
Fixes layout issue that was caused by ANT line-heights leaking into the old design.
Introduced a `.flipperlegacy_design ` class at the `root` element of Flipper, so that it is easier in the future to bail out / add overrides for certain features in the old design.
Reviewed By: priteshrnandgaonkar
Differential Revision: D24135482
fbshipit-source-id: 40091ebbde71662f2ebea66577f7b727009ca9c6
Summary:
Typography on Sandy! The designed typography is [here in Figma](https://www.figma.com/file/4e6BMdm2SuZ1L7FSuOPQVC/Flipper?node-id=238%3A172)
Current deflects
- cannot find component for 'body - small' and 'meta'
- don't know how to set 'link secondary hover' as designed
Reviewed By: mweststrate
Differential Revision: D23869256
fbshipit-source-id: efb1475749cebad529b502458d1b15bd445bb346
Summary: This diff introduces the. main sections and restyled resizable panes according to the Figma design
Reviewed By: cekkaewnumchai
Differential Revision: D23758349
fbshipit-source-id: 7f09574f6b5fb54551141c13667c664e1769f09a
Summary:
This diff fixes two problems when further theming Flipper:
1. All shades of gray where defined in terms of black/white + transparency. Converted all colors to non transparent to make sure they stack well.
2. The color theme defined in less aren't available as javascript colors. It is possible to achieve that through setting up a babel parser that parses the less files and exposes them to JS. But since we have modern stack, figured that exposing all theme variables as CSS variables as well is a much simpler setup.
Reviewed By: passy
Differential Revision: D23756558
fbshipit-source-id: e92be1f66b11c2c9c400fc1622cb8a493cc4c2a5
Summary:
This setups the first bits of the Sandy Layout, and has a styled siderail according to the design, that does absolutely nothing.
{gif:0sa60r8c}
Reviewed By: cekkaewnumchai
Differential Revision: D23655313
fbshipit-source-id: e30278aeae0913e231ad105a9afb55c74c6a3370
Summary: Adds support for switching dark mode on the fly. Also added the option to apply certain settings without restarting Flipper, as that isn't needed in all cases.
Reviewed By: cekkaewnumchai
Differential Revision: D23625854
fbshipit-source-id: 82175ba10524daf1b48a65feec8c610460df9418
Summary:
allow-large-files
This makes the Ant.design component library available to Flipper
The CSS setup is unconventional, in the sense that the normal way to do this is to use a webpack loader to dynamically load the right less files, and a babel transform to automatically import the style sheets.
Since we use Metro, which is not very suitable for transforming non-JS(like) files, I figured that the simplest thing is to pre-compile the entire less theme. Which should be fine since we shouldn't be changing the less files very often, and since we don't ship a website, it is probably not too bad to have the full ANT theme for now in there, even though we don't use all components. It is 600 K of css. In the next diff the CSS is loaded conditionally, only if Sandy is enabled.
If the CSS turns out to be too big we can optimise this later to only import CSS for components we use by doing some Metro magic, but it doesn't seem to be trivial (that is, I couldn't get in to work in < 2 hours).
Reviewed By: cekkaewnumchai
Differential Revision: D23625855
fbshipit-source-id: 3ba810b2221dc0c7b719f66310e590c7748cf239
