Merge branch 'fix/map-icons' into 'release'

pick my location icon changed with state

Pick my location in map widget is updated based on click state.

See merge request theappsmith/internal-tools-client!598

app/client/src/assets/icons/control/pick-location-initial.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.4" d="M12 8C9.79 8 8 9.79 8 12C8 14.21 9.79 16 12 16C14.21 16 16 14.21 16 12C16 9.79 14.21 8 12 8ZM20.94 11C20.48 6.83 17.17 3.52 13 3.06V1H11V3.06C6.83 3.52 3.52 6.83 3.06 11H1V13H3.06C3.52 17.17 6.83 20.48 11 20.94V23H13V20.94C17.17 20.48 20.48 17.17 20.94 13H23V11H20.94V11ZM12 19C8.13 19 5 15.87 5 12C5 8.13 8.13 5 12 5C15.87 5 19 8.13 19 12C19 15.87 15.87 19 12 19Z" fill="#333333"/>
+</svg>

app/client/src/assets/icons/control/pick-location-onclick.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 7C8.79 7 7 8.79 7 11C7 13.21 8.79 15 11 15C13.21 15 15 13.21 15 11C15 8.79 13.21 7 11 7ZM19.94 10C19.48 5.83 16.17 2.52 12 2.06V0H10V2.06C5.83 2.52 2.52 5.83 2.06 10H0V12H2.06C2.52 16.17 5.83 19.48 10 19.94V22H12V19.94C16.17 19.48 19.48 16.17 19.94 12H22V10H19.94V10ZM11 18C7.13 18 4 14.87 4 11C4 7.13 7.13 4 11 4C14.87 4 18 7.13 18 11C18 14.87 14.87 18 11 18Z" fill="#333333"/>
+</svg>

app/client/src/assets/icons/control/pick-location-selected.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 8C9.79 8 8 9.79 8 12C8 14.21 9.79 16 12 16C14.21 16 16 14.21 16 12C16 9.79 14.21 8 12 8ZM20.94 11C20.48 6.83 17.17 3.52 13 3.06V1H11V3.06C6.83 3.52 3.52 6.83 3.06 11H1V13H3.06C3.52 17.17 6.83 20.48 11 20.94V23H13V20.94C17.17 20.48 20.48 17.17 20.94 13H23V11H20.94V11ZM12 19C8.13 19 5 15.87 5 12C5 8.13 8.13 5 12 5C15.87 5 19 8.13 19 12C19 15.87 15.87 19 12 19Z" fill="#049ADA"/>
+</svg>

app/client/src/components/designSystems/appsmith/MapComponent.tsx

@@ -7,7 +7,7 @@ import {
 } from "react-google-maps";
 import SearchBox from "react-google-maps/lib/components/places/SearchBox";
 import { MarkerProps } from "widgets/MapWidget";
