Fix #2798 change configuration and make search icon clickable and con…

…figurable (#2831)
geosolutions-it · Apr 20, 2018 · 4a7696d · 4a7696d
1 parent c9cf5ca
commit 4a7696d
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 10 deletions.
diff --git a/web/client/components/mapcontrols/search/SearchBar.jsx b/web/client/components/mapcontrols/search/SearchBar.jsx
@@ -47,6 +47,8 @@ require('./searchbar.css');
  * @prop {object[]} selectedItems the items selected. Must have `text` property to display
  * @prop {boolean} autoFocusOnSelect if true, the component gets focus when items are added, or deleted but some item is still selected. Useful for continue writing after selecting an item (with nested services for instance)
  * @prop {boolean} splitTools if false, the search and reset can appear both at the same time, otherwise the search appear only with empty text, the reset if a text is entered
+ * @prop {boolean} isSearchClickable if true, the magnifying-glass uses a clickable style otherwise it doesn't. see map-search-bar.less for more info on the style.
+ Also the onClick method will be added only if this flag is true
  * @prop {boolean} loading if true, shows the loading tool
  * @prop {object} error if not null, an error icon will be display
  * @prop {object} style css style to apply to the component
@@ -73,6 +75,7 @@ class SearchBar extends React.Component {
         selectedItems: PropTypes.array,
         autoFocusOnSelect: PropTypes.bool,
         splitTools: PropTypes.bool,
+        isSearchClickable: PropTypes.bool,
         loading: PropTypes.bool,
         error: PropTypes.object,
         style: PropTypes.object,
@@ -97,6 +100,7 @@ class SearchBar extends React.Component {
         blurResetDelay: 300,
         autoFocusOnSelect: true,
         splitTools: true,
+        isSearchClickable: false,
         hideOnBlur: true,
         typeAhead: true,
         searchText: ""
@@ -166,8 +170,14 @@ class SearchBar extends React.Component {
     };
 
     renderAddonAfter = () => {
+        const searchProps = assign({}, {
+            key: "searchbar_search_glyphicon",
+            glyph: this.props.searchIcon,
+            className: this.props.isSearchClickable ? "magnifying-glass clickable" : "magnifying-glass"},
+            this.props.isSearchClickable ? { onClick: this.search } : {});
+        const search = <Glyphicon {...searchProps}/>;
+
         const remove = <Glyphicon className="searchclear" glyph={this.props.removeIcon} onClick={this.clearSearch} key="searchbar_remove_glyphicon"/>;
-        const search = <Glyphicon className="magnifying-glass" glyph={this.props.searchIcon} key="searchbar_search_glyphicon" onClick={this.search}/>;
         const showRemove = this.props.searchText !== "" || this.props.selectedItems && this.props.selectedItems.length > 0;
         let addonAfter = showRemove ? (this.props.splitTools ? [remove] : [remove, search]) : [search];
         if (this.props.loading) {

diff --git a/web/client/localConfig.json b/web/client/localConfig.json
@@ -166,7 +166,7 @@
             }, {
                 "name": "Search",
                 "cfg": {
-                    "withToggle": ["max-width: 768px", "min-width: 768px"]
+                  "withToggle": ["max-width: 768px", "min-width: 768px"]
                 }
             }, {
                 "name": "Toolbar",
@@ -311,7 +311,7 @@
             }, {
                 "name": "Search",
                 "cfg": {
-                    "withToggle": ["max-width: 768px", "min-width: 768px"]
+                  "withToggle": ["max-width: 768px", "min-width: 768px"]
                 }
             }, {
                 "name": "Toolbar",
@@ -440,7 +440,7 @@
             }, {
                 "name": "Search",
                 "cfg": {
-                    "withToggle": ["max-width: 768px", "min-width: 768px"]
+                  "withToggle": ["max-width: 768px", "min-width: 768px"]
                 }
             }, {
                 "name": "Toolbar",
@@ -510,6 +510,6 @@
             "containerPosition": "columns"
           }
         }, "Dashboard"],
-        "manager": ["Header", "Redirect", "Manager", "Home", "UserManager", "GroupManager", "Footer"]
+        "manager": ["Header", "Redirect", "UserManager", "GroupManager", "Home", "Manager", "Footer"]
     }
 }
