Skip to content

Commit d7ff8b3

Browse files
NickeldonNickeldon
committed
UI enhancement / Bug fixes (FileHistoryEnhancerUI V3.5.0)
1 parent 5f798d9 commit d7ff8b3

7 files changed

Lines changed: 132 additions & 58 deletions

File tree

‎UI/Addons/refresh.png‎

7.14 KB
Loading

‎UI/Dropzone.js‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
var path;
22
var count = 0
3-
4-
3+
var action = "addedfiles"
54
const myDropzone = new Dropzone("#drop-zone", {
65
maxFiles: 39999,
76
url: "http://localhost:8000/returnrequest",
@@ -11,16 +10,18 @@ const myDropzone = new Dropzone("#drop-zone", {
1110
});
1211

1312
myDropzone.on("addedfiles", (dir) => {
14-
13+
if(count > 1) return null
1514
path = dir[0].path
1615
document.querySelector('.dropzone h4').style.color = 'transparent'
1716
document.querySelector('.dropzone h5').style.color = 'transparent'
18-
// Add an info line about the added file for each file.
19-
console.log(dir)
17+
setTimeout(() => {
18+
document.getElementById('droptxt').style.display = 'none'
19+
}, 1000)
2020
});
2121

2222
myDropzone.on("complete", () => {
2323
count++
2424
if(count === 1){
25-
handler(path)}
25+
handler(path)
26+
}
2627
})

‎UI/handler.js‎

Lines changed: 18 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
//document.getElementById('sec-notif').style.transform = 'scale(0)'
2+
document.getElementById('menu1').classList.add('fade')
3+
document.getElementById('refresh-btn').classList.add('fade')
4+
document.getElementById('warn-multichoice').classList.add('fade')
5+
document.getElementById('warn-recursive').classList.add('fade')
6+
//document.getElementById('refresh').classList.remove('fade')
27

38
try {
4-
console.log(localStorage.getItem("colormode"))
59
colormode(localStorage.getItem("colormode"))
610
} catch (e) {colormode("light")}
711

@@ -27,17 +31,12 @@ function colormode(pref){
2731
document.getElementById('warn-multichoice').style.color = 'white'
2832
document.getElementById('warn-recursive').style.color = 'white'
2933
document.getElementById('warn-multichoice').classList.add('scrl-bar-drk-mode')
30-
//document.getElementById('btn-select').style.color = 'white'
34+
3135
for(i = 0; i < document.getElementsByClassName('choice-rec').length; i++){
3236
document.getElementsByClassName('choice-rec')[i].style.color = 'white'
33-
document.getElementsByClassName('choice-rec')[i].style.backgroundColor = 'black'
3437
}
3538
document.getElementsByClassName('gg-dark-mode')[0].style.backgroundColor = 'black'
36-
//document.getElementById('sec-notif').style.color = 'white'
37-
//document.querySelector('.security-notification input').style.color = 'white'
38-
//document.querySelector('.security-notification input').style.backgroundColor = 'black'
39-
//document.querySelector('.security-notification input').style.borderColor = 'white';
40-
document.getElementById('sub-select1').style.backgroundColor = 'black'
39+
document.getElementById('sub-select1').style.backgroundColor = 'black'
4140
document.getElementById('sub-select1').style.borderColor = 'white'
4241
document.getElementById('sel-txt').style.color = 'white';
4342
try {
@@ -96,7 +95,6 @@ function colormode(pref){
9695
//document.querySelector('.dz-details').style.backgroundColor = 'black'
9796
for(i = 0; i < document.getElementsByClassName('choice-rec').length; i++){
9897
document.getElementsByClassName('choice-rec')[i].style.color = 'black'
99-
document.getElementsByClassName('choice-rec')[i].style.backgroundColor = 'white'
10098
}
10199
document.getElementsByClassName('gg-dark-mode')[0].style.backgroundColor = null
102100
//document.getElementById('sec-notif').style.color = 'black';
@@ -147,11 +145,6 @@ function handler(value){
147145
.then(response => {
148146
switch(response.status){
149147
case 220: {
150-
console.log('path was not valid')
151-
//document.getElementsByClassName('btn-select')[0].children[0].innerHTML = 'No Folder selected'
152-
//document.getElementById('path-ph').innerHTML = null;
153-
//document.getElementById('sec-notif').style.transform = 'scale(0)'
154-
//document.getElementById('sec-notif').style.visibility = 'hidden'
155148
document.getElementById('notification').style.display = 'block';
156149
document.getElementById('err-path').style.display = 'block';
157150
document.getElementById('notification').style.opacity = '100%';
@@ -165,26 +158,26 @@ function handler(value){
165158
}, 2000)
166159
}break;
167160
case 205: {
168-
console.log('path was valid')
169161
success()
170162
setTimeout(() => {
171-
document.querySelector('body').classList.add('blur')
163+
document.getElementById('main').classList.add('blur')
172164
setTimeout(() => {
173-
window.location.reload()
165+
document.getElementById('refresh').style.display = 'block'
166+
document.getElementById('refresh').classList.remove('fade')
174167
}, 600)
175168
}, 500)
176169
}break;
177170
case 201: {
178171
$.getJSON('http://localhost:8000/request', (data) => {
179172
const folders = JSON.parse(data.message)
180-
console.log(folders)
181173
folders.forEach((str) => {
182174
var strchoice = document.createElement('option')
183175
strchoice.text = str
184176
strchoice.value = str
185177
document.getElementById('Multidirselect').add(strchoice)
186178
})
187179
document.multiselect('#Multidirselect');
180+
colormode(localStorage.getItem("colormode"))
188181
document.getElementById('menu1').style.display = 'none'
189182
document.getElementById('warn-multichoice').style.display = 'block'
190183
})
@@ -202,29 +195,26 @@ function Multidirres(){
202195
choices.push(document.querySelector('.Multidirselect').children[i].value)
203196
}
204197
}
205-
console.log(choices)
206198
fetch(`http://localhost:8000/multichoice?METADATA=${JSON.stringify({"data": choices})}`, {
207199
method: 'GET',
208200
headers: {
209201
'Content-Type': 'application/json',
210202
}
211203
})
212-
.then((res) => {
213-
console.log(res)
214-
204+
.then((res) => {
215205
switch(res.status){
216206
case 205: {
217-
console.log('PATH IS RECURSVE')
218207
document.getElementById('warn-multichoice').style.display = 'none'
219208
document.getElementById('warn-recursive').style.display = 'block'
220209
}break;
221210

222211
case 201: {
223212
success()
224213
setTimeout(() => {
225-
document.querySelector('body').classList.add('blur')
214+
document.getElementById('main').classList.add('blur')
226215
setTimeout(() => {
227-
window.location.reload()
216+
document.getElementById('refresh').style.display = 'block'
217+
document.getElementById('refresh').classList.remove('fade')
228218
}, 600)
229219
}, 500)
230220

@@ -247,9 +237,10 @@ function recursivech(choice){
247237
if(res.status === 200){
248238
success();
249239
setTimeout(() => {
250-
document.querySelector('body').classList.add('blur')
240+
document.getElementById('main').classList.add('blur')
251241
setTimeout(() => {
252-
window.location.reload()
242+
document.getElementById('refresh').style.display = 'block'
243+
document.getElementById('refresh').classList.remove('fade')
253244
}, 600)
254245
}, 500)
255246
} else{

‎UI/index.html‎

Lines changed: 102 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,12 @@
1919
</head>
2020
<body style="background-color:transparent; width: 1024px; height: 576px; overflow: hidden; border-radius: 10px; transition: all .5s ease-out;">
2121

22-
<div class="main" id="main" style="width: 1024px; height: 576px; position: relative;" hx-boost="true">
22+
<div class="main" id="main" style="width: 1024px; height: 576px; position: relative; border-width: 1px; border-radius:10px; border-color:transparent; border-style:solid; transition: all .5s ease-out;" hx-boost="true">
2323
<div style="position: absolute; width: 100%; height: 100%; border-radius: 10px;">
2424
<object data="./Addons/bg.html" type="text/html" style="width: 1024px; height: 576px; border-radius: 10px; background-color: transparent;"></object>
2525
</div>
2626

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

2929
<div class="top-bar" id="top-bar" style="height: 60px; width: 100%; position:absolute; top: 0; background-color: transparent; transition: all 1s ease-out;">
3030
<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)">
@@ -45,14 +45,17 @@ <h3 style="text-align:left; color: rgb(0, 0, 0); font-weight: 600; -webkit-text-
4545

4646
<div id="menu1" class="menu1" webkitdirectory style="background-color: white; color: black; border-radius: 10px; border-width: 3px; opacity: 70%; border-style: dashed; border-color: gray; height: 300px; width: 80%; position: absolute; display: block; bottom: 10%; left: 10%;">
4747

48-
<div class="dropzone" id="drop-zone" webkitdirectory style="width:100%; height:100%; border-radius: 10px; border-color:transparent; border-style:solid; background-color:transparent; position:absolute; top:0;">
49-
<h4 style="text-align: center; margin-top: 70px; font-size: larger; transition:all 1s ease-out; color:black;">
50-
Choose the folder you want to transform
51-
</h4>
48+
<div class="dropzone" id="drop-zone" webkitdirectory style="width:100%; overflow:hidden ;height:100%; border-radius: 10px; border-color:transparent; border-style:solid; background-color:transparent; position:absolute; top:0;">
49+
<div id="droptxt" style="position: absolute; right: 30%">
50+
<h4 style="text-align: center; margin-top: 70px; font-size: larger; transition:all 1s ease-out; color:black;">
51+
Choose the folder you want to transform
52+
</h4>
53+
54+
<h5 style="text-align: center; margin-top: 70px; font-size: 16px; transition:all 1s ease-out; color: black">
55+
No folder selected
56+
</h5>
57+
</div>
5258

53-
<h5 style="text-align: center; margin-top: 70px; font-size: 16px; transition:all 1s ease-out; color: black">
54-
No folder selected
55-
</h5>
5659
</div>
5760

5861
</div>
@@ -83,17 +86,19 @@ <h3 style="text-align: center; margin-top: 60px;">
8386
</div>
8487
</div>
8588

86-
<div class="warn-recursive" id="warn-recursive" style="background-color: white; color: black; display: none; opacity: 70%; border-radius: 10px; border-width: 3px; border-style: solid; border-color: gray; position: absolute; width: 80%; height: 300px; bottom: 10%; left: 10%; background-color: rgb(255, 255, 255);">
89+
<div class="warn-recursive" id="warn-recursive" style="color: black; display: none; opacity: 70%; border-radius: 10px; border-width: 3px; border-style: solid; border-color: gray; position: absolute; width: 80%; height: 300px; bottom: 10%; left: 10%; background-color: rgb(255, 255, 255);">
8790
<h3 style="text-align: center; margin-top: 60px;">
8891
Do you wish to enable the recursive search for the selected subfolders?
8992
</h3>
9093

9194
<div style="width: 100%; height: 50px; position: relative; margin-top: 70px; display: block;">
92-
<a onclick="recursivech(true)" id="choice-rec" class="choice-rec"><span>Yes</span></a><br><br>
93-
<a onclick="recursivech(false)" id="choice-rec" class="choice-rec"><span>No</span></a>
95+
<a onclick="recursivech(true)" id="choice-rec" class="choice-rec" style="position: absolute; top:0; left:32%"><span>Yes</span></a>
96+
<a onclick="recursivech(false)" id="choice-rec" class="choice-rec" style="position: absolute; top:0; left:62%;"><span>No</span></a>
9497
</div>
9598
</div>
9699

100+
101+
97102
<div class="notification" id="notification" style="display: none;">
98103

99104
<span id="success" style="position: absolute; top: 25px; left: 100px; display:none;">
@@ -113,15 +118,91 @@ <h3 style="text-align: center; margin-top: 60px;">
113118
</div>
114119

115120
</div>
116-
117-
121+
122+
<div class="refresh" id="refresh" style="display: none; position: absolute; background-color: transparent; width: 100%; height: 100%; transition: all 1s ease-out;">
123+
<h4 style="text-align:center; font-size: 20px; margin-top: 170px; margin-left: 0; letter-spacing: 1px;">
124+
Press to refresh
125+
</h4>
126+
<i style="position: absolute; top: 250px; left: 45%;"><img class="refresh-btn" id="refresh-btn" onclick="window.location.reload()" style="height: 100px;" src="./Addons/refresh.png"></i>
127+
</div>
118128

119129
</body>
120130

121131
<style>
122132

123-
.choice-rec span{
124-
text-align: center;
133+
html,
134+
body {
135+
margin: 0 auto;
136+
height: 100%;
137+
}
138+
139+
body {
140+
display: flex;
141+
align-items: center;
142+
font-family: monospace;
143+
justify-content: center;
144+
background-color: #1d212b;
145+
}
146+
147+
148+
.fade:after {
149+
position: absolute;
150+
content: "";
151+
top: 300px;
152+
z-index: -1;
153+
height: 10%;
154+
width: 100%;
155+
margin: 0 auto;
156+
transform: scale(0.75);
157+
-webkit-filter: blur(5vw);
158+
filter: blur(5vw);
159+
background: linear-gradient(270deg, #ff0f0f, #ffa70f);
160+
background-size: 200% 200%;
161+
animation: animateGlow 10s ease infinite;
162+
}
163+
@keyframes animateGlow {
164+
0% {
165+
background-position: 0% 50%;
166+
}
167+
50% {
168+
background-position: 100% 50%;
169+
}
170+
100% {
171+
background-position: 0% 50%;
172+
}
173+
}
174+
175+
176+
.refresh-btn{
177+
animation-fill-mode: forwards;
178+
transition: all 1s ease-out;
179+
animation: spin 4s infinite;
180+
transform-origin:center center;
181+
}
182+
183+
.refresh-btn:hover{
184+
transform: scale(1.1);
185+
cursor: pointer;
186+
187+
}
188+
189+
@keyframes spin {
190+
from{
191+
transform: rotate(0deg);
192+
}
193+
to{
194+
transform: rotate(360deg);
195+
}
196+
}
197+
198+
.choice-rec{
199+
background-color: transparent;
200+
width: fit-content;
201+
height: fit-content;
202+
span{
203+
font-weight: 600;
204+
text-align: center;
205+
}
125206
}
126207

127208
.invert { filter: invert(100%); }
@@ -171,6 +252,7 @@ <h3 style="text-align: center; margin-top: 60px;">
171252
}
172253

173254
* {
255+
user-select: none;
174256
margin: 0;
175257
padding: 0;
176258
border: 0;
@@ -253,9 +335,7 @@ <h3 style="text-align: center; margin-top: 60px;">
253335
}
254336
.warn-recursive a{
255337
text-align: center;
256-
width: 100%;
257338
height: 40px;
258-
background-color: white;
259339
color: black;
260340
position: absolute;
261341
transition: all 1s ease-out;
@@ -268,12 +348,14 @@ <h3 style="text-align: center; margin-top: 60px;">
268348
.warn-recursive a span{
269349
position: absolute;
270350
top: 25%;
351+
transition: all .7s ease-out;
271352
}
272353
.warn-recursive a:hover{
273354
cursor: pointer;
274-
background-color: rgb(165, 165, 165);
275-
padding-bottom: 10px;
276355
letter-spacing: 5px;
356+
357+
span{
358+
color: #ff0f0f;}
277359
}
278360
body{
279361
font-family:Ubuntu, sans-serif;

‎UI/node_modules/.package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎UI/package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎UI/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
{
22
"name": "fhe-ui",
3-
"version": "1.0.0",
3+
"version": "3.1.1",
44
"description": "",
55
"main": "electron.js",
66
"scripts": {
77
"test": "echo \"Error: no test specified\" && exit 1",
88
"start": "electron electron.js",
99
"package-mac": "electron-packager . --overwrite --platform=darwin --arch=x64 --prune=true --out=FileHistoryEnhancerUI-V1.6.0",
10-
"package-win": "electron-packager . --overwrite --platform=win32 --icon=Addons/icon.ico --arch=ia32 --prune=true --out=FileHistoryEnhancerUI-V1.6.0",
10+
"package-win": "electron-packager . --overwrite --platform=win32 --icon=Addons/icon.ico --arch=ia32 --prune=true --out=FileHistoryEnhancerUI-V3.1.1",
1111
"package-linux": "electron-packager . --overwrite --platform=linux --icon=Addons/icon.png --arch=x64 --prune=true --out=FileHistoryEnhancerUI-V1.6.0"
1212
},
1313
"repository": {

0 commit comments

Comments
 (0)