diff --git a/web/.eslintrc.js b/web/.eslintrc.js index 5df669247..a53d0ca70 100644 --- a/web/.eslintrc.js +++ b/web/.eslintrc.js @@ -22,5 +22,7 @@ module.exports = { "react" ], "rules": { + "react/prop-types": "off", + "no-unused-vars": "warn" } }; \ No newline at end of file diff --git a/web/package.json b/web/package.json index 7bdfa8c68..02f050aa1 100644 --- a/web/package.json +++ b/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" + } } diff --git a/web/src/Screen.js b/web/src/Screen.js index b2bbacec4..b242d322a 100644 --- a/web/src/Screen.js +++ b/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 ( <> - + + + diff --git a/web/src/SideIconPanel.js b/web/src/SideIconPanel.js new file mode 100644 index 000000000..db7d96f92 --- /dev/null +++ b/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 }) => ( + +
+ +
+ + )); +} diff --git a/web/src/icons.js b/web/src/icons.js index 62339ceda..a0ec71c87 100644 --- a/web/src/icons.js +++ b/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 ; +} -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 }) => ; diff --git a/web/src/index.js b/web/src/index.js index 87d1be551..137927ce3 100644 --- a/web/src/index.js +++ b/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(, document.getElementById('root')); +ReactDOM.render(, 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. diff --git a/web/src/theme.js b/web/src/theme.js index a9e31f07d..03ed1f7c1 100644 --- a/web/src/theme.js +++ b/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, diff --git a/web/yarn.lock b/web/yarn.lock index fde470a4a..b583e8c54 100644 --- a/web/yarn.lock +++ b/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==