From 40add341d83ce8ccb2a2acdfc0d7374123774d21 Mon Sep 17 00:00:00 2001 From: chizhovm Date: Thu, 9 Jul 2020 11:47:24 +0300 Subject: [PATCH 1/3] feat: set checked marker orange, delete unnecessary code in app.js from onMarkerClick() --- src/components/App.js | 16 ++-------------- src/components/Map.jsx | 4 ++-- src/components/styling/Stylesheets.js | 1 + src/components/styling/Variables.js | 3 +++ src/components/styling/setPinActive.css | 13 +++++++++++++ 5 files changed, 21 insertions(+), 16 deletions(-) create mode 100644 src/components/styling/setPinActive.css diff --git a/src/components/App.js b/src/components/App.js index 821cb63f..63602852 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -166,21 +166,9 @@ class Main extends Component { return dispatch(Actions.hideLeftPanelOnMobile()); } }} - // onMarkerClick={ (id) => { - // - // - // dispatch(Actions.setCurrentEntry(id, null)); - // return dispatch(Actions.showLeftPanel()); - // - // }} onMarkerClick={ (id) => { - - let result= confirm ("Are you sure to go away? All changes will be lost") - if (result) { - dispatch(Actions.setCurrentEntry(id, null)); - return dispatch(Actions.showLeftPanel()); - } - + dispatch(Actions.setCurrentEntry(id, null)); + return dispatch(Actions.showLeftPanel()); }} onMoveend={ coordinates => { return dispatch(Actions.onMoveend(coordinates, map.center)); }} onZoomend={ coordinates => { return dispatch(Actions.onZoomend(coordinates, map.zoom)); }} diff --git a/src/components/Map.jsx b/src/components/Map.jsx index 5e2905d8..78a9020a 100644 --- a/src/components/Map.jsx +++ b/src/components/Map.jsx @@ -132,7 +132,7 @@ class KVMMap extends Component { if (highlight.indexOf(e.id) == 0 || highlight.length == 0) opacity = 1; if (marker) opacity = 0.3; - + const fillColor = e.id === highlight[0] ? STYLE.orange : this.getCategoryColorById(e.categories[0]); markers.push( { @@ -144,7 +144,7 @@ class KVMMap extends Component { radius={9} color={'#fff'} weight={0.7} - fillColor={this.getCategoryColorById(e.categories[0])} + fillColor={fillColor} fillOpacity={opacity} > diff --git a/src/components/styling/Stylesheets.js b/src/components/styling/Stylesheets.js index 189e94dd..60dd1dc1 100644 --- a/src/components/styling/Stylesheets.js +++ b/src/components/styling/Stylesheets.js @@ -7,3 +7,4 @@ import "purecss/build/grids-responsive.css" import "purecss/build/menus.css" import "purecss/build/forms.css" import "purecss/build/buttons.css" +import "./setPinActive.css" diff --git a/src/components/styling/Variables.js b/src/components/styling/Variables.js index 9779cb64..5aa77888 100644 --- a/src/components/styling/Variables.js +++ b/src/components/styling/Variables.js @@ -2,6 +2,7 @@ const grayBlue = "rgb(100, 122, 133)"; const blue = "rgb(0, 153, 173)"; const green = "rgb(151, 191, 13 )"; const yellow = "rgb(255, 221, 0 )"; +const orange = "rgb(252, 192, 30)"; const pink = "rgb(229, 98, 146)"; const berry = "rgb(170, 56, 108)"; const coal = "rgb(26, 26, 26)"; @@ -30,7 +31,9 @@ module.exports = { grayBlue, blue, green, + gray, yellow, + orange, pink, berry, coal, diff --git a/src/components/styling/setPinActive.css b/src/components/styling/setPinActive.css new file mode 100644 index 00000000..13781e37 --- /dev/null +++ b/src/components/styling/setPinActive.css @@ -0,0 +1,13 @@ +.leaflet-interactive:focus { + filter: hue-rotate(333deg); + fill: #fcc01e; + color: black; +} + +.initiative { + fill: rgb(174, 199, 34); +} + +.initiative:hover { + color: black; +} From 0b26179113f6262c361623600a6c3ff4a994b570 Mon Sep 17 00:00:00 2001 From: chizhovm Date: Thu, 9 Jul 2020 12:14:06 +0300 Subject: [PATCH 2/3] delete unnecessary code from setPinActive.css --- src/components/styling/setPinActive.css | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/components/styling/setPinActive.css b/src/components/styling/setPinActive.css index 13781e37..1541c42a 100644 --- a/src/components/styling/setPinActive.css +++ b/src/components/styling/setPinActive.css @@ -3,11 +3,3 @@ fill: #fcc01e; color: black; } - -.initiative { - fill: rgb(174, 199, 34); -} - -.initiative:hover { - color: black; -} From 6be31282a44c6a33f2c3276d4ee0e2a604bccd18 Mon Sep 17 00:00:00 2001 From: chizhovm Date: Fri, 17 Jul 2020 13:42:38 +0300 Subject: [PATCH 3/3] edit: reset function onMarkerClick in App.js --- src/components/App.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/components/App.js b/src/components/App.js index 63602852..8e61e71d 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -166,10 +166,20 @@ class Main extends Component { return dispatch(Actions.hideLeftPanelOnMobile()); } }} + + // onMarkerClick={ (id) => { + // dispatch(Actions.setCurrentEntry(id, null)); + // return dispatch(Actions.showLeftPanel()); + // }} onMarkerClick={ (id) => { dispatch(Actions.setCurrentEntry(id, null)); - return dispatch(Actions.showLeftPanel()); + let result= confirm ("Are you sure to go away? All changes will be lost"); + if (result) { + dispatch(Actions.setCurrentEntry(id, null)); + return dispatch(Actions.showLeftPanel()); + } }} + onMoveend={ coordinates => { return dispatch(Actions.onMoveend(coordinates, map.center)); }} onZoomend={ coordinates => { return dispatch(Actions.onZoomend(coordinates, map.zoom)); }} onLocate={ () => { return dispatch(Actions.showOwnPosition()); }}