dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-05-01 02:43:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

widget search box flex sizing

Browse Source
This commit is contained in:
Jan Prochazka
2020-03-31 21:28:14 +02:00
parent fdd0285c6f
commit f0d81cf7e2
1 changed files with 42 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
packages/web/src/widgets/DatabaseWidget.js
View File

@@ -9,19 +9,47 @@ import { useSetCurrentDatabase, useCurrentDatabase } from '../utility/globalStat
import tableAppObject from '../appobj/tableAppObject'; import tableAppObject from '../appobj/tableAppObject';
import theme from '../theme'; import theme from '../theme';
const SearchBoxWrapper = styled.div`
display: flex;
margin-bottom: 5px;
`;
const MainContainer = styled.div` const MainContainer = styled.div`
position: relative; position: relative;
display: flex; display: flex;
flex-flow: column wrap; flex-flow: column wrap;
flex: 1; flex: 1;
flex-direction: column;
`;
const OuterContainer = styled.div`
flex: 1 1 0;
// min-height: 10px;
overflow: hidden;
width: ${theme.leftPanel.width}px;
position: relative;
flex-direction: column;
display: flex;
`; `;
const InnerContainer = styled.div` const InnerContainer = styled.div`
flex: 1 0; flex: 1 1;
overflow: scroll; overflow: scroll;
width: ${theme.leftPanel.width}px; width: ${theme.leftPanel.width}px;
`; `;
const Button = styled.button`
// -webkit-appearance: none;
// -moz-appearance: none;
// appearance: none;
// width: 50px;
`;
const Input = styled.input`
flex: 1;
min-width: 90px;
`;
function SubDatabaseList({ data }) { function SubDatabaseList({ data }) {
const setDb = useSetCurrentDatabase(); const setDb = useSetCurrentDatabase();
const handleDatabaseClick = database => { const handleDatabaseClick = database => {
@@ -45,7 +73,15 @@ function ConnectionList() {
}); });
return ( return (
<> <>
<AppObjectList list={connections} makeAppObj={connectionAppObject} SubItems={SubDatabaseList} /> <SearchBoxWrapper>
<Input type="text" placeholder="Search" />
<Button>Hide</Button>
<Button>Show</Button>
</SearchBoxWrapper>
<InnerContainer>
<AppObjectList list={connections} makeAppObj={connectionAppObject} SubItems={SubDatabaseList} />
</InnerContainer>
</> </>
); );
} }
@@ -77,12 +113,12 @@ function SqlObjectListWrapper() {
export default function DatabaseWidget() { export default function DatabaseWidget() {
return ( return (
<MainContainer> <MainContainer>
<InnerContainer> <OuterContainer>
<ConnectionList /> <ConnectionList />
</InnerContainer> </OuterContainer>
<InnerContainer> <OuterContainer>
<SqlObjectListWrapper /> <SqlObjectListWrapper />
</InnerContainer> </OuterContainer>
</MainContainer> </MainContainer>
); );
} }