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

UI Conversion: Cleanup margins / paddings

Browse Source 
Summary:
Cleaned up margins and paddings by removing hardcoded values and use constant sizes from "themes" instead.

Changelog: Database plugin UI aligned with the new Flipper UI

Reviewed By: mweststrate

Differential Revision: D28094217

fbshipit-source-id: 6514b2f1ea7073ca658a86e49c2be029f054ddf0
This commit is contained in:
Anton Nikolaev
2021-04-29 12:02:54 -07:00
committed by Facebook GitHub Bot
parent e1afe9d6b9
commit 84b48ff7e9
1 changed files with 25 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
desktop/plugins/public/databases/index.tsx
View File

@@ -41,6 +41,7 @@ import {
Layout, Layout,
useMemoize, useMemoize,
Toolbar, Toolbar,
theme,
} from 'flipper-plugin'; } from 'flipper-plugin';
import { import {
Select, Select,
@@ -84,7 +85,6 @@ const ErrorBar = styled.div({
lineHeight: '26px', lineHeight: '26px',
textAlign: 'center', textAlign: 'center',
}); });
const QueryHistoryManagedTable = styled(ManagedTable)({paddingLeft: 16});
const PageInfoContainer = styled(Layout.Horizontal)({alignItems: 'center'}); const PageInfoContainer = styled(Layout.Horizontal)({alignItems: 'center'});
type DatabasesPluginState = { type DatabasesPluginState = {
@@ -189,7 +189,7 @@ const QueryHistory = React.memo(({history}: {history: Array<Query>}) => {
return ( return (
<Layout.Horizontal grow> <Layout.Horizontal grow>
<QueryHistoryManagedTable <ManagedTable
floating={false} floating={false}
columns={columns} columns={columns}
columnSizes={{time: 75}} columnSizes={{time: 75}}
@@ -340,7 +340,7 @@ const QueryTable = React.memo(
const columns = table.columns; const columns = table.columns;
const rows = table.rows; const rows = table.rows;
return ( return (
<Layout.Horizontal grow style={{paddingTop: 18}}> <Layout.Horizontal grow>
<ManagedTable <ManagedTable
floating={false} floating={false}
multiline={true} multiline={true}
@@ -370,18 +370,14 @@ const QueryTable = React.memo(
); );
} else if (query.id && query.id !== null) { } else if (query.id && query.id !== null) {
return ( return (
<Layout.Horizontal grow style={{paddingTop: 18}}> <Layout.Horizontal grow pad>
<Text style={{paddingTop: 8, paddingLeft: 8}}> <Text>Row id: {query.id}</Text>
Row id: {query.id}
</Text>
</Layout.Horizontal> </Layout.Horizontal>
); );
} else if (query.count && query.count !== null) { } else if (query.count && query.count !== null) {
return ( return (
<Layout.Horizontal grow style={{paddingTop: 18}}> <Layout.Horizontal grow pad>
<Text style={{paddingTop: 8, paddingLeft: 8}}> <Text>Rows affected: {query.count}</Text>
Rows affected: {query.count}
</Text>
</Layout.Horizontal> </Layout.Horizontal>
); );
} else { } else {
@@ -1144,7 +1140,7 @@ export function Component() {
return ( return (
<Layout.Container grow> <Layout.Container grow>
<Toolbar position="top" style={{paddingLeft: 16}}> <Toolbar position="top">
<Radio.Group value={state.viewMode} onChange={onViewModeChanged}> <Radio.Group value={state.viewMode} onChange={onViewModeChanged}>
<Radio.Button value="data" onClick={onDataClicked}> <Radio.Button value="data" onClick={onDataClicked}>
<TableOutlined style={{marginRight: 5}} /> <TableOutlined style={{marginRight: 5}} />
@@ -1171,8 +1167,8 @@ export function Component() {
{state.viewMode === 'data' || {state.viewMode === 'data' ||
state.viewMode === 'structure' || state.viewMode === 'structure' ||
state.viewMode === 'tableInfo' ? ( state.viewMode === 'tableInfo' ? (
<Toolbar position="top" style={{paddingLeft: 16}}> <Toolbar position="top">
<BoldSpan style={{marginRight: 16}}>Database</BoldSpan> <BoldSpan>Database</BoldSpan>
<Select <Select
showSearch showSearch
value={selectedDatabaseName} value={selectedDatabaseName}
@@ -1180,7 +1176,7 @@ export function Component() {
style={{width: 200}}> style={{width: 200}}>
{databaseOptions} {databaseOptions}
</Select> </Select>
<BoldSpan style={{marginLeft: 16, marginRight: 16}}>Table</BoldSpan> <BoldSpan>Table</BoldSpan>
<Select <Select
showSearch showSearch
value={selectedTableName} value={selectedTableName}
@@ -1193,9 +1189,9 @@ export function Component() {
</Toolbar> </Toolbar>
) : null} ) : null}
{state.viewMode === 'SQL' ? ( {state.viewMode === 'SQL' ? (
<div> <Layout.Container>
<Toolbar position="top" style={{paddingLeft: 16}}> <Toolbar position="top">
<BoldSpan style={{marginRight: 16}}>Database</BoldSpan> <BoldSpan>Database</BoldSpan>
<Select <Select
showSearch showSearch
value={selectedDatabaseName} value={selectedDatabaseName}
@@ -1204,16 +1200,8 @@ export function Component() {
{databaseOptions} {databaseOptions}
</Select> </Select>
</Toolbar> </Toolbar>
{ <Layout.Horizontal pad={theme.space.small} style={{paddingBottom: 0}}>
<TextArea <TextArea
style={{
width: '98%',
height: '40%',
marginLeft: 16,
marginTop: '1%',
marginBottom: '1%',
resize: 'vertical',
}}
onChange={onQueryChanged} onChange={onQueryChanged}
onKeyPress={onQueryTextareaKeyPress} onKeyPress={onQueryTextareaKeyPress}
placeholder="Type query here.." placeholder="Type query here.."
@@ -1223,13 +1211,11 @@ export function Component() {
: undefined : undefined
} }
/> />
} </Layout.Horizontal>
<Toolbar <Toolbar position="top">
position="top"
style={{paddingLeft: 16, paddingTop: 24, paddingBottom: 24}}>
<Layout.Right> <Layout.Right>
<div /> <div />
<Layout.Horizontal gap> <Layout.Horizontal gap={theme.space.small}>
<Button <Button
icon={ icon={
state.query && favorites.includes(state.query.value) ? ( state.query && favorites.includes(state.query.value) ? (
@@ -1260,7 +1246,7 @@ export function Component() {
</Layout.Horizontal> </Layout.Horizontal>
</Layout.Right> </Layout.Right>
</Toolbar> </Toolbar>
</div> </Layout.Container>
) : null} ) : null}
<Layout.Horizontal grow> <Layout.Horizontal grow>
<Layout.Container grow> <Layout.Container grow>
@@ -1284,18 +1270,12 @@ export function Component() {
/> />
) : null} ) : null}
{state.viewMode === 'tableInfo' ? ( {state.viewMode === 'tableInfo' ? (
<TextArea <Layout.Horizontal
value={sqlFormatter.format(state.tableInfo)} grow
style={{ pad={theme.space.small}
width: '98%', style={{paddingBottom: 0}}>
height: '98%', <TextArea value={sqlFormatter.format(state.tableInfo)} readOnly />
marginLeft: 16, </Layout.Horizontal>
marginTop: '1%',
marginBottom: '1%',
resize: 'vertical',
}}
readOnly
/>
) : null} ) : null}
{state.viewMode === 'queryHistory' ? ( {state.viewMode === 'queryHistory' ? (
<QueryHistory history={state.queryHistory} /> <QueryHistory history={state.queryHistory} />