toolbar optimalization - new commands grouped together

packages/web/src/widgets/Toolbar.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import useModalState from '../modals/useModalState';
 import ConnectionModal from '../modals/ConnectionModal';
+import { DropDownMenuItem } from '../modals/DropDownMenu';
 import styled from 'styled-components';
-import ToolbarButton, { ToolbarButtonExternalImage } from './ToolbarButton';
+import ToolbarButton, { ToolbarButtonExternalImage, ToolbarDropDownButton } from './ToolbarButton';
 import useNewQuery, { useNewQueryDesign } from '../query/useNewQuery';
 import { useConfig, useFavorites } from '../utility/metadataLoaders';
 import {
@@ -132,25 +133,14 @@ export default function ToolBar({ toolbarPortalRef }) {
             {x.title}
           </ToolbarButton>
         ))}
-      {config.runAsPortal == false && (
-        <ToolbarButton onClick={modalState.open} icon="icon new-connection">
-          Add connection
-        </ToolbarButton>
-      )}
-      <ToolbarButton onClick={newQuery} icon="icon sql-file">
-        New Query
-      </ToolbarButton>
-      {!!currentDatabase && (
-        <ToolbarButton onClick={newQueryDesign} icon="icon query-design">
-          Query Designer
-        </ToolbarButton>
-      )}
-      <ToolbarButton onClick={newFreeTable} icon="icon table">
-        Free table editor
-      </ToolbarButton>
-      <ToolbarButton onClick={newMarkdown} icon="icon markdown">
-        New markdown
-      </ToolbarButton>
+      <ToolbarDropDownButton icon="icon add" text="New">
+        {config.runAsPortal == false && <DropDownMenuItem onClick={modalState.open}>Connection</DropDownMenuItem>}
+        <DropDownMenuItem onClick={newQuery}>SQL query</DropDownMenuItem>
+        {!!currentDatabase && <DropDownMenuItem onClick={newQueryDesign}>Query designer</DropDownMenuItem>}
+        <DropDownMenuItem onClick={newFreeTable}>Free table editor</DropDownMenuItem>
+        <DropDownMenuItem onClick={newMarkdown}>Markdown page</DropDownMenuItem>
+      </ToolbarDropDownButton>
+
       <ToolbarButton onClick={showImport} icon="icon import">
         Import data
       </ToolbarButton>

packages/web/src/widgets/ToolbarButton.js

@@ -2,6 +2,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { FontIcon } from '../icons';
+import { useShowMenu } from '../modals/showMenu';
 import dimensions from '../theme/dimensions';
 import useTheme from '../theme/useTheme';
 
@@ -85,3 +86,32 @@ export function ToolbarButtonExternalImage({ image, onClick, disabled = undefine
     </ButtonDiv>
   );
 }
+
+export function ToolbarDropDownButton({ children, icon = undefined, text, disabled = undefined, patchY = 2 }) {
+  const theme = useTheme();
+  const showMenu = useShowMenu();
+  const buttonRef = React.useRef(null);
+
+  return (
+    <ButtonDiv
+      theme={theme}
+      onClick={() => {
+        if (disabled) return;
+
+        const rect = buttonRef.current.getBoundingClientRect();
+        showMenu(rect.left, rect.bottom, children);
+      }}
+      disabled={disabled}
+    >
+      <ButtonDivInner patchY={patchY} ref={buttonRef}>
+        {icon && (
+          <StyledIconSpan disabled={disabled} theme={theme}>
+            <FontIcon icon={icon} />
+          </StyledIconSpan>
+        )}
+        {text}
+        <FontIcon icon="icon chevron-down" />
+      </ButtonDivInner>
+    </ButtonDiv>
+  );
+}

packages/web/src/widgets/WidgetColumnBar.js

@@ -49,7 +49,7 @@ export default function WidgetColumnBar({ children }) {
   const toggleCollapsed = (name) => {
     // skip collapse last uncollapsed item
     if (!childArray.find((x) => x.props.name != name && !collapsedWidgets.includes(x.props.name))) return;
-    
+
     if (collapsedWidgets.includes(name)) setCollapsedWidgets(collapsedWidgets.filter((x) => x != name));
     else setCollapsedWidgets([...collapsedWidgets, name]);
   };