dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-19 18:56:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

resizable widget container

Browse Source
This commit is contained in:
Jan Prochazka
2020-05-10 17:39:49 +02:00
parent dc87aeeb43
commit 836db096a9
6 changed files with 100 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
packages/web/src/widgets/WidgetStyles.js
View File

@@ -1,5 +1,8 @@
// @ts-nocheck
import React from 'react';
import styled from 'styled-components';
import theme from '../theme';
import { useLeftPanelWidth } from '../utility/globalState';
export const SearchBoxWrapper = styled.div`
display: flex;
@@ -15,21 +18,31 @@ export const WidgetsMainContainer = styled.div`
user-select: none;
`;
export const WidgetsOuterContainer = styled.div`
const StyledWidgetsOuterContainer = styled.div`
flex: 1 1 0;
overflow: hidden;
width: ${theme.leftPanel.width}px;
width: ${(props) => props.leftPanelWidth}px;
position: relative;
flex-direction: column;
display: flex;
`;
export const WidgetsInnerContainer = styled.div`
export function WidgetsOuterContainer({ children }) {
const leftPanelWidth = useLeftPanelWidth();
return <StyledWidgetsOuterContainer leftPanelWidth={leftPanelWidth}>{children}</StyledWidgetsOuterContainer>;
}
export const StyledWidgetsInnerContainer = styled.div`
flex: 1 1;
overflow: scroll;
width: ${theme.leftPanel.width}px;
width: ${(props) => props.leftPanelWidth}px;
`;
export function WidgetsInnerContainer({ children }) {
const leftPanelWidth = useLeftPanelWidth();
return <StyledWidgetsInnerContainer leftPanelWidth={leftPanelWidth}>{children}</StyledWidgetsInnerContainer>;
}
export const Input = styled.input`
flex: 1;
min-width: 90px;