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

configurable theme

Browse Source
This commit is contained in:
Jan Prochazka
2019-12-26 22:33:33 +01:00
parent 43bc6a719c
commit 4fc93005f6
3 changed files with 30 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/FilesTabsPanel.js
View File

@@ -1,5 +1,6 @@
import React from "react"; import React from "react";
import styled from "styled-components"; import styled from "styled-components";
import theme from "./theme";
const files = [ const files = [
{ name: "app.js" }, { name: "app.js" },
@@ -15,9 +16,10 @@ const FileTabItem = styled.div`
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: #338; color: ${theme.tabsPanel.hoverFont};
} }
background-color: ${props => (props.selected ? "#eee" : "inherit")}; background-color: ${props =>
props.selected ? theme.mainArea.background : "inherit"};
`; `;
export default function FilesTabsPanel() { export default function FilesTabsPanel() {

24
web/src/Screen.js
View File

@@ -6,10 +6,10 @@ import FilesTabsPanel from "./FilesTabsPanel";
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.widgetMenu.panelWidth}px; left: ${theme.widgetMenu.iconSize + theme.leftPanel.width}px;
bottom: ${theme.statusBar.height}px; bottom: ${theme.statusBar.height}px;
right: 0; right: 0;
background-color: #eee; background-color: ${theme.mainArea.background};
`; `;
const IconBar = styled.div` const IconBar = styled.div`
@@ -18,26 +18,26 @@ const IconBar = styled.div`
left: 0; left: 0;
bottom: ${theme.statusBar.height}px; bottom: ${theme.statusBar.height}px;
width: ${theme.widgetMenu.iconSize}px; width: ${theme.widgetMenu.iconSize}px;
background-color: #222; background-color: ${theme.widgetMenu.background};
`; `;
const LeftMenu = styled.div` const LeftPanel = styled.div`
position: fixed; position: fixed;
top: 0; top: 0;
left: ${theme.widgetMenu.iconSize}px; left: ${theme.widgetMenu.iconSize}px;
bottom: ${theme.statusBar.height}px; bottom: ${theme.statusBar.height}px;
width: ${theme.widgetMenu.panelWidth}px; width: ${theme.leftPanel.width}px;
background-color: #ccc; background-color: ${theme.leftPanel.background};
`; `;
const TabsPanel = styled.div` const TabsPanel = styled.div`
display: flex; display: flex;
position: fixed; position: fixed;
top: 0; top: 0;
left: ${theme.widgetMenu.iconSize + theme.widgetMenu.panelWidth}px; left: ${theme.widgetMenu.iconSize + theme.leftPanel.width}px;
height: ${theme.tabsPanel.height}px; height: ${theme.tabsPanel.height}px;
right: 0; right: 0;
background-color: #ddd; background-color: ${theme.tabsPanel.background};
`; `;
const StausBar = styled.div` const StausBar = styled.div`
@@ -46,15 +46,17 @@ const StausBar = styled.div`
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: #00c; background-color: ${theme.statusBar.background};
`; `;
export default function Screen({ children }) { export default function Screen({ children }) {
return ( return (
<> <>
<IconBar></IconBar> <IconBar></IconBar>
<LeftMenu></LeftMenu> <LeftPanel></LeftPanel>
<TabsPanel><FilesTabsPanel></FilesTabsPanel></TabsPanel> <TabsPanel>
<FilesTabsPanel></FilesTabsPanel>
</TabsPanel>
<BodyDiv>{children}</BodyDiv> <BodyDiv>{children}</BodyDiv>
<StausBar></StausBar> <StausBar></StausBar>
</> </>

16
web/src/theme.js
View File

@@ -1,12 +1,22 @@
export default { export default {
widgetMenu: { widgetMenu: {
iconSize: 80, iconSize: 80,
panelWidth: 300 background: "#222"
},
leftPanel: {
width: 300,
background: "#ccc"
}, },
tabsPanel: { tabsPanel: {
height: 30 height: 30,
background:'#ddd',
hoverFont: '#338'
}, },
statusBar: { statusBar: {
height: 20 height: 20,
background: "#00c"
},
mainArea: {
background: "#eee"
} }
}; };