Skip to content

Commit 0cc7519

Browse files
NickeldonNickeldon
committed
UI ameliorations
1 parent 4246dc8 commit 0cc7519

5 files changed

Lines changed: 112 additions & 25 deletions

File tree

‎UI/Addons/error.png‎

13.4 KB
Loading

‎UI/Addons/success.png‎

2.68 KB
Loading

‎UI/handler.js‎

Lines changed: 59 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,15 @@ function colormode(){
2020
document.getElementById('sec-notif').style.color = 'white'
2121
document.querySelector('.security-notification input').style.color = 'white'
2222
document.querySelector('.security-notification input').style.backgroundColor = 'black'
23-
document.querySelector('.security-notification input').style.borderColor = 'white'
23+
document.querySelector('.security-notification input').style.borderColor = 'white';
24+
document.getElementById('sub-select1').style.backgroundColor = 'black'
25+
document.getElementById('sub-select1').style.borderColor = 'white'
26+
document.getElementById('sel-txt').style.color = 'white';
27+
//console.log(document.querySelector('.multiselect-wrapper').style)
28+
//document.querySelector('.multiselect-wrapper').style.borderColor = 'white'
29+
//document.querySelector('.multiselect-wrapper').style.backgroundColor = 'black'
30+
//console.log(document.querySelector('.multiselect-wrapper').style)
31+
document.getElementById('top-bar').classList.add('invert')
2432
} else{
2533
document.getElementById('filter').style.opacity = '5%'
2634
document.getElementById('menu1').style.backgroundColor = 'white'
@@ -36,7 +44,8 @@ function colormode(){
3644
document.getElementsByClassName('choice-rec')[i].style.backgroundColor = 'white'
3745
}
3846
document.getElementsByClassName('gg-dark-mode')[0].style.backgroundColor = null
39-
document.getElementById('sec-notif').style.color = 'black'
47+
document.getElementById('sec-notif').style.color = 'black';
48+
document.getElementById('top-bar').classList.remove('invert')
4049
}
4150
}
4251

@@ -65,7 +74,18 @@ function handler(value){
6574
case 404: {
6675
console.log('path was not valid')
6776
document.getElementsByClassName('btn-select')[0].children[0].innerHTML = 'No Folder selected'
68-
document.getElementById('path-ph').innerHTML = null
77+
document.getElementById('path-ph').innerHTML = null;
78+
79+
document.getElementById('notification').style.display = 'block';
80+
document.getElementById('err-path').style.display = 'block';
81+
document.getElementById('notification').style.opacity = '100%';
82+
setTimeout(() => {
83+
document.getElementById('notification').style.opacity = '0%';
84+
setTimeout(() => {
85+
document.getElementById('err-path').style.display = 'none';
86+
document.getElementById('notification').style.display = 'none';
87+
}, 1000)
88+
}, 3000)
6989
}break;
7090
case 205: {
7191
console.log('path was valid')
@@ -87,11 +107,7 @@ function handler(value){
87107
}break;
88108
}
89109
})
90-
.then(message => {
91-
console.log(message);
92-
// Handle the response as needed
93-
})
94-
.catch(error => console.error('Error:', error));
110+
.catch(error => {console.error('Error:', error); error()});
95111
}
96112
}
97113

@@ -120,15 +136,13 @@ function Multidirres(){
120136
}break;
121137

122138
case 201: {
123-
console.log('TASK COMPLETED')
139+
success()
124140
}break;
125141
}
126142
})
127-
.then((mes) => {
128-
console.log(mes)
129-
})
130143
.catch((e) => {
131-
console.log(e)
144+
console.log(e);
145+
error()
132146
})
133147
}
134148

@@ -139,10 +153,39 @@ function recursivech(choice){
139153
'Content-Type': 'application/json',
140154
}
141155
}).then((res) => {
142-
console.log(res)
143-
}).then((mes) => {
144-
156+
if(res.status === 200){
157+
success()
158+
} else{
159+
error()
160+
}
145161
}).catch((e) => {
146162
console.log(e)
163+
error()
147164
})
165+
}
166+
167+
function error(){
168+
document.getElementById('notification').style.display = 'block';
169+
document.getElementById('error').style.display = 'block';
170+
document.getElementById('notification').style.opacity = '100%';
171+
setTimeout(() => {
172+
document.getElementById('notification').style.opacity = '0%';
173+
setTimeout(() => {
174+
document.getElementById('notification').style.display = 'none';
175+
document.getElementById('error').style.display = 'none';
176+
}, 1000)
177+
}, 3000)
178+
}
179+
180+
function success(){
181+
document.getElementById('notification').style.display = 'block';
182+
document.getElementById('success').style.display = 'block';
183+
document.getElementById('notification').style.opacity = '100%';
184+
setTimeout(() => {
185+
document.getElementById('notification').style.opacity = '0%';
186+
setTimeout(() => {
187+
document.getElementById('notification').style.display = 'none';
188+
document.getElementById('success').style.display = 'none';
189+
}, 1000)
190+
}, 3000)
148191
}

‎UI/index.html‎

