Reworked search bar

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Header/Fixed.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Header/Fixed.js
index 69c643320e09a17c925c9259856c849e7a6529fd..7a6f24ed1bea4c0a58e851cd6b8b94f5f419b558 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Header/Fixed.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Header/Fixed.js
@@ -9,8 +9,7 @@
 define(['Core', 'EventHandler', 'Ui/Alignment', 'Ui/CloseOverlay', 'Ui/Screen', 'Ui/Scroll', 'Ui/SimpleDropdown'], function(Core, EventHandler, UiAlignment, UiCloseOverlay, UiScreen, UiScroll, UiSimpleDropdown) {
        "use strict";
        
-       var _callbackScroll = null;
-       var _pageHeader, _pageHeaderContainer, _searchInput, _searchInputContainer;
+       var _pageHeader, _pageHeaderContainer, _pageHeaderPanel, _pageHeaderSearch, _searchInput, _topMenu, _userPanelSearchButton;
        var _isMobile = false;
        
        /**
@@ -41,64 +40,23 @@ define(['Core', 'EventHandler', 'Ui/Alignment', 'Ui/CloseOverlay', 'Ui/Screen',
                 * @protected
                 */
                _initSearchBar: function() {
-                       var searchContainer = elById('pageHeaderSearch');
-                       searchContainer.addEventListener(WCF_CLICK_EVENT, function(event) {
-                               event.stopPropagation();
-                       });
+                       _pageHeaderSearch = elById('pageHeaderSearch');
+                       _pageHeaderSearch.addEventListener(WCF_CLICK_EVENT, function(event) { event.stopPropagation(); });
                        
+                       _pageHeaderPanel = elById('pageHeaderPanel');
                        _searchInput = elById('pageHeaderSearchInput');
+                       _topMenu = elById('topMenu');
                        
-                       var userPanelSearchButton = elById('userPanelSearchButton');
-                       var pageHeaderFacade = elById('pageHeaderFacade');
-                       
-                       _searchInputContainer = elById('pageHeaderSearchInputContainer');
-                       
-                       var menu = elById('topMenu');
-                       userPanelSearchButton.addEventListener(WCF_CLICK_EVENT, (function(event) {
+                       _userPanelSearchButton = elById('userPanelSearchButton');
+                       _userPanelSearchButton.addEventListener(WCF_CLICK_EVENT, (function(event) {
                                event.preventDefault();
                                event.stopPropagation();
                                
                                if (_pageHeader.classList.contains('searchBarOpen')) {
-                                       return this._closeSearchBar();
-                               }
-                               
-                               var facadeHeight = pageHeaderFacade.clientHeight;
-                               var scrollTop = window.pageYOffset;
-                               var skipScrollHandler = false;
-                               var isVisible = !_isMobile && (facadeHeight > scrollTop);
-                               
-                               if (!isVisible && !_pageHeader.classList.contains('searchBarOpen')) {
-                                       UiAlignment.set(_searchInputContainer, menu, {
-                                               horizontal: 'right'
-                                       });
-                                       
-                                       _pageHeader.classList.add('searchBarOpen');
-                                       _searchInput.focus();
+                                       this._closeSearchBar();
                                }
-                               else if (!_isMobile) {
-                                       if (scrollTop) {
-                                               // setting focus could lead to the search bar to be
-                                               // hidden behind the fixed panel
-                                               UiScroll.element(elById('top'), function () {
-                                                       _searchInput.focus();
-                                               });
-                                       }
-                                       else {
-                                               _searchInput.focus();
-                                       }
-                                       
-                                       skipScrollHandler = true;
-                               }
-                               
-                               WCF.Dropdown.Interactive.Handler.closeAll();
-                               
-                               if (!skipScrollHandler && !_isMobile && _callbackScroll === null) {
-                                       _callbackScroll = (function () {
-                                               if (pageHeaderFacade.clientHeight > window.pageYOffset) {
-                                                       this._closeSearchBar();
-                                               }
-                                       }).bind(this);
-                                       window.addEventListener('scroll', _callbackScroll);
+                               else {
+                                       this._openSearchBar();
                                }
                        }).bind(this));
                        
@@ -112,24 +70,45 @@ define(['Core', 'EventHandler', 'Ui/Alignment', 'Ui/CloseOverlay', 'Ui/Screen',
                                if (data.identifier === 'com.woltlab.wcf.search') {
                                        data.handler.close(true);
                                        
-                                       Core.triggerEvent(elById('pageHeaderSearchInput'), WCF_CLICK_EVENT);
+                                       Core.triggerEvent(_userPanelSearchButton, WCF_CLICK_EVENT);
                                }
                        }).bind(this));
                },
                
+               /**
+                * Opens the search bar.
+                * 
+                * @protected
+                */
+               _openSearchBar: function() {
+                       _pageHeader.classList.add('searchBarOpen');
+                       _userPanelSearchButton.parentNode.classList.add('open');
+                       
+                       if (!_isMobile) {
+                               // calculate value for `right` on desktop
+                               UiAlignment.set(_pageHeaderSearch, _topMenu, {
+                                       horizontal: 'right'
+                               });
+                       }
+                       
+                       _pageHeaderSearch.style.setProperty('top', _pageHeaderPanel.clientHeight + 'px', '');
+                       _searchInput.focus();
+               },
+               
+               /**
+                * Closes the search bar.
+                * 
+                * @protected
+                */
                _closeSearchBar: function () {
                        _pageHeader.classList.remove('searchBarOpen');
+                       _userPanelSearchButton.parentNode.classList.remove('open');
                        
                        ['bottom', 'left', 'right', 'top'].forEach(function(propertyName) {
-                               _searchInputContainer.style.removeProperty(propertyName);
+                               _pageHeaderSearch.style.removeProperty(propertyName);
                        });
                        
                        _searchInput.blur();
-                       
-                       if (_callbackScroll !== null) {
-                               window.removeEventListener('scroll', _callbackScroll);
-                               _callbackScroll = null;
-                       }
                }
        };
 });

diff --git a/wcfsetup/install/files/style/layout/pageHeader.scss b/wcfsetup/install/files/style/layout/pageHeader.scss
index 8527b9d2ba8889c483780247a38e409e77f29d1d..7408f47f990c384738728f75de72d7fadc68a859 100644 (file)
--- a/wcfsetup/install/files/style/layout/pageHeader.scss
+++ b/wcfsetup/install/files/style/layout/pageHeader.scss
@@ -277,19 +277,16 @@
 
 /* SEARCH AREA */
 .pageHeaderSearch {
-       @include screen-lg {
-               flex: 0 0 50%;
-               text-align: right;
-               
-               .pageHeaderSearchLabel {
-                       display: none;
-               }
-       }
+       display: none;
+       position: fixed;
+}
+
+.searchBarOpen .pageHeaderSearch {
+       display: block;
 }
 
 .pageHeaderSearchInputContainer {
-       display: inline-flex;
-       position: relative;
+       display: flex;
        
        .pageHeaderSearchType {
                display: flex;
@@ -297,7 +294,7 @@
                > .button {
                        align-items: center;
                        background-color: $wcfHeaderMenuLinkBackground;
-                       border-radius: 2px 0 0 2px;
+                       border-radius: 0 0 0 2px;
                        color: $wcfHeaderMenuLink;
                        display: flex;
                        max-width: 200px;
@@ -374,7 +371,7 @@
        
        .pageHeaderSearchInputButton {
                background-color: $wcfHeaderMenuLinkBackground;
-               border-radius: 0 2px 2px 0;
+               border-radius: 0 0 2px 0;
                color: $wcfHeaderMenuLink;
                padding: 4px 9px;
                
@@ -385,21 +382,6 @@
        }
 }
 
-@include screen-lg {
-       .searchBarOpen .pageHeaderSearchInputContainer {
-               position: fixed;
-               top: 50px !important;
-               
-               .pageHeaderSearchType > .button {
-                       border-top-left-radius: 0;
-               }
-               
-               .pageHeaderSearchInputButton {
-                       border-top-right-radius: 0;
-               }
-       }
-}
-
 @include screen-md-down {
        .pageHeaderPanel > .layoutBoundary {
                /* pushes buttons to the left / right corner */
@@ -463,10 +445,8 @@
        }
        
        .pageHeaderSearch {
-               left: 0;
-               position: fixed;
-               right: 0;
-               top: 50px !important;
+               left: 0 !important;
+               right: 0 !important;
                
                .pageHeaderSearchInputContainer {
                        border-radius: 0;