From 246f80fca0621bd0efba77f0b43c38cabb0790c0 Mon Sep 17 00:00:00 2001 From: OlofSvahnVbg Date: Wed, 4 Sep 2024 13:26:12 +0200 Subject: [PATCH 01/10] added window boundary on header bottom --- apps/client/src/components/Window.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/apps/client/src/components/Window.js b/apps/client/src/components/Window.js index f065fad35..2ab90b62a 100644 --- a/apps/client/src/components/Window.js +++ b/apps/client/src/components/Window.js @@ -100,7 +100,10 @@ Rnd.prototype.onDragStart = function (e, data) { } const boundaryRect = boundary.getBoundingClientRect(); const boundaryLeft = boundaryRect.left; - const boundaryTop = boundaryRect.top; + const boundaryTop = + boundaryRect.top + + document.getElementById("header").getBoundingClientRect().top + + document.getElementById("header").getBoundingClientRect().height; const parentRect = parent.getBoundingClientRect(); const parentLeft = parentRect.left; const parentTop = parentRect.top; From 6e1785eb81d274eacfb275dddab565f27e98e126 Mon Sep 17 00:00:00 2001 From: OlofSvahnVbg Date: Wed, 4 Sep 2024 13:27:59 +0200 Subject: [PATCH 02/10] updated logic for search overlap --- apps/client/src/components/App.js | 22 ++++++++++++++++--- apps/client/src/components/Search/Search.js | 1 + .../client/src/components/Search/SearchBar.js | 15 +++++++++++-- 3 files changed, 33 insertions(+), 5 deletions(-) diff --git a/apps/client/src/components/App.js b/apps/client/src/components/App.js index 84762072e..390e38ea6 100644 --- a/apps/client/src/components/App.js +++ b/apps/client/src/components/App.js @@ -68,8 +68,8 @@ const DRAWER_WIDTH = 250; // A bunch of styled components to get the Hajk feel! Remember that some // components are styled with the sx-prop instead/as well. -const StyledHeader = styled("header")(({ theme }) => ({ - zIndex: theme.zIndex.appBar, +const StyledHeader = styled("header")(({ theme, headerHasFocus }) => ({ + zIndex: headerHasFocus ? theme.zIndex.appBar : theme.zIndex.appBar - 100, maxHeight: theme.spacing(8), display: "flex", justifyContent: "space-between", @@ -375,6 +375,7 @@ class App extends React.PureComponent { drawerStatic: drawerStatic, activeDrawerContent: activeDrawerContentState, drawerMouseOverLock: false, + headerHasFocus: false, }; // If the drawer is set to be visible at start - ensure the activeDrawerContent @@ -919,7 +920,9 @@ class App extends React.PureComponent { ); } else { @@ -1080,6 +1083,16 @@ class App extends React.PureComponent { return this.state.drawerStatic && isOnlyOneButtonVisible ? false : true; } + handleFocus = () => { + // set headerHasFocus to true + this.setState({ headerHasFocus: true }); + }; + + handleBlur = () => { + // set headerHasFocus to false + this.setState({ headerHasFocus: false }); + }; + render() { const { config } = this.props; @@ -1146,6 +1159,9 @@ class App extends React.PureComponent { pointerEvents: "auto", }, }} + headerHasFocus={this.state.headerHasFocus} + onFocus={this.handleFocus} + onBlur={this.handleBlur} > {clean === false && this.showDrawerButtons() && ( ) diff --git a/apps/client/src/components/Search/SearchBar.js b/apps/client/src/components/Search/SearchBar.js index 6937b7d57..433b6da50 100644 --- a/apps/client/src/components/Search/SearchBar.js +++ b/apps/client/src/components/Search/SearchBar.js @@ -55,7 +55,13 @@ const IconWrapper = styled("div")(({ theme }) => ({ const CustomPopper = (props) => { const theme = useTheme(); const smallScreen = useMediaQuery(theme.breakpoints.down("sm")); - const style = smallScreen ? { width: "100%" } : { width: 400 }; + + // Use props.headerHasFocus instead of this.props.headerHasFocus + + const style = smallScreen + ? { width: "100%", zIndex: props.headerHasFocus ? 1300 : 1000 } + : { width: 400, zIndex: props.headerHasFocus ? 1300 : 1000 }; + return ( ( + + )} PaperComponent={CustomPaper} clearOnEscape disabled={ From 5fcd14ce44940bb3ad871e6499165090aa3be628 Mon Sep 17 00:00:00 2001 From: OlofSvahnVbg Date: Thu, 5 Sep 2024 13:18:18 +0200 Subject: [PATCH 03/10] basic functionality for window overlap with search --- apps/client/src/components/App.js | 7 +++++-- apps/client/src/components/Search/Search.js | 4 +++- apps/client/src/components/Search/SearchBar.js | 6 ++++-- .../searchResults/SearchResultsContainer.js | 16 ++++++++++++---- 4 files changed, 24 insertions(+), 9 deletions(-) diff --git a/apps/client/src/components/App.js b/apps/client/src/components/App.js index 390e38ea6..a9ea18c0e 100644 --- a/apps/client/src/components/App.js +++ b/apps/client/src/components/App.js @@ -921,7 +921,8 @@ class App extends React.PureComponent { map={this.appModel.getMap()} app={this} options={this.appModel.plugins.search.options} - headerHasFocus={this.state.headerHasFocus} + handleFocus={this.handleFocus} + handleBlur={this.handleBlur} // FIXME: We should get config from somewhere else now when Search is part of Core /> ); @@ -1084,11 +1085,13 @@ class App extends React.PureComponent { } handleFocus = () => { + console.log("handleFocus"); // set headerHasFocus to true this.setState({ headerHasFocus: true }); }; handleBlur = () => { + console.log("handleBlur"); // set headerHasFocus to false this.setState({ headerHasFocus: false }); }; @@ -1161,7 +1164,6 @@ class App extends React.PureComponent { }} headerHasFocus={this.state.headerHasFocus} onFocus={this.handleFocus} - onBlur={this.handleBlur} > {clean === false && this.showDrawerButtons() && ( {useNewInfoclick === false && this.renderInfoclickWindow()} {useNewInfoclick && ( diff --git a/apps/client/src/components/Search/Search.js b/apps/client/src/components/Search/Search.js index e5bca58ef..a874077bc 100644 --- a/apps/client/src/components/Search/Search.js +++ b/apps/client/src/components/Search/Search.js @@ -119,6 +119,8 @@ class Search extends React.PureComponent { this.initMapViewModel(); this.initExportHandlers(); this.bindSubscriptions(); + this.handleFocus = props.handleFocus; + this.handleBlur = props.handleBlur; } initMapViewModel = () => { @@ -1087,7 +1089,7 @@ class Search extends React.PureComponent { getArrayWithSearchWords={this.getArrayWithSearchWords} failedWFSFetchMessage={failedWFSFetchMessage} mapViewModel={this.mapViewModel} - headerHasFocus={this.state.headerHasFocus} + handleFocus={this.handleFocus} {...this.props} /> ) diff --git a/apps/client/src/components/Search/SearchBar.js b/apps/client/src/components/Search/SearchBar.js index 433b6da50..ad514250b 100644 --- a/apps/client/src/components/Search/SearchBar.js +++ b/apps/client/src/components/Search/SearchBar.js @@ -56,8 +56,6 @@ const CustomPopper = (props) => { const theme = useTheme(); const smallScreen = useMediaQuery(theme.breakpoints.down("sm")); - // Use props.headerHasFocus instead of this.props.headerHasFocus - const style = smallScreen ? { width: "100%", zIndex: props.headerHasFocus ? 1300 : 1000 } : { width: 400, zIndex: props.headerHasFocus ? 1300 : 1000 }; @@ -266,6 +264,8 @@ class SearchBar extends React.PureComponent { resultPanelCollapsed, toggleCollapseSearchResults, options, + headerHasFocus, + handleFocus, } = this.props; return ( @@ -279,6 +279,8 @@ class SearchBar extends React.PureComponent { panelCollapsed={resultPanelCollapsed} toggleCollapseSearchResults={toggleCollapseSearchResults} options={options} + headerHasFocus={headerHasFocus} + handleFocus={handleFocus} /> ); }; diff --git a/apps/client/src/components/Search/searchResults/SearchResultsContainer.js b/apps/client/src/components/Search/searchResults/SearchResultsContainer.js index 44a2026e2..22ab935cf 100644 --- a/apps/client/src/components/Search/searchResults/SearchResultsContainer.js +++ b/apps/client/src/components/Search/searchResults/SearchResultsContainer.js @@ -31,6 +31,7 @@ import SearchResultsList from "./SearchResultsList"; import SearchResultsDownloadMenu from "./SearchResultsDownloadMenu"; import ArrowBack from "@mui/icons-material/ArrowBack"; import HajkToolTip from "components/HajkToolTip"; +import { red } from "@mui/material/colors"; const StyledPaper = styled(Paper)(({ theme }) => ({ maxHeight: "80vh", @@ -1063,8 +1064,15 @@ class SearchResultsContainer extends React.PureComponent { }; render() { - const { app, getOriginBasedIcon, localObserver, panelCollapsed, options } = - this.props; + const { + app, + getOriginBasedIcon, + localObserver, + panelCollapsed, + options, + handleFocus, + handleBlur, + } = this.props; const { sumOfResults, activeFeatureCollection, @@ -1098,11 +1106,11 @@ class SearchResultsContainer extends React.PureComponent { return ( {sumOfResults === null ? null : sumOfResults === 0 ? ( - + Sökningen gav inget resultat. ) : ( - + {this.renderSearchResultsHeader()} {filterInputFieldOpen && this.renderFilterInputField()} From fd6b69a612ff734f84cb3852e78e68f793cf9b40 Mon Sep 17 00:00:00 2001 From: OlofSvahnVbg Date: Thu, 5 Sep 2024 14:15:22 +0200 Subject: [PATCH 04/10] cleanup --- apps/client/src/components/App.js | 2 +- apps/client/src/components/Search/Search.js | 3 ++- .../components/Search/searchResults/SearchResultsContainer.js | 3 +-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/client/src/components/App.js b/apps/client/src/components/App.js index a9ea18c0e..334a0adb7 100644 --- a/apps/client/src/components/App.js +++ b/apps/client/src/components/App.js @@ -921,8 +921,8 @@ class App extends React.PureComponent { map={this.appModel.getMap()} app={this} options={this.appModel.plugins.search.options} + headerHasFocus={this.state.headerHasFocus} handleFocus={this.handleFocus} - handleBlur={this.handleBlur} // FIXME: We should get config from somewhere else now when Search is part of Core /> ); diff --git a/apps/client/src/components/Search/Search.js b/apps/client/src/components/Search/Search.js index a874077bc..f5eb2fffb 100644 --- a/apps/client/src/components/Search/Search.js +++ b/apps/client/src/components/Search/Search.js @@ -119,8 +119,8 @@ class Search extends React.PureComponent { this.initMapViewModel(); this.initExportHandlers(); this.bindSubscriptions(); + this.headerHasFocus = props.headerHasFocus; this.handleFocus = props.handleFocus; - this.handleBlur = props.handleBlur; } initMapViewModel = () => { @@ -1089,6 +1089,7 @@ class Search extends React.PureComponent { getArrayWithSearchWords={this.getArrayWithSearchWords} failedWFSFetchMessage={failedWFSFetchMessage} mapViewModel={this.mapViewModel} + headerHasFocus={this.headerHasFocus} handleFocus={this.handleFocus} {...this.props} /> diff --git a/apps/client/src/components/Search/searchResults/SearchResultsContainer.js b/apps/client/src/components/Search/searchResults/SearchResultsContainer.js index 22ab935cf..2c9b6dc10 100644 --- a/apps/client/src/components/Search/searchResults/SearchResultsContainer.js +++ b/apps/client/src/components/Search/searchResults/SearchResultsContainer.js @@ -31,7 +31,6 @@ import SearchResultsList from "./SearchResultsList"; import SearchResultsDownloadMenu from "./SearchResultsDownloadMenu"; import ArrowBack from "@mui/icons-material/ArrowBack"; import HajkToolTip from "components/HajkToolTip"; -import { red } from "@mui/material/colors"; const StyledPaper = styled(Paper)(({ theme }) => ({ maxHeight: "80vh", @@ -1071,7 +1070,6 @@ class SearchResultsContainer extends React.PureComponent { panelCollapsed, options, handleFocus, - handleBlur, } = this.props; const { sumOfResults, @@ -1117,6 +1115,7 @@ class SearchResultsContainer extends React.PureComponent { {this.renderSortingMenu()} Date: Fri, 6 Sep 2024 08:07:00 +0200 Subject: [PATCH 05/10] added observer on window --- apps/client/src/components/App.js | 4 ++++ apps/client/src/components/Window.js | 3 +++ 2 files changed, 7 insertions(+) diff --git a/apps/client/src/components/App.js b/apps/client/src/components/App.js index 334a0adb7..656d62c9e 100644 --- a/apps/client/src/components/App.js +++ b/apps/client/src/components/App.js @@ -487,6 +487,9 @@ class App extends React.PureComponent { .loadPlugins(this.props.activeTools); Promise.all(promises).then(() => { + this.globalObserver.subscribe("handleBlur", () => { + this.setState({ headerHasFocus: false }); + }); // Track the page view this.globalObserver.publish("analytics.trackPageView"); @@ -698,6 +701,7 @@ class App extends React.PureComponent { // Register various global listeners. this.globalObserver.subscribe("infoClick.mapClick", (results) => { + console.log(results); this.setState({ mapClickDataResult: results, }); diff --git a/apps/client/src/components/Window.js b/apps/client/src/components/Window.js index 2ab90b62a..748c98027 100644 --- a/apps/client/src/components/Window.js +++ b/apps/client/src/components/Window.js @@ -494,6 +494,9 @@ class Window extends React.PureComponent { style={{ display: open ? "block" : "none", }} + onDragStart={(e, d) => { + this.props.globalObserver.publish("handleBlur"); + }} onDragStop={(e, d) => { const rect = this.rnd.getSelfElement().getClientRects()[0]; if (rect) { From f516a736d12d47223eea8627392e1d0b6b312996 Mon Sep 17 00:00:00 2001 From: OlofSvahnVbg Date: Fri, 6 Sep 2024 10:41:29 +0200 Subject: [PATCH 06/10] applied handleFocus to search autocomplete --- apps/client/src/components/Search/SearchBar.js | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/apps/client/src/components/Search/SearchBar.js b/apps/client/src/components/Search/SearchBar.js index ad514250b..77a53d315 100644 --- a/apps/client/src/components/Search/SearchBar.js +++ b/apps/client/src/components/Search/SearchBar.js @@ -294,6 +294,7 @@ class SearchBar extends React.PureComponent { loading, handleOnAutocompleteInputChange, handleSearchInput, + handleFocus, } = this.props; return ( + { + if (handleFocus) { + handleFocus(); + } + if (props.onClick) { + props.onClick(e); + } + }} + > {this.getOriginBasedIcon(option.origin)} From 109271aefbc41894306ece9a27310683484bd715 Mon Sep 17 00:00:00 2001 From: OlofSvahnVbg Date: Tue, 10 Sep 2024 08:26:15 +0200 Subject: [PATCH 07/10] added focushandler to buttons --- apps/client/src/components/App.js | 5 ----- apps/client/src/components/Search/SearchBar.js | 7 +++++++ 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/apps/client/src/components/App.js b/apps/client/src/components/App.js index 656d62c9e..bab35b0a0 100644 --- a/apps/client/src/components/App.js +++ b/apps/client/src/components/App.js @@ -701,7 +701,6 @@ class App extends React.PureComponent { // Register various global listeners. this.globalObserver.subscribe("infoClick.mapClick", (results) => { - console.log(results); this.setState({ mapClickDataResult: results, }); @@ -1089,14 +1088,10 @@ class App extends React.PureComponent { } handleFocus = () => { - console.log("handleFocus"); - // set headerHasFocus to true this.setState({ headerHasFocus: true }); }; handleBlur = () => { - console.log("handleBlur"); - // set headerHasFocus to false this.setState({ headerHasFocus: false }); }; diff --git a/apps/client/src/components/Search/SearchBar.js b/apps/client/src/components/Search/SearchBar.js index 77a53d315..975ca8166 100644 --- a/apps/client/src/components/Search/SearchBar.js +++ b/apps/client/src/components/Search/SearchBar.js @@ -405,6 +405,7 @@ class SearchBar extends React.PureComponent { setSearchSources, failedWFSFetchMessage, isMobile, + handleFocus, } = this.props; const disableUnderline = isMobile ? { disableUnderline: true } : null; const showFailedWFSMessage = @@ -456,6 +457,9 @@ class SearchBar extends React.PureComponent { onClick={(e) => { e.stopPropagation(); toggleCollapseSearchResults(); + if (handleFocus) { + handleFocus(); + } }} size="small" > @@ -472,6 +476,9 @@ class SearchBar extends React.PureComponent { onClick={(e) => { e.stopPropagation(); this.toggleResultsLayerVisibility(); + if (handleFocus) { + handleFocus(); + } }} size="small" > From 26c5f7d43df649f31622dacedef7c4dd6e3ffce6 Mon Sep 17 00:00:00 2001 From: OlofSvahnVbg Date: Thu, 12 Sep 2024 10:45:18 +0200 Subject: [PATCH 08/10] altered bringToFront, windows now okay overlap --- apps/client/src/components/Search/SearchBar.js | 2 ++ apps/client/src/components/Window.js | 17 ++++++++++++++++- 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/apps/client/src/components/Search/SearchBar.js b/apps/client/src/components/Search/SearchBar.js index 975ca8166..cc1addaca 100644 --- a/apps/client/src/components/Search/SearchBar.js +++ b/apps/client/src/components/Search/SearchBar.js @@ -406,6 +406,7 @@ class SearchBar extends React.PureComponent { failedWFSFetchMessage, isMobile, handleFocus, + handleBlur, } = this.props; const disableUnderline = isMobile ? { disableUnderline: true } : null; const showFailedWFSMessage = @@ -422,6 +423,7 @@ class SearchBar extends React.PureComponent { const placeholder = this.getPlaceholder(); return ( Sök i webbplatsens innehåll} variant={isMobile ? "standard" : "outlined"} diff --git a/apps/client/src/components/Window.js b/apps/client/src/components/Window.js index 748c98027..20a1bac77 100644 --- a/apps/client/src/components/Window.js +++ b/apps/client/src/components/Window.js @@ -175,6 +175,7 @@ class Window extends React.PureComponent { componentDidUpdate = (prevProps, prevState) => { if (prevProps.open === false && this.props.open === true) { + this.bringToFront(); //This is ugly but there is a timing problem further down somewhere (i suppose?). //componentDidUpdate is run before the render is actually fully completed and the DOM is ready setTimeout(() => { @@ -403,6 +404,21 @@ class Window extends React.PureComponent { }; bringToFront() { + this.props.globalObserver.publish("handleBlur"); + + const headerElement = document.getElementById("header"); + + if (headerElement) { + // Add header element to document.windows if it's not already there + if (!document.windows.some((w) => w.id === "header")) { + document.windows.push({ + id: "header", + element: headerElement, + getSelfElement: () => headerElement, + }); + } + } + document.windows .sort((a, b) => (a === this ? 1 : b === this ? -1 : 0)) .forEach((w, i) => { @@ -480,7 +496,6 @@ class Window extends React.PureComponent { } } - this.bringToFront(); return ( Date: Tue, 24 Sep 2024 10:33:08 +0200 Subject: [PATCH 09/10] removed unecessary logic in bringToFront --- apps/client/src/components/Window.js | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/apps/client/src/components/Window.js b/apps/client/src/components/Window.js index 20a1bac77..bd2bad292 100644 --- a/apps/client/src/components/Window.js +++ b/apps/client/src/components/Window.js @@ -406,19 +406,6 @@ class Window extends React.PureComponent { bringToFront() { this.props.globalObserver.publish("handleBlur"); - const headerElement = document.getElementById("header"); - - if (headerElement) { - // Add header element to document.windows if it's not already there - if (!document.windows.some((w) => w.id === "header")) { - document.windows.push({ - id: "header", - element: headerElement, - getSelfElement: () => headerElement, - }); - } - } - document.windows .sort((a, b) => (a === this ? 1 : b === this ? -1 : 0)) .forEach((w, i) => { @@ -509,9 +496,6 @@ class Window extends React.PureComponent { style={{ display: open ? "block" : "none", }} - onDragStart={(e, d) => { - this.props.globalObserver.publish("handleBlur"); - }} onDragStop={(e, d) => { const rect = this.rnd.getSelfElement().getClientRects()[0]; if (rect) { From 6f536773c80c3e20f8bd3c77fc1af23139cd3aea Mon Sep 17 00:00:00 2001 From: OlofSvahnVbg Date: Wed, 25 Sep 2024 10:32:03 +0200 Subject: [PATCH 10/10] cleanup fixes --- apps/client/src/components/App.js | 12 +++---- apps/client/src/components/Search/Search.js | 4 +-- .../client/src/components/Search/SearchBar.js | 32 ++++++++++--------- apps/client/src/components/Window.js | 8 ++--- 4 files changed, 28 insertions(+), 28 deletions(-) diff --git a/apps/client/src/components/App.js b/apps/client/src/components/App.js index bab35b0a0..d27171afd 100644 --- a/apps/client/src/components/App.js +++ b/apps/client/src/components/App.js @@ -487,7 +487,7 @@ class App extends React.PureComponent { .loadPlugins(this.props.activeTools); Promise.all(promises).then(() => { - this.globalObserver.subscribe("handleBlur", () => { + this.globalObserver.subscribe("core.handleHeaderBlur", () => { this.setState({ headerHasFocus: false }); }); // Track the page view @@ -925,7 +925,7 @@ class App extends React.PureComponent { app={this} options={this.appModel.plugins.search.options} headerHasFocus={this.state.headerHasFocus} - handleFocus={this.handleFocus} + handleHeaderFocus={this.handleHeaderFocus} // FIXME: We should get config from somewhere else now when Search is part of Core /> ); @@ -1087,11 +1087,11 @@ class App extends React.PureComponent { return this.state.drawerStatic && isOnlyOneButtonVisible ? false : true; } - handleFocus = () => { + handleHeaderFocus = () => { this.setState({ headerHasFocus: true }); }; - handleBlur = () => { + handleHeaderBlur = () => { this.setState({ headerHasFocus: false }); }; @@ -1162,7 +1162,7 @@ class App extends React.PureComponent { }, }} headerHasFocus={this.state.headerHasFocus} - onFocus={this.handleFocus} + onFocus={this.handleHeaderFocus} > {clean === false && this.showDrawerButtons() && ( {useNewInfoclick === false && this.renderInfoclickWindow()} {useNewInfoclick && ( diff --git a/apps/client/src/components/Search/Search.js b/apps/client/src/components/Search/Search.js index f5eb2fffb..098fcfb83 100644 --- a/apps/client/src/components/Search/Search.js +++ b/apps/client/src/components/Search/Search.js @@ -120,7 +120,7 @@ class Search extends React.PureComponent { this.initExportHandlers(); this.bindSubscriptions(); this.headerHasFocus = props.headerHasFocus; - this.handleFocus = props.handleFocus; + this.handleHeaderFocus = props.handleHeaderFocus; } initMapViewModel = () => { @@ -1090,7 +1090,7 @@ class Search extends React.PureComponent { failedWFSFetchMessage={failedWFSFetchMessage} mapViewModel={this.mapViewModel} headerHasFocus={this.headerHasFocus} - handleFocus={this.handleFocus} + handleHeaderFocus={this.handleHeaderFocus} {...this.props} /> ) diff --git a/apps/client/src/components/Search/SearchBar.js b/apps/client/src/components/Search/SearchBar.js index cc1addaca..584ede0bb 100644 --- a/apps/client/src/components/Search/SearchBar.js +++ b/apps/client/src/components/Search/SearchBar.js @@ -56,9 +56,11 @@ const CustomPopper = (props) => { const theme = useTheme(); const smallScreen = useMediaQuery(theme.breakpoints.down("sm")); + const headerHasFocusZIndex = props.headerhasfocus === "true" ? 1300 : 1000; + const style = smallScreen - ? { width: "100%", zIndex: props.headerHasFocus ? 1300 : 1000 } - : { width: 400, zIndex: props.headerHasFocus ? 1300 : 1000 }; + ? { width: "100%", zIndex: headerHasFocusZIndex } + : { width: 400, zIndex: headerHasFocusZIndex }; return ( ); }; @@ -294,7 +296,7 @@ class SearchBar extends React.PureComponent { loading, handleOnAutocompleteInputChange, handleSearchInput, - handleFocus, + handleHeaderFocus, } = this.props; return ( ( )} PaperComponent={CustomPaper} @@ -337,8 +339,8 @@ class SearchBar extends React.PureComponent { {...props} key={props.id} onClick={(e) => { - if (handleFocus) { - handleFocus(); + if (handleHeaderFocus) { + handleHeaderFocus(); } if (props.onClick) { props.onClick(e); @@ -405,8 +407,8 @@ class SearchBar extends React.PureComponent { setSearchSources, failedWFSFetchMessage, isMobile, - handleFocus, - handleBlur, + handleHeaderFocus, + handleHeaderBlur, } = this.props; const disableUnderline = isMobile ? { disableUnderline: true } : null; const showFailedWFSMessage = @@ -423,7 +425,7 @@ class SearchBar extends React.PureComponent { const placeholder = this.getPlaceholder(); return ( Sök i webbplatsens innehåll} variant={isMobile ? "standard" : "outlined"} @@ -459,8 +461,8 @@ class SearchBar extends React.PureComponent { onClick={(e) => { e.stopPropagation(); toggleCollapseSearchResults(); - if (handleFocus) { - handleFocus(); + if (handleHeaderFocus) { + handleHeaderFocus(); } }} size="small" @@ -478,8 +480,8 @@ class SearchBar extends React.PureComponent { onClick={(e) => { e.stopPropagation(); this.toggleResultsLayerVisibility(); - if (handleFocus) { - handleFocus(); + if (handleHeaderFocus) { + handleHeaderFocus(); } }} size="small" diff --git a/apps/client/src/components/Window.js b/apps/client/src/components/Window.js index bd2bad292..347e8bf45 100644 --- a/apps/client/src/components/Window.js +++ b/apps/client/src/components/Window.js @@ -99,11 +99,9 @@ Rnd.prototype.onDragStart = function (e, data) { return; } const boundaryRect = boundary.getBoundingClientRect(); + const headerRect = document.getElementById("header").getBoundingClientRect(); const boundaryLeft = boundaryRect.left; - const boundaryTop = - boundaryRect.top + - document.getElementById("header").getBoundingClientRect().top + - document.getElementById("header").getBoundingClientRect().height; + const boundaryTop = boundaryRect.top + headerRect.top + headerRect.height; const parentRect = parent.getBoundingClientRect(); const parentLeft = parentRect.left; const parentTop = parentRect.top; @@ -404,7 +402,7 @@ class Window extends React.PureComponent { }; bringToFront() { - this.props.globalObserver.publish("handleBlur"); + this.props.globalObserver.publish("core.handleHeaderBlur"); document.windows .sort((a, b) => (a === this ? 1 : b === this ? -1 : 0))