button redesign

packages/web/src/datagrid/ColumnHeaderControl.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import styled from 'styled-components';
+import ColumnLabel from './ColumnLabel';
+import DropDownButton from '../widgets/DropDownButton';
+import { DropDownMenuItem } from '../modals/DropDownMenu';
+
+const HeaderDiv = styled.div`
+  display: flex;
+`;
+
+const LabelDiv = styled.div`
+  flex: 1;
+  min-width: 10px;
+  padding-left: 2px;
+  margin: auto;
+`;
+
+export default function ColumnHeaderControl({ column }) {
+  return (
+    <HeaderDiv>
+      <LabelDiv>
+        <ColumnLabel {...column} />
+      </LabelDiv>
+      <DropDownButton>
+        <DropDownMenuItem onClick={() => {}}>Sort ascending</DropDownMenuItem>
+        <DropDownMenuItem onClick={() => {}}>Sort descending</DropDownMenuItem>
+      </DropDownButton>
+    </HeaderDiv>
+  );
+}

packages/web/src/datagrid/ColumnManager.js

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import ColumnLabel from './ColumnLabel';
 import { filterName } from '@dbgate/datalib';
 import { ExpandIcon } from '../icons';
+import InlineButton from '../widgets/InlineButton';
 
 const Wrapper = styled.div``;
 
