Skip to content

Commit eed3835

Browse files
Bogdan-LyashenkoBogdan-Lyashenko
committed
fix: icons per file
1 parent 55068ca commit eed3835

8 files changed

Lines changed: 169 additions & 9 deletions

File tree

‎src/public/js/components/treeDiagram/component/Icons/language/File.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React from 'react';
2+
import { BLUE_COLOR } from '../../constants';
3+
4+
export default ({ x, y, width, height }) => (
5+
<svg
6+
version="1.1"
7+
x={x}
8+
y={y}
9+
width={width}
10+
height={height}
11+
viewBox="0 0 512 512"
12+
shapeRendering={'geometricPrecision'}
13+
>
14+
<g>
15+
<g>
16+
<path
17+
d="M447.933,103.629c-0.034-3.076-1.224-6.09-3.485-8.352L352.683,3.511c-0.004-0.004-0.007-0.005-0.011-0.008 C350.505,1.338,347.511,0,344.206,0H89.278C75.361,0,64.04,11.32,64.04,25.237v461.525c0,13.916,11.32,25.237,25.237,25.237 h333.444c13.916,0,25.237-11.32,25.237-25.237V103.753C447.96,103.709,447.937,103.672,447.933,103.629z M356.194,40.931 l50.834,50.834h-49.572c-0.695,0-1.262-0.567-1.262-1.262V40.931z M423.983,486.763c0,0.695-0.566,1.261-1.261,1.261H89.278 c-0.695,0-1.261-0.566-1.261-1.261V25.237c0-0.695,0.566-1.261,1.261-1.261h242.94v66.527c0,13.916,11.322,25.239,25.239,25.239 h66.527V486.763z"
18+
fill={BLUE_COLOR}
19+
/>
20+
</g>
21+
</g>
22+
<g>
23+
<g>
24+
<path
25+
d="M362.088,164.014H149.912c-6.62,0-11.988,5.367-11.988,11.988c0,6.62,5.368,11.988,11.988,11.988h212.175 c6.62,0,11.988-5.368,11.988-11.988C374.076,169.381,368.707,164.014,362.088,164.014z"
26+
fill={BLUE_COLOR}
27+
/>
28+
</g>
29+
</g>
30+
<g>
31+
<g>
32+
<path
33+
d="M362.088,236.353H149.912c-6.62,0-11.988,5.368-11.988,11.988c0,6.62,5.368,11.988,11.988,11.988h212.175 c6.62,0,11.988-5.368,11.988-11.988C374.076,241.721,368.707,236.353,362.088,236.353z"
34+
fill={BLUE_COLOR}
35+
/>
36+
</g>
37+
</g>
38+
<g>
39+
<g>
40+
<path
41+
d="M362.088,308.691H149.912c-6.62,0-11.988,5.368-11.988,11.988c0,6.621,5.368,11.988,11.988,11.988h212.175 c6.62,0,11.988-5.367,11.988-11.988C374.076,314.06,368.707,308.691,362.088,308.691z"
42+
fill={BLUE_COLOR}
43+
/>
44+
</g>
45+
</g>
46+
<g>
47+
<g>
48+
<path
49+
d="M256,381.031H149.912c-6.62,0-11.988,5.368-11.988,11.988c0,6.621,5.368,11.988,11.988,11.988H256 c6.62,0,11.988-5.367,11.988-11.988C267.988,386.398,262.62,381.031,256,381.031z"
50+
fill={BLUE_COLOR}
51+
/>
52+
</g>
53+
</g>
54+
</svg>
55+
);

src/public/js/components/treeDiagram/component/Icons/JavaScriptFile.js renamed to src/public/js/components/treeDiagram/component/Icons/language/JavaScriptFile.js

