From 91a0815bb5f8be8e34dd6e8c09d431ceb47f82e2 Mon Sep 17 00:00:00 2001
From: itsjohncs <johnsullivan.pem@gmail.com>
Date: Thu, 7 Oct 2021 13:36:56 -0700
Subject: [PATCH] Add Gestures section to help window.

This documents the two gestures that The Lounge currently supports.

The section is only visible if your device supports touch.
---
 client/components/Windows/Help.vue | 31 ++++++++++++++++++++++++++++++
 client/css/style.css               |  4 ++++
 2 files changed, 35 insertions(+)

diff --git a/client/components/Windows/Help.vue b/client/components/Windows/Help.vue
index 95067dff..fd1408d6 100644
--- a/client/components/Windows/Help.vue
+++ b/client/components/Windows/Help.vue
@@ -87,6 +87,36 @@
 				</p>
 			</div>
 
+			<h2 v-if="isTouch">Gestures</h2>
+
+			<div v-if="isTouch" class="help-item">
+				<div class="subject gesture">Single-Finger Swipe Left</div>
+				<div class="description">
+					<p>Hide sidebar.</p>
+				</div>
+			</div>
+
+			<div v-if="isTouch" class="help-item">
+				<div class="subject gesture">Single-Finger Swipe Right</div>
+				<div class="description">
+					<p>Show sidebar.</p>
+				</div>
+			</div>
+
+			<div v-if="isTouch" class="help-item">
+				<div class="subject gesture">Two-Finger Swipe Left</div>
+				<div class="description">
+					<p>Switch to the next window in the channel list.</p>
+				</div>
+			</div>
+
+			<div v-if="isTouch" class="help-item">
+				<div class="subject gesture">Two-Finger Swipe Right</div>
+				<div class="description">
+					<p>Switch to the previous window in the channel list.</p>
+				</div>
+			</div>
+
 			<h2>Keyboard Shortcuts</h2>
 
 			<div class="help-item">
@@ -764,6 +794,7 @@ export default {
 	data() {
 		return {
 			isApple: navigator.platform.match(/(Mac|iPhone|iPod|iPad)/i) || false,
+			isTouch: navigator.maxTouchPoints > 0,
 		};
 	},
 };
diff --git a/client/css/style.css b/client/css/style.css
index 30bceaaa..44c4d3dd 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -2024,6 +2024,10 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	padding-right: 15px;
 }
 
+#help .help-item .subject.gesture {
+	font-weight: bold;
+}
+
 #help .help-item .description p {
 	margin-bottom: 0;
 }