Skip to content

Commit 1238d0f

Browse files
rupnil-codesrupnil-codes
committed
(v0.1.5.3-alpha) Explorer Tabs!
Added a "visual tab" system to the explorer by the request of melon! Its static but i would like to add actual functionality after my first ship.
1 parent 67eb74e commit 1238d0f

File tree

4 files changed

+139
-23
lines changed

4 files changed

+139
-23
lines changed

‎src/apps/explorer.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,8 @@ function Explorer() {
4848
</div>
4949
<div className="explorer-content">
5050
<div className="explorer-sidebar">
51-
<div className={"explorer-sidebar-container"}>
52-
<div className={"explorer-sidebar-icon-container sidebar-home-icon"}>
51+
<div className={"explorer-sidebar-container explorer-sidebar-selected"}>
52+
<div className={"explorer-sidebar-icon-container sidebar-home-icon "}>
5353
<p className={"explorer-sidebar-text"}>Home</p>
5454
</div>
5555
</div>

‎src/core/WindowManager.jsx‎

Lines changed: 55 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import {useEffect, useState} from "react";
22
import { Rnd } from "react-rnd";
33
import "../styles/core/WindowManager.css"
4-
import { X, Square, Copy, Minus } from 'lucide-react';
4+
import {X, Square, Copy, Minus, Plus} from 'lucide-react';
55

66
export default function AppWindow({
77
title,
@@ -111,19 +111,37 @@ export default function AppWindow({
111111
: opening
112112
? "translateY(200%)"
113113
: "translateY(0)",
114-
borderRadius: fullscreen ? 0 : 10,
114+
borderRadius: fullscreen ? 0 : 8,
115115
}}
116116
>
117-
<div
118-
className="titlebar"
119-
style={{
120-
borderRadius: fullscreen ? 0 : "10px 10px 0 0",
117+
{ title === "Explorer" ?
118+
<div
119+
className="titlebar"
120+
style={{
121+
borderRadius: fullscreen ? 0 : "8px 8px 0 0",
121122
}}
122123
>
123-
<div className="title">
124-
<img className={"icon"} src={ imgSrc } alt={"icon"}/>
125-
<span>{title}</span>
124+
<div className={"title-tabs"}>
125+
<div className="title-explorer">
126+
<div style={{
127+
display: "flex",
128+
flexDirection: "row",
129+
alignItems: "center",
130+
justifyContent: "center",
131+
gap: "0.75rem",
132+
}}>
133+
<img className={"icon"} src={ imgSrc } alt={"icon"}/>
134+
<span>{title}</span>
135+
</div>
136+
<div className={"x-plorer-container"}>
137+
< X className={"x-plorer"} size={14} />
138+
</div>
139+
</div>
140+
<div className={"add-tabs"}>
141+
<Plus size={14}></Plus>
142+
</div>
126143
</div>
144+
127145
<div className={"controls"}>
128146
<button className={"control-item minimize"} onClick={onMinimize}>
129147
<Minus size={15}/>
@@ -133,13 +151,39 @@ export default function AppWindow({
133151
</button>
134152
<button
135153
style={{
136-
borderRadius: fullscreen ? 0 : "0 9px 0 0",
154+
borderRadius: fullscreen ? 0 : "0 7px 0 0",
137155
}}
138156
className={"control-item close"} onClick={onClose}>
139157
<X size={15}/>
140158
</button>
141159
</div>
142-
</div>
160+
</div> :
161+
<div
162+
className="titlebar"
163+
style={{
164+
borderRadius: fullscreen ? 0 : "8px 8px 0 0",
165+
}}
166+
>
167+
<div className="title">
168+
<img className={"icon"} src={ imgSrc } alt={"icon"}/>
169+
<span>{title}</span>
170+
</div>
171+
<div className={"controls"}>
172+
<button className={"control-item minimize"} onClick={onMinimize}>
173+
<Minus size={15}/>
174+
</button>
175+
<button className={"control-item fullscreen"} onClick={onFullscreen}>
176+
{fullscreen ? <Copy size={12} style={{transform: "scaleX(-1)"}}/> : <Square size={11}/>}
177+
</button>
178+
<button
179+
style={{
180+
borderRadius: fullscreen ? 0 : "0 7px 0 0",
181+
}}
182+
className={"control-item close"} onClick={onClose}>
183+
<X size={15}/>
184+
</button>
185+
</div>
186+
</div> }
143187

144188
< AppComponent />
145189
</div>

‎src/styles/apps/explorer.css‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,13 @@
1717
align-items: center;
1818
justify-content: center;
1919

20-
border-top: var(--border) 1px solid;
20+
/*border-top: var(--border) 1px solid;*/
2121
border-bottom: var(--border) 1px solid;
2222
}
2323

2424
.explorer-navigation-bar {
2525
width: calc(100% - 2rem);
26-
height: 3.5rem;
26+
height: 3rem;
2727

2828
display: flex;
2929
flex-direction: row;
@@ -74,7 +74,7 @@
7474
border: 0;
7575
outline: none;
7676
width: 100%;
77-
height: 1rem;
77+
height: 0.75rem;
7878
padding: 0.5rem 0.75rem;
7979
font-size: 0.9rem;
8080
font-weight: 450;
@@ -137,7 +137,7 @@
137137

138138

139139
padding: 0.4rem;
140-
width: calc(100% - 1.5rem);
140+
width: calc(100% - 1.25rem);
141141

142142
border-radius: 0.2rem;
143143

@@ -158,6 +158,15 @@
158158
align-items: center;
159159
height: 1rem;
160160
}
161+
.explorer-sidebar-selected {
162+
background-color: var(--border);
163+
transition: all var(--hover-animation) var(--hover-animation-type);
164+
}
165+
.explorer-sidebar-selected:hover {
166+
background-color: rgba(255, 255, 255, 0.2);;
167+
border: 1px solid rgba(255, 255, 255, 0.6);
168+
}
169+
161170
.sidebar-home-icon {
162171
background-image: url("../../assets/icons/Home.ico");
163172
}
@@ -204,7 +213,7 @@
204213
gap: 0.75rem;
205214

206215
height: 1px;
207-
width: 80%;
216+
width: 85%;
208217
background-color: var(--border);
209218

210219
margin-top: 0.75rem;

‎src/styles/core/WindowManager.css‎

Lines changed: 68 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,74 @@
2626

2727
}
2828

29+
.title-tabs {
30+
height: 100%;
31+
width: 100%;
32+
33+
display: flex;
34+
flex-direction: row;
35+
align-items: center;
36+
}
37+
.title-explorer {
38+
height: 100%;
39+
width: 16rem;
40+
41+
max-width: 30%;
42+
43+
background-color: #0e0e0e;
44+
/*padding-right: 12%;*/
45+
padding-left: 1rem;
46+
47+
margin-top: 0.5rem;
48+
49+
display: flex;
50+
flex-direction: row;
51+
align-items: center;
52+
justify-content: space-between;
53+
54+
margin-left: 0.5rem;
55+
gap: 0.75rem;
56+
57+
border-radius: 0.5rem 0.5rem 0 0;
58+
}
59+
.title-explorer span {
60+
font-size: 13px;
61+
}
62+
.x-plorer-container {
63+
display: flex;
64+
flex-direction: row;
65+
align-items: center;
66+
justify-content: center;
67+
68+
padding: 0.3rem 0.5rem 0.3rem 0.5rem;
69+
margin-right: 0.4rem;
70+
71+
border-radius: 0.25rem;
72+
73+
transition: background-color var(--hover-animation) var(--hover-animation-type);
74+
}
75+
.x-plorer-container:hover {
76+
background-color: var(--border);
77+
}
78+
.add-tabs {
79+
margin-top: 0.3rem;
80+
margin-left: 0.4rem;
81+
/*height: 100%;*/
82+
83+
display: flex;
84+
flex-direction: column;
85+
align-items: center;
86+
justify-content: center;
87+
88+
padding: 0.3rem 0.5rem 0.3rem 0.5rem;
89+
90+
border-radius: 0.25rem;
91+
transition: background-color var(--hover-animation) var(--hover-animation-type);
92+
}
93+
.add-tabs:hover {
94+
background-color: var(--border);
95+
}
96+
2997
.icon {
3098
height: 1rem;
3199
width: 1rem;
@@ -60,9 +128,4 @@
60128

61129
.window-obj {
62130
border-radius: 0 0 10px 10px;
63-
}
64-
65-
.app-component {
66-
height: 100%;
67-
overflow: hidden;
68131
}

0 commit comments

Comments
 (0)