Lines changed: 2 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/public/js/components/treeDiagram/component/Icons/language/PythonFile.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from 'react';
2+
import { BLUE_COLOR } from '../../constants';
3+
4+
export default ({ x, y, width, height }) => (
5+
<svg
6+
version="1.1"
7+
x={x}
8+
y={y}
9+
width={width}
10+
height={height}
11+
viewBox="0 0 548.291 548.291"
12+
shapeRendering={'geometricPrecision'}
13+
>
14+
<g>
15+
<g>
16+
<g>
17+
<path
18+
d="M213.773,411.648c-5.643,0-9.467,0.546-11.472,1.093v36.23c2.367,0.553,5.281,0.735,9.289,0.735 c14.751,0,23.855-7.464,23.855-20.036C235.441,418.389,227.608,411.648,213.773,411.648z"
19+
fill={BLUE_COLOR}
20+
/>
21+
<path
22+
d="M472.929,131.396c-0.031-2.517-0.829-5-2.556-6.96L364.656,3.675c-0.021-0.031-0.053-0.042-0.084-0.073 c-0.63-0.704-1.354-1.287-2.132-1.796c-0.23-0.152-0.462-0.286-0.703-0.419c-0.683-0.365-1.387-0.667-2.121-0.888 c-0.2-0.058-0.377-0.139-0.577-0.194C358.231,0.118,357.411,0,356.572,0H96.757C84.904,0,75.255,9.649,75.255,21.502V526.79 c0,11.858,9.649,21.501,21.502,21.501h354.775c11.863,0,21.503-9.643,21.503-21.501V132.595 C473.036,132.191,472.971,131.792,472.929,131.396z M251.643,458.085c-9.465,8.919-23.491,12.923-39.875,12.923 c-3.645,0-6.918-0.177-9.472-0.545v43.885h-27.489V393.254c8.557-1.454,20.578-2.551,37.51-2.551 c17.115,0,29.318,3.28,37.509,9.832c7.832,6.194,13.11,16.395,13.11,28.41C262.937,440.962,258.927,451.161,251.643,458.085z M333.054,463.182v51.166h-27.676V464.09l-38.785-72.462h31.688l12.563,29.49c3.82,8.924,6.377,15.476,9.469,23.492h0.369 c2.729-7.65,5.643-14.751,9.284-23.492l12.379-29.49h31.14L333.054,463.182z M96.757,365.081V21.502H345.82v110.011 c0,5.935,4.81,10.751,10.752,10.751h94.961l0.011,222.816H96.757z"
23+
fill={BLUE_COLOR}
24+
/>
25+
</g>
26+
<g>
27+
<path
28+
d="M290.828,206.77c12.798-0.339,22.688-11.014,22.897-23.835c0.137-8.26,0.021-16.533,0.026-24.795 c0.005-8.273,0.054-16.536-0.026-24.799c-0.021-1.918-0.21-3.924-0.776-5.745c-3.517-11.483-12.053-17.896-23.245-19.261 c-13.349-1.629-26.934-1.989-40.389-1.75c-7.357,0.134-14.84,2.094-21.969,4.224c-9.895,2.963-13.771,8.664-14.152,18.937 c-0.216,5.861,0.01,11.735-0.334,17.583c-0.247,4.247,1.413,5.328,5.483,5.262c13.824-0.221,27.656,0.021,41.481-0.113 c3.246-0.031,4.047,1.179,4.047,4.221c0,4.176-2.842,3.524-5.283,3.536c-21.641,0.065-43.294,0.419-64.931,0 c-16.517-0.315-28.596,10.976-31.908,25.104c-2.412,10.294-4.241,20.63-3.315,31.176c0.966,11.074,2.499,22.126,8.037,32.059 c4.289,7.709,10.777,12.473,19.785,12.992c5.092,0.302,10.218-0.047,15.326,0.137c3.042,0.107,3.882-1.195,3.816-4.032 c-0.144-6.307,0.056-12.627-0.068-18.932c-0.126-6.103,1.761-11.55,5.068-16.515c7.208-10.819,17.675-15.286,30.376-15.28 C257.47,206.938,274.161,207.21,290.828,206.77z M234.543,140.593c-5.494-0.005-10.079-4.463-10.163-9.885 c-0.092-5.543,4.703-10.504,10.163-10.504c5.168-0.005,10.084,4.843,10.215,10.068 C244.903,135.879,240.215,140.598,234.543,140.593z"
29+
fill={BLUE_COLOR}
30+
/>
31+
<path
32+
d="M371.028,207.615c-0.966-11.063-2.498-22.122-8.031-32.062c-4.293-7.703-10.782-12.464-19.791-12.986 c-5.091-0.294-10.225,0.055-15.322-0.134c-3.049-0.107-3.891,1.2-3.817,4.032c0.138,6.31-0.062,12.633,0.064,18.932 c0.125,6.098-1.766,11.551-5.071,16.521c-7.202,10.819-17.67,15.28-30.374,15.275c-16.684,0-33.37-0.272-50.045,0.169 c-12.792,0.338-22.685,11.012-22.892,23.827c-0.136,8.262-0.029,16.535-0.035,24.798c-0.005,8.265-0.052,16.527,0.027,24.801 c0.019,1.92,0.215,3.917,0.774,5.742c3.518,11.486,12.058,17.891,23.254,19.26c13.347,1.628,26.925,1.991,40.386,1.749 c7.354-0.137,14.841-2.09,21.97-4.222c9.895-2.96,13.774-8.666,14.147-18.939c0.219-5.858-0.011-11.732,0.33-17.575 c0.252-4.254-1.407-5.333-5.479-5.265c-13.828,0.215-27.654-0.016-41.481,0.121c-3.247,0.026-4.047-1.189-4.047-4.22 c0.005-4.185,2.842-3.533,5.289-3.538c21.642-0.063,43.294-0.42,64.933-0.01c16.516,0.322,28.594-10.972,31.905-25.093 C370.125,228.502,371.953,218.161,371.028,207.615z M294.928,283.537c5.495,0,10.078,4.457,10.162,9.879 c0.088,5.55-4.703,10.499-10.162,10.51c-5.173,0-10.097-4.846-10.216-10.073C284.57,288.25,289.251,283.527,294.928,283.537z"
33+
fill={BLUE_COLOR}
34+
/>
35+
</g>
36+
</g>
37+
</g>
38+
</svg>
39+
);