Lines changed: 52 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,21 +13,21 @@
1313
<link rel="stylesheet" href="./Addons/Multiselector/styles/multiselect.css">
1414
<link href='./Addons/light-dark-mode.css' rel='stylesheet'>
1515
</head>
16-
<body style="background-color:transparent; width: 1024px; height: 576px; overflow: hidden; border-radius: 10px;">
16+
<body style="background-color:transparent; width: 1024px; height: 576px; overflow: hidden; border-radius: 10px; transition: all .5s ease-out;">
1717

1818
<div class="main" id="main" style="width: 1024px; height: 576px; position: relative;">
1919
<div style="position: absolute; width: 100%; height: 100%; border-radius: 10px;">
20-
<object data="./Addons/bg.html" type="text/html" style="width: 1024px; height: 576px; border-radius: 10px;"></object>
20+
<object data="./Addons/bg.html" type="text/html" style="width: 1024px; height: 576px; border-radius: 10px; background-color: transparent;"></object>
2121
</div>
2222

23-
<div class="filter" id="filter" style="background-color: black; opacity: 5%; width: 100%; height: 100%; position: absolute;"></div>
23+
<div class="filter" id="filter" style="background-color: black; opacity: 5%; width: 100%; height: 100%; position: absolute; border-radius: 10px;"></div>
2424

25-
<div class="top-bar" style="height: 60px; width: 100%; position:absolute; top: 0;">
26-
<a style="position:absolute; top: 30px; right: 60px; height: 20px; opacity: 70%;" class="top-btn-app" id="close-app" onclick="setTimeout(() => {window.close()}, 400)">
27-
<img src="./Addons/close.png" style="height: 100%;">
25+
<div class="top-bar" id="top-bar" style="height: 60px; width: 100%; position:absolute; top: 0; background-color: transparent; transition: all 1s ease-out;">
26+
<a style="position:absolute; top: 30px; right: 60px; height: 20px; opacity: 70%;" class="top-btn-app" id="close-app" onclick="document.querySelector('body').style.opacity = '0%' ;setTimeout(() => {window.close()}, 700)">
27+
<img src="./Addons/close.png" style="height: 100%; transition: all 1s ease-out;">
2828
</a>
2929
<a style="position:absolute; top: 30px; right: 100px; height: 20px; opacity: 70%;" class="top-btn-app" id="hide-app" onclick="window.minimize()">
30-
<img src="./Addons/minimize.png" style="height: 100%;">
30+
<img src="./Addons/minimize.png" style="height: 100%; transition: all 1s ease-out;">
3131
</a>
3232
</div>
3333
<div style="width: 100%; height: 50px; position: absolute; top: 85px; left: 50px;">
@@ -75,7 +75,7 @@ <h3 style="text-align: center; margin-top: 60px;">
7575
<option value="">Current</option>
7676
</select>
7777
<div style="position: relative; width: 100%; height: 20px;" class="cont-btn">
78-
<a style="text-align: center; text-decoration: none; position: absolute; left: 43%;" onclick="Multidirres()">- CONTINUE -</a>
78+
<a style="text-align: center; text-decoration: none; position: absolute; left: 43%;" onclick="Multidirres()" id="sel-txt">- CONTINUE -</a>
7979
</div>
8080
</div>
8181
</div>
@@ -90,6 +90,24 @@ <h3 style="text-align: center; margin-top: 60px;">
9090
<a onclick="recursivech(false)" id="choice-rec" class="choice-rec"><span>No</span></a>
9191
</div>
9292
</div>
93+
94+
<div class="notification" id="notification" style="display: none;">
95+
96+
<span id="success" style="position: absolute; top: 25px; left: 100px; display:none;">
97+
<img src="./Addons/success.png" style="height: 40px; position:absolute; top: -13px; left: -50px" id="icn-cor">
98+
success
99+
</span>
100+
101+
<span id="error" style="position: absolute; top: 25px; left: 60px; display:none;" >
102+
<img src="./Addons/error.png" style="height: 30px; position:absolute; top: -5px; left: -35px;" id="icn-err">
103+
Something went wrong
104+
</span>
105+
106+
<span id="err-path" style="position: absolute; top: 25px; left: 80px; display:none;" >
107+
<img src="./Addons/error.png" style="height: 30px; position:absolute; top: -5px; left: -40px;" id="icn-err">
108+
Unvalid directory
109+
</span>
110+
</div>
93111

94112
</div>
95113

@@ -99,6 +117,32 @@ <h3 style="text-align: center; margin-top: 60px;">
99117

100118
<style>
101119

120+
.invert { filter: invert(100%); }
121+
122+
.notification{
123+
height: 70px;
124+
width: 250px;
125+
background-color: rgb(26, 23, 23);
126+
border-radius: 10px;
127+
border-width: 2px;
128+
border-style: solid;
129+
animation: notif 2s;
130+
position: absolute;
131+
bottom: 0;
132+
right: 0;
133+
display: block;
134+
transition: all 1s ease-out;
135+
}
136+
137+
@keyframes notif {
138+
from{
139+
right: -250px;
140+
}
141+
to{
142+
right: 0px;
143+
}
144+
}
145+
102146
.top-bar{
103147
-webkit-app-region: drag;
104148
user-select: none;

‎UI/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,5 +24,5 @@
2424
"electron": "^28.2.0",
2525
"cors": "^2.8.5",
2626
"express": "^4.18.2"
27-
},
27+
}
2828
}

0 commit comments

Comments
 (0)