|
35 | 35 | padding: 5px; |
36 | 36 | } |
37 | 37 |
|
38 | | - .minimize-btn { |
| 38 | + .window-btn { |
39 | 39 | position: relative; |
40 | | - display: block; |
| 40 | + display: inline-block; |
41 | 41 | width: 30px; |
42 | 42 | height: 30px; |
43 | 43 | border-radius: 50%; |
|
46 | 46 | cursor: pointer; |
47 | 47 | } |
48 | 48 |
|
49 | | - .minimize-btn::after { |
| 49 | + .window-btn__minimize::after { |
50 | 50 | content: ""; |
51 | 51 | display: block; |
52 | 52 | position: absolute; |
53 | 53 | width: 12px; |
54 | 54 | height: 1px; |
55 | | - background-color: var(--btnMinimizeAfterBg, #9b9a9a); |
| 55 | + background-color: var(--btnWindowAfterBg, #9b9a9a); |
56 | 56 | bottom: 9px; |
57 | 57 | left: calc((30px - 12px) / 2); |
58 | 58 | } |
59 | 59 |
|
60 | | - .minimize-btn:hover, |
61 | | - .minimize-btn:active, |
62 | | - .minimize-btn:focus { |
63 | | - background-color: var(--btnMinimizeHoverBg, #9b9a9a); |
| 60 | + .window-btn__close::before, .window-btn__close::after { |
| 61 | + content: ""; |
| 62 | + display: block; |
| 63 | + position: absolute; |
| 64 | + width: 17px; /* sqrt(12^2 + 12^2) where 12px width */ |
| 65 | + height: 1px; |
| 66 | + background-color: var(--btnWindowAfterBg, #9b9a9a); |
| 67 | + bottom: calc((11px / 2) + 9px); |
| 68 | + left: calc((30px - 17px) / 2); |
| 69 | + } |
| 70 | + |
| 71 | + .window-btn__close::before { |
| 72 | + transform: rotate(45deg); |
| 73 | + } |
| 74 | + |
| 75 | + .window-btn__close::after { |
| 76 | + transform: rotate(-45deg); |
| 77 | + } |
| 78 | + |
| 79 | + .window-btn:hover, |
| 80 | + .window-btn:active, |
| 81 | + .window-btn:focus { |
| 82 | + background-color: var(--btnWindowHoverBg, #9b9a9a); |
| 83 | + } |
| 84 | + |
| 85 | + .window-btn--disabled { |
| 86 | + display: none; |
64 | 87 | } |
65 | 88 |
|
66 | 89 | .lds-roller { |
|
236 | 259 |
|
237 | 260 | <body class="body"> |
238 | 261 | <div class="win-control-btn"> |
239 | | - <div id="minBtn" class="minimize-btn"></div> |
| 262 | + <div id="minBtn" class="window-btn window-btn__minimize window-btn--disabled"></div> |
| 263 | + <div id="closeBtn" class="window-btn window-btn__close window-btn--disabled"></div> |
240 | 264 | </div> |
241 | 265 | <div class="lds-roller"> |
242 | 266 | <div></div> |
|
259 | 283 | const rollers = document.getElementsByClassName('lds-roller') |
260 | 284 | const descriptionElem = document.getElementById('description') |
261 | 285 | const minBtnElem = document.getElementById('minBtn') |
| 286 | + const closeBtnElem = document.getElementById('closeBtn') |
262 | 287 |
|
263 | 288 | minBtnElem.onclick = async () => { |
264 | 289 | try { |
265 | | - await window.bfxReportElectronApi?.hideLoadingWindow() |
| 290 | + await window.bfxReportElectronApi?.minimizeLoadingWindow() |
| 291 | + } catch (err) { |
| 292 | + console.error(err) |
| 293 | + } |
| 294 | + } |
| 295 | + closeBtnElem.onclick = async () => { |
| 296 | + try { |
| 297 | + await window.bfxReportElectronApi?.closeLoadingWindow() |
266 | 298 | } catch (err) { |
267 | 299 | console.error(err) |
268 | 300 | } |
|
274 | 306 | } |
275 | 307 | }, 2500) |
276 | 308 |
|
| 309 | + window.bfxReportElectronApi?.onLoadingBtnStates((args) => { |
| 310 | + try { |
| 311 | + if (args?.shouldMinimizeBtnBeShown) { |
| 312 | + minBtnElem.classList.remove('window-btn--disabled') |
| 313 | + } else { |
| 314 | + minBtnElem.classList.add('window-btn--disabled') |
| 315 | + } |
| 316 | + if (args?.shouldCloseBtnBeShown) { |
| 317 | + closeBtnElem.classList.remove('window-btn--disabled') |
| 318 | + } else { |
| 319 | + closeBtnElem.classList.add('window-btn--disabled') |
| 320 | + } |
| 321 | + } catch (err) { |
| 322 | + console.debug(err) |
| 323 | + } |
| 324 | + }) |
277 | 325 | window.bfxReportElectronApi?.onLoadingDescription((args) => { |
278 | 326 | try { |
279 | 327 | if (typeof args?.description !== 'string') { |
|
0 commit comments