dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-17 23:45:59 +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/engines": "^0.1.0",
"@dbgate/sqltree": "^0.1.0",
"@mdi/font": "^5.8.55",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.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 }) {
return (
<>
<ToolbarButton onClick={reload} icon="fas fa-sync">
<ToolbarButton onClick={reload} icon="mdi mdi-reload">
Refresh
</ToolbarButton>
<ToolbarButton disabled={!grider.canUndo} onClick={() => grider.undo()} icon="fas fa-undo">
<ToolbarButton disabled={!grider.canUndo} onClick={() => grider.undo()} icon="mdi mdi-undo">
Undo
</ToolbarButton>
<ToolbarButton disabled={!grider.canRedo} onClick={() => grider.redo()} icon="fas fa-redo">
<ToolbarButton disabled={!grider.canRedo} onClick={() => grider.redo()} icon="mdi mdi-redo">
Redo
</ToolbarButton>
<ToolbarButton disabled={!grider.allowSave} onClick={save} icon="fas fa-save">
<ToolbarButton disabled={!grider.allowSave} onClick={save} icon="mdi mdi-save">
Save
</ToolbarButton>
<ToolbarButton disabled={!grider.containsChanges} onClick={() => grider.revertAllChanges()} icon="fas fa-times">
<ToolbarButton disabled={!grider.containsChanges} onClick={() => grider.revertAllChanges()} icon="mdi mdi-close">
Revert
</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(', ')}]
</HeaderText>
</Header>
<ToolbarButton icon="fas fa-times" onClick={onClose} patchY={6}>
<ToolbarButton icon="mdi mdi-close" onClick={onClose} patchY={6}>
Close
</ToolbarButton>
</Container>

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

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

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

@@ -2,6 +2,7 @@ import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import '@fortawesome/fontawesome-free/css/all.css';
import '@mdi/font/css/materialdesignicons.css';
import App from './App';
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 }) {
return (
<>
<ToolbarButton disabled={!isDatabaseDefined || busy} onClick={execute} icon="fas fa-play">
<ToolbarButton disabled={!isDatabaseDefined || busy} onClick={execute} icon="mdi mdi-play">
Execute
</ToolbarButton>
<ToolbarButton disabled={!busy} onClick={cancel} icon="fas fa-times">
<ToolbarButton disabled={!busy} onClick={cancel} icon="mdi mdi-close">
Cancel
</ToolbarButton>
<ToolbarButton disabled={!isConnected} onClick={kill} icon="fas fa-times">
<ToolbarButton disabled={!isConnected} onClick={kill} icon="mdi mdi-close">
Kill
</ToolbarButton>
<ToolbarButton onClick={save} icon="fas fa-save">
<ToolbarButton onClick={save} icon="mdi mdi-save">
Save
</ToolbarButton>
<ToolbarButton onClick={format} icon="fas fa-code">
<ToolbarButton onClick={format} icon="mdi mdi-code-tags-check">
Format
</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 }) {
return (
<>
<ToolbarButton disabled={busy} onClick={execute} icon="fas fa-play">
<ToolbarButton disabled={busy} onClick={execute} icon="mdi mdi-play">
Execute
</ToolbarButton>
<ToolbarButton disabled={!busy} onClick={cancel} icon="fas fa-times">
<ToolbarButton disabled={!busy} onClick={cancel} icon="mdi mdi-close">
Cancel
</ToolbarButton>
<ToolbarButton disabled={!editAvailable} onClick={edit} icon="fas fa-edit">
<ToolbarButton disabled={!editAvailable} onClick={edit} icon="mdi mdi-comment-edit">
Show wizard
</ToolbarButton>
</>

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

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

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

@@ -32,6 +32,7 @@ const ButtonDiv = styled.div`
const StyledIconSpan = styled.span`
margin-right: 5px;
// font-size: 18px;
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 }) {
const Icon = icon;
return (
<ButtonDiv
onClick={() => {
@@ -51,9 +51,9 @@ export default function ToolbarButton({ children, onClick, icon = undefined, dis
disabled={disabled}
>
<ButtonDivInner patchY={patchY}>
{Icon && (
{icon && (
<StyledIconSpan disabled={disabled}>
<i className={icon} />
<span className={icon} />
</StyledIconSpan>
)}
{children}

5
yarn.lock
View File

@@ -1264,6 +1264,11 @@
"@types/yargs" "^15.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":
version "2.2.1"
resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"