From 593454f12aa15376e9211e40f4a9afc437c644c2 Mon Sep 17 00:00:00 2001 From: Matteo Velludini Date: Thu, 19 Apr 2018 12:56:28 +0200 Subject: [PATCH 1/3] Fix #2798 change configuration and make search icon clickable and configurable --- .../mapcontrols/search/SearchBar.jsx | 5 +++- web/client/localConfig.json | 23 ++++++++++++++++--- web/client/plugins/manager/GroupManager.jsx | 7 +++++- web/client/plugins/manager/UserManager.jsx | 7 +++++- .../themes/default/less/map-search-bar.less | 6 ++--- 5 files changed, 39 insertions(+), 9 deletions(-) diff --git a/web/client/components/mapcontrols/search/SearchBar.jsx b/web/client/components/mapcontrols/search/SearchBar.jsx index f39a5e43ec..16b7622cb5 100644 --- a/web/client/components/mapcontrols/search/SearchBar.jsx +++ b/web/client/components/mapcontrols/search/SearchBar.jsx @@ -47,6 +47,7 @@ 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 * @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 +74,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 +99,7 @@ class SearchBar extends React.Component { blurResetDelay: 300, autoFocusOnSelect: true, splitTools: true, + isSearchClickable: true, hideOnBlur: true, typeAhead: true, searchText: "" @@ -167,7 +170,7 @@ class SearchBar extends React.Component { renderAddonAfter = () => { const remove = ; - const search = ; + const 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 index d0d1781dac..b715f60558 100644 --- a/web/client/localConfig.json +++ b/web/client/localConfig.json @@ -299,7 +299,8 @@ }, { "name": "Search", "cfg": { - "withToggle": ["max-width: 768px", "min-width: 768px"] + "isSearchClickable": false, + "withToggle": ["max-width: 768px", "min-width: 768px"] } }, { "name": "Toolbar", @@ -455,7 +456,13 @@ "className": "navbar shadow navbar-home" } }, "ManagerMenu", "Login", "Language", "Attribution", "ScrollTop", "Notifications"], - "maps": ["Header", "Fork", "MapSearch", "HomeDescription", "ThemeSwitcher", "CreateNewMap", + "maps": ["Header", "Fork", + { + "name": "MapSearch", + "cfg": { + "splitTools" : false + } + }, "HomeDescription", "ThemeSwitcher", "CreateNewMap", { "name": "Maps", "cfg": { @@ -494,6 +501,16 @@ "containerPosition": "columns" } }, "Dashboard"], - "manager": ["Header", "Redirect", "Manager", "Home", "UserManager", "GroupManager", "Footer"] + "manager": ["Header", "Redirect", { + "name": "UserManager", + "cfg": { + "splitTools" : false + } + },{ + "name": "GroupManager", + "cfg": { + "splitTools" : false + } + }, "Home", "Manager", "Footer"] } } diff --git a/web/client/plugins/manager/GroupManager.jsx b/web/client/plugins/manager/GroupManager.jsx index a8ec2d1f4e..3652b2ca3f 100644 --- 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, @@ -56,6 +58,8 @@ class GroupManager extends React.Component { return (
{ + }, (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 index d0be4d3072..02c5a1b570 100644 --- 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, @@ -56,6 +58,8 @@ class UserManager extends React.Component { return (
{ + }, (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 index 84cf7a99e3..3b27fd7034 100644 --- 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; From fded8f4f1cf691eda4867432d3a719cdfb2aa393 Mon Sep 17 00:00:00 2001 From: Matteo Velludini Date: Fri, 20 Apr 2018 10:13:18 +0200 Subject: [PATCH 2/3] change the props of magnifying-glass glyphicon --- .../components/mapcontrols/search/SearchBar.jsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/web/client/components/mapcontrols/search/SearchBar.jsx b/web/client/components/mapcontrols/search/SearchBar.jsx index 16b7622cb5..2b026efc6b 100644 --- a/web/client/components/mapcontrols/search/SearchBar.jsx +++ b/web/client/components/mapcontrols/search/SearchBar.jsx @@ -47,7 +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 + * @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 @@ -169,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 = ; + const remove = ; - const 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) { From 6187467fe868e48549ad8c66b97a9255f777b784 Mon Sep 17 00:00:00 2001 From: Matteo Velludini Date: Fri, 20 Apr 2018 10:54:54 +0200 Subject: [PATCH 3/3] clean up config file and set up correct defaults --- .../mapcontrols/search/SearchBar.jsx | 2 +- web/client/localConfig.json | 25 +++---------------- web/client/plugins/MapSearch.jsx | 2 ++ web/client/plugins/Search.jsx | 4 +++ web/client/plugins/manager/GroupManager.jsx | 2 ++ web/client/plugins/manager/UserManager.jsx | 2 ++ 6 files changed, 15 insertions(+), 22 deletions(-) diff --git a/web/client/components/mapcontrols/search/SearchBar.jsx b/web/client/components/mapcontrols/search/SearchBar.jsx index 2b026efc6b..2fddc78cd7 100644 --- a/web/client/components/mapcontrols/search/SearchBar.jsx +++ b/web/client/components/mapcontrols/search/SearchBar.jsx @@ -100,7 +100,7 @@ class SearchBar extends React.Component { blurResetDelay: 300, autoFocusOnSelect: true, splitTools: true, - isSearchClickable: true, + isSearchClickable: false, hideOnBlur: true, typeAhead: true, searchText: "" diff --git a/web/client/localConfig.json b/web/client/localConfig.json index b715f60558..269069ec5d 100644 --- a/web/client/localConfig.json +++ b/web/client/localConfig.json @@ -158,7 +158,7 @@ }, { "name": "Search", "cfg": { - "withToggle": ["max-width: 768px", "min-width: 768px"] + "withToggle": ["max-width: 768px", "min-width: 768px"] } }, { "name": "Toolbar", @@ -299,7 +299,6 @@ }, { "name": "Search", "cfg": { - "isSearchClickable": false, "withToggle": ["max-width: 768px", "min-width: 768px"] } }, { @@ -425,7 +424,7 @@ }, { "name": "Search", "cfg": { - "withToggle": ["max-width: 768px", "min-width: 768px"] + "withToggle": ["max-width: 768px", "min-width: 768px"] } }, { "name": "Toolbar", @@ -456,13 +455,7 @@ "className": "navbar shadow navbar-home" } }, "ManagerMenu", "Login", "Language", "Attribution", "ScrollTop", "Notifications"], - "maps": ["Header", "Fork", - { - "name": "MapSearch", - "cfg": { - "splitTools" : false - } - }, "HomeDescription", "ThemeSwitcher", "CreateNewMap", + "maps": ["Header", "Fork", "MapSearch", "HomeDescription", "ThemeSwitcher", "CreateNewMap", { "name": "Maps", "cfg": { @@ -501,16 +494,6 @@ "containerPosition": "columns" } }, "Dashboard"], - "manager": ["Header", "Redirect", { - "name": "UserManager", - "cfg": { - "splitTools" : false - } - },{ - "name": "GroupManager", - "cfg": { - "splitTools" : false - } - }, "Home", "Manager", "Footer"] + "manager": ["Header", "Redirect", "UserManager", "GroupManager", "Home", "Manager", "Footer"] } } diff --git a/web/client/plugins/MapSearch.jsx b/web/client/plugins/MapSearch.jsx index 6be65bd211..eaa3b03103 100644 --- 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 index e81d57810a..ff1b2c48ad 100644 --- 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 index 3652b2ca3f..521746f069 100644 --- a/web/client/plugins/manager/GroupManager.jsx +++ b/web/client/plugins/manager/GroupManager.jsx @@ -39,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: "", diff --git a/web/client/plugins/manager/UserManager.jsx b/web/client/plugins/manager/UserManager.jsx index 02c5a1b570..407d158ce2 100644 --- a/web/client/plugins/manager/UserManager.jsx +++ b/web/client/plugins/manager/UserManager.jsx @@ -39,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: "",