Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Abhinav Jha 2020-05-20 11:57:02 +00:00
commit fc06804214
6 changed files with 91 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/client/src/assets/icons/control/pick-location-initial.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 509 B

3
app/client/src/assets/icons/control/pick-location-onclick.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 495 B

3
app/client/src/assets/icons/control/pick-location-selected.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 495 B

29
app/client/src/components/designSystems/appsmith/MapComponent.tsx
View File

@ -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>
);

76
app/client/src/components/designSystems/appsmith/PickMyLocation.tsx Normal file
View File

@ -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>
);
}
}

6
app/client/src/icons/ControlIcons.tsx
View File

@ -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>
),
};