Improved the behavior of page action buttons on mobile

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 42d507b304d41ac4159dbb4cc739eb8fc12cc0fd..46bcaa824b41e16f8b37f8d005b12059da4e2794 100644 (file)
--- 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 72d4c58a7b1c25d2dedefbc2104a1178801878d0..3235c7ee905a8cad22ff7871b11fb4122cb4b79a 100644 (file)
--- 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;
+               }
        }
 }