dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-30 13:53: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 React from 'react';
import theme from "./theme"; import theme from './theme';
import styled from "styled-components"; import styled from 'styled-components';
import FilesTabsPanel from "./FilesTabsPanel"; import FilesTabsPanel from './FilesTabsPanel';
import WidgetIconPanel from "./widgets/WidgetIconPanel"; import WidgetIconPanel from './widgets/WidgetIconPanel';
import useCurrentWidget from './widgets/useCurrentWidget';
const BodyDiv = styled.div` const BodyDiv = styled.div`
position: fixed; position: fixed;
top: ${theme.tabsPanel.height}px; 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; bottom: ${theme.statusBar.height}px;
right: 0; right: 0;
background-color: ${theme.mainArea.background}; background-color: ${theme.mainArea.background};
@@ -35,7 +36,7 @@ const TabsPanel = styled.div`
display: flex; display: flex;
position: fixed; position: fixed;
top: 0; top: 0;
left: ${theme.widgetMenu.iconSize + theme.leftPanel.width}px; left: ${props => theme.widgetMenu.iconSize + props.leftPanelWidth}px;
height: ${theme.tabsPanel.height}px; height: ${theme.tabsPanel.height}px;
right: 0; right: 0;
background-color: ${theme.tabsPanel.background}; background-color: ${theme.tabsPanel.background};
@@ -51,16 +52,18 @@ const StausBar = styled.div`
`; `;
export default function Screen({ children }) { export default function Screen({ children }) {
const currentWidget = useCurrentWidget();
const leftPanelWidth = currentWidget ? theme.leftPanel.width : 0;
return ( return (
<> <>
<IconBar> <IconBar>
<WidgetIconPanel /> <WidgetIconPanel />
</IconBar> </IconBar>
<LeftPanel></LeftPanel> {!!currentWidget && <LeftPanel></LeftPanel>}
<TabsPanel> <TabsPanel leftPanelWidth={leftPanelWidth}>
<FilesTabsPanel></FilesTabsPanel> <FilesTabsPanel></FilesTabsPanel>
</TabsPanel> </TabsPanel>
<BodyDiv>{children}</BodyDiv> <BodyDiv leftPanelWidth={leftPanelWidth}>{children}</BodyDiv>
<StausBar></StausBar> <StausBar></StausBar>
</> </>
); );

6
web/src/widgets/WidgetIconPanel.js
View File

@@ -45,7 +45,11 @@ export default function WidgetIconPanel() {
const setCurrentWidget = useSetCurrentWidget(); const setCurrentWidget = useSetCurrentWidget();
return widgets.map(({ icon, name }) => ( return widgets.map(({ icon, name }) => (
<IconWrapper key={icon} isSelected={name === currentWidget} onClick={() => setCurrentWidget(name)}> <IconWrapper
key={icon}
isSelected={name === currentWidget}
onClick={() => setCurrentWidget(name === currentWidget ? null : name)}
>
<FontIcon name={icon} /> <FontIcon name={icon} />
</IconWrapper> </IconWrapper>
)); ));