mirrors/dbgate
1
0
Fork 0
mirror of https://github.com/dbgate/dbgate synced 2024-11-10 05:36:29 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

added font-awesome icons

Browse Source
This commit is contained in:
Jan Prochazka 2019-12-26 23:48:17 +01:00
parent 4fc93005f6
commit 31fca603dc
6 changed files with 89 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/package.json
View File

@ -3,6 +3,9 @@
"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",

12
web/src/FilesTabsPanel.js
View File

@ -2,6 +2,8 @@ import React from "react";
import styled from "styled-components";
import theme from "./theme";
import { TableIcon } from "./icons";
const files = [
{ name: "app.js" },
{ name: "BranchCategory", type: "table", selected: true },
@ -22,6 +24,14 @@ const FileTabItem = styled.div`
props.selected ? theme.mainArea.background : "inherit"};
`;
const FileNameWrapper = styled.span`
margin-left: 5px;
`;
export default function FilesTabsPanel() {
return files.map(file => <FileTabItem {...file}>{file.name}</FileTabItem>);
return files.map(file => (
<FileTabItem {...file}>
<TableIcon /><FileNameWrapper>{file.name}</FileNameWrapper>
</FileTabItem>
));
}

6
web/src/Screen.js
View File

@ -3,6 +3,10 @@ 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'
const BodyDiv = styled.div`
position: fixed;
top: ${theme.tabsPanel.height}px;
@ -52,7 +56,7 @@ const StausBar = styled.div`
export default function Screen({ children }) {
return (
<>
<IconBar></IconBar>
<IconBar><FontAwesomeIcon icon={faTable} color='gray' size='2x'/></IconBar>
<LeftPanel></LeftPanel>
<TabsPanel>
<FilesTabsPanel></FilesTabsPanel>

40
web/src/icons/TableIcon.js Normal file
View File

@ -0,0 +1,40 @@
import React from "react";
export default function TableIcon({ size=16 }) {
return (
<svg
width={size}
height={size}
viewBox="0 0 502 502"
enable-background="new 0 0 502 502"
>
<rect
x="10"
y="66.375"
style={{ fill: "#4EC9DC" }}
width="482"
height="73.896"
/>
<rect
x="10"
y="140.039"
style={{ fill: "#D1DCEB" }}
width="482"
height="295.586"
/>
<g>
<path
d="M492,445.625c5.522,0,10-4.477,10-10V66.375c0-5.523-4.478-10-10-10H10c-5.522,0-10,4.477-10,10v369.25
c0,5.523,4.478,10,10,10H492z M482,277.832H381.5v-53.896H482V277.832z M20,223.936h100.5v53.896H20V223.936z M361.5,150.271
v53.664H261v-53.664H361.5z M241,150.271v53.664H140.5v-53.664H241z M140.5,223.936H241v53.896H140.5V223.936z M261,223.936h100.5
v53.896H261V223.936z M381.5,203.936v-53.664H482v53.664H381.5z M120.5,150.271v53.664H20v-53.664H120.5z M20,297.832h100.5
v53.896H20V297.832z M140.5,297.832H241v53.896H140.5V297.832z M261,297.832h100.5v53.896H261V297.832z M381.5,297.832H482v53.896
H381.5V297.832z M20,130.039V76.375h462v53.664H20z M20,371.729h100.5v53.896H20V371.729z M140.5,371.729H241v53.896H140.5
V371.729z M261,371.729h100.5v53.896H261V371.729z M482,425.625H381.5v-53.896H482V425.625z"
/>
<path d="M209,107.625h192c5.522,0,10-4.477,10-10s-4.478-10-10-10H209c-5.522,0-10,4.477-10,10S203.478,107.625,209,107.625z" />
<path d="M436,107.625h22c5.522,0,10-4.477,10-10s-4.478-10-10-10h-22c-5.522,0-10,4.477-10,10S430.478,107.625,436,107.625z" />
</g>
</svg>
);
}

3
web/src/icons/index.js Normal file
View File

@ -0,0 +1,3 @@
export { default as TableIcon } from "./TableIcon";

28
web/yarn.lock
View File

@ -988,6 +988,32 @@
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":
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"
"@hapi/address@2.x.x":
version "2.1.4"
resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
@ -8203,7 +8229,7 @@ prompts@^2.0.1:
kleur "^3.0.3"
sisteransi "^1.0.3"
prop-types@^15.5.4, prop-types@^15.6.2, prop-types@^15.7.2:
prop-types@^15.5.10, 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==