@@ -79,8 +80,8 @@ export default function ColumnManager(props) {
     <Wrapper>
       <SearchBoxWrapper>
         <Input type="text" placeholder="Search" value={columnFilter} onChange={e => setColumnFilter(e.target.value)} />
-        <Button onClick={() => display.hideAllColumns()}>Hide</Button>
-        <Button onClick={() => display.showAllColumns()}>Show</Button>
+        <InlineButton onClick={() => display.hideAllColumns()}>Hide</InlineButton>
+        <InlineButton onClick={() => display.showAllColumns()}>Show</InlineButton>
       </SearchBoxWrapper>
       {display
         .getColumns(columnFilter)

packages/web/src/datagrid/DataFilterControl.js

@@ -4,6 +4,7 @@ import { DropDownMenuItem, DropDownMenuDivider, showMenu } from '../modals/DropD
 import styled from 'styled-components';
 import keycodes from '../utility/keycodes';
 import { parseFilter } from '@dbgate/filterparser';
+import InlineButton from '../widgets/InlineButton';
 // import { $ } from '../../Utility/jquery';
 // import autobind from 'autobind-decorator';
 // import * as React from 'react';
@@ -37,9 +38,9 @@ const FilterInput = styled.input`
   min-width: 10px;
   background-color: ${props => (props.state == 'ok' ? '#CCFFCC' : props.state == 'error' ? '#FFCCCC' : 'white')};
 `;
-const FilterButton = styled.button`
-  color: gray;
-`;
+// const FilterButton = styled.button`
+//   color: gray;
+// `;
 
 function DropDownContent({ filterType, setFilter, filterMultipleValues, openFilterWindow }) {
   switch (filterType) {
@@ -175,8 +176,8 @@ export default function DataFilterControl({ isReadOnly = false, filterType, filt
   };
   const filterMultipleValues = () => {};
   const openFilterWindow = operator => {};
-  const buttonRef = React.createRef();
-  const editorRef = React.createRef();
+  const buttonRef = React.useRef();
+  const editorRef = React.useRef();
 
   const handleKeyDown = ev => {
     if (isReadOnly) return;
@@ -235,9 +236,9 @@ export default function DataFilterControl({ isReadOnly = false, filterType, filt
         state={filterState}
         onBlur={applyFilter}
       />
-      <FilterButton ref={buttonRef} onClick={handleShowMenu}>
+      <InlineButton buttonRef={buttonRef} onClick={handleShowMenu} square>
         <i className="fas fa-filter" />
-      </FilterButton>
+      </InlineButton>
     </FilterDiv>
   );
 }

packages/web/src/datagrid/DataGridCore.js

@@ -42,6 +42,8 @@ import { sleep } from '../utility/common';
 import { copyTextToClipboard } from '../utility/clipboard';
 import DataGridToolbar from './DataGridToolbar';
 import usePropsCompare from '../utility/usePropsCompare';
+import ColumnHeaderControl from './ColumnHeaderControl';
+import InlineButton from '../widgets/InlineButton';
 
 const GridContainer = styled.div`
   position: absolute;
@@ -79,7 +81,8 @@ const TableHeaderCell = styled.td`
   border: 1px solid #c0c0c0;
   // border-collapse: collapse;
   text-align: left;
-  padding: 2px;
+  padding: 0;
+  margin: 0;
   background-color: #f6f7f9;
   overflow: hidden;
 `;
@@ -100,6 +103,7 @@ const FocusField = styled.input`
 /** @param props {import('./types').DataGridProps} */
 export default function DataGridCore(props) {
   const { conid, database, display, changeSetState, dispatchChangeSet, tabVisible } = props;
+  // console.log('RENDER GRID', display.baseTable.pureName);
   const columns = React.useMemo(() => display.getGridColumns(), [display]);
 
   // usePropsCompare(props);
@@ -314,7 +318,8 @@ export default function DataGridCore(props) {
   );
 
   const realColumnUniqueNames = React.useMemo(
-    () => _.range(columnSizes.realCount).map(realIndex => columns[columnSizes.realToModel(realIndex)].uniqueName),
+    () =>
+      _.range(columnSizes.realCount).map(realIndex => (columns[columnSizes.realToModel(realIndex)] || {}).uniqueName),
     [columnSizes, columns]
   );
 
@@ -331,6 +336,8 @@ export default function DataGridCore(props) {
   };
 
   function handleGridMouseDown(event) {
+    if (event.target.closest('.buttonLike')) return;
+    if (event.target.closest('input')) return;
     // event.target.closest('table').focus();
     event.preventDefault();
     // @ts-ignore
@@ -838,7 +845,7 @@ export default function DataGridCore(props) {
                 key={col.uniqueName}
                 style={{ width: col.widthPx, minWidth: col.widthPx, maxWidth: col.widthPx }}
               >
-                <ColumnLabel {...col} />
+                <ColumnHeaderControl column={col} />
               </TableHeaderCell>
             ))}
           </TableHeaderRow>
@@ -849,9 +856,9 @@ export default function DataGridCore(props) {
               data-col="header"
             >
               {filterCount > 0 && (
-                <button onClick={handleClearFilters}>
+                <InlineButton onClick={handleClearFilters} square>
                   <i className="fas fa-times" />
-                </button>
+                </InlineButton>
               )}
             </TableHeaderCell>
             {visibleRealColumns.map(col => (

packages/web/src/datagrid/gridutil.ts

@@ -29,7 +29,7 @@ export function countColumnSizes(loadedRows, columns, containerWidth, display) {
     context.font = 'bold 14px Helvetica';
 
     let text = column.headerText;
-    let headerWidth = context.measureText(text).width + 32;
+    let headerWidth = context.measureText(text).width + 50;
 
     // if (column.columnClientObject != null && column.columnClientObject.icon != null) headerWidth += 16;
     // if (this.getFilterOnColumn(column.uniquePath)) headerWidth += 16;

packages/web/src/widgets/DatabaseWidget.js

@@ -8,6 +8,7 @@ import databaseAppObject from '../appobj/databaseAppObject';
 import { useSetCurrentDatabase, useCurrentDatabase } from '../utility/globalState';
 import tableAppObject from '../appobj/tableAppObject';
 import theme from '../theme';
+import InlineButton from './InlineButton';
 
 const SearchBoxWrapper = styled.div`
   display: flex;
@@ -38,13 +39,6 @@ const InnerContainer = styled.div`
   width: ${theme.leftPanel.width}px;
 `;
 
-const Button = styled.button`
-  // -webkit-appearance: none;
-  // -moz-appearance: none;
-  // appearance: none;
-  // width: 50px;
-`;
-
 const Input = styled.input`
   flex: 1;
   min-width: 90px;
@@ -76,7 +70,7 @@ function ConnectionList() {
     <>
       <SearchBoxWrapper>
         <Input type="text" placeholder="Search connection" value={filter} onChange={e => setFilter(e.target.value)} />
-        <Button>Refresh</Button>
+        <InlineButton>Refresh</InlineButton>
       </SearchBoxWrapper>
 
       <InnerContainer>
@@ -102,7 +96,7 @@ function SqlObjectList({ conid, database }) {
           value={filter}
           onChange={e => setFilter(e.target.value)}
         />
-        <Button>Refresh</Button>
+        <InlineButton>Refresh</InlineButton>
       </SearchBoxWrapper>
       <InnerContainer>
         <AppObjectList

packages/web/src/widgets/DropDownButton.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { showMenu } from '../modals/DropDownMenu';
+import InlineButton from './InlineButton';
+
+export default function DropDownButton({ children }) {
+  const buttonRef = React.useRef(null);
+
+  const handleShowMenu = () => {
+    const rect = buttonRef.current.getBoundingClientRect();
+    showMenu(rect.left, rect.bottom, children);
+  };
+
+  return (
+    <InlineButton buttonRef={buttonRef} onClick={handleShowMenu} square>
+      <i className="fas fa-chevron-down" />
+    </InlineButton>
+  );
+}

packages/web/src/widgets/InlineButton.js

@@ -0,0 +1,86 @@
+// @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;
+  background: linear-gradient(to bottom, #ededed 5%, #bab1ba 100%);
+  background-color: #ededed;
+  //border-radius: 15px;
+  border: 1px solid #bbb;
+  display: inline-block;
+  cursor: pointer;
+  // color: #3a8a9e;
+  // color: gray;
+  // font-family: Arial;
+  vertical-align: middle;
+  color: black;
+  font-size: 12px;
+  padding: 3px;
+  margin: 0;
+  // padding: 7px 25px;
+  text-decoration: none;
+  // text-shadow: 0px 1px 0px #e1e2ed;
+  &:hover {
+    border: 1px solid #777;
+  }
+  &:active:hover {
+    background: linear-gradient(to bottom, #bab1ba 5%, #ededed 100%);
+    background-color: #bab1ba;
+  }
+  display: flex;
+
+  ${props =>
+    props.square &&
+    `
+      width: 18px;
+    `}
+`;
+
+const InnerDiv = styled.div`
+  margin: auto;
+  flex: 1;
+  text-align: center;
+`;
+
+// ${props =>
+//     !props.disabled &&
+//     `
+//   &:hover {
+//     background-color: #286090;
+//   }
+
+//   &:active:hover {
+//     background-color: #204d74;
+//   }
+//   `}
+
+//   ${props =>
+//     props.disabled &&
+//     `
+//     background-color: #ccc;
+//     color: gray;
+//   `}
+
+export default function InlineButton({
+  children,
+  onClick = undefined,
+  buttonRef = undefined,
+  disabled = undefined,
+  square = false,
+}) {
+  return (
+    <ButtonDiv
+      className="buttonLike"
+      ref={buttonRef}
+      onClick={() => {
+        if (!disabled && onClick) onClick();
+      }}
+      disabled={disabled}
+      square={square}
+    >
+      <InnerDiv>{children}</InnerDiv>
+    </ButtonDiv>
+  );
+}

packages/web/src/widgets/ToolbarButton.js

@@ -1,11 +1,7 @@
 // @ts-nocheck
-import ReactDOM from 'react-dom';
 import React from 'react';
-import useModalState from '../modals/useModalState';
-import ConnectionModal from '../modals/ConnectionModal';
 import styled from 'styled-components';
 import theme from '../theme';
-import { useOpenedTabs } from '../utility/globalState';
 
 const ButtonDiv = styled.div`
   // height: ${theme.toolBar.height - 5}px;