mirrors/dbgate
1
0
Fork 0
mirror of https://github.com/dbgate/dbgate synced 2024-11-08 04:35:58 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

theme basic

Browse Source
This commit is contained in:
Jan Prochazka 2020-11-10 21:21:22 +01:00
parent c8f7dc3d2c
commit 98d7b3c6b9
23 changed files with 197 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/web/src/App.js
View File

@ -9,6 +9,7 @@ import {
OpenedConnectionsProvider,
LeftPanelWidthProvider,
CurrentArchiveProvider,
CurrentThemeProvider,
} from './utility/globalState';
import { SocketProvider } from './utility/SocketProvider';
import ConnectionsPinger from './utility/ConnectionsPinger';
@ -28,10 +29,12 @@ function App() {
<ConnectionsPinger>
<ModalLayerProvider>
<CurrentArchiveProvider>
<UploadsProvider>
<ThemeHelmet />
<Screen />
</UploadsProvider>
<CurrentThemeProvider>
<UploadsProvider>
<ThemeHelmet />
<Screen />
</UploadsProvider>
</CurrentThemeProvider>
</CurrentArchiveProvider>
</ModalLayerProvider>
</ConnectionsPinger>

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

@ -1,7 +1,7 @@
// @ts-nocheck
import React from 'react';
import theme from './theme';
import dimensions from './theme/dimensions';
import styled from 'styled-components';
import TabsPanel from './TabsPanel';
import TabContent from './TabContent';
@ -14,14 +14,15 @@ import { useSplitterDrag, HorizontalSplitHandle } from './widgets/Splitter';
import { ModalLayer } from './modals/showModal';
import DragAndDropFileTarget from './DragAndDropFileTarget';
import { useUploadsZone } from './utility/UploadsProvider';
import useTheme from './theme/useTheme';
const BodyDiv = styled.div`
position: fixed;
top: ${theme.tabsPanel.height + theme.toolBar.height}px;
top: ${dimensions.tabsPanel.height + dimensions.toolBar.height}px;
left: ${(props) => props.contentLeft}px;
bottom: ${theme.statusBar.height}px;
bottom: ${dimensions.statusBar.height}px;
right: 0;
background-color: ${theme.mainArea.background};
background-color: ${(props) => props.theme.mainAreaBackground};
`;
const ToolBarDiv = styled.div`
@ -29,36 +30,36 @@ const ToolBarDiv = styled.div`
top: 0;
left: 0;
right: 0;
background-color: ${theme.toolBar.background};
height: ${theme.toolBar.height}px;
background-color: ${(props) => props.theme.toolBarBackground};
height: ${dimensions.toolBar.height}px;
`;
const IconBar = styled.div`
position: fixed;
top: ${theme.toolBar.height}px;
top: ${dimensions.toolBar.height}px;
left: 0;
bottom: ${theme.statusBar.height}px;
width: ${theme.widgetMenu.iconSize}px;
background-color: ${theme.widgetMenu.background};
bottom: ${dimensions.statusBar.height}px;
width: ${dimensions.widgetMenu.iconSize}px;
background-color: ${(props) => props.theme.widgetBackground};
`;
const LeftPanel = styled.div`
position: fixed;
top: ${theme.toolBar.height}px;
left: ${theme.widgetMenu.iconSize}px;
bottom: ${theme.statusBar.height}px;
background-color: ${theme.leftPanel.background};
top: ${dimensions.toolBar.height}px;
left: ${dimensions.widgetMenu.iconSize}px;
bottom: ${dimensions.statusBar.height}px;
background-color: ${(props) => props.theme.leftPanelBackground};
display: flex;
`;
const TabsPanelContainer = styled.div`
display: flex;
position: fixed;
top: ${theme.toolBar.height}px;
top: ${dimensions.toolBar.height}px;
left: ${(props) => props.contentLeft}px;
height: ${theme.tabsPanel.height}px;
height: ${dimensions.tabsPanel.height}px;
right: 0;
background-color: ${theme.tabsPanel.background};
background-color: ${(props) => props.theme.tabsPanelBackground};
border-top: 1px solid #ccc;
overflow-x: auto;
@ -85,26 +86,27 @@ const TabsPanelContainer = styled.div`
const StausBarContainer = styled.div`
position: fixed;
height: ${theme.statusBar.height}px;
height: ${dimensions.statusBar.height}px;
left: 0;
right: 0;
bottom: 0;
background-color: ${theme.statusBar.background};
background-color: ${(props) => props.theme.statusBarBackground};
`;
const ScreenHorizontalSplitHandle = styled(HorizontalSplitHandle)`
position: absolute;
top: ${theme.toolBar.height}px;
bottom: ${theme.statusBar.height}px;
top: ${dimensions.toolBar.height}px;
bottom: ${dimensions.statusBar.height}px;
`;
export default function Screen() {
const theme = useTheme();
const currentWidget = useCurrentWidget();
const leftPanelWidth = useLeftPanelWidth();
const setLeftPanelWidth = useSetLeftPanelWidth();
const contentLeft = currentWidget
? theme.widgetMenu.iconSize + leftPanelWidth + theme.splitter.thickness
: theme.widgetMenu.iconSize;
? dimensions.widgetMenu.iconSize + leftPanelWidth + dimensions.splitter.thickness
: dimensions.widgetMenu.iconSize;
const toolbarPortalRef = React.useRef();
const onSplitDown = useSplitterDrag('clientX', (diff) => setLeftPanelWidth((v) => v + diff));
@ -112,30 +114,30 @@ export default function Screen() {
return (
<div {...getRootProps()}>
<ToolBarDiv>
<ToolBarDiv theme={theme}>
<ToolBar toolbarPortalRef={toolbarPortalRef} />
</ToolBarDiv>
<IconBar>
<IconBar theme={theme}>
<WidgetIconPanel />
</IconBar>
{!!currentWidget && (
<LeftPanel>
<LeftPanel theme={theme}>
<WidgetContainer />
</LeftPanel>
)}
{!!currentWidget && (
<ScreenHorizontalSplitHandle
onMouseDown={onSplitDown}
style={{ left: leftPanelWidth + theme.widgetMenu.iconSize }}
style={{ left: leftPanelWidth + dimensions.widgetMenu.iconSize }}
/>
)}
<TabsPanelContainer contentLeft={contentLeft}>
<TabsPanelContainer contentLeft={contentLeft} theme={theme}>
<TabsPanel></TabsPanel>
</TabsPanelContainer>
<BodyDiv contentLeft={contentLeft}>
<BodyDiv contentLeft={contentLeft} theme={theme}>
<TabContent toolbarPortalRef={toolbarPortalRef} />
</BodyDiv>
<StausBarContainer>
<StausBarContainer theme={theme}>
<StatusBar />
</StausBarContainer>
<ModalLayer />

14
packages/web/src/TabsPanel.js
View File

@ -1,13 +1,13 @@
import _ from 'lodash';
import React from 'react';
import styled from 'styled-components';
import theme from './theme';
import { DropDownMenuItem, DropDownMenuDivider } from './modals/DropDownMenu';
import { useOpenedTabs, useSetOpenedTabs, useCurrentDatabase, useSetCurrentDatabase } from './utility/globalState';
import { showMenu } from './modals/DropDownMenu';
import { getConnectionInfo } from './utility/metadataLoaders';
import { FontIcon } from './icons';
import useTheme from './theme/useTheme';
// const files = [
// { name: 'app.js' },
@ -47,7 +47,7 @@ const DbNameWrapper = styled.div`
}
background-color: ${(props) =>
// @ts-ignore
props.selected ? theme.mainArea.background : 'inherit'};
props.selected ? props.theme.mainAreaBackground : 'inherit'};
`;
// const DbNameWrapperInner = styled.div`
@ -67,11 +67,11 @@ const FileTabItem = styled.div`
cursor: pointer;
user-select: none;
&:hover {
color: ${theme.tabsPanel.hoverFont};
color: ${(props) => props.theme.tabsPanelHoverFont};
}
background-color: ${(props) =>
// @ts-ignore
props.selected ? theme.mainArea.background : 'inherit'};
props.selected ? props.theme.mainAreaBackground : 'inherit'};
`;
const FileNameWrapper = styled.span`
@ -82,7 +82,7 @@ const CloseButton = styled(FontIcon)`
margin-left: 5px;
color: gray;
&:hover {
color: ${theme.tabsPanel.hoverFont};
color: ${(props) => props.theme.tabsPanelHoverFont};
}
`;
@ -124,6 +124,7 @@ function getDbIcon(key) {
export default function TabsPanel() {
// const formatDbKey = (conid, database) => `${database}-${conid}`;
const theme = useTheme();
const tabs = useOpenedTabs();
const setOpenedTabs = useSetOpenedTabs();
@ -252,6 +253,7 @@ export default function TabsPanel() {
// @ts-ignore
selected={tabsByDb[dbKey][0].tabDbKey == currentDbKey}
onClick={() => handleSetDb(tabsByDb[dbKey][0].props)}
theme={theme}
>
<FontIcon icon={getDbIcon(dbKey)} /> {tabsByDb[dbKey][0].tabDbName}
</DbNameWrapper>
@ -261,6 +263,7 @@ export default function TabsPanel() {
{...tab}
title={tab.tooltip}
key={tab.tabid}
theme={theme}
onClick={(e) => handleTabClick(e, tab.tabid)}
onMouseUp={(e) => handleMouseUp(e, tab.tabid)}
onContextMenu={(e) => handleContextMenu(e, tab.tabid, tab.props)}
@ -270,6 +273,7 @@ export default function TabsPanel() {
<CloseButton
icon="icon close"
className="tabCloseButton"
theme={theme}
onClick={(e) => {
e.preventDefault();
closeTab(tab.tabid);

1
packages/web/src/datagrid/InplaceEditor.js
View File

@ -3,7 +3,6 @@
import _ from 'lodash';
import React from 'react';
import styled from 'styled-components';
import theme from '../theme';
import keycodes from '../utility/keycodes';
const StyledInput = styled.input`

