V2.0.5 (#31)

eromatiya · web-flow · commit bbc63b681ec4 · 2020-09-23T11:16:39.000+08:00
* add qtile icon

* add login screen and fade transition
diff --git a/assets/sessions/qtile.png b/assets/sessions/qtile.png
diff --git a/css/screens.css b/css/screens.css
@@ -130,3 +130,18 @@
 	text-align: center;
 	color: var(--global-fg);
 }
+
+#screen-dark {
+	background-color: #000000;
+	opacity: 0;
+	pointer-events: none;
+	z-index: 25;
+	transition:
+						opacity var(--global-animation-speed),
+						pointer-events var(--global-animation-speed);
+}
+
+#screen-dark.screen-dark-show {
+	opacity: 1;
+	pointer-events: unset;
+}
diff --git a/index.html b/index.html
@@ -8,6 +8,7 @@
 </head>
 <body>
 	<div class='body-background background'></div>
+	<div class='screen' id='screen-dark'></div>
 	<div class='screen background screen-image screen-background-darken' id='screen-greeter'>
 		<div class='screen-content-parent' id='screen-greeter-content-parent'>
 			<div id='greeter-message' class='greeter-content'></div>
@@ -300,6 +301,7 @@
 	<script type='text/javascript' src='js/user-profile.js'></script>
 	<script type='text/javascript' src='js/authenticate.js'></script>
 	<script type='text/javascript' src='js/greeter.js'></script>
+	<script type='text/javascript' src='js/login-fade.js'></script>
 	<script type='text/javascript' src='js/goodbye.js'></script>
 	<script type='text/javascript' src='js/accounts.js'></script>
 	<script type='text/javascript' src='js/sessions.js'></script>
diff --git a/js/authenticate.js b/js/authenticate.js
@@ -78,14 +78,21 @@ class Authenticate {
 		this._tooltipPassword.innerText = this._returnRandomSuccessfulMessages();
 		this._tooltipPassword.classList.add('tooltip-success');
 
+		setTimeout(
+			() => {
+				loginFade.showLoginFade();
+			},
+			500
+		);
+
 		// Add a delay before unlocking
 		setTimeout(
 			() => {
 				this._buttonAuthenticate.classList.remove('authentication-success');
 				lightdm.start_session_sync(String(sessions.getDefaultSession()));
 				this._tooltipPassword.classList.remove('tooltip-success');
 			},
-			1500
+			1000
 		);
 	}
 
diff --git a/js/login-fade.js b/js/login-fade.js
@@ -0,0 +1,10 @@
+class LoginFade {
+	constructor() {
+		this._goodbyeScreen = document.querySelector('#screen-dark.screen');
+	}
+
+	showLoginFade(icon, message) {
+		this._goodbyeScreen.classList.add('screen-dark-show');
+		this._goodbyeScreenVisible = true;
+	}
+}
diff --git a/js/script.js b/js/script.js
@@ -7,6 +7,9 @@ const userProfile = new UserProfile();
 // Instantiate greeter screen
 const greeterScreen = new GreeterScreen();
 
+// Instantiate dark screen
+const loginFade = new LoginFade();
+
 // Instantiate goodbye screen
 const goodbye = new Goodbye();
 
