mirrors/dbgate
1
0
Fork 0
mirror of https://github.com/dbgate/dbgate synced 2024-11-07 20:26:23 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

toolbar button styles

Browse Source
This commit is contained in:
Jan Prochazka 2020-04-26 08:30:25 +02:00
parent d2887f9869
commit e9d5239e9c
4 changed files with 40 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/web/src/datagrid/DataGridToolbar.js
View File

@ -5,17 +5,19 @@ import { changeSetContainsChanges } from '@dbgate/datalib';
export default function DataGridToolbar({ reload, changeSetState, dispatchChangeSet, save, revert }) {
return (
<>
<ToolbarButton onClick={reload}>Refresh</ToolbarButton>
<ToolbarButton disabled={!changeSetState.canUndo} onClick={() => dispatchChangeSet({ type: 'undo' })}>
<ToolbarButton onClick={reload} icon="fas fa-sync">
Refresh
</ToolbarButton>
<ToolbarButton disabled={!changeSetState.canUndo} onClick={() => dispatchChangeSet({ type: 'undo' })} icon="fas fa-undo">
Undo
</ToolbarButton>
<ToolbarButton disabled={!changeSetState.canRedo} onClick={() => dispatchChangeSet({ type: 'redo' })}>
<ToolbarButton disabled={!changeSetState.canRedo} onClick={() => dispatchChangeSet({ type: 'redo' })} icon="fas fa-redo">
Redo
</ToolbarButton>
<ToolbarButton disabled={!changeSetContainsChanges(changeSetState.value)} onClick={save}>
<ToolbarButton disabled={!changeSetContainsChanges(changeSetState.value)} onClick={save} icon="fas fa-save">
Save
</ToolbarButton>
<ToolbarButton disabled={!changeSetContainsChanges(changeSetState.value)} onClick={revert}>
<ToolbarButton disabled={!changeSetContainsChanges(changeSetState.value)} onClick={revert} icon="fas fa-times">
Revert
</ToolbarButton>
</>

8
packages/web/src/query/QueryToolbar.js
View File

@ -4,13 +4,15 @@ import ToolbarButton from '../widgets/ToolbarButton';
export default function QueryToolbar({ execute, cancel, isDatabaseDefined, busy, save }) {
return (
<>
<ToolbarButton disabled={!isDatabaseDefined || busy} onClick={execute}>
<ToolbarButton disabled={!isDatabaseDefined || busy} onClick={execute} icon="fas fa-play">
Execute
</ToolbarButton>
<ToolbarButton disabled={!busy} onClick={cancel}>
<ToolbarButton disabled={!busy} onClick={cancel} icon="fas fa-times">
Cancel
</ToolbarButton>
<ToolbarButton onClick={save}>Save</ToolbarButton>
<ToolbarButton onClick={save} icon="fas fa-save">
Save
</ToolbarButton>
</>
);
}

8
packages/web/src/widgets/Toolbar.js
View File

@ -17,8 +17,12 @@ export default function ToolBar({ toolbarPortalRef }) {
return (
<ToolbarContainer>
<ConnectionModal modalState={modalState} />
<ToolbarButton onClick={modalState.open}>Add connection</ToolbarButton>
<ToolbarButton onClick={newQuery}>New Query</ToolbarButton>
<ToolbarButton onClick={modalState.open} icon="fas fa-database">
Add connection
</ToolbarButton>
<ToolbarButton onClick={newQuery} icon="fas fa-file-alt">
New Query
</ToolbarButton>
<ToolbarContainer ref={toolbarPortalRef}></ToolbarContainer>
</ToolbarContainer>
);

37
packages/web/src/widgets/ToolbarButton.js
View File

@ -4,37 +4,39 @@ import styled from 'styled-components';
import theme from '../theme';
const ButtonDiv = 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;
padding: 5px 15px;
// margin: 2px;
color: black;
border: 0;
border-right: 1px solid #ccc;
height: ${theme.toolBar.height}px;
${props =>
${(props) =>
!props.disabled &&
`
&:hover {
background-color: #286090;
background-color: #CCC;
}
&:active:hover {
background-color: #204d74;
background-color: #AAA;
}
`}
${props =>
${(props) =>
props.disabled &&
`
background-color: #ccc;
color: gray;
`}
`;
export default function ToolbarButton({ children, onClick, disabled = undefined }) {
const StyledIconSpan = styled.span`
margin-right: 5px;
color: ${(props) => (props.disabled ? 'gray' : 'blue')};
`;
export default function ToolbarButton({ children, onClick, icon = undefined, disabled = undefined }) {
const Icon = icon;
return (
<ButtonDiv
onClick={() => {
@ -42,6 +44,11 @@ export default function ToolbarButton({ children, onClick, disabled = undefined
}}
disabled={disabled}
>
{Icon && (
<StyledIconSpan disabled={disabled}>
<i className={icon} />
</StyledIconSpan>
)}
{children}
</ButtonDiv>
);