Skip to content

Commit 37ffc51

Browse files
rupnil-codesrupnil-codes
committed
(v0.1.5.1-alpha) System Tray + Explorer
Sooooo i started work on the explorer app, and almosst completed the system tray. The font seems a but off if u guys know the font in use pls do let me know :)
1 parent 95ae764 commit 37ffc51

File tree

12 files changed

+273
-75
lines changed

12 files changed

+273
-75
lines changed

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,5 @@ Your PC has been compromised by a group called the "HackClub". Can you regain co
2626
- [X] BUG (Issue #3): Clicking on the windows icon when the start menu is active causes a jittering effect and doesn't close it. (Fixed in v0.1.4.6)
2727
- [X] OPTIMIZATION: Have ONLY App.js with all the necessary variables so that we do not need to manually add apps to each part. (Done in v0.1.4.5)
2828
- [X] OPTIMIZATION: (TruthEntity) thinks it is better to use React component than Iframes, as they are quite a memory hogger and a can degrade performance. (Done in v0.1.4.5)
29+
- [-] Make the system tray on the taskbar(right) more accurate to windows. (Partially Done in v0.1.5.1 The text doesn't match rn)
30+
- [-] Explorer App. (Started in v0.1.5.1)

‎src/App.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ function App() {
1212
<>
1313
<div className="app">
1414
<Routes>
15-
<Route path="/" Component={LockScreen}/>
16-
<Route path="/desktop" Component={Desktop}/>
15+
<Route path="/desktop" Component={LockScreen}/>
16+
<Route path="/" Component={Desktop}/>
1717
</Routes>
1818
</div>
1919
</>

‎src/apps/explorer.jsx‎

Lines changed: 46 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,55 @@
11
import "../styles/apps/explorer.css"
22

3+
import {
4+
MoveLeft,
5+
MoveRight,
6+
MoveUp,
7+
RotateCw,
8+
House,
9+
ChevronRight,
10+
Search,
11+
12+
} from "lucide-react"
13+
314
function Explorer() {
415

516
return (
617
<>
7-
<p>Explorer</p>
18+
<div className="explorer">
19+
<div className="explorer-navigation">
20+
<div className="explorer-navigation-bar">
21+
<div className={"explorer-navigation-icons"}>
22+
<MoveLeft size={18} strokeWidth={1.5} />
23+
<MoveRight size={18} strokeWidth={1.5} />
24+
<MoveUp size={18} strokeWidth={1.5} />
25+
<RotateCw size={18} strokeWidth={1.5} />
26+
</div>
27+
<div className={"explorer-navigation-search"}>
28+
<div className={"explorer-dir"}>
29+
<House size={18} strokeWidth={1.5} />
30+
<ChevronRight size={18} strokeWidth={1.5} />
31+
<p>Home</p>
32+
<ChevronRight size={18} strokeWidth={1.5} />
33+
</div>
34+
<input
35+
className={"explorer-dir explorer-search"}
36+
placeholder={"Search"}
37+
/>
38+
</div>
39+
</div>
40+
</div>
41+
<div className="explorer-content">
42+
<div className="explorer-sidebar">
43+
<p>Sidebar</p>
44+
</div>
45+
<div className="explorer-main">
46+
<p>Main files bruv</p>
47+
</div>
48+
<div className="explorer-details">
49+
<p>Details</p>
50+
</div>
51+
</div>
52+
</div>
853
</>
954
)
1055
}

‎src/assets/icons/search.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/components/SystemTray.jsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import "../styles/components/SystemTray.css"
2+
3+
import {useDateTime} from "./DateTime.jsx";
4+
import { Wifi, Volume2, Bell, ChevronUp } from 'lucide-react';
5+
6+
function SystemTray() {
7+
8+
const { timeString, dateString } = useDateTime();
9+
10+
return (
11+
<div className="tray">
12+
<div className="wifisound tray-container">
13+
<div className="tray-item"><ChevronUp size={17} /></div>
14+
</div>
15+
<div className="language tray-container">
16+
<div className="system-language-container">
17+
<p>ENG</p>
18+
<p>US</p>
19+
</div>
20+
</div>
21+
<div className="wifisound tray-container">
22+
<div className="tray-item"><Wifi size={17} /></div>
23+
<div className="tray-item"><Volume2 size={17} /></div>
24+
</div>
25+
<div className="datetime tray-container">
26+
<div className="system-datetime-container">
27+
<p>{timeString}</p>
28+
<p>{dateString}</p>
29+
</div>
30+
<Bell className="notif" size={17} />
31+
</div>
32+
</div>
33+
);
34+
}
35+
36+
export default SystemTray;

‎src/core/WindowManager.jsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -95,8 +95,8 @@ export default function AppWindow({
9595
pointerEvents: minimized ? "none" : "auto",
9696
}
9797
}
98-
minWidth={300}
99-
minHeight={200}
98+
minWidth={450}
99+
minHeight={300}
100100

101101
maxHeight={window.innerHeight - TASKBAR_HEIGHT}
102102
maxWidth={window.innerWidth}
@@ -141,7 +141,9 @@ export default function AppWindow({
141141
</div>
142142
</div>
143143

144-
< AppComponent />
144+
<div className={"app-component"}>
145+
< AppComponent />
146+
</div>
145147
</div>
146148
</Rnd>
147149
);

‎src/routes/desktop.jsx‎

Lines changed: 6 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
import '../styles/routes/desktop.css';
22

3-
import { Wifi, Volume2, Bell, Search } from 'lucide-react';
3+
import { Search } from 'lucide-react';
44
import {createRef, useRef, useState, useMemo, useEffect} from "react";
55

66
import { APP_REGISTRY, INITIAL_Z, getNextZ } from "../data/Apps.js";
77
import AppWindow from "../core/WindowManager.jsx";
8-
import { useDateTime } from "../components/DateTime.jsx";
98

109
import Draggable from 'react-draggable';
1110
import { motion, AnimatePresence } from "framer-motion";
1211

12+
import SystemTray from "../components/SystemTray.jsx";
13+
1314
function Desktop() {
1415
const [isStartMenuActive, setIsStartMenuActive] = useState(false);
1516

@@ -187,8 +188,6 @@ function Desktop() {
187188
}));
188189
}
189190

190-
const { timeString, dateString } = useDateTime();
191-
192191
return (
193192
<div className="desktop" onMouseDown={() => {
194193
setSelectedIcon(null);
@@ -306,17 +305,9 @@ function Desktop() {
306305
))}
307306
</AnimatePresence>
308307
</div>
309-
<div className="tray">
310-
<div className="wifisound tray-container">
311-
<div className="tray-item"><Wifi size={18} /></div>
312-
<div className="tray-item"><Volume2 size={18} /></div>
313-
</div>
314-
<div className="datetime tray-container">
315-
<p>{timeString}</p>
316-
<p>{dateString}</p>
317-
</div>
318-
<Bell className="notif tray-item tray-container" size={18} />
319-
</div>
308+
309+
< SystemTray />
310+
320311
</div>
321312
</div>
322313
);

‎src/styles/apps/explorer.css‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
2+
.explorer-navigation {
3+
display: flex;
4+
flex-direction: column;
5+
align-items: center;
6+
justify-content: center;
7+
}
8+
9+
.explorer-navigation {
10+
display: flex;
11+
flex-direction: column;
12+
align-items: center;
13+
justify-content: center;
14+
15+
border-top: var(--border) 1px solid;
16+
border-bottom: var(--border) 1px solid;
17+
}
18+
19+
.explorer-navigation-bar {
20+
width: calc(100% - 2rem);
21+
height: 3.5rem;
22+
23+
display: flex;
24+
flex-direction: row;
25+
align-items: center;
26+
justify-content: space-between;
27+
28+
gap: 1.5rem;
29+
}
30+
31+
.explorer-navigation-icons {
32+
display: flex;
33+
flex-direction: row;
34+
align-items: center;
35+
justify-content: center;
36+
gap: 1.5rem;
37+
}
38+
39+
.explorer-navigation-search {
40+
width: 100%;
41+
42+
display: flex;
43+
flex-direction: row;
44+
align-items: center;
45+
justify-content: center;
46+
47+
gap: 0.5rem;
48+
}
49+
.explorer-dir {
50+
display: flex;
51+
flex-direction: row;
52+
align-items: center;
53+
54+
margin: 1rem 0;
55+
border: 0;
56+
outline: none;
57+
width: 100%;
58+
height: 1rem;
59+
padding: 0.5rem 0.75rem;
60+
font-size: 0.9rem;
61+
font-weight: 450;
62+
63+
background: var(--input);
64+
border-radius: 0.3rem;
65+
border-bottom: transparent 0.2rem solid;
66+
67+
gap: 0.75rem;
68+
}
69+
.explorer-dir::placeholder {
70+
font-weight: 400;
71+
}
72+
.explorer-search {
73+
background-image: url("../../assets/icons/search.svg");
74+
background-repeat: no-repeat;
75+
background-position: right;
76+
background-origin: content-box;
77+
78+
padding-right: 1rem;
79+
80+
width: 35%;
81+
}
82+
.explorer-search:focus{
83+
border-bottom: var(--blue) 0.2rem solid;
84+
}
85+
86+
87+
.explorer-content {
88+
display: flex;
89+
flex-direction: row;
90+
align-items: center;
91+
justify-content: space-between;
92+
93+
margin: 1rem ;
94+
}

‎src/styles/components/SystemTray.css‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
.tray{
2+
z-index: var(--z-taskbar);
3+
position: absolute;
4+
bottom: 0.05rem;
5+
right: 0;
6+
7+
display: flex;
8+
flex-direction: row;
9+
align-items: center;
10+
justify-content: center;
11+
padding-right: 0.75rem;
12+
13+
gap: 0;
14+
}
15+
16+
.wifisound {
17+
margin-top: 0.1775rem;
18+
display: flex;
19+
flex-direction: row;
20+
align-items: center;
21+
justify-content: space-between;
22+
gap: 0.5rem;
23+
padding: 0.7rem 0.5rem 0.4rem;
24+
border-radius: 0.25rem;
25+
margin-bottom: 0.2rem;
26+
}
27+
28+
.language {
29+
display: flex;
30+
flex-direction: row;
31+
align-items: center;
32+
justify-content: center;
33+
font-size: 0.72rem;
34+
padding: 0.25rem 0.5rem;
35+
border-radius: 0.25rem;
36+
}
37+
.system-language-container {
38+
display: flex;
39+
flex-direction: column;
40+
align-items: center;
41+
justify-content: center;
42+
}
43+
44+
.datetime {
45+
display: flex;
46+
flex-direction: row;
47+
align-items: center;
48+
justify-content: center;
49+
font-size: 0.72rem;
50+
padding: 0.25rem 0.5rem;
51+
border-radius: 0.25rem;
52+
}
53+
.system-datetime-container {
54+
display: flex;
55+
flex-direction: column;
56+
align-items: flex-end;
57+
justify-content: center;
58+
}
59+
.notif {
60+
padding: 0 0 0 0.6rem;
61+
}
62+
.tray-container{
63+
border-top: transparent 1px solid;
64+
transition: background-color outline var(--hover-animation) var(--hover-animation-type);
65+
}
66+
67+
.tray-container:hover {
68+
background-color: var(--border);
69+
cursor: pointer;
70+
transition: background-color var(--hover-animation) var(--hover-animation-type);
71+
border-top: rgba(255, 255, 255, 0.05) 1px solid;
72+
/*outline: rgba(14, 14, 14, 0.35) 1px solid;*/
73+
}

‎src/styles/core/WindowManager.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,4 +60,8 @@
6060

6161
.window-obj {
6262
border-radius: 0 0 10px 10px;
63+
}
64+
65+
.app-component {
66+
overflow: hidden;
6367
}

0 commit comments

Comments
 (0)