toolbar

packages/web/src/Screen.js

@@ -8,20 +8,30 @@ import TabContent from './TabContent';
 import WidgetIconPanel from './widgets/WidgetIconPanel';
 import { useCurrentWidget } from './utility/globalState';
 import WidgetContainer from './widgets/WidgetContainer';
+import ToolBar from './widgets/Toolbar';
 
 const BodyDiv = styled.div`
   position: fixed;
-  top: ${theme.tabsPanel.height}px;
+  top: ${theme.tabsPanel.height + theme.toolBar.height}px;
   left: ${props => theme.widgetMenu.iconSize + props.leftPanelWidth}px;
   bottom: ${theme.statusBar.height}px;
   right: 0;
   background-color: ${theme.mainArea.background};
 `;
 
-const IconBar = styled.div`
+const ToolBarDiv = styled.div`
   position: fixed;
   top: 0;
   left: 0;
+  right: 0;
+  background-color: ${theme.toolBar.background};
+  height: ${theme.toolBar.height}px;
+`;
+
+const IconBar = styled.div`
+  position: fixed;
+  top: ${theme.toolBar.height}px;
+  left: 0;
   bottom: ${theme.statusBar.height}px;
   width: ${theme.widgetMenu.iconSize}px;
   background-color: ${theme.widgetMenu.background};
@@ -29,7 +39,7 @@ const IconBar = styled.div`
 
 const LeftPanel = styled.div`
   position: fixed;
-  top: 0;
+  top: ${theme.toolBar.height}px;
   left: ${theme.widgetMenu.iconSize}px;
   bottom: ${theme.statusBar.height}px;
   width: ${theme.leftPanel.width}px;
@@ -40,7 +50,7 @@ const LeftPanel = styled.div`
 const TabsPanelContainer = styled.div`
   display: flex;
   position: fixed;
-  top: 0;
+  top: ${theme.toolBar.height}px;
   left: ${props => theme.widgetMenu.iconSize + props.leftPanelWidth}px;
   height: ${theme.tabsPanel.height}px;
   right: 0;
@@ -61,6 +71,9 @@ export default function Screen() {
   const leftPanelWidth = currentWidget ? theme.leftPanel.width : 0;
   return (
     <>
+      <ToolBarDiv>
+        <ToolBar />
+      </ToolBarDiv>
       <IconBar>
         <WidgetIconPanel />
       </IconBar>
@@ -72,7 +85,9 @@ export default function Screen() {
       <TabsPanelContainer leftPanelWidth={leftPanelWidth}>
         <TabsPanel></TabsPanel>
       </TabsPanelContainer>
-      <BodyDiv leftPanelWidth={leftPanelWidth}><TabContent/></BodyDiv>
+      <BodyDiv leftPanelWidth={leftPanelWidth}>
+        <TabContent />
+      </BodyDiv>
       <StausBar></StausBar>
     </>
   );

packages/web/src/theme.js

@@ -20,6 +20,10 @@ export default {
     height: 20,
     background: "#00c"
   },
+  toolBar: {
+    height: 30,
+    background: "#eee",
+  },
   mainArea: {
     background: "#eee"
   }

packages/web/src/widgets/DatabaseWidget.js

@@ -1,8 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import useModalState from '../modals/useModalState';
-import ConnectionModal from '../modals/ConnectionModal';
 import useFetch from '../utility/useFetch';
 import { AppObjectList } from '../appobj/AppObjectList';
 import connectionAppObject from '../appobj/connectionAppObject';
@@ -41,15 +39,12 @@ function SubDatabaseList({ data }) {
 }
 
 function ConnectionList() {
-  const modalState = useModalState();
   const connections = useFetch({
     url: 'connections/list',
     reloadTrigger: 'connection-list-changed',
   });
   return (
     <>
-      <ConnectionModal modalState={modalState} />
-      <button onClick={modalState.open}>Add connection</button>
       <AppObjectList list={connections} makeAppObj={connectionAppObject} SubItems={SubDatabaseList} />
     </>
   );

packages/web/src/widgets/Toolbar.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import useModalState from '../modals/useModalState';
+import ConnectionModal from '../modals/ConnectionModal';
+import styled from 'styled-components';
+import theme from '../theme';
+
+const ToolbarContainer = styled.div`
+  display: flex;
+  user-select: none;
+`;
+
+const ToolbarButton = styled.div`
+  // height: ${theme.toolBar.height-5}px;
+  // border: 1px solid gray;
+  padding: 5px;
+  margin: 2px;
+  //background-color: #777;
+  background-color: #337ab7;
+  border-color: #2e6da4;  color: white;
+  border-radius: 2px;
+
+  &:hover {
+    background-color: #286090;
+  }
+
+`;
+
+export default function ToolBar() {
+  const modalState = useModalState();
+  return (
+    <ToolbarContainer>
+      <ConnectionModal modalState={modalState} />
+      <ToolbarButton onClick={modalState.open}>Add connection</ToolbarButton>
+    </ToolbarContainer>
+  );
+}