From: Alexander Ebert <ebert@woltlab.com>
Date: Tue, 13 Sep 2016 08:28:03 +0000 (+0200)
Subject: Reworked search bar
X-Git-Tag: 3.0.0_Beta_1~201
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=927c48998771765db011a7d0f4a88791672b2d1b;p=GitHub%2FWoltLab%2FWCF.git

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 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;