From 286fae3febb699d9b42948a7b7a87cd9e867d8e9 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Sat, 10 Apr 2021 15:35:47 +0200
Subject: [PATCH] Improved the behavior of page action buttons on mobile

---
 .../js/WoltLabSuite/Core/Ui/Page/Action.js    | 25 +++++++++++++++++--
 .../install/files/style/ui/pageAction.scss    | 23 +++++++++++------
 2 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Action.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Action.js
index 42d507b304..46bcaa824b 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Action.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Action.js
@@ -6,7 +6,7 @@
  * @license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
  * @module	WoltLabSuite/Core/Ui/Page/Action
  */
-define(['Dictionary', 'Language'], function (Dictionary, Language) {
+define(['Dictionary', 'Language', 'Ui/Screen'], function (Dictionary, Language, UiScreen) {
 	'use strict';
 	
 	var _buttons = new Dictionary();
@@ -27,6 +27,8 @@ define(['Dictionary', 'Language'], function (Dictionary, Language) {
 	var _resetLastPosition = window.debounce(function () {
 		_lastPosition = -1;
 	}, 50, false);
+
+	var _toTopButtonThreshold = 300;
 	
 	/**
 	 * @exports     WoltLabSuite/Core/Ui/Page/Action
@@ -82,6 +84,18 @@ define(['Dictionary', 'Language'], function (Dictionary, Language) {
 					_lastPosition = -1;
 				}
 			}, {passive: true});
+
+			UiScreen.on('screen-sm-down', {
+				match() {
+					_toTopButtonThreshold = 50;
+				},
+				unmatch() {
+					_toTopButtonThreshold = 300;
+				},
+				setup() {
+					_toTopButtonThreshold = 50;
+				}
+			});
 			
 			this._onScroll();
 		},
@@ -114,7 +128,7 @@ define(['Dictionary', 'Language'], function (Dictionary, Language) {
 				return;
 			}
 			
-			if (offset >= 300) {
+			if (offset >= _toTopButtonThreshold) {
 				if (_toTopButton.classList.contains('initiallyHidden')) {
 					_toTopButton.classList.remove('initiallyHidden');
 				}
@@ -293,6 +307,13 @@ define(['Dictionary', 'Language'], function (Dictionary, Language) {
 			}
 			
 			_container.classList[(hasVisibleItems ? 'add' : 'remove')]('active');
+
+			if (hasVisibleItems) {
+				_wrapper.classList.add("pageActionHasContextButtons");
+			}
+			else {
+				_wrapper.classList.remove("pageActionHasContextButtons");
+			}
 		}
 	};
 });
diff --git a/wcfsetup/install/files/style/ui/pageAction.scss b/wcfsetup/install/files/style/ui/pageAction.scss
index 72d4c58a7b..3235c7ee90 100644
--- a/wcfsetup/install/files/style/ui/pageAction.scss
+++ b/wcfsetup/install/files/style/ui/pageAction.scss
@@ -54,15 +54,18 @@
 	}
 	
 	@include screen-sm-down {
-		/* The iOS bottom touch zone is approximately 44px high. Any touches within will show the
+		/* The iOS bottom touch zone is approximately 30px high. Any touches within will show the
 		   menu instead of registering any touch on a button. */
-		bottom: 44px;
+		bottom: 30px;
+		transition: bottom .12s linear;
 		
-		&.scrolledDown .pageActionButton,
-		&.scrolledDown .pageActionButtonToTop {
-			opacity: 0;
-			visibility: hidden;
-			transition-delay: .4s;
+		&:not(.pageActionHasContextButtons) {
+			&.scrolledDown .pageActionButton,
+			&.scrolledDown .pageActionButtonToTop {
+				opacity: 0;
+				visibility: hidden;
+				transition-delay: .4s;
+			}
 		}
 	}
 }
@@ -73,6 +76,10 @@
 
 @include screen-xs {
 	.redactorActive .pageAction {
-		display: none !important;
+		bottom: 10px;
+
+		&:not(.pageActionHasContextButtons) {
+			display: none !important;
+		}
 	}
 }
-- 
2.20.1