-import { ControlIcons } from "icons/ControlIcons";
+import PickMyLocation from "./PickMyLocation";
 import styled, { AnyStyledComponent } from "styled-components";
 
 interface MapComponentProps {
@@ -67,17 +67,10 @@ type PickMyLocationProps = {
 const PickMyLocationWrapper = styled.div<PickMyLocationProps>`
   position: absolute;
   bottom: ${props => (props.allowZoom ? 110 : 20)}px;
-  right: -95px;
+  right: -90px;
   width: 140px;
 `;
 
-const StyledPickMyLocationIcon = styled(
-  ControlIcons.PICK_MY_LOCATION_CONTROL as AnyStyledComponent,
-)`
-  position: relative;
-  cursor: pointer;
-`;
-
 const MyMapComponent = withScriptjs(
   withGoogleMap((props: any) => (
     <GoogleMap
@@ -127,14 +120,10 @@ const MyMapComponent = withScriptjs(
       ))}
       {props.enablePickLocation && (
         <PickMyLocationWrapper
-          onClick={e => {
-            props.getUserLocation();
-            e.stopPropagation();
-          }}
           title="Pick My Location"
           allowZoom={props.allowZoom}
         >
-          <StyledPickMyLocationIcon />
+          <PickMyLocation updateCenter={props.updateCenter} />
         </PickMyLocationWrapper>
       )}
     </GoogleMap>
@@ -165,17 +154,6 @@ class MapComponent extends React.Component<MapComponentProps> {
     }
   };
 
-  getUserLocation = () => {
-    if ("geolocation" in navigator) {
-      return navigator.geolocation.getCurrentPosition(data => {
-        const {
-          coords: { latitude: lat, longitude: long },
-        } = data;
-        this.props.updateCenter(lat, long);
-      });
-    }
-  };
-
   render() {
     const zoom = Math.floor(this.props.zoomLevel / 5);
     return (
@@ -189,7 +167,6 @@ class MapComponent extends React.Component<MapComponentProps> {
           zoom={zoom}
           onPlacesChanged={this.onPlacesChanged}
           onSearchBoxMounted={this.onSearchBoxMounted}
-          getUserLocation={this.getUserLocation}
         />
       </MapWrapper>
     );

app/client/src/components/designSystems/appsmith/PickMyLocation.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import { ControlIcons } from "icons/ControlIcons";
+import styled, { AnyStyledComponent } from "styled-components";
+
+const StyledPickMyLocationSelectedIcon = styled(
+  ControlIcons.PICK_MY_LOCATION_SELECTED_CONTROL as AnyStyledComponent,
+)`
+  position: relative;
+  cursor: pointer;
+  height: 28px;
+  width: 28px;
+`;
+
+const PickMyLocationIconWrapper = styled.div`
+  background: white;
+  width: 40px;
+  height: 40px;
+  border-radius: 2px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
+`;
+
+interface PickMyLocationProps {
+  updateCenter: (lat: number, long: number) => void;
+}
+
+interface PickMyLocationState {
+  clicked: boolean;
+  selected: boolean;
+}
+export default class PickMyLocation extends React.Component<
+  PickMyLocationProps,
+  PickMyLocationState
+> {
+  constructor(props: PickMyLocationProps) {
+    super(props);
+    this.state = {
+      selected: false,
+      clicked: false,
+    };
+  }
+  getUserLocation = () => {
+    if ("geolocation" in navigator) {
+      return navigator.geolocation.getCurrentPosition(data => {
+        const {
+          coords: { latitude: lat, longitude: long },
+        } = data;
+        this.setState({ selected: true });
+        this.props.updateCenter(lat, long);
+      });
+    }
+  };
+  render() {
+    return (
+      <PickMyLocationIconWrapper>
+        <StyledPickMyLocationSelectedIcon
+          color={
+            this.state.selected
+              ? "#049ADA"
+              : this.state.clicked
+              ? "#666666"
+              : "#999999"
+          }
+          onClick={() => {
+            if (!(this.state.clicked && this.state.selected)) {
+              this.setState({ clicked: true });
+              this.getUserLocation();
+            }
+          }}
+        />
+      </PickMyLocationIconWrapper>
+    );
+  }
+}

app/client/src/icons/ControlIcons.tsx

@@ -12,7 +12,7 @@ import { ReactComponent as DecreaseIcon } from "assets/icons/control/decrease.sv
 
 import { ReactComponent as DraggableIcon } from "assets/icons/control/draggable.svg";
 import { ReactComponent as CloseIcon } from "assets/icons/control/close.svg";
-import { ReactComponent as PickMyLocationIcon } from "assets/icons/control/pick-my-location.svg";
+import { ReactComponent as PickMyLocationSelectedIcon } from "assets/icons/control/pick-location-selected.svg";
 /* eslint-disable react/display-name */
 
 export const ControlIcons: {
@@ -73,9 +73,9 @@ export const ControlIcons: {
       <CloseIcon />
     </IconWrapper>
   ),
-  PICK_MY_LOCATION_CONTROL: (props: IconProps) => (
+  PICK_MY_LOCATION_SELECTED_CONTROL: (props: IconProps) => (
     <IconWrapper {...props}>
-      <PickMyLocationIcon />
+      <PickMyLocationSelectedIcon />
     </IconWrapper>
   ),
 };