From 2c2bc8b218a836ddcc07287c16fc76272b7ba3f1 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Mon, 10 Feb 2020 12:49:04 +0100 Subject: [PATCH] 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. --- .../js/WoltLabSuite/Core/Ui/Like/Handler.js | 11 ---- .../files/js/WoltLabSuite/Core/Ui/Mobile.js | 11 +++- .../WoltLabSuite/Core/Ui/Reaction/Handler.js | 52 +------------------ .../install/files/style/ui/reactions.scss | 5 -- 4 files changed, 12 insertions(+), 67 deletions(-) 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 eb42e97e27..4c21ef4cf7 100644 --- 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 01c26723ac..ce4647900b 100644 --- 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 = '' + elBySel('span:not(.icon)', button).textContent + ''; 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 072a87230f..89e614d1ee 100644 --- 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 e7298e968c..398d9acd76 100644 --- 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; -- 2.20.1