progress is shown on the client side · btargac/excel-parser-processor@fed687c · GitHub
Skip to content

Commit fed687c

Browse files
author
Burak Targaç
committed
progress is shown on the client side
1 parent 9fa2a1a commit fed687c

5 files changed

Lines changed: 278 additions & 8 deletions

File tree

‎src/dialogs.js‎

Lines changed: 1 addition & 1 deletion

‎src/index.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,5 +39,12 @@ <h1 class="app__title">
3939
<input id="files" name="files[]" type="file" />
4040
</div>
4141
</div>
42+
<div class="progress">
43+
<b class="progress__bar">
44+
<span class="progress__text">
45+
Progress: <em>0%</em>
46+
</span>
47+
</b>
48+
</div>
4249
</body>
4350
</html>

‎src/renderer.js‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,3 +61,71 @@ const handleFileSelect = (event) => {
6161
};
6262

6363
filesInput.addEventListener('change', handleFileSelect);
64+
65+
const $progress = $(".progress"),
66+
$bar = $(".progress__bar"),
67+
$text = $(".progress__text"),
68+
orange = 30,
69+
yellow = 55,
70+
green = 85;
71+
72+
const resetColors = () => {
73+
74+
$bar.removeClass("progress__bar--green")
75+
.removeClass("progress__bar--yellow")
76+
.removeClass("progress__bar--orange")
77+
.removeClass("progress__bar--blue");
78+
79+
$progress.removeClass("progress--complete");
80+
81+
};
82+
83+
const update = (percent) => {
84+
85+
percent = parseFloat( percent.toFixed(1) );
86+
87+
$text.find("em").text( percent + "%" );
88+
89+
if( percent >= 100 ) {
90+
91+
percent = 100;
92+
$progress.addClass("progress--complete");
93+
$bar.addClass("progress__bar--blue");
94+
$text.find("em").text( "Complete" );
95+
96+
} else {
97+
98+
if( percent >= green ) {
99+
$bar.addClass("progress__bar--green");
100+
}
101+
102+
else if( percent >= yellow ) {
103+
$bar.addClass("progress__bar--yellow");
104+
}
105+
106+
else if( percent >= orange ) {
107+
$bar.addClass("progress__bar--orange");
108+
}
109+
110+
}
111+
112+
$bar.css({ width: percent + "%" });
113+
114+
};
115+
116+
const processStartHandler = () => {
117+
$progress.addClass("progress--active");
118+
$('.wrapper').hide();
119+
};
120+
121+
const progressHandler = (event, percentage) => update(percentage);
122+
123+
const processCompletedHandler = () => {
124+
resetColors();
125+
update(0);
126+
$('.wrapper').show();
127+
};
128+
129+
ipcRenderer.once('process-started', processStartHandler);
130+
ipcRenderer.once('process-completed', processCompletedHandler);
131+
ipcRenderer.on('progress', progressHandler);

