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

Commit b3de8fa

Browse files
GimleuxGimleux
committed
Added File Icons
1 parent 93dfae5 commit b3de8fa

File tree

6 files changed

+374
-27
lines changed

6 files changed

+374
-27
lines changed

‎webapp_frontend/src/background/api/filesystem.tsx‎ renamed to ‎webapp_frontend/src/background/api/filesystem.ts‎

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,210 @@ const exampleValue = (path: string): BackendFolderContentsData => {
4444
},
4545
"size": 0,
4646
"type": "file"
47+
},
48+
{
49+
"createdByUserId": 1,
50+
"id": 0,
51+
"lastUpdated": 1607177368 ,
52+
"name": "text.txt",
53+
"permissionSet": {
54+
"editableForGroups": [
55+
"ADMIN"
56+
],
57+
"editableForUsers": [
58+
{
59+
"groups": [
60+
"ADMIN"
61+
],
62+
"id": 0,
63+
"username": "string"
64+
}
65+
],
66+
"visibleForGroups": [
67+
"ADMIN"
68+
],
69+
"visibleForUsers": [
70+
{
71+
"groups": [
72+
"ADMIN"
73+
],
74+
"id": 0,
75+
"username": "string"
76+
}
77+
]
78+
},
79+
"size": 1332,
80+
"type": "file"
81+
},
82+
{
83+
"createdByUserId": 2,
84+
"id": 0,
85+
"lastUpdated": 1607147368 ,
86+
"name": "sound.mp3",
87+
"permissionSet": {
88+
"editableForGroups": [
89+
"ADMIN"
90+
],
91+
"editableForUsers": [
92+
{
93+
"groups": [
94+
"ADMIN"
95+
],
96+
"id": 0,
97+
"username": "string"
98+
}
99+
],
100+
"visibleForGroups": [
101+
"ADMIN"
102+
],
103+
"visibleForUsers": [
104+
{
105+
"groups": [
106+
"ADMIN"
107+
],
108+
"id": 0,
109+
"username": "string"
110+
}
111+
]
112+
},
113+
"size": 2756,
114+
"type": "file"
115+
},
116+
{
117+
"createdByUserId": 1,
118+
"id": 0,
119+
"lastUpdated": 1607047368 ,
120+
"name": "movie.mp4",
121+
"permissionSet": {
122+
"editableForGroups": [
123+
"ADMIN"
124+
],
125+
"editableForUsers": [
126+
{
127+
"groups": [
128+
"ADMIN"
129+
],
130+
"id": 0,
131+
"username": "string"
132+
}
133+
],
134+
"visibleForGroups": [
135+
"ADMIN"
136+
],
137+
"visibleForUsers": [
138+
{
139+
"groups": [
140+
"ADMIN"
141+
],
142+
"id": 0,
143+
"username": "string"
144+
}
145+
]
146+
},
147+
"size": 22486,
148+
"type": "file"
149+
},
150+
{
151+
"createdByUserId": 2,
152+
"id": 0,
153+
"lastUpdated": 1607149968 ,
154+
"name": "image.jpg",
155+
"permissionSet": {
156+
"editableForGroups": [
157+
"ADMIN"
158+
],
159+
"editableForUsers": [
160+
{
161+
"groups": [
162+
"ADMIN"
163+
],
164+
"id": 0,
165+
"username": "string"
166+
}
167+
],
168+
"visibleForGroups": [
169+
"ADMIN"
170+
],
171+
"visibleForUsers": [
172+
{
173+
"groups": [
174+
"ADMIN"
175+
],
176+
"id": 0,
177+
"username": "string"
178+
}
179+
]
180+
},
181+
"size": 486,
182+
"type": "file"
183+
},
184+
{
185+
"createdByUserId": 1313,
186+
"id": 0,
187+
"lastUpdated": 1607132468 ,
188+
"name": "importantFile.md",
189+
"permissionSet": {
190+
"editableForGroups": [
191+
"ADMIN"
192+
],
193+
"editableForUsers": [
194+
{
195+
"groups": [
196+
"ADMIN"
197+
],
198+
"id": 0,
199+
"username": "string"
200+
}
201+
],
202+
"visibleForGroups": [
203+
"ADMIN"
204+
],
205+
"visibleForUsers": [
206+
{
207+
"groups": [
208+
"ADMIN"
209+
],
210+
"id": 0,
211+
"username": "string"
212+
}
213+
]
214+
},
215+
"size": 96,
216+
"type": "file"
217+
},
218+
{
219+
"createdByUserId": 2,
220+
"id": 0,
221+
"lastUpdated": 1607149968 ,
222+
"name": "likeMe.html",
223+
"permissionSet": {
224+
"editableForGroups": [
225+
"ADMIN"
226+
],
227+
"editableForUsers": [
228+
{
229+
"groups": [
230+
"ADMIN"
231+
],
232+
"id": 0,
233+
"username": "string"
234+
}
235+
],
236+
"visibleForGroups": [
237+
"ADMIN"
238+
],
239+
"visibleForUsers": [
240+
{
241+
"groups": [
242+
"ADMIN"
243+
],
244+
"id": 0,
245+
"username": "string"
246+
}
247+
]
248+
},
249+
"size": 86,
250+
"type": "file"
47251
}
48252
],
49253
"folders": [{

‎webapp_frontend/src/background/api/filesystemTypes.tsx‎ renamed to ‎webapp_frontend/src/background/api/filesystemTypes.ts‎

File renamed without changes.

‎webapp_frontend/src/components/pages/Health.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import {Button, Table, Container} from "react-bootstrap";
44
import {callBackendHealth} from "../../background/api/api";
55
import {audioOnOff, setAudioVolumeByID} from "../../background/methods/sound"
66
import {logout} from "../../background/api/auth";
7-
import {SymbolFileExcel} from "../../elements/svg/SymbolFile";
87

98
export default function Health() {
109

@@ -37,7 +36,6 @@ export default function Health() {
3736

3837
return (
3938
<Container>
40-
<SymbolFileExcel height={"100"} width={"100"}/>
4139
<h1>
4240
FileFighter
4341
</h1>
@@ -53,7 +51,6 @@ export default function Health() {
5351

5452

5553
<div>
56-
{/*<Button className={"mt-3 mb-2 float-right"} onClick={() => updateVariables()}>Refresh</Button>*/}
5754
<Table striped bordered hover>
5855
<thead>
5956
<tr>

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,9 +47,11 @@ export default function FileList(props: Props): ReactElement {
4747
<Col xs={1}> <Form.Group controlId="formBasicCheckbox">
4848
<Form.Check type="checkbox" onChange={() => console.log(`selected all files` /*TODO*/)}/>
4949
</Form.Group></Col>
50-
<Col xs={2}>{}</Col>
50+
<Col xs={1}>{"Type"}</Col>
51+
<Col xs={1}>{}</Col>
52+
<Col xs={1}>{"Share"}</Col>
5153
<Col xs={3}>{"Name"}</Col>
52-
<Col xs={4}>{"Owner"}</Col>
54+
<Col xs={3}>{"Owner"}</Col>
5355
<Col xs={1}>{"Last changes"}</Col>
5456
<Col xs={1}>{"Size"}</Col>
5557
</Row>

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

Lines changed: 38 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,13 @@ import {PermissionSet} from "../../../background/api/filesystemTypes";
22
import React, {ReactElement} from "react";
33
import {Col, Form} from "react-bootstrap";
44
import {Link} from "react-router-dom";
5+
import {
6+
FileEarmarkIcon,
7+
FileEarmarkImageIcon, FileEarmarkMusicIcon, FileEarmarkPlayIcon, FileEarmarkRichtextIcon,
8+
FileEarmarkTextIcon,
9+
FolderIcon
10+
} from "../../../elements/svg/SymbolFile";
11+
import {reverseString} from "../../../background/methods/strings";
512

613
type Props = {
714
fileListItem: FileListEntity;
@@ -25,6 +32,31 @@ export interface FileListEntity {
2532

2633
export default function FileListItem(props: Props): ReactElement {
2734

35+
const ICON_HEIGHT = "40px";
36+
37+
const rightFileIcon = (type: string, name: string): ReactElement => {
38+
if (type.toLowerCase() === "folder") return <FolderIcon height={ICON_HEIGHT} width={"auto"}
39+
color={"secondary"}/>
40+
let positionOfPoint = reverseString(name).indexOf(".");
41+
if (positionOfPoint < 0) return <FileEarmarkIcon height={ICON_HEIGHT} width={"auto"} color={"secondary"}/>
42+
43+
const fileExtension = reverseString(reverseString(name).substr(0, positionOfPoint + 1));
44+
switch (fileExtension) {
45+
case ".txt" :
46+
return <FileEarmarkTextIcon height={ICON_HEIGHT} width={"auto"} color={"secondary"}/>
47+
case ".jpg" :
48+
return <FileEarmarkImageIcon height={ICON_HEIGHT} width={"auto"} color={"secondary"}/>
49+
case ".mp4" :
50+
return <FileEarmarkPlayIcon height={ICON_HEIGHT} width={"auto"} color={"secondary"}/>
51+
case ".mp3" :
52+
return <FileEarmarkMusicIcon height={ICON_HEIGHT} width={"auto"} color={"secondary"}/>
53+
case ".md" :
54+
case ".html" : return <FileEarmarkRichtextIcon height={ICON_HEIGHT} width={"auto"} color={"secondary"}/>
55+
default :
56+
return <FileEarmarkIcon height={ICON_HEIGHT} width={"auto"} color={"secondary"}/>
57+
}
58+
}
59+
2860
const onClick = () => {
2961
if (props.fileListItem.isFolder && props.setPath && props.fileListItem.path) {
3062
props.setPath(props.fileListItem.path)
@@ -38,9 +70,12 @@ export default function FileListItem(props: Props): ReactElement {
3870
<Col xs={1}> <Form.Group controlId="formBasicCheckbox">
3971
<Form.Check type="checkbox" onChange={() => console.log(`[files] selected ${props.fileListItem.id}`)}/>
4072
</Form.Group></Col>
41-
<Col xs={2}>{props.fileListItem.type}</Col>
42-
<Col xs={3}><Link to={`/file${props.fileListItem.path ?? ""}`} onClick={() => onClick()}>{props.fileListItem.name}</Link></Col>
43-
<Col xs={4}>{props.fileListItem.createdByUserId}</Col>
73+
<Col xs={1}>{props.fileListItem.type}</Col>
74+
<Col xs={1}>{rightFileIcon(props.fileListItem.type, props.fileListItem.name)}</Col>
75+
<Col xs={1}>...</Col>
76+
<Col xs={3}><Link to={`/file${props.fileListItem.path ?? ""}`}
77+
onClick={() => onClick()}>{props.fileListItem.name}</Link></Col>
78+
<Col xs={3}>{props.fileListItem.createdByUserId}</Col>
4479
<Col xs={1}>{props.fileListItem.lastUpdated}</Col>
4580
<Col xs={1}>{props.fileListItem.size}</Col>
4681
</>

0 commit comments

Comments
 (0)