fix Plugins table UI glitch in dark mode, add column name (#3332)
Summary: Same as Settings modal, the Plugin Manager table used in Plugins modal includes the UI glitch in dark mode due to overflow setting. This PR fixes that and also adds missing column caption in "Install Plugins" table. I have chosen `Action` as a title but this can be altered, I have no strong preference in there. The goal was to improve the clarity and also improve the context menu content (where user can show/hide columns). ## Changelog * fix Plugins table UI glitch in dark mode, add column name Pull Request resolved: https://github.com/facebook/flipper/pull/3332 Test Plan: The change has been testes by running the desktop Flipper app locally from source. ## Preview (before & after) <img width="396" alt="Screenshot 2022-01-23 at 16 19 02" align="left" src="https://user-images.githubusercontent.com/719641/150685739-e2047e70-de14-4801-ac5a-0fc45a6ea476.png"> <img width="396" alt="Screenshot 2022-01-23 at 16 19 31" src="https://user-images.githubusercontent.com/719641/150685735-3de8b7a2-ea3f-489a-b1f8-7af73f0a5225.png"> Reviewed By: aigoncharov Differential Revision: D33738705 Pulled By: lblasa fbshipit-source-id: 704fe40f26d424c62a9bbc3e73132a0026f2e8b8
This commit is contained in:
committed by
Facebook GitHub Bot
parent
41950946a2
commit
4b0091df0f
@@ -49,7 +49,7 @@ const columns = {
|
||||
value: 'Description',
|
||||
},
|
||||
install: {
|
||||
value: '',
|
||||
value: 'Action',
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@@ -53,7 +53,7 @@ exports[`load PluginInstaller list 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="css-bgfc37-View-FlexBox-FlexColumn-Container emab7y20"
|
||||
class="css-o1pvkz-View-FlexBox-FlexColumn-Container emab7y20"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
@@ -122,7 +122,7 @@ exports[`load PluginInstaller list 1`] = `
|
||||
<div
|
||||
class="css-1054ash-TableHeaderColumnContainer eig1lcc2"
|
||||
>
|
||||
|
||||
Action
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -429,7 +429,7 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="css-bgfc37-View-FlexBox-FlexColumn-Container emab7y20"
|
||||
class="css-o1pvkz-View-FlexBox-FlexColumn-Container emab7y20"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
@@ -498,7 +498,7 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
|
||||
<div
|
||||
class="css-1054ash-TableHeaderColumnContainer eig1lcc2"
|
||||
>
|
||||
|
||||
Action
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -155,7 +155,7 @@ type ManagedTableState = {
|
||||
};
|
||||
|
||||
const Container = styled(FlexColumn)<{canOverflow?: boolean}>((props) => ({
|
||||
overflow: props.canOverflow ? 'scroll' : 'visible',
|
||||
overflow: props.canOverflow ? 'auto' : 'visible',
|
||||
flexGrow: 1,
|
||||
height: '100%',
|
||||
}));
|
||||
|
||||
Reference in New Issue
Block a user