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 }) { export default function DataGridToolbar({ reload, changeSetState, dispatchChangeSet, save, revert }) {
return ( return (
<> <>
<ToolbarButton onClick={reload}>Refresh</ToolbarButton> <ToolbarButton onClick={reload} icon="fas fa-sync">
<ToolbarButton disabled={!changeSetState.canUndo} onClick={() => dispatchChangeSet({ type: 'undo' })}> Refresh
</ToolbarButton>
<ToolbarButton disabled={!changeSetState.canUndo} onClick={() => dispatchChangeSet({ type: 'undo' })} icon="fas fa-undo">
Undo Undo
</ToolbarButton> </ToolbarButton>
<ToolbarButton disabled={!changeSetState.canRedo} onClick={() => dispatchChangeSet({ type: 'redo' })}> <ToolbarButton disabled={!changeSetState.canRedo} onClick={() => dispatchChangeSet({ type: 'redo' })} icon="fas fa-redo">
Redo Redo
</ToolbarButton> </ToolbarButton>
<ToolbarButton disabled={!changeSetContainsChanges(changeSetState.value)} onClick={save}> <ToolbarButton disabled={!changeSetContainsChanges(changeSetState.value)} onClick={save} icon="fas fa-save">
Save Save
</ToolbarButton> </ToolbarButton>
<ToolbarButton disabled={!changeSetContainsChanges(changeSetState.value)} onClick={revert}> <ToolbarButton disabled={!changeSetContainsChanges(changeSetState.value)} onClick={revert} icon="fas fa-times">
Revert Revert
</ToolbarButton> </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 }) { export default function QueryToolbar({ execute, cancel, isDatabaseDefined, busy, save }) {
return ( return (
<> <>
<ToolbarButton disabled={!isDatabaseDefined || busy} onClick={execute}> <ToolbarButton disabled={!isDatabaseDefined || busy} onClick={execute} icon="fas fa-play">
Execute Execute
</ToolbarButton> </ToolbarButton>
<ToolbarButton disabled={!busy} onClick={cancel}> <ToolbarButton disabled={!busy} onClick={cancel} icon="fas fa-times">
Cancel Cancel
</ToolbarButton> </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 ( return (
<ToolbarContainer> <ToolbarContainer>
<ConnectionModal modalState={modalState} /> <ConnectionModal modalState={modalState} />
<ToolbarButton onClick={modalState.open}>Add connection</ToolbarButton> <ToolbarButton onClick={modalState.open} icon="fas fa-database">
<ToolbarButton onClick={newQuery}>New Query</ToolbarButton> Add connection
</ToolbarButton>
<ToolbarButton onClick={newQuery} icon="fas fa-file-alt">
New Query
</ToolbarButton>
<ToolbarContainer ref={toolbarPortalRef}></ToolbarContainer> <ToolbarContainer ref={toolbarPortalRef}></ToolbarContainer>
</ToolbarContainer> </ToolbarContainer>
); );

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

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