Skip to content
This repository was archived by the owner on Apr 5, 2024. It is now read-only.

Commit c17cd1b

Browse files
GimleuxGimleux
authored
Merge pull request #27 from FileFighter/feature/fileImages
Feature/file images
2 parents 400a37d + 8d8b966 commit c17cd1b

File tree

2 files changed

+113
-14
lines changed

2 files changed

+113
-14
lines changed

‎webapp_frontend/src/components/pages/filesytem/FileListItem.tsx‎

Lines changed: 33 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,15 @@ import React, {ReactElement} from "react";
33
import {Col, Form} from "react-bootstrap";
44
import {Link} from "react-router-dom";
55
import {
6+
FileEarmarkCodeIcon,
67
FileEarmarkIcon,
7-
FileEarmarkImageIcon, FileEarmarkMusicIcon, FileEarmarkPlayIcon, FileEarmarkRichtextIcon,
8-
FileEarmarkTextIcon,
8+
FileEarmarkImageIcon,
9+
FileEarmarkLock2Icon,
10+
FileEarmarkMusicIcon,
11+
FileEarmarkPDFIcon,
12+
FileEarmarkPlayIcon,
13+
FileEarmarkRichtextIcon,
14+
FileEarmarkTextIcon, FileEarmarkZipIcon,
915
FolderIcon
1016
} from "../../../elements/svg/SymbolFile";
1117
import {reverseString} from "../../../background/methods/strings";
@@ -34,29 +40,44 @@ export interface FileListEntity {
3440

3541
export default function FileListItem(props: Props): ReactElement {
3642

37-
const ICON_HEIGHT = "40px";
43+
const ICON_PREFERENCES = {height: "40px", width: "auto", color: "secondary"}
3844

3945
const FileIcon = (isFolder: boolean, name: string): ReactElement => {
40-
if (isFolder) return <FolderIcon height={ICON_HEIGHT} width={"auto"}
41-
color={"secondary"}/>
46+
47+
48+
if (isFolder) return <FolderIcon {...ICON_PREFERENCES}/>
49+
4250
let positionOfPoint = reverseString(name).indexOf(".");
43-
if (positionOfPoint < 0) return <FileEarmarkIcon height={ICON_HEIGHT} width={"auto"} color={"secondary"}/>
51+
if (positionOfPoint < 0) return <FileEarmarkIcon {...ICON_PREFERENCES}/>
4452

4553
const fileExtension = reverseString(reverseString(name).substr(0, positionOfPoint + 1));
4654
switch (fileExtension) {
4755
case ".txt" :
48-
return <FileEarmarkTextIcon height={ICON_HEIGHT} width={"auto"} color={"secondary"}/>
56+
return <FileEarmarkTextIcon {...ICON_PREFERENCES}/>
4957
case ".jpg" :
50-
return <FileEarmarkImageIcon height={ICON_HEIGHT} width={"auto"} color={"secondary"}/>
58+
return <FileEarmarkImageIcon {...ICON_PREFERENCES}/>
5159
case ".mp4" :
52-
return <FileEarmarkPlayIcon height={ICON_HEIGHT} width={"auto"} color={"secondary"}/>
60+
return <FileEarmarkPlayIcon {...ICON_PREFERENCES}/>
5361
case ".mp3" :
54-
return <FileEarmarkMusicIcon height={ICON_HEIGHT} width={"auto"} color={"secondary"}/>
62+
return <FileEarmarkMusicIcon {...ICON_PREFERENCES}/>
63+
case ".crypt" :
64+
return <FileEarmarkLock2Icon {...ICON_PREFERENCES}/>
65+
case ".pdf" :
66+
return <FileEarmarkPDFIcon {...ICON_PREFERENCES}/>
67+
case ".zip" :
68+
case ".7z" :
69+
return <FileEarmarkZipIcon {...ICON_PREFERENCES}/>
70+
case ".ts" :
71+
case ".tsx" :
72+
case ".js" :
73+
case ".jsx" :
74+
case ".java" :
75+
return <FileEarmarkCodeIcon {...ICON_PREFERENCES}/>
5576
case ".md" :
5677
case ".html" :
57-
return <FileEarmarkRichtextIcon height={ICON_HEIGHT} width={"auto"} color={"secondary"}/>
78+
return <FileEarmarkRichtextIcon {...ICON_PREFERENCES}/>
5879
default :
59-
return <FileEarmarkIcon height={ICON_HEIGHT} width={"auto"} color={"secondary"}/>
80+
return <FileEarmarkIcon {...ICON_PREFERENCES}/>
6081
}
6182
}
6283

‎webapp_frontend/src/elements/svg/SymbolFile.tsx‎

Lines changed: 80 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -93,8 +93,8 @@ export function FileEarmarkRichtextIcon(props: React.SVGProps<SVGSVGElement>) {
9393
<svg
9494
fill="currentColor"
9595
viewBox="0 0 16 16"
96-
height="1em"
97-
width="1em"
96+
height={props.height}
97+
width={props.width}
9898
{...props}
9999
>
100100
<path d="M4 0h5.5v1H4a1 1 0 00-1 1v12a1 1 0 001 1h8a1 1 0 001-1V4.5h1V14a2 2 0 01-2 2H4a2 2 0 01-2-2V2a2 2 0 012-2z" />
@@ -107,6 +107,84 @@ export function FileEarmarkRichtextIcon(props: React.SVGProps<SVGSVGElement>) {
107107
);
108108
}
109109

110+
export function FileEarmarkLock2Icon(props: React.SVGProps<SVGSVGElement>) {
111+
return (
112+
<svg
113+
fill="currentColor"
114+
viewBox="0 0 16 16"
115+
height={props.height}
116+
width={props.width}
117+
{...props}
118+
>
119+
<path
120+
fillRule="evenodd"
121+
d="M8 6a1 1 0 00-1 1v1h2V7a1 1 0 00-1-1zm2 2.076V7a2 2 0 10-4 0v1.076c-.54.166-1 .597-1 1.224v2.4c0 .816.781 1.3 1.5 1.3h3c.719 0 1.5-.484 1.5-1.3V9.3c0-.627-.46-1.058-1-1.224z"
122+
/>
123+
<path d="M4 0h5.5v1H4a1 1 0 00-1 1v12a1 1 0 001 1h8a1 1 0 001-1V4.5h1V14a2 2 0 01-2 2H4a2 2 0 01-2-2V2a2 2 0 012-2z" />
124+
<path d="M9.5 3V0L14 4.5h-3A1.5 1.5 0 019.5 3z" />
125+
</svg>
126+
);
127+
}
128+
129+
export function FileEarmarkZipIcon(props: React.SVGProps<SVGSVGElement>) {
130+
return (
131+
<svg
132+
fill="currentColor"
133+
viewBox="0 0 16 16"
134+
height={props.height}
135+
width={props.width}
136+
{...props}
137+
>
138+
<path d="M4 0h5.5v1H4a1 1 0 00-1 1v12a1 1 0 001 1h8a1 1 0 001-1V4.5h1V14a2 2 0 01-2 2H4a2 2 0 01-2-2V2a2 2 0 012-2z" />
139+
<path d="M9.5 3V0L14 4.5h-3A1.5 1.5 0 019.5 3z" />
140+
<path
141+
fillRule="evenodd"
142+
d="M5 7.5a1 1 0 011-1h1a1 1 0 011 1v.938l.4 1.599a1 1 0 01-.416 1.074l-.93.62a1 1 0 01-1.11 0l-.929-.62a1 1 0 01-.415-1.074L5 8.438V7.5zm2 0H6v.938a1 1 0 01-.03.243l-.4 1.598.93.62.929-.62-.4-1.598A1 1 0 017 8.438V7.5z"
143+
/>
144+
<path d="M6 1h1.5v1H6zM5 2h1.5v1H5zm1 1h1.5v1H6zM5 4h1.5v1H5zm1 1h1.5v1H6V5z" />
145+
</svg>
146+
);
147+
}
148+
149+
export function FileEarmarkCodeIcon(props: React.SVGProps<SVGSVGElement>) {
150+
return (
151+
<svg
152+
fill="currentColor"
153+
viewBox="0 0 16 16"
154+
height={props.height}
155+
width={props.width}
156+
{...props}
157+
>
158+
<path d="M4 0h5.5v1H4a1 1 0 00-1 1v12a1 1 0 001 1h8a1 1 0 001-1V4.5h1V14a2 2 0 01-2 2H4a2 2 0 01-2-2V2a2 2 0 012-2z" />
159+
<path d="M9.5 3V0L14 4.5h-3A1.5 1.5 0 019.5 3z" />
160+
<path
161+
fillRule="evenodd"
162+
d="M8.646 6.646a.5.5 0 01.708 0l2 2a.5.5 0 010 .708l-2 2a.5.5 0 01-.708-.708L10.293 9 8.646 7.354a.5.5 0 010-.708zm-1.292 0a.5.5 0 00-.708 0l-2 2a.5.5 0 000 .708l2 2a.5.5 0 00.708-.708L5.707 9l1.647-1.646a.5.5 0 000-.708z"
163+
/>
164+
</svg>
165+
);
166+
}
167+
168+
export function FileEarmarkPDFIcon(props: React.SVGProps<SVGSVGElement>) {
169+
return (
170+
<svg
171+
fill="currentColor"
172+
viewBox="0 0 16 16"
173+
height={props.height}
174+
width={props.width}
175+
{...props}
176+
>
177+
<path d="M4 0h5.5v1H4a1 1 0 00-1 1v12a1 1 0 001 1h8a1 1 0 001-1V4.5h1V14a2 2 0 01-2 2H4a2 2 0 01-2-2V2a2 2 0 012-2z" />
178+
<path d="M9.5 3V0L14 4.5h-3A1.5 1.5 0 019.5 3z" />
179+
<path
180+
fillRule="evenodd"
181+
d="M7 5a.5.5 0 01.5.5v.634l.549-.317a.5.5 0 11.5.866L8 7l.549.317a.5.5 0 11-.5.866L7.5 7.866V8.5a.5.5 0 01-1 0v-.634l-.549.317a.5.5 0 11-.5-.866L6 7l-.549-.317a.5.5 0 01.5-.866l.549.317V5.5A.5.5 0 017 5zm-2 5.5a.5.5 0 01.5-.5h5a.5.5 0 010 1h-5a.5.5 0 01-.5-.5zm0 2a.5.5 0 01.5-.5h5a.5.5 0 010 1h-5a.5.5 0 01-.5-.5z"
182+
/>
183+
</svg>
184+
);
185+
}
186+
187+
110188
//--------------------------------------------------------------------\\
111189
//--------------------------------------------------------------------\\
112190
//--------------------------------------------------------------------\\

0 commit comments

Comments
 (0)