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

used mdi icons instead of font awesome

Browse Source
This commit is contained in:
Jan Prochazka 2020-11-09 19:33:46 +01:00
parent 4bf797c27d
commit a7fcf1d3a3
25 changed files with 85 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/api/.env
View File

@ -15,7 +15,7 @@ PORT_postgres=5433
ENGINE_postgres=postgres
TOOLBAR=home
ICON_home=fas fa-home
ICON_home=mdi mdi-home
TITLE_home=Home
PAGE_home=home.html
STARTUP_PAGES=home

1
packages/web/package.json
View File

@ -21,6 +21,7 @@
"react-ace": "^8.0.0",
"react-dom": "^16.12.0",
"react-dropzone": "^11.2.3",
"react-helmet": "^6.1.0",
"react-json-view": "^1.19.1",
"react-modal": "^3.11.1",
"react-scripts": "3.3.0",

2
packages/web/src/App.js
View File

@ -14,6 +14,7 @@ import { SocketProvider } from './utility/SocketProvider';
import ConnectionsPinger from './utility/ConnectionsPinger';
import { ModalLayerProvider } from './modals/showModal';
import UploadsProvider from './utility/UploadsProvider';
import ThemeHelmet from './themes/ThemeHelmet';
function App() {
return (
@ -28,6 +29,7 @@ function App() {
<ModalLayerProvider>
<CurrentArchiveProvider>
<UploadsProvider>
<ThemeHelmet />
<Screen />
</UploadsProvider>
</CurrentArchiveProvider>

2
packages/web/src/DragAndDropFileTarget.js
View File

@ -41,7 +41,7 @@ export default function DragAndDropFileTarget({ isDragActive, inputProps }) {
<TargetStyled>
<InfoBox>
<IconWrapper>
<i className="fas fa-cloud-upload-alt" />
<span className="mdi mdi-cloud-upload" />
</IconWrapper>
<TitleWrapper>Drop the files to upload to DbGate</TitleWrapper>
<InfoWrapper>Supported file types: csv, MS Excel, json-lines</InfoWrapper>

14
packages/web/src/TabsPanel.js
View File

@ -78,7 +78,7 @@ const FileNameWrapper = styled.span`
margin-left: 5px;
`;
const CloseButton = styled.i`
const CloseButton = styled.span`
margin-left: 5px;
color: gray;
&:hover {
@ -117,9 +117,9 @@ function getTabDbKey(tab) {
}
function getDbIcon(key) {
if (key.startsWith('database://')) return 'fas fa-database';
if (key.startsWith('archive://')) return 'fas fa-archive';
return 'fas fa-file';
if (key.startsWith('database://')) return 'mdi mdi-database';
if (key.startsWith('archive://')) return 'mdi mdi-archive';
return 'mdi mdi-file';
}
export default function TabsPanel() {
@ -253,7 +253,7 @@ export default function TabsPanel() {
selected={tabsByDb[dbKey][0].tabDbKey == currentDbKey}
onClick={() => handleSetDb(tabsByDb[dbKey][0].props)}
>
<i className={getDbIcon(dbKey)} /> {tabsByDb[dbKey][0].tabDbName}
<span className={getDbIcon(dbKey)} /> {tabsByDb[dbKey][0].tabDbName}
</DbNameWrapper>
<DbGroupHandler>
{_.sortBy(tabsByDb[dbKey], 'title').map((tab) => (
@ -265,10 +265,10 @@ export default function TabsPanel() {
onMouseUp={(e) => handleMouseUp(e, tab.tabid)}
onContextMenu={(e) => handleContextMenu(e, tab.tabid, tab.props)}
>
{tab.busy ? <i className="fas fa-spinner fa-spin"></i> : getIconImage(tab.icon)}
{tab.busy ? <i className="mdi mdi-loading mdi-spin"></i> : getIconImage(tab.icon)}
<FileNameWrapper>{tab.title}</FileNameWrapper>
<CloseButton
className="fas fa-times tabCloseButton"
className="mdi mdi-close tabCloseButton"
onClick={(e) => {
e.preventDefault();
closeTab(tab.tabid);

4
packages/web/src/appobj/AppObjects.js
View File

@ -68,11 +68,11 @@ export function AppObjectCore({
{...other}
>
{prefix}
<IconWrap>{isBusy ? <i className="fas fa-spinner fa-spin"></i> : <Icon />}</IconWrap>
<IconWrap>{isBusy ? <span className="mdi mdi-loading mdi-spin"></span> : <Icon />}</IconWrap>
{title}
{statusIcon && (
<StatusIconWrap>
<FontIcon icon={statusIcon} title={statusTitle} />
<span className={statusIcon} title={statusTitle} />
</StatusIconWrap>
)}
</Component>

1
packages/web/src/appobj/MacroAppObject.js
View File

@ -4,7 +4,6 @@ import { MacroIcon, StartIcon } from '../icons';
const macroAppObject = () => ({ name, type, title, group }, { setOpenedTabs }) => {
const key = name;
// const Icon = (props) => <i className="fas fa-archive" />;
const Icon = MacroIcon;
const matcher = (filter) => filterName(filter, name, title);
const groupTitle = group;

1
packages/web/src/appobj/archiveFileAppObject.js
View File

@ -60,7 +60,6 @@ function Menu({ data, setOpenedTabs }) {
const archiveFileAppObject = () => ({ fileName, folderName }, { setOpenedTabs }) => {
const key = fileName;
// const Icon = (props) => <i className="fas fa-archive" />;
const Icon = ArchiveTableIcon;
const onClick = () => {
openArchive(setOpenedTabs, fileName, folderName);

1
packages/web/src/appobj/archiveFolderAppObject.js
View File

@ -19,7 +19,6 @@ function Menu({ data, setOpenedTabs }) {
const archiveFolderAppObject = () => ({ name }, { setOpenedTabs, currentArchive }) => {
const key = name;
// const Icon = (props) => <i className="fas fa-archive" />;
const Icon = LocalDbIcon;
const isBold = name == currentArchive;
const matcher = (filter) => filterName(filter, name);

8
packages/web/src/appobj/connectionAppObject.js
View File

@ -77,10 +77,10 @@ const connectionAppObject = (flags) => (
let statusIcon = null;
let statusTitle = null;
if (openedConnections.includes(_id)) {
if (!status) statusIcon = 'fas fa-spinner fa-spin';
else if (status.name == 'pending') statusIcon = 'fas fa-spinner fa-spin';
else if (status.name == 'ok') statusIcon = 'fas fa-check-circle green';
else statusIcon = 'fas fa-times-circle red';
if (!status) statusIcon = 'mdi mdi-loading mdi-spin';
else if (status.name == 'pending') statusIcon = 'mdi mdi-loading mdi-spin';
else if (status.name == 'ok') statusIcon = 'mdi mdi-check-circle color-green';
else statusIcon = 'mdi mdi-close-circle color-red';
if (status && status.name == 'error') {
statusTitle = status.message;
}

4
packages/web/src/datagrid/ColumnHeaderControl.js
View File

@ -87,12 +87,12 @@ export default function ColumnHeaderControl({
<ColumnLabel {...column} />
{order == 'ASC' && (
<IconWrapper>
<FontIcon icon="fas fa-sort-alpha-down green" />
<span className="mdi mdi-sort-alphabetical-ascending color-green" />
</IconWrapper>
)}
{order == 'DESC' && (
<IconWrapper>
<FontIcon icon="fas fa-sort-alpha-down-alt green" />
<span className="mdi mdi-sort-alphabetical-descending color-green" />
</IconWrapper>
)}
</LabelDiv>

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

@ -291,7 +291,7 @@ export default function DataFilterControl({
autocomplete="off"
/>
<InlineButton buttonRef={buttonRef} onClick={handleShowMenu} square>
<i className="fas fa-filter" />
<span className="mdi mdi-filter" />
</InlineButton>
</FilterDiv>
);

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

@ -971,7 +971,7 @@ export default function DataGridCore(props) {
>
{filterCount > 0 && (
<InlineButton onClick={handleClearFilters} square>
<i className="fas fa-times" />
<span className="mdi mdi-filter-off" />
</InlineButton>
)}
</TableHeaderCell>

12
packages/web/src/freetable/FreeTableColumnEditor.js
View File

@ -27,8 +27,10 @@ const Name = styled.div`
const Buttons = styled.div`
white-space: nowrap;
`;
const Icon = styled(FontIcon)`
const Icon = styled.span`
// margin-left: 5px;
position: relative;
top: 5px;
&:hover {
background-color: gray;
}
@ -103,10 +105,10 @@ function ColumnManagerRow({ column, onEdit, onRemove, onUp, onDown }) {
<Row onMouseEnter={() => setIsHover(true)} onMouseLeave={() => setIsHover(false)}>
<Name>{column.columnName}</Name>
<Buttons>
<Icon icon="fas fa-edit" onClick={onEdit} />
<Icon icon="fas fa-trash" onClick={onRemove} />
<Icon icon="fas fa-arrow-up" onClick={onUp} />
<Icon icon="fas fa-arrow-down" onClick={onDown} />
<Icon className="mdi mdi-pencil" onClick={onEdit} />
<Icon className="mdi mdi-delete" onClick={onRemove} />
<Icon className="mdi mdi-arrow-up" onClick={onUp} />
<Icon className="mdi mdi-arrow-down" onClick={onDown} />
</Buttons>
</Row>
);

4
packages/web/src/impexp/ImportExportConfigurator.js
View File

@ -294,7 +294,7 @@ function SourceName({ name }) {
<SourceNameWrapper>
<div>{name}</div>
<TrashWrapper onClick={handleDelete}>
<i className="fas fa-trash" />
<span className="mdi mdi-delete" />
</TrashWrapper>
</SourceNameWrapper>
);
@ -352,7 +352,7 @@ export default function ImportExportConfigurator({ uploadedFile = undefined }) {
engine={sourceEngine}
/>
<ArrowWrapper>
<i className="fas fa-arrow-right" />
<span className="mdi mdi-arrow-right" />
</ArrowWrapper>
<SourceTargetConfig
direction="target"

2
packages/web/src/modals/ErrorMessageModal.js
View File

@ -25,7 +25,7 @@ export default function ErrorMessageModal({ modalState, title = 'Error', message
<ModalContent>
<Wrapper>
<IconWrapper>
<FontIcon icon="fas fa-times-circle red" />
<span className="mdi mdi-close-circle color-red" />
</IconWrapper>
{message}
</Wrapper>

2
packages/web/src/modals/ModalHeader.js
View File

@ -23,7 +23,7 @@ export default function ModalHeader({ children, modalState }) {
<Wrapper>
<div>{children}</div>
<CloseWrapper onClick={modalState.close}>
<i className="fas fa-times" />
<span className="mdi mdi-close" />
</CloseWrapper>
</Wrapper>
);

15
packages/web/src/themes/ThemeHelmet.js Normal file
View File

@ -0,0 +1,15 @@
import React from 'react';
import { Helmet } from 'react-helmet';
export default function ThemeHelmet() {
return (
<Helmet>
<style>{`
.color-red { color: red; }
.color-green { color: green; }
.color-on-statusbar-green { color: lime; }
.color-blue { color: blue; }
`}</style>
</Helmet>
);
}

2
packages/web/src/widgets/DatabaseWidget.js
View File

@ -126,7 +126,7 @@ function SqlObjectListWrapper() {
const db = useCurrentDatabase();
if (!db) {
return <ErrorInfo message="Database not selected" icon="fas fa-exclamation-circle blue" />;
return <ErrorInfo message="Database not selected" icon="mdi mdi-alert-circle color-blue" />;
}
const { name, connection } = db;

2
packages/web/src/widgets/DropDownButton.js
View File

@ -12,7 +12,7 @@ export default function DropDownButton({ children }) {
return (
<InlineButton buttonRef={buttonRef} onClick={handleShowMenu} square>
<i className="fas fa-chevron-down" />
<span className="mdi mdi-chevron-down" />
</InlineButton>
);
}

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

@ -19,11 +19,11 @@ const ContainerSmall = styled.div`
margin-right: 10px;
`;
export default function ErrorInfo({ message, icon = 'fas fa-times-circle red', isSmall = false }) {
export default function ErrorInfo({ message, icon = 'mdi mdi-close-circle color-red', isSmall = false }) {
if (isSmall) {
return (
<ContainerSmall>
<FontIcon icon={icon} />
<span className={icon} />
{message}
</ContainerSmall>
);
@ -31,7 +31,7 @@ export default function ErrorInfo({ message, icon = 'fas fa-times-circle red', i
return (
<Container>
<Icon>
<FontIcon icon={icon} />
<span className={icon} />
</Icon>
{message}
</Container>

2
packages/web/src/widgets/LoadingInfo.js
View File

@ -33,7 +33,7 @@ export default function LoadingInfo({ message, wrapper = false }) {
const core = (
<Container>
<Spinner>
<i className="fas fa-spinner fa-spin" />
<span className="mdi mdi-loading mdi-spin" />
</Spinner>
{message}
</Container>

17
packages/web/src/widgets/StatusBar.js
View File

@ -1,10 +1,8 @@
import React from 'react';
import styled from 'styled-components';
import { getEngineIcon } from '../icons';
import { useCurrentDatabase } from '../utility/globalState';
import { useDatabaseStatus } from '../utility/metadataLoaders';
import { FontIcon } from '../icons';
const Container = styled.div`
display: flex;
@ -22,23 +20,22 @@ export default function StatusBar() {
const { name, connection } = useCurrentDatabase() || {};
const status = useDatabaseStatus(connection ? { conid: connection._id, database: name } : {});
const { displayName, server, user, engine } = connection || {};
const EngineIcon = getEngineIcon(engine);
return (
<Container>
{name && (
<Item>
<i className="fas fa-database" /> {name}
<i className="mdi mdi-database" /> {name}
</Item>
)}
{(displayName || server) && (
<Item>
<EngineIcon size={12} /> {displayName || server}
<span className='mdi mdi-server'/> {displayName || server}
</Item>
)}
{user && (
<Item>
<i className="fas fa-user" /> {user}
<span className="mdi mdi-account" /> {user}
</Item>
)}
@ -46,17 +43,17 @@ export default function StatusBar() {
<Item>
{status.name == 'pending' && (
<>
<FontIcon icon="fas fa-spinner fa-spin" /> Loading
<span className="mdi mdi-loading mdi-spin" /> Loading
</>
)}
{status.name == 'ok' && (
<>
<FontIcon icon="fas fa-check-circle lime" /> Connected
<span className="mdi mdi-check-circle color-on-statusbar-green" /> Connected
</>
)}
{status.name == 'error' && (
<>
<FontIcon icon="fas fa-times-circle red" /> Error
<span className="mdi mdi-close-circle color-red" /> Error
</>
)}
</Item>
@ -64,7 +61,7 @@ export default function StatusBar() {
{!connection && (
<Item>
<>
<FontIcon icon="fas fa-plug gray" /> Not connected
<span className="mdi mdi-lan-disconnect" /> Not connected
</>
</Item>
)}

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

@ -21,7 +21,7 @@ const IconWrapper = styled.div`
export default function WidgetIconPanel() {
const widgets = [
{
icon: 'fa-database',
icon: 'mdi mdi-database',
name: 'database',
title: 'Database connections',
},
@ -30,12 +30,12 @@ export default function WidgetIconPanel() {
// name: 'table',
// },
{
icon: 'fa-file-alt',
icon: 'mdi mdi-file',
name: 'file',
title: 'Closed tabs & Saved SQL files',
},
{
icon: 'fa-archive',
icon: 'mdi mdi-archive',
name: 'archive',
title: 'Archive (saved tabular data)',
},
@ -62,7 +62,7 @@ export default function WidgetIconPanel() {
onClick={() => setCurrentWidget(name === currentWidget ? null : name)}
title={title}
>
<i className={`fas ${icon}`} />
<span className={icon} />
</IconWrapper>
))}
</>

20
yarn.lock
View File

@ -10096,6 +10096,21 @@ react-fast-compare@^2.0.1:
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
react-fast-compare@^3.1.1:
version "3.2.0"
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
react-helmet@^6.1.0:
version "6.1.0"
resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726"
integrity sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==
dependencies:
object-assign "^4.1.1"
prop-types "^15.7.2"
react-fast-compare "^3.1.1"
react-side-effect "^2.1.0"
react-input-autosize@^2.2.2:
version "2.2.2"
resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-2.2.2.tgz#fcaa7020568ec206bc04be36f4eb68e647c4d8c2"
@ -10212,6 +10227,11 @@ react-select@^3.1.0:
react-input-autosize "^2.2.2"
react-transition-group "^4.3.0"
react-side-effect@^2.1.0:
version "2.1.1"
resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.1.tgz#66c5701c3e7560ab4822a4ee2742dee215d72eb3"
integrity sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==
react-textarea-autosize@^6.1.0:
version "6.1.0"
resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-6.1.0.tgz#df91387f8a8f22020b77e3833c09829d706a09a5"