Skirda/SkirdaElectronLauncher
4
0
Fork 0
Code Issues Pull Requests Projects Releases 2 Wiki Activity

Integrating new overlay mechanics with login view.

Browse Source 
Removed login.ejs-specific overlay. Removed blur transition and reduced overlay fade from 500ms to 250ms. Minor modification to the overlay css.
This commit is contained in:
Daniel Scalzi 2018-04-07 13:29:40 -04:00
parent 5335e0124b
commit 9b63d9bb58
No known key found for this signature in database
GPG Key ID: 5CA2F145B63535F9
5 changed files with 41 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/app.ejs
View File

@ -13,8 +13,6 @@
#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);

74
app/assets/css/launcher.css
View File

@ -706,78 +706,6 @@ p {
transform: rotate(45deg);
}
/* * *
* Login View | Error Overlay
* * */
#loginErrorContainer {
position: absolute;
display: none;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.50);
}
/*#loginContainer[error] > #loginErrorContainer {
display: flex;
}*/
#loginContainer[error] > div:not(#loginErrorContainer) {
filter: blur(3px) contrast(0.9) brightness(1.0);
}
#loginErrorContent {
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;
}
#loginErrorTitle {
font-family: 'Avenir Medium';
font-size: 20px;
color: #fff;
font-weight: bold;
letter-spacing: 1px;
}
#loginErrorDesc {
font-family: 'Avenir Book';
font-size: 12px;
color: #fff;
font-weight: bold;
}
#loginErrorAcknowledge {
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;
}
#loginErrorAcknowledge:hover,
#loginErrorAcknowledge:focus {
box-shadow: 0px 0px 10px 0px #fff;
outline: none;
}
#loginErrorAcknowledge:active {
border-color: rgba(255, 255, 255, 0.75);
color: rgba(255, 255, 255, 0.75);
}
/* * *
* Login View | Loader
* * */
@ -1313,7 +1241,7 @@ p {
font-family: 'Avenir Medium';
font-weight: bold;
border-radius: 2px;
width: 75px;
padding: 0px 8.1px;
cursor: pointer;
transition: 0.25s ease;
}

33
app/assets/js/actionbinder.js
View File

@ -102,10 +102,39 @@ function toggleOverlay(toggleState){
}
if(toggleState){
document.getElementById('main').setAttribute('overlay', true)
$('#overlayContainer').fadeToggle(500)
$('#overlayContainer').fadeToggle(250)
} else {
document.getElementById('main').removeAttribute('overlay')
$('#overlayContainer').fadeToggle(500)
$('#overlayContainer').fadeToggle(250)
}
}
/**
* Set the content of the overlay.
*
* @param {string} title Overlay title text.
* @param {string} description Overlay description text.
* @param {string} acknowledge Acknowledge button text.
*/
function setOverlayContent(title, description, acknowledge){
document.getElementById('overlayTitle').innerHTML = title
document.getElementById('overlayDesc').innerHTML = description
document.getElementById('overlayAcknowledge').innerHTML = acknowledge
}
/**
* Set the onclick handler of the overlay acknowledge button.
* If the handler is null, a default handler will be added.
*
* @param {function} handler
*/
function setOverlayHandler(handler){
if(handler == null){
document.getElementById('overlayAcknowledge').onclick = () => {
toggleOverlay(false)
}
} else {
document.getElementById('overlayAcknowledge').onclick = handler
}
}

23
app/login.ejs
View File

@ -55,13 +55,6 @@
</div>
</div>
</div>
<div id="loginErrorContainer">
<div id="loginErrorContent">
<span id="loginErrorTitle">LOGIN FAILED:<br>INVALID CREDENTIALS</span>
<span id="loginErrorDesc">Either the email or password you supplied is invalid. Please ensure everything is correct and try again.</span>
<button id="loginErrorAcknowledge">Try Again</button>
</div>
</div>
<script type="application/javascript">
//const validEmail = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i
@ -231,11 +224,13 @@
console.log(value)
}).catch((err) => {
loginLoading(false)
$('#loginErrorContainer').css('display', 'flex').hide().fadeIn(250)
loginContainer.setAttribute('error', true)
const errF = resolveError(err)
loginErrorTitle.innerHTML = errF.title
loginErrorDesc.innerHTML = errF.desc
setOverlayContent(errF.title, errF.desc, 'Try Again')
setOverlayHandler(() => {
formDisabled(false)
toggleOverlay(false)
})
toggleOverlay(true)
console.log(err)
})
@ -247,12 +242,6 @@
}, 2500)
})
loginErrorAcknowledge.addEventListener('click', () => {
formDisabled(false)
loginContainer.removeAttribute('error', false)
$('#loginErrorContainer').fadeOut(250)
})
</script>
<!-- Will reuse this down the line, then it will be removed from this file. -->
<!--<div id="loginLoading">

6
app/overlay.ejs
View File

@ -1,7 +1,7 @@
<div id="overlayContainer" style="display: none;">
<div id="overlayContent">
<span id="overlayTitle">LOGIN FAILED:<br>INVALID CREDENTIALS</span>
<span id="overlayDesc">Either the email or password you supplied is invalid. Please ensure everything is correct and try again.</span>
<button id="overlayAcknowledge">Try Again</button>
<span id="overlayTitle">Lorem Ipsum:<br>Finis Illud</span>
<span id="overlayDesc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud..</span>
<button id="overlayAcknowledge">Conare Iterum</button>
</div>
</div>