Move the mobile reaction button back into the menu

The separate reaction button was a nice touch, but since it is generated on the fly, this caused the elements to increase their height. Eventually, browsers would to jump to anchors on load, but the reaction buttons would mess up the scroll location.

We should think about redesigning the mobile message view and start displaying at least some buttons. However, this could potentially cause incompatibilities with styles, therefore we need to postpone this to at least 5.3.

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Like/Handler.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Like/Handler.js
index eb42e97e27a4b0e97ddbe3d05cff149931a9b4df..4c21ef4cf76787425476d909c1997b62bc46d597 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Like/Handler.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Like/Handler.js
@@ -202,21 +202,10 @@ define(
                        var listItem = elCreate('li');
                        listItem.className = 'wcfReactButton';
                        
-                       if (insertBefore) {
-                               var jsMobileNavigation = insertBefore.parentElement.contains('jsMobileNavigation');
-                       }
-                       else {
-                               var jsMobileNavigation = appendTo.classList.contains('jsMobileNavigation');
-                       }
-                       
                        var button = elCreate('a');
                        button.className = 'jsTooltip reactButton';
                        if (this._options.renderAsButton) {
                                button.classList.add('button');
-                               
-                               if (jsMobileNavigation) {
-                                       button.classList.add('ignoreMobileNavigation');
-                               }
                        }
                        
                        button.href = '#';

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Mobile.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Mobile.js
index 01c26723ac40cc95af3ccdb7523b5bb417621510..ce4647900bec2246b24c0a5dec1cdb8cae6228f1 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Mobile.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Mobile.js
@@ -416,7 +416,16 @@ define(
                },
                
                _rebuildMobileNavigation: function (navigation) {
-                       elBySelAll('.button:not(.ignoreMobileNavigation)', navigation, function (button) {
+                       elBySelAll('.button', navigation, function (button) {
+                               if (button.classList.contains('ignoreMobileNavigation')) {
+                                       // The reaction button was hidden up until 5.2.2, but was enabled again in 5.2.3. This check
+                                       // exists to make sure that there is no unexpected behavior in 3rd party apps or plugins that
+                                       // used the same code and hid the reaction button via a CSS class in the template.
+                                       if (!button.classList.contains('reactButton')) {
+                                               return;
+                                       }
+                               }
+                               
                                var item = elCreate('li');
                                if (button.classList.contains('active')) item.className = 'active';
                                item.innerHTML = '<a href="#">' + elBySel('span:not(.icon)', button).textContent + '</a>';

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Reaction/Handler.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Reaction/Handler.js
index 072a87230f4f17f78bdd16b856ef2f68e048bf83..89e614d1eed07cc6f9474e25dc3dbb5442d8c280 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Reaction/Handler.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Reaction/Handler.js
@@ -12,13 +12,13 @@ define(
                'Ajax',      'Core',                            'Dictionary',           'Language',
                'ObjectMap', 'StringUtil',                      'Dom/ChangeListener',   'Dom/Util',
                'Ui/Dialog', 'WoltLabSuite/Core/Ui/User/List',  'User',                 'WoltLabSuite/Core/Ui/Reaction/CountButtons',
-               'Ui/Alignment', 'Ui/CloseOverlay',              'Ui/Screen'
+               'Ui/Alignment', 'Ui/CloseOverlay'
        ],
        function(
                Ajax,        Core,              Dictionary,             Language,
                ObjectMap,   StringUtil,        DomChangeListener,      DomUtil,
                UiDialog,    UiUserList,        User,                   CountButtons,
-               UiAlignment, UiCloseOverlay,    UiScreen
+               UiAlignment, UiCloseOverlay
        )
        {
                "use strict";
@@ -133,57 +133,9 @@ define(
                                        textSpan.innerText = reaction.title;
                                }
                                
-                               if (elementData.reactButton.closest('.messageFooterGroup > .jsMobileNavigation')) {
-                                       UiScreen.on('screen-sm-down', {
-                                               match: this._enableMobileView.bind(this, elementData.reactButton, elementData.objectId),
-                                               unmatch: this._disableMobileView.bind(this, elementData.reactButton, elementData.objectId),
-                                               setup: this._setupMobileView.bind(this, elementData.reactButton, elementData.objectId)
-                                       });
-                               }
-                               
                                elementData.reactButton.addEventListener(WCF_CLICK_EVENT, this._toggleReactPopover.bind(this, elementData.objectId, elementData.reactButton));
                        },
                        
-                       /**
-                        * Enables the mobile view for the reaction button.
-                        * 
-                        * @param       {Element}       element
-                        */
-                       _enableMobileView: function(element) {
-                               var messageFooterGroup = element.closest('.messageFooterGroup');
-                               
-                               elShow(elBySel('.mobileReactButton', messageFooterGroup));
-                       },
-                       
-                       /**
-                        * Disables the mobile view for the reaction button.
-                        * 
-                        * @param       {Element}       element
-                        */
-                       _disableMobileView: function(element) {
-                               var messageFooterGroup = element.closest('.messageFooterGroup');
-                               
-                               elHide(elBySel('.mobileReactButton', messageFooterGroup));
-                       },
-                       
-                       /**
-                        * Setup the mobile view for the reaction button.
-                        * 
-                        * @param       {Element}       element
-                        * @param       {int}           objectID
-                        */
-                       _setupMobileView: function(element, objectID) {
-                               var messageFooterGroup = element.closest('.messageFooterGroup');
-                               
-                               var button = elCreate('button');
-                               button.className = 'mobileReactButton';
-                               button.innerHTML = element.innerHTML;
-                               
-                               button.addEventListener(WCF_CLICK_EVENT, this._toggleReactPopover.bind(this, objectID, button));
-                               
-                               messageFooterGroup.appendChild(button);
-                       },
-                       
                        _updateReactButton: function(objectID, reactionTypeID) {
                                this._objects.get(objectID).forEach(function (elementData) {
                                        if (elementData.reactButton !== null) {

diff --git a/wcfsetup/install/files/style/ui/reactions.scss b/wcfsetup/install/files/style/ui/reactions.scss
index e7298e968c534217216f544509d788b66b23feb3..398d9acd769bacb2a94a51966a3b173190a73239 100644 (file)
--- a/wcfsetup/install/files/style/ui/reactions.scss
+++ b/wcfsetup/install/files/style/ui/reactions.scss
@@ -145,11 +145,6 @@
        }
 }
 
-.messageFooterGroup > .mobileReactButton {
-       margin-left: auto;
-       margin-top: 20px;
-}
-
 #likeList .likeTypeSelection {
        display: flex;
        justify-content: flex-end;