Search tool changes to format menu , search icon always visible (#3670)

geosolutions-it · Apr 4, 2019 · 6cc4248 · 6cc4248
1 parent 167515a
commit 6cc4248
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 28 deletions.
diff --git a/web/client/components/mapcontrols/search/SearchBar.jsx b/web/client/components/mapcontrols/search/SearchBar.jsx
@@ -312,9 +312,12 @@ class SearchBar extends React.Component {
                             className: "square-button-md no-border " + (this.props.isSearchClickable || activeTool !== "addressSearch" ? "magnifying-glass clickable" : "magnifying-glass"),
                             bsStyle: "default",
                             pullRight: true,
-                            visible: activeTool === "addressSearch" && (!(this.props.searchText !== "" || this.props.selectedItems && this.props.selectedItems.length > 0) || !this.props.splitTools),
+                            visible: activeTool === "addressSearch" && (!(this.props.searchText !== "" || this.props.selectedItems && this.props.selectedItems.length > 0) || !this.props.splitTools) || activeTool === "coordinatesSearch",
                             onClick: () => {
-                                if (this.props.isSearchClickable || activeTool !== "addressSearch") {
+                                if (activeTool === "coordinatesSearch" && this.areValidCoordinates()) {
+                                    this.zoomToPoint();
+                                }
+                                if (this.props.isSearchClickable) {
                                     this.search();
                                 }
                             }
@@ -328,27 +331,6 @@ class SearchBar extends React.Component {
                             visible: !!this.props.error,
                             onClick: this.clearSearch
                         }, {
-                        buttonConfig: {
-                            title: <Glyphicon glyph="cog"/>,
-                            tooltipId: "search.changeSearchInputField",
-                            tooltipPosition: "bottom",
-                            className: "square-button-md no-border",
-                            pullRight: true
-                        },
-                        menuOptions: [
-                            {
-                                active: this.props.format === "decimal",
-                                onClick: () => { this.props.onChangeFormat("decimal"); },
-                                text: <Message msgId="search.decimal"/>
-                            }, {
-                                active: this.props.format === "aeronautical",
-                                onClick: () => { this.props.onChangeFormat("aeronautical"); },
-                                text: <Message msgId="search.aeronautical"/>
-                            }
-                        ],
-                        visible: this.props.showOptions && activeTool === "coordinatesSearch",
-                        Element: DropdownToolbarOptions
-                    }, {
                         buttonConfig: {
                             title: <Glyphicon glyph="menu-hamburger"/>,
                             tooltipId: "search.changeSearchInputField",
@@ -371,6 +353,37 @@ class SearchBar extends React.Component {
                         Element: DropdownToolbarOptions
                     }]}
                     />
+                {
+                    this.props.showOptions && activeTool === "coordinatesSearch" ? <Toolbar
+                    btnGroupProps = {{ className: 'btn-group-menu-options-format'}}
+                    transitionProps = {null}
+                    btnDefaultProps = {{ className: 'square-button-md', bsStyle: 'primary' }}
+                    buttons={[
+                        {
+                        buttonConfig: {
+                            title: <Glyphicon glyph="cog"/>,
+                            tooltipId: "search.changeSearchInputField",
+                            tooltipPosition: "bottom",
+                            className: "square-button-md no-border",
+                            pullRight: true
+                        },
+                        menuOptions: [
+                            {
+                                active: this.props.format === "decimal",
+                                onClick: () => { this.props.onChangeFormat("decimal"); },
+                                text: <Message msgId="search.decimal"/>
+                            }, {
+                                active: this.props.format === "aeronautical",
+                                onClick: () => { this.props.onChangeFormat("aeronautical"); },
+                                text: <Message msgId="search.aeronautical"/>
+                            }
+                        ],
+                        visible: this.props.showOptions && activeTool === "coordinatesSearch",
+                        Element: DropdownToolbarOptions
+                    }
+                    ]}
+                    /> : null
+                }
             </span>);
     }
 

diff --git a/web/client/components/mapcontrols/search/__tests__/SearchBar-test.jsx b/web/client/components/mapcontrols/search/__tests__/SearchBar-test.jsx
@@ -240,24 +240,24 @@ describe("test the SearchBar", () => {
         expect(reset).toExist();
         expect(search.length).toBe(1);
     });
-    it('test zoomToPoint and reset, with decimal, with reset', () => {
+    it('test zoomToPoint, with search, with decimal, with reset', () => {
         const tb = ReactDOM.render(<SearchBar format="decimal" coordinate={{"lat": 2, "lon": 2}} activeSearchTool="coordinatesSearch" showOptions searchText={"va"} delay={0} typeAhead={false} />, document.getElementById("container"));
         let reset = TestUtils.scryRenderedDOMComponentsWithClass(tb, "glyphicon-1-close");
         let search = TestUtils.scryRenderedDOMComponentsWithClass(tb, "glyphicon-search");
         let cog = TestUtils.scryRenderedDOMComponentsWithClass(tb, "glyphicon-cog");
         expect(reset.length).toBe(1);
-        expect(search.length).toBe(1);
+        expect(search.length).toBe(2);
         expect(cog.length).toBe(2);
     });
 
-    it('test zoomToPoint and reset, with aeronautical', () => {
+    it('test zoomToPoint, with search, with aeronautical, with reset', () => {
         const tb = ReactDOM.render(<SearchBar format="aeronautical" activeSearchTool="coordinatesSearch" showOptions searchText={"va"} delay={0} typeAhead={false} />, document.getElementById("container"));
         let reset = TestUtils.scryRenderedDOMComponentsWithClass(tb, "glyphicon-1-close");
         let search = TestUtils.scryRenderedDOMComponentsWithClass(tb, "glyphicon-search");
         let cog = TestUtils.scryRenderedDOMComponentsWithClass(tb, "glyphicon-cog");
         let inputs = TestUtils.scryRenderedDOMComponentsWithTag(tb, "input");
         expect(reset.length).toBe(0);
-        expect(search.length).toBe(1);
+        expect(search.length).toBe(2);
         expect(cog.length).toBe(2);
         expect(inputs.length).toBe(6);
     });

diff --git a/web/client/themes/default/less/map-search-bar.less b/web/client/themes/default/less/map-search-bar.less
@@ -162,7 +162,7 @@ div.MapSearchBar .input-group-addon {
             background-color: @dropdown-link-active-bg;
           }
         }
-        .btn-group-menu-options {
+        .btn-group-menu-options, .btn-group-menu-options-format {
             position: absolute;
             top: 13px;
             right: 5px;
@@ -179,5 +179,9 @@ div.MapSearchBar .input-group-addon {
                 }
             }
         }
+        .btn-group-menu-options-format {
+            top: 60px;
+
+        }
     }
 }