From 927c48998771765db011a7d0f4a88791672b2d1b Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Tue, 13 Sep 2016 10:28:03 +0200 Subject: [PATCH] Reworked search bar --- .../WoltLabSuite/Core/Ui/Page/Header/Fixed.js | 97 ++++++++----------- .../files/style/layout/pageHeader.scss | 42 +++----- 2 files changed, 49 insertions(+), 90 deletions(-) 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 69c643320e..7a6f24ed1b 100644 --- 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 8527b9d2ba..7408f47f99 100644 --- 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; -- 2.20.1