From 5335e0124be04c43c77f6837d0e388fd031cdb84 Mon Sep 17 00:00:00 2001 From: Daniel Scalzi Date: Fri, 6 Apr 2018 12:33:20 -0400 Subject: [PATCH] Further work on overlay mechanism. --- app/app.ejs | 2 ++ app/assets/css/launcher.css | 67 +++++++++++++++++++++++++++++++++++ app/assets/js/actionbinder.js | 46 ++++++++++++++++++++++++ app/overlay.ejs | 63 -------------------------------- index.js | 5 +++ 5 files changed, 120 insertions(+), 63 deletions(-) diff --git a/app/app.ejs b/app/app.ejs index 16ce7e4a..35c71fb4 100644 --- a/app/app.ejs +++ b/app/app.ejs @@ -13,6 +13,8 @@ #main { height: calc(100% - 22px); background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%); + will-change: filter; + transition: filter 0.5s ease; } #main[overlay] { filter: blur(3px) contrast(0.9) brightness(1.0); diff --git a/app/assets/css/launcher.css b/app/assets/css/launcher.css index 8a4d6a27..04e99dc3 100644 --- a/app/assets/css/launcher.css +++ b/app/assets/css/launcher.css @@ -1258,4 +1258,71 @@ p { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; +} + +/******************************************************************************* + * * + * Overlay View (app.ejs) * + * * + ******************************************************************************/ + +#overlayContainer { + position: absolute; + top: 22px; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: calc(100% - 22px); + background: rgba(0, 0, 0, 0.50); +} + +#overlayContent { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + width: 300px; + height: 35%; + box-sizing: border-box; + padding: 15px 0px; + /* background-color: #424242; */ + text-align: center; +} + +#overlayTitle { + font-family: 'Avenir Medium'; + font-size: 20px; + color: #fff; + font-weight: bold; + letter-spacing: 1px; +} + +#overlayDesc { + font-family: 'Avenir Book'; + font-size: 12px; + color: #fff; + font-weight: bold; +} + +#overlayAcknowledge { + background: none; + border: 1px solid #ffffff; + color: white; + font-family: 'Avenir Medium'; + font-weight: bold; + border-radius: 2px; + width: 75px; + cursor: pointer; + transition: 0.25s ease; +} +#overlayAcknowledge:hover, +#overlayAcknowledge:focus { + box-shadow: 0px 0px 10px 0px #fff; + outline: none; +} +#overlayAcknowledge:active { + border-color: rgba(255, 255, 255, 0.75); + color: rgba(255, 255, 255, 0.75); } \ No newline at end of file diff --git a/app/assets/js/actionbinder.js b/app/assets/js/actionbinder.js index ace4ff57..9e422f50 100644 --- a/app/assets/js/actionbinder.js +++ b/app/assets/js/actionbinder.js @@ -89,8 +89,33 @@ document.addEventListener('readystatechange', function(){ } }, false) +/* Overlay Wrapper Functions */ + +/** + * Toggle the visibility of the overlay. + * + * @param {boolean} toggleState True to display, false to hide. + */ +function toggleOverlay(toggleState){ + if(toggleState == null){ + toggleState = !document.getElementById('main').hasAttribute('overlay') + } + if(toggleState){ + document.getElementById('main').setAttribute('overlay', true) + $('#overlayContainer').fadeToggle(500) + } else { + document.getElementById('main').removeAttribute('overlay') + $('#overlayContainer').fadeToggle(500) + } +} + /* Launch Progress Wrapper Functions */ +/** + * Show/hide the loading area. + * + * @param {boolean} loading True if the loading area should be shown, otherwise false. + */ function toggleLaunchArea(loading){ if(loading){ launch_details.style.display = 'flex' @@ -101,21 +126,42 @@ function toggleLaunchArea(loading){ } } +/** + * Set the details text of the loading area. + * + * @param {string} details The new text for the loading details. + */ function setLaunchDetails(details){ launch_details_text.innerHTML = details } +/** + * Set the value of the loading progress bar and display that value. + * + * @param {number} value The progress value. + * @param {number} max The total size. + * @param {number|string} percent Optional. The percentage to display on the progress label. + */ function setLaunchPercentage(value, max, percent = ((value/max)*100)){ launch_progress.setAttribute('max', max) launch_progress.setAttribute('value', value) launch_progress_label.innerHTML = percent + '%' } +/** + * Set the value of the OS progress bar and display that on the UI. + * + * @param {number} value The progress value. + * @param {number} max The total download size. + * @param {number|string} percent Optional. The percentage to display on the progress label. + */ function setDownloadPercentage(value, max, percent = ((value/max)*100)){ remote.getCurrentWindow().setProgressBar(value/max) setLaunchPercentage(value, max, percent) } +/* System (Java) Scan */ + let sysAEx let scanAt diff --git a/app/overlay.ejs b/app/overlay.ejs index 89b2fd09..b9e26eb6 100644 --- a/app/overlay.ejs +++ b/app/overlay.ejs @@ -1,66 +1,3 @@ -