left menu icon design

web/.eslintrc.js

@@ -22,5 +22,7 @@ module.exports = {
         "react"
     ],
     "rules": {
+        "react/prop-types": "off",
+        "no-unused-vars": "warn"
     }
 };

web/package.json

@@ -3,9 +3,6 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.26",
-    "@fortawesome/free-solid-svg-icons": "^5.12.0",
-    "@fortawesome/react-fontawesome": "^0.1.8",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
@@ -37,5 +34,7 @@
       "last 1 safari version"
     ]
   },
-  "devDependencies": {}
+  "devDependencies": {
+    "@fortawesome/fontawesome-free": "^5.12.0"
+  }
 }

web/src/Screen.js

@@ -2,10 +2,7 @@ import React from "react";
 import theme from "./theme";
 import styled from "styled-components";
 import FilesTabsPanel from "./FilesTabsPanel";
-
-
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faTable } from '@fortawesome/free-solid-svg-icons'
+import SideIconPanel from "./SideIconPanel";
 
 const BodyDiv = styled.div`
   position: fixed;
@@ -56,7 +53,9 @@ const StausBar = styled.div`
 export default function Screen({ children }) {
   return (
     <>
-      <IconBar><FontAwesomeIcon icon={faTable} color='gray' size='2x'/></IconBar>
+      <IconBar>
+        <SideIconPanel />
+      </IconBar>
       <LeftPanel></LeftPanel>
       <TabsPanel>
         <FilesTabsPanel></FilesTabsPanel>

web/src/SideIconPanel.js

@@ -0,0 +1,47 @@
+import React from "react";
+import theme from "./theme";
+import styled from "styled-components";
+import { FontIcon } from "./icons";
+
+const IconWrapper = styled.div`
+  color: ${theme.widgetMenu.iconFontColor};
+  font-size: ${theme.widgetMenu.iconFontSize};
+  height: ${theme.widgetMenu.iconSize}px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &:hover {
+    background-color: ${theme.widgetMenu.backgroundHover};
+  }
+  background-color: ${props =>
+    props.isSelected ? theme.widgetMenu.backgroundSelected : "inherit"};
+`;
+
+export default function SideIconPanel() {
+  const widgets = [
+    {
+      icon: "fa-database"
+    },
+    {
+      icon: "fa-table",
+      isSelected: true
+    },
+    {
+      icon: "fa-file-alt"
+    },
+    {
+      icon: "fa-cog"
+    },
+    {
+      icon: "fa-check"
+    }
+  ];
+
+  return widgets.map(({ icon, isSelected }) => (
+    <IconWrapper key={icon} isSelected={isSelected}>
+      <div>
+        <FontIcon name={icon} />
+      </div>
+    </IconWrapper>
+  ));
+}

web/src/icons.js

@@ -1,4 +1,5 @@
-import React from 'react';
+import React from "react";
+import _ from "lodash";
 
 function getIconImage(src, { size = 16, style = {}, className, title }) {
   if (src.endsWith(".svg")) {
@@ -21,52 +22,92 @@ function getIconImage(src, { size = 16, style = {}, className, title }) {
   );
 }
 
-export const TableIcon = (props) => getIconImage("table2.svg", props);
-export const ViewIcon = (props) => getIconImage("view2.svg", props);
-export const DatabaseIcon = (props) => getIconImage("database.svg", props);
-export const ServerIcon = (props) => getIconImage("server.svg", props);
+export function getFontIcon(fontIconSpec, props = {}) {
+  let iconClass = fontIconSpec;
+  if (!iconClass) return null;
+  var parts = iconClass.split(" ");
+  var name = parts[0];
+  parts = parts.slice(1);
 
-export const MicrosoftIcon = (props) => getIconImage("microsoft.svg", props);
-export const MySqlIcon = (props) => getIconImage("mysql.svg", props);
-export const PostgreSqlIcon = (props) => getIconImage("postgresql.svg", props);
-export const SqliteIcon = (props) => getIconImage("sqlite.svg", props);
+  var className = props.className || "";
 
-export const ProcedureIcon = (props) => getIconImage("procedure2.svg", props);
-export const FunctionIcon = (props) => getIconImage("function.svg", props);
-export const TriggerIcon = (props) => getIconImage("trigger.svg", props);
+  // if (_.startsWith(name, 'bs-')) className += ` glyphicon glyphicon-${name.substr(3)}`;
+  if (_.startsWith(name, "fa-")) className += ` fas fa-${name.substr(3)}`;
 
-export const HomeIcon = (props) => getIconImage("home.svg", props);
-export const PrimaryKeyIcon = (props) => getIconImage("primarykey.svg", props);
-export const ForeignKeyIcon = (props) => getIconImage("foreignkey.svg", props);
-export const ComplexKeyIcon = (props) => getIconImage("complexkey.svg", props);
-export const VariableIcon = (props) => getIconImage("variable.svg", props);
-export const UniqueIcon = (props) => getIconImage("unique.svg", props);
-export const IndexIcon = (props) => getIconImage("index.svg", props);
+  if (_.includes(parts, "spin")) className += " fa-spin";
 
-export const StartIcon = (props) => getIconImage("start.svg", props);
-export const DownCircleIcon = (props) => getIconImage("down_circle.svg", props);
+  var style = props.style || {};
 
-export const ColumnIcon = (props) => getIconImage("column.svg", props);
+  var last = parts[parts.length - 1];
+  if (last && last != "spin") {
+    style["color"] = last;
+  }
 
-export const SqlIcon = (props) => getIconImage("sql.svg", props);
-export const ExcelIcon = (props) => getIconImage("excel.svg", props);
-export const DiagramIcon = (props) => getIconImage("diagram.svg", props);
-export const QueryDesignIcon = (props) => getIconImage("querydesign.svg", props);
-export const LocalDbIcon = (props) => getIconImage("localdb.svg", props);
-export const CsvIcon = (props) => getIconImage("csv.svg", props);
-export const ChangeSetIcon = (props) => getIconImage("changeset.svg", props);
-export const BinaryFileIcon = (props) => getIconImage("binaryfile.svg", props);
+  return <i className={className} style={style} title={props.title} />;
+}
 
-export const ReferenceIcon = (props) => getIconImage("reference.svg", props);
-export const LinkIcon = (props) => getIconImage("link.svg", props);
+export const TableIcon = props => getIconImage("table2.svg", props);
+export const ViewIcon = props => getIconImage("view2.svg", props);
+export const DatabaseIcon = props => getIconImage("database.svg", props);
+export const ServerIcon = props => getIconImage("server.svg", props);
 
-export const SequenceIcon = (props) => getIconImage("sequence.svg", props);
-export const CheckIcon = (props) => getIconImage("check.svg", props);
+export const MicrosoftIcon = props => getIconImage("microsoft.svg", props);
+export const MySqlIcon = props => getIconImage("mysql.svg", props);
+export const PostgreSqlIcon = props => getIconImage("postgresql.svg", props);
+export const SqliteIcon = props => getIconImage("sqlite.svg", props);
 
-export const LinkedServerIcon = (props) => getIconImage("linkedserver.svg", props);
+export const ProcedureIcon = props => getIconImage("procedure2.svg", props);
+export const FunctionIcon = props => getIconImage("function.svg", props);
+export const TriggerIcon = props => getIconImage("trigger.svg", props);
 
-export const EmptyIcon = (props) =>
+export const HomeIcon = props => getIconImage("home.svg", props);
+export const PrimaryKeyIcon = props => getIconImage("primarykey.svg", props);
+export const ForeignKeyIcon = props => getIconImage("foreignkey.svg", props);
+export const ComplexKeyIcon = props => getIconImage("complexkey.svg", props);
+export const VariableIcon = props => getIconImage("variable.svg", props);
+export const UniqueIcon = props => getIconImage("unique.svg", props);
+export const IndexIcon = props => getIconImage("index.svg", props);
+
+export const StartIcon = props => getIconImage("start.svg", props);
+export const DownCircleIcon = props => getIconImage("down_circle.svg", props);
+
+export const ColumnIcon = props => getIconImage("column.svg", props);
+
+export const SqlIcon = props => getIconImage("sql.svg", props);
+export const ExcelIcon = props => getIconImage("excel.svg", props);
+export const DiagramIcon = props => getIconImage("diagram.svg", props);
+export const QueryDesignIcon = props => getIconImage("querydesign.svg", props);
+export const LocalDbIcon = props => getIconImage("localdb.svg", props);
+export const CsvIcon = props => getIconImage("csv.svg", props);
+export const ChangeSetIcon = props => getIconImage("changeset.svg", props);
+export const BinaryFileIcon = props => getIconImage("binaryfile.svg", props);
+
+export const ReferenceIcon = props => getIconImage("reference.svg", props);
+export const LinkIcon = props => getIconImage("link.svg", props);
+
+export const SequenceIcon = props => getIconImage("sequence.svg", props);
+export const CheckIcon = props => getIconImage("check.svg", props);
+
+export const LinkedServerIcon = props =>
+  getIconImage("linkedserver.svg", props);
+
+export const EmptyIcon = props =>
   getIconImage(
     "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=",
     props
   );
+
+export const TimesRedIcon = props => getFontIcon("fa-times red", props);
+export const TimesGreenCircleIcon = props =>
+  getFontIcon("fa-times-circle green", props);
+export const GrayFilterIcon = props =>
+  getFontIcon("fa-filter lightgray", props);
+export const ExclamationTriangleIcon = props =>
+  getFontIcon("fa-exclamation-triangle", props);
+export const HourGlassIcon = props => getFontIcon("fa-hourglass", props);
+export const InfoBlueCircleIcon = props =>
+  getFontIcon("fa-info-circle blue", props);
+
+export const SpinnerIcon = props => getFontIcon("fa-spinner spin", props);
+
+export const FontIcon = ({ name }) => <i className={`fas ${name}`}></i>;

web/src/index.js

@@ -1,10 +1,11 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import "@fortawesome/fontawesome-free/css/all.css";
+import App from "./App";
+import * as serviceWorker from "./serviceWorker";
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<App />, document.getElementById("root"));
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

web/src/theme.js

@@ -1,7 +1,11 @@
 export default {
   widgetMenu: {
-    iconSize: 80,
-    background: "#222"
+    iconSize: 60,
+    background: "#222",
+    iconFontSize: "23pt",
+    iconFontColor: "#eee",
+    backgroundHover: "#555",
+    backgroundSelected: "#4CAF50",
   },
   leftPanel: {
     width: 300,
@@ -9,8 +13,8 @@ export default {
   },
   tabsPanel: {
     height: 30,
-    background:'#ddd',
-    hoverFont: '#338'
+    background: "#ddd",
+    hoverFont: "#338"
   },
   statusBar: {
     height: 20,

web/yarn.lock

@@ -988,31 +988,10 @@
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
   integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
 
-"@fortawesome/fontawesome-common-types@^0.2.26":
-  version "0.2.26"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.26.tgz#6e0b13a752676036f8196f8a1500d53a27b4adc1"
-  integrity sha512-CcM/fIFwZlRdiWG/25xE/wHbtyUuCtqoCTrr6BsWw7hH072fR++n4L56KPydAr3ANgMJMjT8v83ZFIsDc7kE+A==
-
-"@fortawesome/fontawesome-svg-core@^1.2.26":
-  version "1.2.26"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.26.tgz#671569271d6b532cdea5e3deb8ff16f8b7ac251d"
-  integrity sha512-3Dfd/v2IztP1TxKOxZiB5+4kaOZK9mNy0KU1vVK7nFlPWz3gzxrCWB+AloQhQUoJ8HhGqbzjliK89Vl7PExGbw==
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.2.26"
-
-"@fortawesome/free-solid-svg-icons@^5.12.0":
+"@fortawesome/fontawesome-free@^5.12.0":
   version "5.12.0"
-  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.12.0.tgz#8decac5844e60453cc0c7c51437d1461df053a35"
-  integrity sha512-CnpsWs6GhTs9ekNB3d8rcO5HYqRkXbYKf2YNiAlTWbj5eVlPqsd/XH1F9If8jkcR1aegryAbln/qYeKVZzpM0g==
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.2.26"
-
-"@fortawesome/react-fontawesome@^0.1.8":
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.8.tgz#cb6d4dd3aeec45b6ff2d48c812317a6627618511"
-  integrity sha512-I5h9YQg/ePA3Br9ISS18fcwOYmzQYDSM1ftH03/8nHkiqIVHtUyQBw482+60dnzvlr82gHt3mGm+nDUp159FCw==
-  dependencies:
-    prop-types "^15.5.10"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.12.0.tgz#8ceb9f09edfb85ea18a6c7bf098f6f5dd5ffd62b"
+  integrity sha512-vKDJUuE2GAdBERaQWmmtsciAMzjwNrROXA5KTGSZvayAsmuTGjam5z6QNqNPCwDfVljLWuov1nEC3mEQf/n6fQ==
 
 "@hapi/address@2.x.x":
   version "2.1.4"
@@ -8250,7 +8229,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.3"
 
-prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.4, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==