using fonticon instead of span

2026-04-22 22:46:01 +00:00 · 2020-11-10 17:34:00 +01:00
parent 1169e23997
commit 1c2dedfef3
20 changed files with 77 additions and 42 deletions
--- a/packages/web/src/DragAndDropFileTarget.js
+++ b/packages/web/src/DragAndDropFileTarget.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import { FontIcon } from './icons';

 const TargetStyled = styled.div`
  position: fixed;
@@ -41,7 +42,7 @@ export default function DragAndDropFileTarget({ isDragActive, inputProps }) {
      <TargetStyled>
        <InfoBox>
          <IconWrapper>
-            <span className="mdi mdi-cloud-upload" />
+            <FontIcon icon="icon cloud-upload" />
          </IconWrapper>
          <TitleWrapper>Drop the files to upload to DbGate</TitleWrapper>
          <InfoWrapper>Supported file types: csv, MS Excel, json-lines</InfoWrapper>
--- a/packages/web/src/TabsPanel.js
+++ b/packages/web/src/TabsPanel.js
@@ -7,6 +7,7 @@ import { DropDownMenuItem, DropDownMenuDivider } from './modals/DropDownMenu';
 import { useOpenedTabs, useSetOpenedTabs, useCurrentDatabase, useSetCurrentDatabase } from './utility/globalState';
 import { showMenu } from './modals/DropDownMenu';
 import { getConnectionInfo } from './utility/metadataLoaders';
+import { FontIcon } from './icons';

 // const files = [
 //   { name: 'app.js' },
@@ -116,9 +117,9 @@ function getTabDbKey(tab) {
 }

 function getDbIcon(key) {
-  if (key.startsWith('database://')) return 'mdi mdi-database';
-  if (key.startsWith('archive://')) return 'mdi mdi-archive';
-  return 'mdi mdi-file';
+  if (key.startsWith('database://')) return 'icon database';
+  if (key.startsWith('archive://')) return 'icon archive';
+  return 'icon file';
 }

 export default function TabsPanel() {
@@ -252,7 +253,7 @@ export default function TabsPanel() {
            selected={tabsByDb[dbKey][0].tabDbKey == currentDbKey}
            onClick={() => handleSetDb(tabsByDb[dbKey][0].props)}
          >
-            <span className={getDbIcon(dbKey)} /> {tabsByDb[dbKey][0].tabDbName}
+            <FontIcon icon={getDbIcon(dbKey)} /> {tabsByDb[dbKey][0].tabDbName}
          </DbNameWrapper>
          <DbGroupHandler>
            {_.sortBy(tabsByDb[dbKey], 'title').map((tab) => (
@@ -264,7 +265,7 @@ export default function TabsPanel() {
                onMouseUp={(e) => handleMouseUp(e, tab.tabid)}
                onContextMenu={(e) => handleContextMenu(e, tab.tabid, tab.props)}
              >
-                {<span className={tab.busy ? 'mdi mdi-loading mdi-spin' : tab.icon} />}
+                {<FontIcon icon={tab.busy ? 'mdi mdi-loading mdi-spin' : tab.icon} />}
                <FileNameWrapper>{tab.title}</FileNameWrapper>
                <CloseButton
                  className="mdi mdi-close tabCloseButton"
--- a/packages/web/src/appobj/AppObjects.js
+++ b/packages/web/src/appobj/AppObjects.js
@@ -3,6 +3,7 @@
 import _ from 'lodash';
 import React from 'react';
 import styled from 'styled-components';
+import { FontIcon } from '../icons';
 import { showMenu } from '../modals/DropDownMenu';
 import { useSetOpenedTabs, useAppObjectParams } from '../utility/globalState';

@@ -67,11 +68,11 @@ export function AppObjectCore({
      {...other}
    >
      {prefix}
-      <IconWrap>{isBusy ? <span className="mdi mdi-loading mdi-spin"></span> : <span className={icon} />}</IconWrap>
+      <IconWrap>{isBusy ? <FontIcon icon="mdi mdi-loading mdi-spin" /> : <FontIcon icon={icon} />}</IconWrap>
      {title}
      {statusIcon && (
        <StatusIconWrap>
-          <span className={statusIcon} title={statusTitle} />
+          <FontIcon icon={statusIcon} title={statusTitle} />
        </StatusIconWrap>
      )}
    </Component>
--- a/packages/web/src/datagrid/ColumnHeaderControl.js
+++ b/packages/web/src/datagrid/ColumnHeaderControl.js
@@ -7,6 +7,7 @@ import { useSplitterDrag } from '../widgets/Splitter';
 import { isTypeDateTime } from '@dbgate/tools';
 import { openDatabaseObjectDetail } from '../appobj/databaseObjectAppObject';
 import { useSetOpenedTabs } from '../utility/globalState';
+import { FontIcon } from '../icons';

 const HeaderDiv = styled.div`
  display: flex;
