From f8b9397d06b2d064bf6738900f48cfb2a3dcb327 Mon Sep 17 00:00:00 2001
From: MokaStitcher <54149968+MokaStitcher@users.noreply.github.com>
Date: Mon, 12 Aug 2024 06:44:00 +0200
Subject: [PATCH] [UI] add open filter button for mobile touch pad (#3480)

---
 index.css  | 23 ++++++++++++++++-------
 index.html | 24 +++++++++++++++++++-----
 2 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/index.css b/index.css
index 54eda86161d..3b74867be5f 100644
--- a/index.css
+++ b/index.css
@@ -69,7 +69,9 @@ input:-internal-autofill-selected {
   --controls-padding: 1rem;
 
   --controls-size-with-padding: calc(var(--controls-size) + var(--controls-padding));
+  --controls-size-with-wide-padding: calc(var(--controls-size) *1.2 + var(--controls-padding));
   --control-group-extra-size: calc(var(--controls-size) * 0.8);
+  --control-group-extra-wide-size: calc(var(--controls-size) * 1.2);
 
   --control-group-extra-2-offset: calc(var(--controls-size-with-padding) + (var(--controls-size) - var(--control-group-extra-size)) / 2);
   --control-group-extra-1-offset: calc(var(--controls-padding) + (var(--controls-size) - var(--control-group-extra-size)) / 2);
@@ -117,25 +119,31 @@ input:-internal-autofill-selected {
   width: var(--control-group-extra-size);
   height: var(--control-group-extra-size);
 }
+
 /* Hide buttons on specific UIs */
 
-/* Show #cycleForm and #cycleShiny only on STARTER_SELECT and SETTINGS */
-#touchControls:not([data-ui-mode='STARTER_SELECT']):not([data-ui-mode^='SETTINGS']) #apadCycleForm,
-#touchControls:not([data-ui-mode='STARTER_SELECT']):not([data-ui-mode^='SETTINGS']) #apadCycleShiny {
+/* Show #apadPreviousTab and #apadNextTab only in settings, except in touch configuration panel */
+#touchControls:not([data-ui-mode^='SETTINGS']) #apadPreviousTab,
+#touchControls:not([data-ui-mode^='SETTINGS']) #apadNextTab,
+#touchControls:is(.config-mode) #apadPreviousTab,
+#touchControls:is(.config-mode) #apadNextTab {
   display: none;
 }
 
 /* Show #apadInfo only in battle */
-#touchControls:not([data-ui-mode='COMMAND']):not([data-ui-mode='FIGHT']):not([data-ui-mode='BALL']) #apadInfo {
+#touchControls:not([data-ui-mode='COMMAND']):not([data-ui-mode='FIGHT']):not([data-ui-mode='BALL']):not([data-ui-mode='TARGET_SELECT']) #apadInfo {
   display: none;
 }
 
-/* Show #apadInfo only in battle and target select */
+/* Show #apadStats only in battle and shop */
 #touchControls:not([data-ui-mode='COMMAND']):not([data-ui-mode='FIGHT']):not([data-ui-mode='BALL']):not([data-ui-mode='TARGET_SELECT']):not([data-ui-mode='MODIFIER_SELECT']) #apadStats {
   display: none;
 }
 
 /* Show cycle buttons only on STARTER_SELECT and on touch configuration panel */
+#touchControls:not(.config-mode):not([data-ui-mode='STARTER_SELECT']) #apadOpenFilters,
+#touchControls:not(.config-mode):not([data-ui-mode='STARTER_SELECT']) #apadCycleForm,
+#touchControls:not(.config-mode):not([data-ui-mode='STARTER_SELECT']) #apadCycleShiny,
 #touchControls:not(.config-mode):not([data-ui-mode='STARTER_SELECT']) #apadCycleNature,
 #touchControls:not(.config-mode):not([data-ui-mode='STARTER_SELECT']) #apadCycleAbility,
 #touchControls:not(.config-mode):not([data-ui-mode='STARTER_SELECT']) #apadCycleGender,
@@ -272,8 +280,8 @@ input:-internal-autofill-selected {
 }
 
 #control-group-cancel {
-  right: var(--controls-size-with-padding);
-  bottom: var(--controls-padding);;
+  right: var(--controls-size-with-wide-padding);
+  bottom: var(--controls-padding);
 }
 
 #control-group-extra-1 {
@@ -282,6 +290,7 @@ input:-internal-autofill-selected {
 }
 
 #control-group-extra-2 {
+  width: var(--control-group-extra-wide-size);
   right: var(--control-group-extra-2-offset);
   bottom: var(--control-group-extra-2-offset);
 }
diff --git a/index.html b/index.html
index 5ebf822521e..29b4c0d1a6e 100644
--- a/index.html
+++ b/index.html
@@ -96,36 +96,50 @@
 			</div>
 
 			<div id="control-group-extra-1" class="control-group control-group-extra">
-				<div id="apadCycleShiny" class="apad-button apad-square apad-small" data-key="CYCLE_SHINY">
+				<!-- buttons to navigate settings tabs -->
+				<div id="apadPreviousTab" class="apad-button apad-square apad-small" data-key="CYCLE_FORM">
+					<span class="apad-label">F</span>
+				</div>
+				<div id="apadNextTab" class="apad-button apad-square apad-small" data-key="CYCLE_SHINY">
 					<span class="apad-label">R</span>
 				</div>
-				<div id="apadCycleVariant" class="apad-button apad-square apad-small" data-key="V">
-					<span class="apad-label">V</span>
-				</div>
-				<div id="apadStats" class="apad-button apad-rectangle apad-small" data-key="STATS">
+				<!-- buttons to open filter menu in starter select -->
+				<div id="apadOpenFilters" class="apad-button apad-rectangle apad-small" data-key="STATS">
 					<span class="apad-label">C</span>
 				</div>
+				<!-- main menu button -->
 				<div id="apadMenu" class="apad-button apad-rectangle apad-small" data-key="MENU">
 					<span class="apad-label">Menu</span>
 				</div>
 			</div>
 
 			<div id="control-group-extra-2" class="control-group control-group-extra">
+				<!-- buttons to cycle through pokemon characteristics in starter select -->
 				<div id="apadCycleForm" class="apad-button apad-square apad-small" data-key="CYCLE_FORM">
 					<span class="apad-label">F</span>
 				</div>
 				<div id="apadCycleGender" class="apad-button apad-square apad-small" data-key="CYCLE_GENDER">
 					<span class="apad-label">G</span>
 				</div>
+				<div id="apadCycleShiny" class="apad-button apad-square apad-small" data-key="CYCLE_SHINY">
+					<span class="apad-label">R</span>
+				</div>
 				<div id="apadCycleAbility" class="apad-button apad-square apad-small" data-key="CYCLE_ABILITY">
 					<span class="apad-label">E</span>
 				</div>
 				<div id="apadCycleNature" class="apad-button apad-square apad-small" data-key="CYCLE_NATURE">
 					<span class="apad-label">N</span>
 				</div>
+				<div id="apadCycleVariant" class="apad-button apad-square apad-small" data-key="V">
+					<span class="apad-label">V</span>
+				</div>
+				<!-- buttons to display battle-specific information -->
 				<div id="apadInfo" class="apad-button apad-rectangle apad-small" data-key="V">
 					<span class="apad-label">V</span>
 				</div>
+				<div id="apadStats" class="apad-button apad-rectangle apad-small" data-key="STATS">
+					<span class="apad-label">C</span>
+				</div>
 			</div>
 
 		</div>