dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-05-03 14:03:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

mdi icons

Browse Source
This commit is contained in:
Jan Prochazka
2020-11-09 18:42:16 +01:00
parent 7819cc9541
commit 4bf797c27d
11 changed files with 36 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/web/package.json
View File

@@ -6,6 +6,7 @@
"@dbgate/datalib": "^0.1.0", "@dbgate/datalib": "^0.1.0",
"@dbgate/engines": "^0.1.0", "@dbgate/engines": "^0.1.0",
"@dbgate/sqltree": "^0.1.0", "@dbgate/sqltree": "^0.1.0",
"@mdi/font": "^5.8.55",
"@testing-library/jest-dom": "^4.2.4", "@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2", "@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2", "@testing-library/user-event": "^7.1.2",

5
packages/web/src/IconSpan.js Normal file
View File

@@ -0,0 +1,5 @@
import React from 'react';
export default function IconSpan({ icon }) {
return <span className={icon} />;
}

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

@@ -4,19 +4,19 @@ import ToolbarButton from '../widgets/ToolbarButton';
export default function DataGridToolbar({ reload, grider, save }) { export default function DataGridToolbar({ reload, grider, save }) {
return ( return (
<> <>
<ToolbarButton onClick={reload} icon="fas fa-sync"> <ToolbarButton onClick={reload} icon="mdi mdi-reload">
Refresh Refresh
</ToolbarButton> </ToolbarButton>
<ToolbarButton disabled={!grider.canUndo} onClick={() => grider.undo()} icon="fas fa-undo"> <ToolbarButton disabled={!grider.canUndo} onClick={() => grider.undo()} icon="mdi mdi-undo">
Undo Undo
</ToolbarButton> </ToolbarButton>
<ToolbarButton disabled={!grider.canRedo} onClick={() => grider.redo()} icon="fas fa-redo"> <ToolbarButton disabled={!grider.canRedo} onClick={() => grider.redo()} icon="mdi mdi-redo">
Redo Redo
</ToolbarButton> </ToolbarButton>
<ToolbarButton disabled={!grider.allowSave} onClick={save} icon="fas fa-save"> <ToolbarButton disabled={!grider.allowSave} onClick={save} icon="mdi mdi-save">
Save Save
</ToolbarButton> </ToolbarButton>
<ToolbarButton disabled={!grider.containsChanges} onClick={() => grider.revertAllChanges()} icon="fas fa-times"> <ToolbarButton disabled={!grider.containsChanges} onClick={() => grider.revertAllChanges()} icon="mdi mdi-close">
Revert Revert
</ToolbarButton> </ToolbarButton>
</> </>

2
packages/web/src/datagrid/ReferenceHeader.js
View File

@@ -36,7 +36,7 @@ export default function ReferenceHeader({ reference, onClose }) {
{reference.columns.map((x) => x.baseName).join(', ')}] {reference.columns.map((x) => x.baseName).join(', ')}]
</HeaderText> </HeaderText>
</Header> </Header>
<ToolbarButton icon="fas fa-times" onClick={onClose} patchY={6}> <ToolbarButton icon="mdi mdi-close" onClick={onClose} patchY={6}>
Close Close
</ToolbarButton> </ToolbarButton>
</Container> </Container>

4
packages/web/src/freetable/MacroDetail.js
View File

@@ -67,10 +67,10 @@ function MacroHeader({ selectedMacro, setSelectedMacro, onExecute }) {
<HeaderText>{selectedMacro.title}</HeaderText> <HeaderText>{selectedMacro.title}</HeaderText>
</Header> </Header>
<Buttons> <Buttons>
<ToolbarButton icon="fas fa-check" onClick={onExecute} patchY={6}> <ToolbarButton icon="mdi mdi-play" onClick={onExecute} patchY={6}>
Execute Execute
</ToolbarButton> </ToolbarButton>
<ToolbarButton icon="fas fa-times" onClick={() => setSelectedMacro(null)} patchY={6}> <ToolbarButton icon="mdi mdi-close" onClick={() => setSelectedMacro(null)} patchY={6}>
Close Close
</ToolbarButton> </ToolbarButton>
</Buttons> </Buttons>

1
packages/web/src/index.js
View File

@@ -2,6 +2,7 @@ import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import './index.css'; import './index.css';
import '@fortawesome/fontawesome-free/css/all.css'; import '@fortawesome/fontawesome-free/css/all.css';
import '@mdi/font/css/materialdesignicons.css';
import App from './App'; import App from './App';
import * as serviceWorker from './serviceWorker'; import * as serviceWorker from './serviceWorker';

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

@@ -4,19 +4,19 @@ import ToolbarButton from '../widgets/ToolbarButton';
export default function QueryToolbar({ execute, cancel, isDatabaseDefined, busy, save, format, isConnected, kill }) { export default function QueryToolbar({ execute, cancel, isDatabaseDefined, busy, save, format, isConnected, kill }) {
return ( return (
<> <>
<ToolbarButton disabled={!isDatabaseDefined || busy} onClick={execute} icon="fas fa-play"> <ToolbarButton disabled={!isDatabaseDefined || busy} onClick={execute} icon="mdi mdi-play">
Execute Execute
</ToolbarButton> </ToolbarButton>
<ToolbarButton disabled={!busy} onClick={cancel} icon="fas fa-times"> <ToolbarButton disabled={!busy} onClick={cancel} icon="mdi mdi-close">
Cancel Cancel
</ToolbarButton> </ToolbarButton>
<ToolbarButton disabled={!isConnected} onClick={kill} icon="fas fa-times"> <ToolbarButton disabled={!isConnected} onClick={kill} icon="mdi mdi-close">
Kill Kill
</ToolbarButton> </ToolbarButton>
<ToolbarButton onClick={save} icon="fas fa-save"> <ToolbarButton onClick={save} icon="mdi mdi-save">
Save Save
</ToolbarButton> </ToolbarButton>
<ToolbarButton onClick={format} icon="fas fa-code"> <ToolbarButton onClick={format} icon="mdi mdi-code-tags-check">
Format Format
</ToolbarButton> </ToolbarButton>
</> </>

6
packages/web/src/query/ShellToolbar.js
View File

@@ -4,13 +4,13 @@ import ToolbarButton from '../widgets/ToolbarButton';
export default function ShellToolbar({ execute, cancel, busy, edit, editAvailable }) { export default function ShellToolbar({ execute, cancel, busy, edit, editAvailable }) {
return ( return (
<> <>
<ToolbarButton disabled={busy} onClick={execute} icon="fas fa-play"> <ToolbarButton disabled={busy} onClick={execute} icon="mdi mdi-play">
Execute Execute
</ToolbarButton> </ToolbarButton>
<ToolbarButton disabled={!busy} onClick={cancel} icon="fas fa-times"> <ToolbarButton disabled={!busy} onClick={cancel} icon="mdi mdi-close">
Cancel Cancel
</ToolbarButton> </ToolbarButton>
<ToolbarButton disabled={!editAvailable} onClick={edit} icon="fas fa-edit"> <ToolbarButton disabled={!editAvailable} onClick={edit} icon="mdi mdi-comment-edit">
Show wizard Show wizard
</ToolbarButton> </ToolbarButton>
</> </>

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

@@ -87,19 +87,20 @@ export default function ToolBar({ toolbarPortalRef }) {
</ToolbarButton> </ToolbarButton>
))} ))}
{config.runAsPortal == false && ( {config.runAsPortal == false && (
<ToolbarButton onClick={modalState.open} icon="fas fa-database"> <ToolbarButton onClick={modalState.open} icon="mdi mdi-database-plus">
Add connection Add connection
</ToolbarButton> </ToolbarButton>
)} )}
<ToolbarButton onClick={newQuery} icon="fas fa-file-alt"> <ToolbarButton onClick={newQuery} icon="mdi mdi-file">
New Query New Query
</ToolbarButton> </ToolbarButton>
<ToolbarButton onClick={newFreeTable} icon="fas fa-table"> <ToolbarButton onClick={newFreeTable} icon="mdi mdi-table">
Free table editor Free table editor
</ToolbarButton> </ToolbarButton>
<ToolbarButton onClick={showImport} icon="fas fa-file-upload"> <ToolbarButton onClick={showImport} icon="mdi mdi-file-upload">
Import data Import data
</ToolbarButton> </ToolbarButton>
<ToolbarContainer ref={toolbarPortalRef}></ToolbarContainer> <ToolbarContainer ref={toolbarPortalRef}></ToolbarContainer>
</ToolbarContainer> </ToolbarContainer>
); );

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

@@ -32,6 +32,7 @@ const ButtonDiv = styled.div`
const StyledIconSpan = styled.span` const StyledIconSpan = styled.span`
margin-right: 5px; margin-right: 5px;
// font-size: 18px;
color: ${(props) => (props.disabled ? 'gray' : 'blue')}; color: ${(props) => (props.disabled ? 'gray' : 'blue')};
`; `;
@@ -42,7 +43,6 @@ const ButtonDivInner = styled.div`
`; `;
export default function ToolbarButton({ children, onClick, icon = undefined, disabled = undefined, patchY = 2 }) { export default function ToolbarButton({ children, onClick, icon = undefined, disabled = undefined, patchY = 2 }) {
const Icon = icon;
return ( return (
<ButtonDiv <ButtonDiv
onClick={() => { onClick={() => {
@@ -51,9 +51,9 @@ export default function ToolbarButton({ children, onClick, icon = undefined, dis
disabled={disabled} disabled={disabled}
> >
<ButtonDivInner patchY={patchY}> <ButtonDivInner patchY={patchY}>
{Icon && ( {icon && (
<StyledIconSpan disabled={disabled}> <StyledIconSpan disabled={disabled}>
<i className={icon} /> <span className={icon} />
</StyledIconSpan> </StyledIconSpan>
)} )}
{children} {children}

5
yarn.lock
View File

@@ -1264,6 +1264,11 @@
"@types/yargs" "^15.0.0" "@types/yargs" "^15.0.0"
chalk "^3.0.0" chalk "^3.0.0"
"@mdi/font@^5.8.55":
version "5.8.55"
resolved "https://registry.yarnpkg.com/@mdi/font/-/font-5.8.55.tgz#1464155bcbc8a6e4af6dffd611fe8e38e09af285"
integrity sha512-8mrwfFBsmj+D67ZiGQSe5TU/lcWCtDyli2eshQ2fvLCZGRPqFMM23YQp4+JMOTpk5yMZKTeAwNWIYfITy76OHA==
"@mrmlnc/readdir-enhanced@^2.2.1": "@mrmlnc/readdir-enhanced@^2.2.1":
version "2.2.1" version "2.2.1"
resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde" resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"