From 98d7b3c6b9edf9541c645c8c17ddecac30a59459 Mon Sep 17 00:00:00 2001 From: Jan Prochazka Date: Tue, 10 Nov 2020 21:21:22 +0100 Subject: [PATCH] theme basic --- packages/web/src/App.js | 11 ++-- packages/web/src/Screen.js | 62 ++++++++++---------- packages/web/src/TabsPanel.js | 14 +++-- packages/web/src/datagrid/InplaceEditor.js | 1 - packages/web/src/datagrid/ManagerStyles.js | 1 - packages/web/src/datagrid/ReferenceHeader.js | 6 +- packages/web/src/freetable/MacroDetail.js | 6 +- packages/web/src/icons.js | 1 + packages/web/src/tabs/ViewDataTab.js | 3 - packages/web/src/theme.js | 33 ----------- packages/web/src/theme/_theme.bak.js | 33 +++++++++++ packages/web/src/theme/dark.js | 20 +++++++ packages/web/src/theme/dimensions.js | 18 ++++++ packages/web/src/theme/light.js | 20 +++++++ packages/web/src/theme/useTheme.js | 10 ++++ packages/web/src/utility/globalState.js | 4 ++ packages/web/src/widgets/FormStyledButton.js | 4 +- packages/web/src/widgets/InlineButton.js | 1 - packages/web/src/widgets/Splitter.js | 6 +- packages/web/src/widgets/TabControl.js | 17 +++--- packages/web/src/widgets/Toolbar.js | 12 +++- packages/web/src/widgets/ToolbarButton.js | 4 +- packages/web/src/widgets/WidgetIconPanel.js | 15 +++-- 23 files changed, 197 insertions(+), 105 deletions(-) delete mode 100644 packages/web/src/theme.js create mode 100644 packages/web/src/theme/_theme.bak.js create mode 100644 packages/web/src/theme/dark.js create mode 100644 packages/web/src/theme/dimensions.js create mode 100644 packages/web/src/theme/light.js create mode 100644 packages/web/src/theme/useTheme.js diff --git a/packages/web/src/App.js b/packages/web/src/App.js index 8e9e39fb..a02f8210 100644 --- a/packages/web/src/App.js +++ b/packages/web/src/App.js @@ -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() { - - - - + + + + + + diff --git a/packages/web/src/Screen.js b/packages/web/src/Screen.js index 62d891f6..9b3a4ae1 100644 --- a/packages/web/src/Screen.js +++ b/packages/web/src/Screen.js @@ -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 (
- + - + {!!currentWidget && ( - + )} {!!currentWidget && ( )} - + - + - + diff --git a/packages/web/src/TabsPanel.js b/packages/web/src/TabsPanel.js index 0cda42a4..9a6b64b8 100644 --- a/packages/web/src/TabsPanel.js +++ b/packages/web/src/TabsPanel.js @@ -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} > {tabsByDb[dbKey][0].tabDbName} @@ -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() { { e.preventDefault(); closeTab(tab.tabid); diff --git a/packages/web/src/datagrid/InplaceEditor.js b/packages/web/src/datagrid/InplaceEditor.js index 142ead7b..645c5822 100644 --- a/packages/web/src/datagrid/InplaceEditor.js +++ b/packages/web/src/datagrid/InplaceEditor.js @@ -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` diff --git a/packages/web/src/datagrid/ManagerStyles.js b/packages/web/src/datagrid/ManagerStyles.js index 2cb75afe..578c03d2 100644 --- a/packages/web/src/datagrid/ManagerStyles.js +++ b/packages/web/src/datagrid/ManagerStyles.js @@ -1,5 +1,4 @@ import styled from 'styled-components'; -import theme from '../theme'; export const ManagerInnerContainer = styled.div` flex: 1 1; diff --git a/packages/web/src/datagrid/ReferenceHeader.js b/packages/web/src/datagrid/ReferenceHeader.js index add3447b..0d47bfc4 100644 --- a/packages/web/src/datagrid/ReferenceHeader.js +++ b/packages/web/src/datagrid/ReferenceHeader.js @@ -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; diff --git a/packages/web/src/freetable/MacroDetail.js b/packages/web/src/freetable/MacroDetail.js index cdb4b12c..a7503465 100644 --- a/packages/web/src/freetable/MacroDetail.js +++ b/packages/web/src/freetable/MacroDetail.js @@ -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; diff --git a/packages/web/src/icons.js b/packages/web/src/icons.js index 9c14b6c4..ef195acc 100644 --- a/packages/web/src/icons.js +++ b/packages/web/src/icons.js @@ -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', diff --git a/packages/web/src/tabs/ViewDataTab.js b/packages/web/src/tabs/ViewDataTab.js index 14d0c546..21045532 100644 --- a/packages/web/src/tabs/ViewDataTab.js +++ b/packages/web/src/tabs/ViewDataTab.js @@ -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'; diff --git a/packages/web/src/theme.js b/packages/web/src/theme.js deleted file mode 100644 index 2edd2d7d..00000000 --- a/packages/web/src/theme.js +++ /dev/null @@ -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, - }, -}; diff --git a/packages/web/src/theme/_theme.bak.js b/packages/web/src/theme/_theme.bak.js new file mode 100644 index 00000000..58c3c6b2 --- /dev/null +++ b/packages/web/src/theme/_theme.bak.js @@ -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, +// }, +// }; diff --git a/packages/web/src/theme/dark.js b/packages/web/src/theme/dark.js new file mode 100644 index 00000000..075fb3f6 --- /dev/null +++ b/packages/web/src/theme/dark.js @@ -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', +}; diff --git a/packages/web/src/theme/dimensions.js b/packages/web/src/theme/dimensions.js new file mode 100644 index 00000000..6835bf25 --- /dev/null +++ b/packages/web/src/theme/dimensions.js @@ -0,0 +1,18 @@ +export default { + widgetMenu: { + iconSize: 60, + iconFontSize: '23pt', + }, + tabsPanel: { + height: 53, + }, + statusBar: { + height: 20, + }, + toolBar: { + height: 30, + }, + splitter: { + thickness: 3, + }, +}; diff --git a/packages/web/src/theme/light.js b/packages/web/src/theme/light.js new file mode 100644 index 00000000..4c2aed33 --- /dev/null +++ b/packages/web/src/theme/light.js @@ -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', +}; diff --git a/packages/web/src/theme/useTheme.js b/packages/web/src/theme/useTheme.js new file mode 100644 index 00000000..8576a2b4 --- /dev/null +++ b/packages/web/src/theme/useTheme.js @@ -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]; +} diff --git a/packages/web/src/utility/globalState.js b/packages/web/src/utility/globalState.js index 1a6c60ba..488be23d 100644 --- a/packages/web/src/utility/globalState.js +++ b/packages/web/src/utility/globalState.js @@ -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 }; diff --git a/packages/web/src/widgets/FormStyledButton.js b/packages/web/src/widgets/FormStyledButton.js index 8c4a30a6..f26eb272 100644 --- a/packages/web/src/widgets/FormStyledButton.js +++ b/packages/web/src/widgets/FormStyledButton.js @@ -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; diff --git a/packages/web/src/widgets/InlineButton.js b/packages/web/src/widgets/InlineButton.js index a85fcdc9..daf98a7b 100644 --- a/packages/web/src/widgets/InlineButton.js +++ b/packages/web/src/widgets/InlineButton.js @@ -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; diff --git a/packages/web/src/widgets/Splitter.js b/packages/web/src/widgets/Splitter.js index 81102979..4dd852ae 100644 --- a/packages/web/src/widgets/Splitter.js +++ b/packages/web/src/widgets/Splitter.js @@ -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; diff --git a/packages/web/src/widgets/TabControl.js b/packages/web/src/widgets/TabControl.js index ee07a783..253a3d43 100644 --- a/packages/web/src/widgets/TabControl.js +++ b/packages/web/src/widgets/TabControl.js @@ -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 ( - + {childrenArray .filter((x) => x.props) .map((tab, index) => ( // @ts-ignore - setValue(index)} selected={value == index}> + setValue(index)} selected={value == index} theme={theme}> {tab.props.label} ))} diff --git a/packages/web/src/widgets/Toolbar.js b/packages/web/src/widgets/Toolbar.js index be02f305..6f68f8f5 100644 --- a/packages/web/src/widgets/Toolbar.js +++ b/packages/web/src/widgets/Toolbar.js @@ -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 }) { Import data + + Switch theme + diff --git a/packages/web/src/widgets/ToolbarButton.js b/packages/web/src/widgets/ToolbarButton.js index b2e3a01c..8026e1c4 100644 --- a/packages/web/src/widgets/ToolbarButton.js +++ b/packages/web/src/widgets/ToolbarButton.js @@ -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 && diff --git a/packages/web/src/widgets/WidgetIconPanel.js b/packages/web/src/widgets/WidgetIconPanel.js index 56e49f17..eac05306 100644 --- a/packages/web/src/widgets/WidgetIconPanel.js +++ b/packages/web/src/widgets/WidgetIconPanel.js @@ -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} >