diff --git a/web/client/plugins/MapSearch.jsx b/web/client/plugins/MapSearch.jsx
@@ -27,6 +27,8 @@ const SearchBar = connect((state) => ({
     hideOnBlur: false,
     placeholderMsgId: "maps.search",
     typeAhead: false,
+    splitTools: false,
+    isSearchClickable: true,
     start: state && state.maps && state.maps.start,
     limit: state && state.maps && state.maps.limit,
     searchText: state.maps && state.maps.searchText !== '*' && state.maps.searchText || ""

diff --git a/web/client/plugins/Search.jsx b/web/client/plugins/Search.jsx
@@ -156,6 +156,8 @@ const SearchPlugin = connect((state) => ({
 }))(
 class extends React.Component {
     static propTypes = {
+        splitTools: PropTypes.bool,
+        isSearchClickable: PropTypes.bool,
         fitResultsToMapSize: PropTypes.bool,
         searchOptions: PropTypes.object,
         resultsStyle: PropTypes.object,
@@ -171,6 +173,8 @@ class extends React.Component {
         searchOptions: {
             services: [{type: "nominatim"}]
         },
+        isSearchClickable: false,
+        splitTools: true,
         resultsStyle: {
             color: '#3388ff',
             weight: 4,

diff --git a/web/client/plugins/manager/GroupManager.jsx b/web/client/plugins/manager/GroupManager.jsx
@@ -26,6 +26,8 @@ class GroupManager extends React.Component {
         hideOnBlur: PropTypes.bool,
         placeholderMsgId: PropTypes.string,
         typeAhead: PropTypes.bool,
+        splitTools: PropTypes.bool,
+        isSearchClickable: PropTypes.bool,
         searchText: PropTypes.string,
         onSearch: PropTypes.func,
         onSearchReset: PropTypes.func,
@@ -37,6 +39,8 @@ class GroupManager extends React.Component {
     static defaultProps = {
         className: "user-search",
         hideOnBlur: false,
+        isSearchClickable: true,
+        splitTools: false,
         placeholderMsgId: "usergroups.searchGroups",
         typeAhead: false,
         searchText: "",
@@ -56,6 +60,8 @@ class GroupManager extends React.Component {
         return (<div>
             <SearchBar
                 className={this.props.className}
+                splitTools={this.props.splitTools}
+                isSearchClickable={this.props.isSearchClickable}
                 hideOnBlur={this.props.hideOnBlur}
                 placeholderMsgId ={this.props.placeholderMsgId}
                 onSearch={this.props.onSearch}
@@ -91,10 +97,11 @@ module.exports = {
             onNewGroup: editGroup.bind(null, {}),
             onSearchTextChange: groupSearchTextChanged,
             onSearch: getUserGroups
-        }, (stateProps, dispatchProps) => {
+        }, (stateProps, dispatchProps, ownProps) => {
             return {
                 ...stateProps,
                 ...dispatchProps,
+                ...ownProps,
                 onSearchReset: (text) => {
                     let limit = stateProps.limit;
                     let searchText = text && text !== "" ? "*" + text + "*" : "*";

diff --git a/web/client/plugins/manager/UserManager.jsx b/web/client/plugins/manager/UserManager.jsx
@@ -22,6 +22,8 @@ const {trim} = require('lodash');
 class UserManager extends React.Component {
     static propTypes = {
         onNewUser: PropTypes.func,
+        splitTools: PropTypes.bool,
+        isSearchClickable: PropTypes.bool,
         className: PropTypes.string,
         hideOnBlur: PropTypes.bool,
         placeholderMsgId: PropTypes.string,
@@ -37,6 +39,8 @@ class UserManager extends React.Component {
     static defaultProps = {
         className: "user-search",
         hideOnBlur: false,
+        isSearchClickable: true,
+        splitTools: false,
         placeholderMsgId: "users.searchUsers",
         typeAhead: false,
         searchText: "",
@@ -56,6 +60,8 @@ class UserManager extends React.Component {
         return (<div>
                 <SearchBar
                     className={this.props.className}
+                    splitTools={this.props.splitTools}
+                    isSearchClickable={this.props.isSearchClickable}
                     hideOnBlur={this.props.hideOnBlur}
                     placeholderMsgId ={this.props.placeholderMsgId}
                     onSearch={this.props.onSearch}
@@ -90,10 +96,11 @@ module.exports = {
                 onNewUser: editUser.bind(null, {role: "USER", "enabled": true}),
                 onSearchTextChange: usersSearchTextChanged,
                 onSearch: getUsers
-            }, (stateProps, dispatchProps) => {
+            }, (stateProps, dispatchProps, ownProps) => {
                 return {
                     ...stateProps,
                     ...dispatchProps,
+                    ...ownProps,
                     onSearchReset: (text) => {
                         let limit = stateProps.limit;
                         let searchText = text && text !== "" ? "*" + text + "*" : "*";

diff --git a/web/client/themes/default/less/map-search-bar.less b/web/client/themes/default/less/map-search-bar.less
@@ -14,15 +14,15 @@ div.MapSearchBar .input-group-addon {
 	background-color: @ms2-color-background;
 	border: 0;
 	border-radius: 0;
-	font-size: @icon-size;
+	font-size: @grid-icon-size;
 }
 
-.MapSearchBar .input-group-addon .magnifying-glass:hover,
+.MapSearchBar .input-group-addon .magnifying-glass:hover.clickable,
 .MapSearchBar .input-group-addon .searchclear:hover {
     opacity: 0.75
 }
 
-.MapSearchBar .input-group-addon .magnifying-glass,
+.MapSearchBar .input-group-addon .magnifying-glass.clickable,
 .MapSearchBar .input-group-addon .searchclear,
 .MapSearchBar .input-group-addon .searcherror {
     margin-right: 4px;