‎src/styles/index.scss‎

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -136,3 +136,193 @@ html {
136136
font-style: italic;
137137
}
138138
}
139+
140+
$red: #c90414;
141+
$blue: #1287cc;
142+
$green: #00b217;
143+
$yellow: #e89e00;
144+
$orange: #c92f00;
145+
146+
@mixin innerColor( $color: #0db6e0 ) {
147+
background-color: transparentize( $color , 0.05 );
148+
background-image:
149+
linear-gradient(
150+
90deg,
151+
transparentize( lighten( $color, 5% ), 1 ) 10%,
152+
transparentize( lighten( $color, 10% ), 0.2 ) 30%,
153+
transparentize( lighten( $color, 15% ), 0 ) 70%,
154+
transparentize( lighten( $color, 10% ), 0.2 ) 80%,
155+
transparentize( lighten( $color, 5% ), 1 ) 90%
156+
),
157+
linear-gradient(
158+
to right,
159+
transparentize( lighten( $color, 15% ), 1 ) 0%,
160+
transparentize( lighten( $color, 15% ), 0 ) 100%
161+
),
162+
linear-gradient(
163+
to left,
164+
transparentize( lighten( $color, 15% ), 1 ) 0%,
165+
transparentize( lighten( $color, 15% ), 0 ) 100%
166+
);
167+
168+
border-color: lighten( $color, 20% );
169+
170+
box-shadow:
171+
0 0 0.6em lighten( $color, 10% ) inset,
172+
0 0 0.4em lighten( $color, 5% ) inset,
173+
0 0 0.5em transparentize( $color, 0.5),
174+
0 0 0.1em transparentize( lighten( $color, 50% ), 0.5);
175+
176+
}
177+
178+
.progress {
179+
font-size: 1.2em;
180+
height: 20px;
181+
182+
background: rgba(255,255,255,0.05);
183+
border-radius: 2px;
184+
border: 1px solid rgba(255,255,255,0.2);
185+
186+
&--active .progress__bar {
187+
opacity: 1;
188+
}
189+
190+
&__text {
191+
width: 20em;
192+
padding: 0 0.9em;
193+
position: absolute;
194+
195+
em {
196+
font-style: normal;
197+
}
198+
199+
}
200+
201+
&__bar {
202+
color: white;
203+
font-size: 12px;
204+
font-weight: normal;
205+
text-shadow: 0 1px 1px rgba(0,0,0,0.6);
206+
line-height: 19px;
207+
208+
display: block;
209+
position: relative;
210+
top: -1px;
211+
left: -1px;
212+
213+
width: 0;
214+
height: 100%;
215+
opacity: 0;
216+
217+
border: 1px solid;
218+
border-radius: 2px 0 0 2px;
219+
220+
background-size: 100px 30px, 130px 30px, 130px 30px;
221+
background-position: -20% center, right center, left center;
222+
background-repeat: no-repeat, no-repeat, no-repeat;
223+
224+
transition:
225+
opacity 0.2s ease,
226+
width 0.8s ease-out,
227+
background-color 1s ease,
228+
border-color 0.3s ease,
229+
box-shadow 1s ease;
230+
231+
animation: pulse 2s ease-out infinite;
232+
233+
@include innerColor($red);
234+
235+
&--orange {
236+
237+
@include innerColor($orange);
238+
239+
}
240+
241+
&--yellow {
242+
243+
@include innerColor($yellow);
244+
245+
}
246+
247+
&--green {
248+
249+
@include innerColor($green);
250+
251+
}
252+
253+
&--blue {
254+
255+
@include innerColor($blue);
256+
257+
}
258+
259+
&:before,
260+
&:after {
261+
content: "";
262+
position: absolute;
263+
264+
right: -1px;
265+
top: -10px;
266+
267+
width: 1px;
268+
height: 40px;
269+
270+
}
271+
272+
&:before {
273+
width: 7px;
274+
right: -4px;
275+
background:
276+
radial-gradient(
277+
ellipse at center,
278+
rgba(255,255,255,0.4) 0%,
279+
rgba(255,255,255,0) 75%
280+
);
281+
282+
}
283+
284+
&:after {
285+
background:
286+
linear-gradient(
287+
to bottom,
288+
rgba(255,255,255,0) 0%,
289+
rgba(255,255,255,0.3) 25%,
290+
rgba(255,255,255,0.3) 75%,
291+
rgba(255,255,255,0) 100%
292+
);
293+
294+
}
295+
296+
}
297+
298+
&--complete {
299+
300+
.progress__bar {
301+
302+
animation: none;
303+
border-radius: 2px;
304+
305+
&:after,
306+
&:before {
307+
308+
opacity: 0;
309+
310+
}
311+
312+
}
313+
314+
}
315+
316+
}
317+
318+
@keyframes pulse {
319+
320+
0% {
321+
background-position: -50% center, right center, left center;
322+
}
323+
324+
100% {
325+
background-position: 150% center, right center, left center;
326+
}
327+
328+
}

‎src/utils/processItems.js‎

Lines changed: 12 additions & 7 deletions

0 commit comments

Comments
 (0)