‎src/public/js/components/treeDiagram/component/Node/File.js‎

Lines changed: 41 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,48 @@ import React from 'react';
22
import classNames from 'classnames';
33

44
import { SYMBOL_WIDTH } from 'components/treeDiagram/component/constants';
5-
import JavaScriptFile from 'components/treeDiagram/component/Icons/JavaScriptFile';
5+
6+
import FileIcon from 'components/treeDiagram/component/Icons/language/File';
7+
import JavaScriptFileIcon from 'components/treeDiagram/component/Icons/language/JavaScriptFile';
8+
import PythonFileIcon from 'components/treeDiagram/component/Icons/language/PythonFile';
9+
610
import DepCirclesIcon from 'components/treeDiagram/component/Icons/DepCircles';
711
import './index.scss';
812

13+
const getFileIcon = ({ position, iconSize, language }) => {
14+
switch (language) {
15+
case 'javascript':
16+
return (
17+
<JavaScriptFileIcon
18+
x={position.x + 2}
19+
y={position.y - 10}
20+
height={iconSize}
21+
width={iconSize}
22+
/>
23+
);
24+
25+
case 'python':
26+
return (
27+
<PythonFileIcon
28+
x={position.x + 2}
29+
y={position.y - 10}
30+
height={iconSize + 1}
31+
width={iconSize + 1}
32+
/>
33+
);
34+
35+
default:
36+
return (
37+
<FileIcon
38+
x={position.x + 2}
39+
y={position.y - 10}
40+
height={iconSize + 1}
41+
width={iconSize + 1}
42+
/>
43+
);
44+
}
45+
};
46+
947
export const FileName = props => {
1048
const {
1149
position,
@@ -23,9 +61,9 @@ export const FileName = props => {
2361
const iconSize = 15;
2462
const nameWidth = name.length * SYMBOL_WIDTH;
2563

26-
// TODO: fix file icon for other languages - have default 'file' icon
64+
const iconFile = getFileIcon({ position, iconSize, language });
2765
const icon = !dependency ? (
28-
<JavaScriptFile x={position.x + 2} y={position.y - 10} height={iconSize} width={iconSize} />
66+
iconFile
2967
) : (
3068
<DepCirclesIcon
3169
x={position.x}

‎src/public/js/components/treeDiagram/component/Tree/CodeCrumbs/Tree.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { PartEdge, CodeCrumbEdge } from 'components/treeDiagram/component/Edge/C
77

88
const Tree = props => {
99
const {
10+
language,
1011
shiftToCenterPoint,
1112
codecrumbsLayoutMap,
1213
filesMap,
@@ -30,7 +31,12 @@ const Tree = props => {
3031
return (
3132
<React.Fragment key={`code-crumb-${file.name}`}>
3233
{!sourceDiagramOn && !dependenciesDiagramOn ? (
33-
<FileName position={position} name={file.name} purple={codeCrumbsMinimize} />
34+
<FileName
35+
language={language}
36+
position={position}
37+
name={file.name}
38+
purple={codeCrumbsMinimize}
39+
/>
3440
) : null}
3541
{(!codeCrumbsMinimize && (
3642
<PartEdge sourcePosition={position} parentName={file.name} />

‎src/public/js/components/treeDiagram/component/Tree/Dependencies/index.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { getGroupsAroundNode, checkIsEdgeSelected } from './utils';
1818

1919
const DependenciesTree = props => {
2020
const {
21+
language,
2122
selectedNode,
2223
filesLayoutMap,
2324
shiftToCenterPoint,
@@ -45,7 +46,13 @@ const DependenciesTree = props => {
4546
if (!sourceDiagramOn) {
4647
// TODO: un sync with FileName in SourceTree, duplication
4748
sourceNodes.push(
48-
<FileName key={path} position={targetPosition} name={name} dependency={true} />
49+
<FileName
50+
language={language}
51+
key={path}
52+
position={targetPosition}
53+
name={name}
54+
dependency={true}
55+
/>
4956
);
5057
}
5158

@@ -115,6 +122,7 @@ const DependenciesTree = props => {
115122
sourceNodes.push(
116123
<FileName
117124
key={importedNodePath}
125+
language={language}
118126
position={sourcePosition}
119127
name={name}
120128
dependency={true}

‎src/public/js/components/treeDiagram/component/Tree/Source/Tree.js‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import CodeCrumbedFlowEdges from '../CodeCrumbs/FlowEdge';
1313
const SourceTree = props => {
1414
const {
1515
namespace,
16+
language,
1617

1718
sourceDiagramOn,
1819
dependenciesDiagramOn,
@@ -84,6 +85,7 @@ const SourceTree = props => {
8485
nodeBasedOnType = (
8586
<FileName
8687
key={path}
88+
language={language}
8789
position={position}
8890
name={name}
8991
path={fileNode.path}
@@ -131,7 +133,11 @@ const SourceTree = props => {
131133

132134
{dependenciesDiagramOn &&
133135
selectedNode.dependencies && (
134-
<DependenciesTree namespace={namespace} shiftToCenterPoint={shiftToCenterPoint} />
136+
<DependenciesTree
137+
namespace={namespace}
138+
language={language}
139+
shiftToCenterPoint={shiftToCenterPoint}
140+
/>
135141
)}
136142

137143
{(codeCrumbsDiagramOn && (
@@ -147,7 +153,11 @@ const SourceTree = props => {
147153
{(sourceDiagramOn && sourceDotes) || null}
148154

149155
{(codeCrumbsDiagramOn && (
150-
<CodeCrumbsTree namespace={namespace} shiftToCenterPoint={shiftToCenterPoint} />
156+
<CodeCrumbsTree
157+
namespace={namespace}
158+
language={language}
159+
shiftToCenterPoint={shiftToCenterPoint}
160+
/>
151161
)) ||
152162
null}
153163
</React.Fragment>

‎src/public/js/components/treeDiagram/component/Tree/Source/index.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ import {
66
getSource,
77
getSourceLayout,
88
getSourceUserChoice,
9-
getDependenciesUserChoice
9+
getDependenciesUserChoice,
10+
getProjectMetadata
1011
} from 'core/dataBus/selectors';
1112
import { getCheckedState } from 'core/controlsBus/selectors';
1213
import SourceTree from './Tree';
@@ -24,6 +25,7 @@ const mapStateToProps = (state, props) => {
2425
const namespaceProps = { namespace };
2526
const { filesMap } = getSource(state, namespaceProps);
2627
const { sourceLayoutTree } = getSourceLayout(state, namespaceProps);
28+
const { language } = getProjectMetadata(state, namespaceProps);
2729
const { selectedNode, openedFolders } = getSourceUserChoice(state, namespaceProps);
2830
const { dependenciesEntryName, selectedDependencyEdgeNodes } = getDependenciesUserChoice(
2931
state,
@@ -32,6 +34,7 @@ const mapStateToProps = (state, props) => {
3234

3335
return {
3436
namespace,
37+
language,
3538
sourceDiagramOn,
3639
dependenciesDiagramOn,
3740
sourceDimFolders,

0 commit comments

Comments
 (0)