@@ -85,12 +86,12 @@ export default function ColumnHeaderControl({
        <ColumnLabel {...column} />
        {order == 'ASC' && (
          <IconWrapper>
-            <span className="mdi mdi-sort-alphabetical-ascending color-green" />
+            <FontIcon icon="mdi mdi-sort-alphabetical-ascending color-green" />
          </IconWrapper>
        )}
        {order == 'DESC' && (
          <IconWrapper>
-            <span className="mdi mdi-sort-alphabetical-descending color-green" />
+            <FontIcon icon="mdi mdi-sort-alphabetical-descending color-green" />
          </IconWrapper>
        )}
      </LabelDiv>
--- a/packages/web/src/datagrid/ColumnLabel.js
+++ b/packages/web/src/datagrid/ColumnLabel.js
@@ -2,6 +2,7 @@

 import React from 'react';
 import styled from 'styled-components';
+import { FontIcon } from '../icons';

 const Label = styled.span`
  font-weight: ${props => (props.notNull ? 'bold' : 'normal')};
@@ -15,7 +16,7 @@ export default function ColumnLabel(column) {
  if (column.foreignKey) icon = 'mdi mdi-key-link';
  return (
    <Label {...column}>
-      {icon ? <span className={icon} /> : null} {column.headerText || column.columnName}
+      {icon ? <FontIcon icon={icon} /> : null} {column.headerText || column.columnName}
    </Label>
  );
 }
--- a/packages/web/src/datagrid/DataFilterControl.js
+++ b/packages/web/src/datagrid/DataFilterControl.js
@@ -8,6 +8,7 @@ import InlineButton from '../widgets/InlineButton';
 import useShowModal from '../modals/showModal';
 import FilterMultipleValuesModal from '../modals/FilterMultipleValuesModal';
 import SetFilterModal from '../modals/SetFilterModal';
+import { FontIcon } from '../icons';
 // import { $ } from '../../Utility/jquery';
 // import autobind from 'autobind-decorator';
 // import * as React from 'react';
@@ -291,7 +292,7 @@ export default function DataFilterControl({
        autocomplete="off"
      />
      <InlineButton buttonRef={buttonRef} onClick={handleShowMenu} square>
-        <span className="mdi mdi-filter" />
+        <FontIcon icon="mdi mdi-filter" />
      </InlineButton>
    </FilterDiv>
  );
--- a/packages/web/src/datagrid/DataGridCore.js
+++ b/packages/web/src/datagrid/DataGridCore.js
@@ -28,6 +28,7 @@ import LoadingInfo from '../widgets/LoadingInfo';
 import ErrorInfo from '../widgets/ErrorInfo';
 import { openNewTab } from '../utility/common';
 import { useSetOpenedTabs } from '../utility/globalState';
+import { FontIcon } from '../icons';

 const GridContainer = styled.div`
  position: absolute;
@@ -971,7 +972,7 @@ export default function DataGridCore(props) {
              >
                {filterCount > 0 && (
                  <InlineButton onClick={handleClearFilters} square>
-                    <span className="mdi mdi-filter-off" />
+                    <FontIcon icon="mdi mdi-filter-off" />
                  </InlineButton>
                )}
              </TableHeaderCell>
--- a/packages/web/src/datagrid/ReferenceHeader.js
+++ b/packages/web/src/datagrid/ReferenceHeader.js
@@ -2,6 +2,7 @@ import React from 'react';
 import ToolbarButton from '../widgets/ToolbarButton';
 import styled from 'styled-components';
 import theme from '../theme';
+import { FontIcon } from '../icons';

 const Container = styled.div`
  display: flex;
@@ -29,7 +30,7 @@ export default function ReferenceHeader({ reference, onClose }) {
  return (
    <Container>
      <Header>
-        <span className="mdi mdi-link-box" />
+        <FontIcon icon="mdi mdi-link-box" />
        <HeaderText>
          {reference.pureName} [{reference.columns.map((x) => x.refName).join(', ')}] = master [
          {reference.columns.map((x) => x.baseName).join(', ')}]
--- a/packages/web/src/datagrid/ReferenceManager.js
+++ b/packages/web/src/datagrid/ReferenceManager.js
@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import { ManagerInnerContainer } from './ManagerStyles';
 import SearchInput from '../widgets/SearchInput';
 import { filterName } from '@dbgate/datalib';
+import { FontIcon } from '../icons';

 const SearchBoxWrapper = styled.div`
  display: flex;
@@ -33,7 +34,7 @@ const NameContainer = styled.div`
 function ManagerRow({ tableName, columns, icon, onClick }) {
  return (
    <LinkContainer onClick={onClick}>
-      <span className={icon} />
+      <FontIcon icon={icon} />
      <NameContainer>
        {tableName} ({columns.map((x) => x.columnName).join(', ')})
      </NameContainer>
--- a/packages/web/src/freetable/MacroDetail.js
+++ b/packages/web/src/freetable/MacroDetail.js
@@ -8,6 +8,7 @@ import MacroParameters from './MacroParameters';
 import { WidgetTitle } from '../widgets/WidgetStyles';
 import { FormButton } from '../utility/forms';
 import FormStyledButton from '../widgets/FormStyledButton';
+import { FontIcon } from '../icons';

 const Container = styled.div`
  display: flex;
@@ -62,7 +63,7 @@ function MacroHeader({ selectedMacro, setSelectedMacro, onExecute }) {
  return (
    <Container>
      <Header>
-        <span className="mdi mdi-hammer-wrench" />
+        <FontIcon icon="mdi mdi-hammer-wrench" />
        <HeaderText>{selectedMacro.title}</HeaderText>
      </Header>
      <Buttons>
--- a/packages/web/src/icons.js
+++ b/packages/web/src/icons.js
@@ -1,14 +1,30 @@
 import React from 'react';
 import _ from 'lodash';

-export function ExpandIcon({ isBlank = false, isExpanded = false, className = '', ...other }) {
-  if (isBlank) {
-    return <span className={`mdi mdi-minus-box-outline icon-invisible ${className}`} {...other} />;
+const iconNames = {
+  'icon minus-box': 'mdi mdi-minus-box-outline',
+  'icon plus-box': 'mdi mdi-plus-box-outline',
+  'icon invisible-box': 'mdi mdi-minus-box-outline icon-invisible',
+  'icon cloud-upload': 'mdi mdi-cloud-upload',
+
+  'icon database': 'mdi mdi-database',
+  'icon archive': 'mdi mdi-archive',
+  'icon file': 'mdi mdi-file',
+};
+
+export function FontIcon({ icon, className = '', ...other }) {
+  if (!icon) return null;
+  let cls = icon;
+  if (icon.startsWith('icon ')) {
+    cls = iconNames[icon];
+    if (!cls) return null;
  }
-  return (
-    <span
-      className={`${isExpanded ? 'mdi mdi-minus-box-outline' : 'mdi mdi-plus-box-outline'} ${className}`}
-      {...other}
-    />
-  );
+  return <span className={`${cls} ${className}`} {...other} />;
+}
+
+export function ExpandIcon({ isBlank = false, isExpanded = false, ...other }) {
+  if (isBlank) {
+    return <FontIcon icon="icon invisible-box" {...other} />;
+  }
+  return <FontIcon icon={isExpanded ? 'icon minus-box' : 'icon plus-box'} {...other} />;
 }
--- a/packages/web/src/impexp/ImportExportConfigurator.js
+++ b/packages/web/src/impexp/ImportExportConfigurator.js
@@ -23,6 +23,7 @@ import axios from '../utility/axios';
 import LoadingInfo from '../widgets/LoadingInfo';
 import SqlEditor from '../sqleditor/SqlEditor';
 import { useUploadsProvider } from '../utility/UploadsProvider';
+import { FontIcon } from '../icons';

 const Container = styled.div`
  // max-height: 50vh;
@@ -294,7 +295,7 @@ function SourceName({ name }) {
    <SourceNameWrapper>
      <div>{name}</div>
      <TrashWrapper onClick={handleDelete}>
-        <span className="mdi mdi-delete" />
+        <FontIcon icon="mdi mdi-delete" />
      </TrashWrapper>
    </SourceNameWrapper>
  );
@@ -352,7 +353,7 @@ export default function ImportExportConfigurator({ uploadedFile = undefined }) {
          engine={sourceEngine}
        />
        <ArrowWrapper>
-          <span className="mdi mdi-arrow-right" />
+          <FontIcon icon="mdi mdi-arrow-right" />
        </ArrowWrapper>
        <SourceTargetConfig
          direction="target"
--- a/packages/web/src/modals/ErrorMessageModal.js
+++ b/packages/web/src/modals/ErrorMessageModal.js
@@ -5,6 +5,7 @@ import styled from 'styled-components';
 import ModalHeader from './ModalHeader';
 import ModalFooter from './ModalFooter';
 import ModalContent from './ModalContent';
+import { FontIcon } from '../icons';

 const Wrapper = styled.div`
 display:flex
@@ -23,7 +24,7 @@ export default function ErrorMessageModal({ modalState, title = 'Error', message
      <ModalContent>
        <Wrapper>
          <IconWrapper>
-            <span className="mdi mdi-close-circle color-red" />
+            <FontIcon icon="mdi mdi-close-circle color-red" />
          </IconWrapper>
          {message}
        </Wrapper>
--- a/packages/web/src/modals/ModalHeader.js
+++ b/packages/web/src/modals/ModalHeader.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import { FontIcon } from '../icons';

 const Wrapper = styled.div`
  font-size: 15pt;
@@ -23,7 +24,7 @@ export default function ModalHeader({ children, modalState }) {
    <Wrapper>
      <div>{children}</div>
      <CloseWrapper onClick={modalState.close}>
-        <span className="mdi mdi-close" />
+        <FontIcon icon="mdi mdi-close" />
      </CloseWrapper>
    </Wrapper>
  );
--- a/packages/web/src/widgets/DropDownButton.js
+++ b/packages/web/src/widgets/DropDownButton.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { FontIcon } from '../icons';
 import { showMenu } from '../modals/DropDownMenu';
 import InlineButton from './InlineButton';

@@ -12,7 +13,7 @@ export default function DropDownButton({ children }) {

  return (
    <InlineButton buttonRef={buttonRef} onClick={handleShowMenu} square>
-      <span className="mdi mdi-chevron-down" />
+      <FontIcon icon="mdi mdi-chevron-down" />
    </InlineButton>
  );
 }
--- a/packages/web/src/widgets/ErrorInfo.js
+++ b/packages/web/src/widgets/ErrorInfo.js
@@ -1,6 +1,7 @@
 import React from 'react';

 import styled from 'styled-components';
+import { FontIcon } from '../icons';

 const Container = styled.div`
  display: flex;
@@ -22,7 +23,7 @@ export default function ErrorInfo({ message, icon = 'mdi mdi-close-circle color-
  if (isSmall) {
    return (
      <ContainerSmall>
-        <span className={icon} />
+        <FontIcon icon={icon} />
        {message}
      </ContainerSmall>
    );
@@ -30,7 +31,7 @@ export default function ErrorInfo({ message, icon = 'mdi mdi-close-circle color-
  return (
    <Container>
      <Icon>
-        <span className={icon} />
+        <FontIcon icon={icon} />
      </Icon>
      {message}
    </Container>
--- a/packages/web/src/widgets/LoadingInfo.js
+++ b/packages/web/src/widgets/LoadingInfo.js
@@ -1,6 +1,7 @@
 import React from 'react';

 import styled from 'styled-components';
+import { FontIcon } from '../icons';

 const Container = styled.div`
  display: flex;
@@ -33,7 +34,7 @@ export default function LoadingInfo({ message, wrapper = false }) {
  const core = (
    <Container>
      <Spinner>
-        <span className="mdi mdi-loading mdi-spin" />
+        <FontIcon icon="mdi mdi-loading mdi-spin" />
      </Spinner>
      {message}
    </Container>
--- a/packages/web/src/widgets/StatusBar.js
+++ b/packages/web/src/widgets/StatusBar.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import { FontIcon } from '../icons';

 import { useCurrentDatabase } from '../utility/globalState';
 import { useDatabaseStatus } from '../utility/metadataLoaders';
@@ -24,18 +25,18 @@ export default function StatusBar() {
    <Container>
      {name && (
        <Item>
-          <span className="mdi mdi-database" /> {name}
+          <FontIcon icon="mdi mdi-database" /> {name}
        </Item>
      )}
      {(displayName || server) && (
        <Item>
-          <span className='mdi mdi-server'/> {displayName || server}
+          <FontIcon icon='mdi mdi-server'/> {displayName || server}
        </Item>
      )}

      {user && (
        <Item>
-          <span className="mdi mdi-account" /> {user}
+          <FontIcon icon="mdi mdi-account" /> {user}
        </Item>
      )}

@@ -43,17 +44,17 @@ export default function StatusBar() {
        <Item>
          {status.name == 'pending' && (
            <>
-              <span className="mdi mdi-loading mdi-spin" /> Loading
+              <FontIcon icon="mdi mdi-loading mdi-spin" /> Loading
            </>
          )}
          {status.name == 'ok' && (
            <>
-              <span className="mdi mdi-check-circle color-on-statusbar-green" /> Connected
+              <FontIcon icon="mdi mdi-check-circle color-on-statusbar-green" /> Connected
            </>
          )}
          {status.name == 'error' && (
            <>
-              <span className="mdi mdi-close-circle color-red" /> Error
+              <FontIcon icon="mdi mdi-close-circle color-red" /> Error
            </>
          )}
        </Item>
@@ -61,7 +62,7 @@ export default function StatusBar() {
      {!connection && (
        <Item>
          <>
-            <span className="mdi mdi-lan-disconnect" /> Not connected
+            <FontIcon icon="mdi mdi-lan-disconnect" /> Not connected
          </>
        </Item>
      )}
--- a/packages/web/src/widgets/ToolbarButton.js
+++ b/packages/web/src/widgets/ToolbarButton.js
@@ -1,6 +1,7 @@
 // @ts-nocheck
 import React from 'react';
 import styled from 'styled-components';
+import { FontIcon } from '../icons';
 import theme from '../theme';

 const ButtonDiv = styled.div`
@@ -53,7 +54,7 @@ export default function ToolbarButton({ children, onClick, icon = undefined, dis
      <ButtonDivInner patchY={patchY}>
        {icon && (
          <StyledIconSpan disabled={disabled}>
-            <span className={icon} />
+            <FontIcon icon={icon} />
          </StyledIconSpan>
        )}
        {children}
--- a/packages/web/src/widgets/WidgetIconPanel.js
+++ b/packages/web/src/widgets/WidgetIconPanel.js
@@ -2,6 +2,7 @@ import React from 'react';
 import theme from '../theme';
 import styled from 'styled-components';
 import { useCurrentWidget, useSetCurrentWidget } from '../utility/globalState';
+import { FontIcon } from '../icons';

 const IconWrapper = styled.div`
  color: ${theme.widgetMenu.iconFontColor};
@@ -62,7 +63,7 @@ export default function WidgetIconPanel() {
          onClick={() => setCurrentWidget(name === currentWidget ? null : name)}
          title={title}
        >
-          <span className={icon} />
+          <FontIcon icon={icon} />
        </IconWrapper>
      ))}
    </>