Skip to content

implement file type icons #2550

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jun 3, 2024
Merged

implement file type icons #2550

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c9ae3e3
implement file type icons
mhsh312 Oct 31, 2023
d4aa2f6
Merge branch 'develop' into fileTypeIcons
raclim Jun 3, 2024
472b2ff
accessibility for FileTypeIcon
raclim Jun 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions client/modules/IDE/components/FileNode.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import * as FileActions from '../actions/files';
import DownArrowIcon from '../../../images/down-filled-triangle.svg';
import FolderRightIcon from '../../../images/triangle-arrow-right.svg';
import FolderDownIcon from '../../../images/triangle-arrow-down.svg';
import FileIcon from '../../../images/file.svg';
import FileTypeIcon from './FileTypeIcon';

function parseFileName(name) {
const nameArray = name.split('.');
Expand Down Expand Up @@ -256,6 +256,7 @@ class FileNode extends React.Component {
const isRoot = this.props.name === 'root';

const { t } = this.props;
const { extension } = parseFileName(this.props.name);
Copy link
Collaborator

@lindapaiste lindapaiste Nov 2, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome that we already had a function for this!


return (
<div className={itemClass}>
Expand All @@ -267,7 +268,11 @@ class FileNode extends React.Component {
<span className="file-item__spacer"></span>
{isFile && (
<span className="sidebar__file-item-icon">
<FileIcon focusable="false" aria-hidden="true" />
<FileTypeIcon
fileExtension={extension}
focusable="false"
aria-hidden="true"
/>
</span>
)}
{isFolder && (
Expand Down
59 changes: 59 additions & 0 deletions client/modules/IDE/components/FileTypeIcon.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import React from 'react';
import PropTypes from 'prop-types';
import { IoLogoHtml5, IoLogoCss3, IoLogoJavascript } from 'react-icons/io';
import { TbFileTypeXml, TbTxt, TbCsv } from 'react-icons/tb';
import { VscJson } from 'react-icons/vsc';
import FileIcon from '../../../images/file.svg';

export default function FileTypeIcon({ fileExtension }) {
switch (fileExtension) {
Copy link
Collaborator

@lindapaiste lindapaiste Nov 2, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a great starting point!

As this evolves we'll figure out what makes sense code-wise. switch definitely works. A dictionary object could work. That is, const icons = { html: IoLogoHtml5, /// etc. }. If we want to use the same icon for more than one extension then if else statements might make sense. Like if (/jsx?/i.test(fileExtension)) { return <IoLogoJavascript /> } to match .js and .jsx.

Copy link
Contributor Author

@mhsh312 mhsh312 Nov 2, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we want to use the same icon for more than one extension then if else statements might make sense. Like if (/jsx?/i.test(fileExtension)) { return } to match .js and .jsx.

In javascript, same code can be assigned to multiple cases like this:

 switch (choice) {
  case "1":
  case "2":
    console.log("test1");
    break;
  case "3":
    console.log("test2");
}

So I think switch overall is the best way.

case '.html':
return (
<span>
<IoLogoHtml5 />
</span>
);
case '.css':
return (
<span>
<IoLogoCss3 />
</span>
);
case '.js':
return (
<span>
<IoLogoJavascript />
</span>
);
case '.json':
return (
<span>
<VscJson />
</span>
);
case '.xml':
return (
<span>
<TbFileTypeXml />
</span>
);
case '.txt':
return (
<span>
<TbTxt />
</span>
);
case '.csv':
return (
<span>
<TbCsv />
</span>
);
default:
return <FileIcon focusable="false" aria-hidden="true" />;
}
}

FileTypeIcon.propTypes = {
fileExtension: PropTypes.string.isRequired
};
15 changes: 15 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,6 +230,7 @@
"react-ga": "^3.3.0",
"react-helmet": "^5.1.3",
"react-i18next": "^11.11.3",
"react-icons": "^4.11.0",
"react-markdown": "^6.0.3",
"react-redux": "^7.2.4",
"react-refresh": "^0.14.0",
Expand Down