diff --git a/packages/web/src/widgets/DatabaseWidget.js b/packages/web/src/widgets/DatabaseWidget.js index 8ec55d0de..e392b4316 100644 --- a/packages/web/src/widgets/DatabaseWidget.js +++ b/packages/web/src/widgets/DatabaseWidget.js @@ -9,19 +9,47 @@ import { useSetCurrentDatabase, useCurrentDatabase } from '../utility/globalStat import tableAppObject from '../appobj/tableAppObject'; import theme from '../theme'; +const SearchBoxWrapper = styled.div` + display: flex; + margin-bottom: 5px; +`; + const MainContainer = styled.div` position: relative; display: flex; flex-flow: column wrap; 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` - flex: 1 0; + flex: 1 1; overflow: scroll; 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 }) { const setDb = useSetCurrentDatabase(); const handleDatabaseClick = database => { @@ -45,7 +73,15 @@ function ConnectionList() { }); return ( <> - + + + + + + + + + ); } @@ -77,12 +113,12 @@ function SqlObjectListWrapper() { export default function DatabaseWidget() { return ( - + - - + + - + ); }