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

collapsible left panel

Browse Source
This commit is contained in:
Jan Prochazka
2019-12-30 22:49:38 +01:00
parent e2094fdfda
commit 30af732820
2 changed files with 18 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
web/src/Screen.js
View File

@@ -1,13 +1,14 @@
import React from "react";
import theme from "./theme";
import styled from "styled-components";
import FilesTabsPanel from "./FilesTabsPanel";
import WidgetIconPanel from "./widgets/WidgetIconPanel";
import React from 'react';
import theme from './theme';
import styled from 'styled-components';
import FilesTabsPanel from './FilesTabsPanel';
import WidgetIconPanel from './widgets/WidgetIconPanel';
import useCurrentWidget from './widgets/useCurrentWidget';
const BodyDiv = styled.div`
position: fixed;
top: ${theme.tabsPanel.height}px;
left: ${theme.widgetMenu.iconSize + theme.leftPanel.width}px;
left: ${props => theme.widgetMenu.iconSize + props.leftPanelWidth}px;
bottom: ${theme.statusBar.height}px;
right: 0;
background-color: ${theme.mainArea.background};
@@ -35,7 +36,7 @@ const TabsPanel = styled.div`
display: flex;
position: fixed;
top: 0;
left: ${theme.widgetMenu.iconSize + theme.leftPanel.width}px;
left: ${props => theme.widgetMenu.iconSize + props.leftPanelWidth}px;
height: ${theme.tabsPanel.height}px;
right: 0;
background-color: ${theme.tabsPanel.background};
@@ -51,16 +52,18 @@ const StausBar = styled.div`
`;
export default function Screen({ children }) {
const currentWidget = useCurrentWidget();
const leftPanelWidth = currentWidget ? theme.leftPanel.width : 0;
return (
<>
<IconBar>
<WidgetIconPanel />
</IconBar>
<LeftPanel></LeftPanel>
<TabsPanel>
{!!currentWidget && <LeftPanel></LeftPanel>}
<TabsPanel leftPanelWidth={leftPanelWidth}>
<FilesTabsPanel></FilesTabsPanel>
</TabsPanel>
<BodyDiv>{children}</BodyDiv>
<BodyDiv leftPanelWidth={leftPanelWidth}>{children}</BodyDiv>
<StausBar></StausBar>
</>
);