mirrors/dbgate
1
0
Fork 0
mirror of https://github.com/dbgate/dbgate synced 2024-11-07 20:26:23 +00:00
Code Issues Actions 4 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
Show Stats 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>
</>
);

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

@ -45,7 +45,11 @@ export default function WidgetIconPanel() {
const setCurrentWidget = useSetCurrentWidget();
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} />
</IconWrapper>
));