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

toolbar

Browse Source
This commit is contained in:
Jan Prochazka
2020-03-30 20:17:16 +02:00
parent 2d2199cb64
commit b929352d92
4 changed files with 60 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
packages/web/src/Screen.js
View File

@@ -8,20 +8,30 @@ import TabContent from './TabContent';
import WidgetIconPanel from './widgets/WidgetIconPanel';
import { useCurrentWidget } from './utility/globalState';
import WidgetContainer from './widgets/WidgetContainer';
import ToolBar from './widgets/Toolbar';
const BodyDiv = styled.div`
position: fixed;
top: ${theme.tabsPanel.height}px;
top: ${theme.tabsPanel.height + theme.toolBar.height}px;
left: ${props => theme.widgetMenu.iconSize + props.leftPanelWidth}px;
bottom: ${theme.statusBar.height}px;
right: 0;
background-color: ${theme.mainArea.background};
`;
const IconBar = styled.div`
const ToolBarDiv = styled.div`
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: ${theme.toolBar.background};
height: ${theme.toolBar.height}px;
`;
const IconBar = styled.div`
position: fixed;
top: ${theme.toolBar.height}px;
left: 0;
bottom: ${theme.statusBar.height}px;
width: ${theme.widgetMenu.iconSize}px;
background-color: ${theme.widgetMenu.background};
@@ -29,7 +39,7 @@ const IconBar = styled.div`
const LeftPanel = styled.div`
position: fixed;
top: 0;
top: ${theme.toolBar.height}px;
left: ${theme.widgetMenu.iconSize}px;
bottom: ${theme.statusBar.height}px;
width: ${theme.leftPanel.width}px;
@@ -40,7 +50,7 @@ const LeftPanel = styled.div`
const TabsPanelContainer = styled.div`
display: flex;
position: fixed;
top: 0;
top: ${theme.toolBar.height}px;
left: ${props => theme.widgetMenu.iconSize + props.leftPanelWidth}px;
height: ${theme.tabsPanel.height}px;
right: 0;
@@ -61,6 +71,9 @@ export default function Screen() {
const leftPanelWidth = currentWidget ? theme.leftPanel.width : 0;
return (
<>
<ToolBarDiv>
<ToolBar />
</ToolBarDiv>
<IconBar>
<WidgetIconPanel />
</IconBar>
@@ -72,7 +85,9 @@ export default function Screen() {
<TabsPanelContainer leftPanelWidth={leftPanelWidth}>
<TabsPanel></TabsPanel>
</TabsPanelContainer>
<BodyDiv leftPanelWidth={leftPanelWidth}><TabContent/></BodyDiv>
<BodyDiv leftPanelWidth={leftPanelWidth}>
<TabContent />
</BodyDiv>
<StausBar></StausBar>
</>
);