1
packages/web/src/datagrid/ManagerStyles.js
View File

@ -1,5 +1,4 @@
import styled from 'styled-components';
import theme from '../theme';
export const ManagerInnerContainer = styled.div`
flex: 1 1;

6
packages/web/src/datagrid/ReferenceHeader.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import ToolbarButton from '../widgets/ToolbarButton';
import styled from 'styled-components';
import theme from '../theme';
import dimensions from '../theme/dimensions';
import { FontIcon } from '../icons';
const Container = styled.div`
@ -9,8 +9,8 @@ const Container = styled.div`
justify-content: space-between;
align-items: center;
background: #ddeeee;
height: ${theme.toolBar.height}px;
min-height: ${theme.toolBar.height}px;
height: ${dimensions.toolBar.height}px;
min-height: ${dimensions.toolBar.height}px;
overflow: hidden;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;

6
packages/web/src/freetable/MacroDetail.js
View File

@ -2,7 +2,7 @@ import React from 'react';
import ToolbarButton from '../widgets/ToolbarButton';
import styled from 'styled-components';
import { TabPage, TabControl } from '../widgets/TabControl';
import theme from '../theme';
import dimensions from '../theme/dimensions';
import JavaScriptEditor from '../sqleditor/JavaScriptEditor';
import MacroParameters from './MacroParameters';
import { WidgetTitle } from '../widgets/WidgetStyles';
@ -15,8 +15,8 @@ const Container = styled.div`
justify-content: space-between;
align-items: center;
background: #ddeeee;
height: ${theme.toolBar.height}px;
min-height: ${theme.toolBar.height}px;
height: ${dimensions.toolBar.height}px;
min-height: ${dimensions.toolBar.height}px;
overflow: hidden;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;

