Merge pull request #2599 from thelounge/xpaw/userlist

Make userlist state consistent on mobile and desktop

client/css/style.css

@@ -510,8 +510,8 @@ kbd {
 	opacity: 1;
 }
 
-#viewport.rt #chat .userlist {
-	display: none;
+#viewport.userlist-open #chat .userlist {
+	display: flex;
 }
 
 #sidebar {
@@ -1051,14 +1051,10 @@ background on hover (unless active) */
 	-webkit-overflow-scrolling: touch;
 }
 
-#viewport.rt .chat {
-	right: 0;
-}
-
 #chat .userlist {
 	border-left: 1px solid #e7e7e7;
 	width: 180px;
-	display: flex;
+	display: none;
 	flex-direction: column;
 	flex-shrink: 0;
 	touch-action: pan-y;
@@ -2413,8 +2409,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 		transition: transform 0.2s;
 	}
 
-	#viewport.rt #chat .userlist {
-		display: flex;
+	#viewport.userlist-open #chat .userlist {
 		transform: translateX(0);
 	}
 

client/js/lounge.js

@@ -28,10 +28,6 @@ $(function() {
 	const viewport = $("#viewport");
 
 	function storeSidebarVisibility(name, state) {
-		if ($(window).outerWidth() < utils.mobileViewportPixels) {
-			return;
-		}
-
 		storage.set(name, state);
 
 		utils.togglePreviewMoreButtonsIfNeeded();
@@ -40,20 +36,26 @@ $(function() {
 	// If sidebar overlay is visible and it is clicked, close the sidebar
 	$("#sidebar-overlay").on("click", () => {
 		slideoutMenu.toggle(false);
-		storeSidebarVisibility("thelounge.state.sidebar", false);
+
+		if ($(window).outerWidth() >= utils.mobileViewportPixels) {
+			storeSidebarVisibility("thelounge.state.sidebar", false);
+		}
 	});
 
 	$("#windows").on("click", "button.lt", () => {
 		const isOpen = !slideoutMenu.isOpen();
 
 		slideoutMenu.toggle(isOpen);
-		storeSidebarVisibility("thelounge.state.sidebar", isOpen);
+
+		if ($(window).outerWidth() >= utils.mobileViewportPixels) {
+			storeSidebarVisibility("thelounge.state.sidebar", isOpen);
+		}
 	});
 
 	viewport.on("click", ".rt", function() {
-		const isOpen = !viewport.hasClass("rt");
+		const isOpen = !viewport.hasClass("userlist-open");
 
-		viewport.toggleClass("rt", isOpen);
+		viewport.toggleClass("userlist-open", isOpen);
 		chat.find(".chan.active .chat").trigger("keepToBottom");
 		storeSidebarVisibility("thelounge.state.userlist", isOpen);
 

client/js/socket-events/init.js

@@ -41,12 +41,21 @@ socket.on("init", function(data) {
 		slideoutMenu.enable();
 
 		const viewport = $("#viewport");
+		const viewportWidth = $(window).outerWidth();
+		let isUserlistOpen = storage.get("thelounge.state.userlist");
 
-		if ($(window).outerWidth() >= utils.mobileViewportPixels) {
+		if (viewportWidth >= utils.mobileViewportPixels) {
 			slideoutMenu.toggle(storage.get("thelounge.state.sidebar") === "true");
-			viewport.toggleClass("rt", storage.get("thelounge.state.userlist") === "true");
 		}
 
+		// If The Lounge is opened on a small screen (less than 1024px), and we don't have stored
+		// user list state, close it by default
+		if (viewportWidth >= 1024 && isUserlistOpen !== "true" && isUserlistOpen !== "false") {
+			isUserlistOpen = "true";
+		}
+
+		viewport.toggleClass("userlist-open", isUserlistOpen === "true");
+
 		$(document.body).removeClass("signed-out");
 		$("#loading").remove();
 		$("#sign-in").remove();