From 1e8c0547ec40ac4d3ab0f274134860010aa865e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= <jeremie@astori.fr>
Date: Sat, 17 Mar 2018 03:13:43 -0400
Subject: [PATCH] Add a semi-opaque overlay when channel list is open on mobile

---
 client/css/style.css  | 27 +++++++++++++++++++++++++--
 client/index.html.tpl |  1 +
 client/js/slideout.js |  3 +++
 3 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/client/css/style.css b/client/css/style.css
index fc3f6053..f31e130a 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -2273,20 +2273,43 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 		height: 100%;
 		position: absolute;
 		left: -220px;
-		z-index: 1;
-		transition: transform 160ms;
+		z-index: 2;
+		transition: transform 160ms, box-shadow 0.2s;
 		transform: translateZ(0);
 	}
 
+	#sidebar-overlay {
+		position: fixed;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		background: rgba(0, 0, 0, 0.5);
+		pointer-events: none;
+		opacity: 0;
+		transition: opacity 160ms;
+		z-index: 1;
+	}
+
+	#viewport.menu-open #sidebar-overlay {
+		opacity: 1;
+	}
+
 	#viewport.menu-open #sidebar {
 		display: flex;
 		transform: translate3d(220px, 0, 0);
 	}
 
+	#viewport.menu-dragging #sidebar-overlay,
 	#viewport.menu-dragging #sidebar {
 		transition: none !important;
 	}
 
+	#viewport.menu-open #sidebar,
+	#viewport.menu-dragging #sidebar {
+		box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.5);
+	}
+
 	#viewport.menu-open .messages {
 		pointer-events: none;
 	}
diff --git a/client/index.html.tpl b/client/index.html.tpl
index cccd17cf..86f9cd7f 100644
--- a/client/index.html.tpl
+++ b/client/index.html.tpl
@@ -44,6 +44,7 @@
 					<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Sign out"><button class="icon sign-out" id="sign-out" aria-label="Sign out"></button></span>
 				</footer>
 			</aside>
+			<div id="sidebar-overlay"></div>
 			<article id="windows">
 				<div id="loading" class="window active">
 					<div id="loading-status-container">
diff --git a/client/js/slideout.js b/client/js/slideout.js
index c3b64c65..d6185a1e 100644
--- a/client/js/slideout.js
+++ b/client/js/slideout.js
@@ -2,6 +2,7 @@
 
 const viewport = document.getElementById("viewport");
 const menu = document.getElementById("sidebar");
+const sidebarOverlay = document.getElementById("sidebar-overlay");
 
 let touchStartPos = null;
 let touchCurPos = null;
@@ -70,6 +71,7 @@ function onTouchMove(e) {
 	}
 
 	menu.style.transform = "translate3d(" + setX + "px, 0, 0)";
+	sidebarOverlay.style.opacity = setX / menuWidth;
 
 	if (menuIsMoving) {
 		e.preventDefault();
@@ -89,6 +91,7 @@ function onTouchEnd() {
 	document.body.removeEventListener("touchend", onTouchEnd);
 	viewport.classList.toggle("menu-dragging", false);
 	menu.style.transform = null;
+	sidebarOverlay.style.opacity = null;
 
 	touchStartPos = null;
 	touchCurPos = null;