From a3e9ba61afbec81d7f7373893a8c45cca316b41a Mon Sep 17 00:00:00 2001 From: Jan Prochazka Date: Sat, 4 Apr 2020 10:20:56 +0200 Subject: [PATCH] button redesign --- .../web/src/datagrid/ColumnHeaderControl.js | 30 +++++++ packages/web/src/datagrid/ColumnManager.js | 5 +- .../web/src/datagrid/DataFilterControl.js | 15 ++-- packages/web/src/datagrid/DataGridCore.js | 17 ++-- packages/web/src/datagrid/gridutil.ts | 2 +- packages/web/src/widgets/DatabaseWidget.js | 12 +-- packages/web/src/widgets/DropDownButton.js | 18 ++++ packages/web/src/widgets/InlineButton.js | 86 +++++++++++++++++++ packages/web/src/widgets/ToolbarButton.js | 4 - 9 files changed, 161 insertions(+), 28 deletions(-) create mode 100644 packages/web/src/datagrid/ColumnHeaderControl.js create mode 100644 packages/web/src/widgets/DropDownButton.js create mode 100644 packages/web/src/widgets/InlineButton.js diff --git a/packages/web/src/datagrid/ColumnHeaderControl.js b/packages/web/src/datagrid/ColumnHeaderControl.js new file mode 100644 index 00000000..fb8464f1 --- /dev/null +++ b/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 ( + + + + + + {}}>Sort ascending + {}}>Sort descending + + + ); +} diff --git a/packages/web/src/datagrid/ColumnManager.js b/packages/web/src/datagrid/ColumnManager.js index 9247591e..87316a6d 100644 --- a/packages/web/src/datagrid/ColumnManager.js +++ b/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) { setColumnFilter(e.target.value)} /> - - + display.hideAllColumns()}>Hide + display.showAllColumns()}>Show {display .getColumns(columnFilter) diff --git a/packages/web/src/datagrid/DataFilterControl.js b/packages/web/src/datagrid/DataFilterControl.js index 2b2f86e0..ada9d8ff 100644 --- a/packages/web/src/datagrid/DataFilterControl.js +++ b/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} /> - + - + ); } diff --git a/packages/web/src/datagrid/DataGridCore.js b/packages/web/src/datagrid/DataGridCore.js index d27fa190..83cc1fd7 100644 --- a/packages/web/src/datagrid/DataGridCore.js +++ b/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 }} > - + ))} @@ -849,9 +856,9 @@ export default function DataGridCore(props) { data-col="header" > {filterCount > 0 && ( - + )} {visibleRealColumns.map(col => ( diff --git a/packages/web/src/datagrid/gridutil.ts b/packages/web/src/datagrid/gridutil.ts index d305a77a..cdba0181 100644 --- a/packages/web/src/datagrid/gridutil.ts +++ b/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; diff --git a/packages/web/src/widgets/DatabaseWidget.js b/packages/web/src/widgets/DatabaseWidget.js index f87e6f64..374cc3d3 100644 --- a/packages/web/src/widgets/DatabaseWidget.js +++ b/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() { <> setFilter(e.target.value)} /> - + Refresh @@ -102,7 +96,7 @@ function SqlObjectList({ conid, database }) { value={filter} onChange={e => setFilter(e.target.value)} /> - + Refresh { + const rect = buttonRef.current.getBoundingClientRect(); + showMenu(rect.left, rect.bottom, children); + }; + + return ( + + + + ); +} diff --git a/packages/web/src/widgets/InlineButton.js b/packages/web/src/widgets/InlineButton.js new file mode 100644 index 00000000..a85fcdc9 --- /dev/null +++ b/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 ( + { + if (!disabled && onClick) onClick(); + }} + disabled={disabled} + square={square} + > + {children} + + ); +} diff --git a/packages/web/src/widgets/ToolbarButton.js b/packages/web/src/widgets/ToolbarButton.js index 714f1175..0dcded42 100644 --- a/packages/web/src/widgets/ToolbarButton.js +++ b/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;