1
packages/web/src/icons.js
View File

@ -34,6 +34,7 @@ const iconNames = {
'icon format-code': 'mdi mdi-code-tags-check',
'icon show-wizard': 'mdi mdi-comment-edit',
'icon disconnected': 'mdi mdi-lan-disconnect',
'icon theme': 'mdi mdi-brightness-6',
'icon run': 'mdi mdi-play',
'icon chevron-down': 'mdi mdi-chevron-down',

3
packages/web/src/tabs/ViewDataTab.js
View File

@ -1,7 +1,4 @@
import React from 'react';
import useFetch from '../utility/useFetch';
import styled from 'styled-components';
import theme from '../theme';
import DataGrid from '../datagrid/DataGrid';
import { ViewGridDisplay, createGridCache, createChangeSet } from '@dbgate/datalib';
import { useConnectionInfo, useViewInfo } from '../utility/metadataLoaders';

33
packages/web/src/theme.js
View File

@ -1,33 +0,0 @@
export default {
widgetMenu: {
iconSize: 60,
background: '#222',
iconFontSize: '23pt',
iconFontColor: '#eee',
backgroundHover: '#555',
backgroundSelected: '#4CAF50',
},
leftPanel: {
// width: 300,
background: '#ccc',
},
tabsPanel: {
height: 53,
background: '#ddd',
hoverFont: '#338',
},
statusBar: {
height: 20,
background: '#00c',
},
toolBar: {
height: 30,
background: '#eee',
},
mainArea: {
background: '#eee',
},
splitter: {
thickness: 3,
},
};

33
packages/web/src/theme/_theme.bak.js Normal file
View File

@ -0,0 +1,33 @@
// export default {
// widgetMenu: {
// iconSize: 60,
// background: '#222',
// iconFontSize: '23pt',
// iconFontColor: '#eee',
// backgroundHover: '#555',
// backgroundSelected: '#4CAF50',
// },
// leftPanel: {
// // width: 300,
// background: '#ccc',
// },
// tabsPanel: {
// height: 53,
// background: '#ddd',
// hoverFont: '#338',
// },
// statusBar: {
// height: 20,
// background: '#00c',
// },
// toolBar: {
// height: 30,
// background: '#eee',
// },
// mainArea: {
// background: '#eee',
// },
// splitter: {
// thickness: 3,
// },
// };

20
packages/web/src/theme/dark.js Normal file
View File

@ -0,0 +1,20 @@
export default {
background: '#000',
iconFontColor: '#eee',
backgroundHover: '#555',
backgroundSelected: '#4CAF50',
leftPanelBackground: '#ccc',
widgetBackground: '#222',
widgetIconFontColor: '#eee',
widgetBackgroundHover: '#555',
widgetBackgroundSelected: '#4CAF50',
tabsPanelBackground: '#ccc',
tabsPanelHoverFont: '#338',
statusBarBackground: '#00c',
toolBarBackground: '#eee',
mainAreaBackground: '#333',
};

18
packages/web/src/theme/dimensions.js Normal file
View File

@ -0,0 +1,18 @@
export default {
widgetMenu: {
iconSize: 60,
iconFontSize: '23pt',
},
tabsPanel: {
height: 53,
},
statusBar: {
height: 20,
},
toolBar: {
height: 30,
},
splitter: {
thickness: 3,
},
};

20
packages/web/src/theme/light.js Normal file
View File

@ -0,0 +1,20 @@
export default {
background: '#222',
iconFontColor: '#eee',
backgroundHover: '#555',
backgroundSelected: '#4CAF50',
leftPanelBackground: '#ccc',
widgetBackground: '#222',
widgetIconFontColor: '#eee',
widgetBackgroundHover: '#555',
widgetBackgroundSelected: '#4CAF50',
tabsPanelBackground: '#ccc',
tabsPanelHoverFont: '#338',
statusBarBackground: '#00c',
toolBarBackground: '#eee',
mainAreaBackground: '#eee',
};

10
packages/web/src/theme/useTheme.js Normal file
View File

@ -0,0 +1,10 @@
import { useCurrentTheme } from '../utility/globalState';
import light from './light';
import dark from './dark';
const themes = { light, dark };
export default function useTheme() {
const currentTheme = useCurrentTheme();
return themes[currentTheme];
}

4
packages/web/src/utility/globalState.js
View File

@ -119,3 +119,7 @@ export { LeftPanelWidthProvider, useLeftPanelWidth, useSetLeftPanelWidth };
const [CurrentArchiveProvider, useCurrentArchive, useSetCurrentArchive] = createGlobalState('default');
export { CurrentArchiveProvider, useCurrentArchive, useSetCurrentArchive };
const [CurrentThemeProvider, useCurrentTheme, useSetCurrentTheme] = createGlobalState('light');
export { CurrentThemeProvider, useCurrentTheme, useSetCurrentTheme };

4
packages/web/src/widgets/FormStyledButton.js
View File

@ -1,10 +1,10 @@
// @ts-nocheck
import React from 'react';
import styled from 'styled-components';
import theme from '../theme';
import dimensions from '../theme/dimensions';
const ButtonInput = styled.input`
// height: ${theme.toolBar.height - 5}px;
// height: ${dimensions.toolBar.height - 5}px;
border: 1px solid #2e6da4;
padding: 5px;
margin: 2px;

1
packages/web/src/widgets/InlineButton.js
View File

@ -1,7 +1,6 @@
// @ts-nocheck
import React from 'react';
import styled from 'styled-components';
import theme from '../theme';
const ButtonDiv = styled.div`
//box-shadow: 3px 4px 0px 0px #899599;

6
packages/web/src/widgets/Splitter.js
View File

@ -2,7 +2,7 @@ import _ from 'lodash';
import React from 'react';
import styled from 'styled-components';
import useDimensions from '../utility/useDimensions';
import theme from '../theme';
import dimensions from '../theme/dimensions';
const SplitterMainBase = styled.div`
flex: 1;
@ -28,7 +28,7 @@ const HorizontalMainContainer = styled(SplitterMainBase)`
export const VerticalSplitHandle = styled.div`
background-color: #ccc;
height: ${theme.splitter.thickness}px;
height: ${dimensions.splitter.thickness}px;
cursor: row-resize;
&:hover {
background-color: #AAA;
@ -37,7 +37,7 @@ export const VerticalSplitHandle = styled.div`
export const HorizontalSplitHandle = styled.div`
background-color: #ccc;
width: ${theme.splitter.thickness}px;
width: ${dimensions.splitter.thickness}px;
cursor: col-resize;
&:hover {
background-color: #AAA;

17
packages/web/src/widgets/TabControl.js
View File

@ -1,7 +1,8 @@
import React from 'react';
import _ from 'lodash';
import styled from 'styled-components';
import theme from '../theme';
import useTheme from '../theme/useTheme';
import dimensions from '../theme/dimensions';
const TabItem = styled.div`
border-right: 1px solid white;
@ -11,11 +12,11 @@ const TabItem = styled.div`
align-items: center;
cursor: pointer;
&:hover {
color: ${theme.tabsPanel.hoverFont};
color: ${(props) => props.theme.tabsPanelHoverFont};
}
background-color: ${(props) =>
// @ts-ignore
props.selected ? theme.mainArea.background : 'inherit'};
props.selected ? props.theme.mainAreaBackground : 'inherit'};
`;
const TabNameWrapper = styled.span`
@ -41,9 +42,9 @@ const TabContainer = styled.div`
const TabsContainer = styled.div`
display: flex;
height: ${theme.tabsPanel.height}px;
height: ${dimensions.tabsPanel.height}px;
right: 0;
background-color: ${theme.tabsPanel.background};
background-color: ${(props) => props.theme.tabsPanelBackground};
`;
const TabContentContainer = styled.div`
@ -72,6 +73,8 @@ export function TabControl({ children, activePageIndex = undefined }) {
if (activePageIndex != null) setValue(activePageIndex);
}, [activePageIndex]);
const theme = useTheme();
// // cleanup closed tabs
// if (_.difference(_.keys(mountedTabs), _.map(childrenArray, 'props.key')).length > 0) {
// setMountedTabs(_.pickBy(mountedTabs, (v, k) => childrenArray.find((x) => x.props.key == k)));
@ -79,12 +82,12 @@ export function TabControl({ children, activePageIndex = undefined }) {
return (
<MainContainer>
<TabsContainer>
<TabsContainer theme={theme}>
{childrenArray
.filter((x) => x.props)
.map((tab, index) => (
// @ts-ignore
<TabItem key={index} onClick={() => setValue(index)} selected={value == index}>
<TabItem key={index} onClick={() => setValue(index)} selected={value == index} theme={theme}>
<TabNameWrapper>{tab.props.label}</TabNameWrapper>
</TabItem>
))}

12
packages/web/src/widgets/Toolbar.js
View File

@ -5,7 +5,7 @@ import styled from 'styled-components';
import ToolbarButton from './ToolbarButton';
import useNewQuery from '../query/useNewQuery';
import { useConfig } from '../utility/metadataLoaders';
import { useSetOpenedTabs, useOpenedTabs } from '../utility/globalState';
import { useSetOpenedTabs, useOpenedTabs, useCurrentTheme, useSetCurrentTheme } from '../utility/globalState';
import { openNewTab } from '../utility/common';
import useNewFreeTable from '../freetable/useNewFreeTable';
import ImportExportModal from '../modals/ImportExportModal';
@ -25,6 +25,8 @@ export default function ToolBar({ toolbarPortalRef }) {
const setOpenedTabs = useSetOpenedTabs();
const openedTabs = useOpenedTabs();
const showModal = useShowModal();
const currentTheme = useCurrentTheme();
const setCurrentTheme = useSetCurrentTheme();
React.useEffect(() => {
window['dbgate_createNewConnection'] = modalState.open;
@ -47,6 +49,11 @@ export default function ToolBar({ toolbarPortalRef }) {
));
};
const switchTheme = () => {
if (currentTheme == 'light') setCurrentTheme('dark');
else setCurrentTheme('light');
};
function openTabFromButton(button) {
if (openedTabs.find((x) => x.tabComponent == 'InfoPageTab' && x.props && x.props.page == button.page)) {
setOpenedTabs((tabs) =>
@ -100,6 +107,9 @@ export default function ToolBar({ toolbarPortalRef }) {
<ToolbarButton onClick={showImport} icon="icon import">
Import data
</ToolbarButton>
<ToolbarButton onClick={switchTheme} icon="icon theme">
Switch theme
</ToolbarButton>
<ToolbarContainer ref={toolbarPortalRef}></ToolbarContainer>
</ToolbarContainer>

4
packages/web/src/widgets/ToolbarButton.js
View File

@ -2,7 +2,7 @@
import React from 'react';
import styled from 'styled-components';
import { FontIcon } from '../icons';
import theme from '../theme';
import dimensions from '../theme/dimensions';
const ButtonDiv = styled.div`
padding: 5px 15px;
@ -10,7 +10,7 @@ const ButtonDiv = styled.div`
color: black;
border: 0;
border-right: 1px solid #ccc;
height: ${theme.toolBar.height}px;
height: ${dimensions.toolBar.height}px;
${(props) =>
!props.disabled &&

15
packages/web/src/widgets/WidgetIconPanel.js
View File

@ -1,25 +1,27 @@
import React from 'react';
import theme from '../theme';
import dimensions from '../theme/dimensions';
import styled from 'styled-components';
import { useCurrentWidget, useSetCurrentWidget } from '../utility/globalState';
import { FontIcon } from '../icons';
import useTheme from '../theme/useTheme';
const IconWrapper = styled.div`
color: ${theme.widgetMenu.iconFontColor};
font-size: ${theme.widgetMenu.iconFontSize};
height: ${theme.widgetMenu.iconSize}px;
color: ${(props) => props.theme.widgetIconFontColor};
font-size: ${dimensions.widgetMenu.iconFontSize};
height: ${dimensions.widgetMenu.iconSize}px;
display: flex;
align-items: center;
justify-content: center;
background-color: ${(props) =>
// @ts-ignore
props.isSelected ? theme.widgetMenu.backgroundSelected : 'inherit'};
props.isSelected ? props.theme.widgetBackgroundSelected : 'inherit'};
&:hover {
background-color: ${theme.widgetMenu.backgroundHover};
background-color: ${(props) => props.theme.widgetBackgroundHover};
}
`;
export default function WidgetIconPanel() {
const theme = useTheme();
const widgets = [
{
icon: 'icon database',
@ -62,6 +64,7 @@ export default function WidgetIconPanel() {
isSelected={name === currentWidget}
onClick={() => setCurrentWidget(name === currentWidget ? null : name)}
title={title}
theme={theme}
>
<FontIcon icon={icon} />
</IconWrapper>