Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Remove the location type dropdown from the location picker #7486

Merged
merged 1 commit into from
Jan 10, 2022
Merged

Remove the location type dropdown from the location picker #7486

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion res/css/views/location/_LocationPicker.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ limitations under the License.
}

#mx_LocationPicker_map {
height: 366px;
height: 408px;
border-radius: 8px 8px 0px 0px;
}

Expand Down
7 changes: 1 addition & 6 deletions src/components/views/location/LocationButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,18 +19,13 @@ import { Room } from "matrix-js-sdk/src/models/room";
import classNames from 'classnames';

import { _t } from '../../../languageHandler';
import LocationShareType from "./LocationShareType";
import LocationPicker from './LocationPicker';
import { CollapsibleButton, ICollapsibleButtonProps } from '../rooms/CollapsibleButton';
import ContextMenu, { aboveLeftOf, useContextMenu, AboveLeftOf } from "../../structures/ContextMenu";

interface IProps extends Pick<ICollapsibleButtonProps, "narrowMode"> {
room: Room;
shareLocation: (
uri: string,
ts: number,
type: LocationShareType,
) => boolean;
shareLocation: (uri: string, ts: number) => boolean;
menuPosition: AboveLeftOf;
narrowMode: boolean;
}
Expand Down
155 changes: 11 additions & 144 deletions src/components/views/location/LocationPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,100 +20,37 @@ import { logger } from "matrix-js-sdk/src/logger";

import SdkConfig from '../../../SdkConfig';
import DialogButtons from "../elements/DialogButtons";
import Dropdown from "../elements/Dropdown";
import LocationShareType from "./LocationShareType";
import { _t } from '../../../languageHandler';
import { replaceableComponent } from "../../../utils/replaceableComponent";

interface IDropdownProps {
value: LocationShareType;
label: string;
width?: number;
onChange(type: LocationShareType): void;
}

const LocationShareTypeDropdown = ({
value,
label,
width,
onChange,
}: IDropdownProps) => {
const options = [
<div key={LocationShareType.Custom}>{
_t("Share custom location")
}</div>,
<div key={LocationShareType.OnceOff}>{
_t("Share my current location as a once off")
}</div>,
// <div key={LocationShareType.OneMin}>{
// _t("Share my current location for one minute")
// }</div>,
// <div key={LocationShareType.FiveMins}>{
// _t("Share my current location for five minutes")
// }</div>,
// <div key={LocationShareType.ThirtyMins}>{
// _t("Share my current location for thirty minutes")
// }</div>,
// <div key={LocationShareType.OneHour}>{
// _t("Share my current location for one hour")
// }</div>,
// <div key={LocationShareType.ThreeHours}>{
// _t("Share my current location for three hours")
// }</div>,
// <div key={LocationShareType.SixHours}>{
// _t("Share my current location for six hours")
// }</div>,
// <div key={LocationShareType.OneDay}>{
// _t("Share my current location for one day")
// }</div>,
// <div key={LocationShareType.Forever}>{
// _t("Share my current location until I disable it")
// }</div>,
];

return <Dropdown
id="mx_LocationShareTypeDropdown"
className="mx_LocationShareTypeDropdown"
onOptionChange={(key: string) => {
onChange(LocationShareType[LocationShareType[parseInt(key)]]);
}}
menuWidth={width}
label={label}
value={value.toString()}
>
{ options }
</Dropdown>;
};

interface IProps {
onChoose(
uri: string,
ts: number,
type: LocationShareType,
): boolean;
onChoose(uri: string, ts: number): boolean;
onFinished(ev?: SyntheticEvent): void;
}

interface IState {
type: LocationShareType;
position?: GeolocationPosition;
manualPosition?: GeolocationPosition;
error: Error;
}

/*
* An older version of this file allowed manually picking a location on
* the map to share, instead of sharing your current location.
* Since the current designs do not cover this case, it was removed from
* the code but you should be able to find it in the git history by
* searching for the commit that remove manualPosition from this file.
*/
Comment on lines +36 to +42
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this intending to document away any remaining oddities that were left behind (potentially) unintentionally? Not really sure what the comment is trying to inform the reader of.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's intended to help someone in the future resurrect the code, when we do want that functionality.


@replaceableComponent("views.location.LocationPicker")
class LocationPicker extends React.Component<IProps, IState> {
private map: maplibregl.Map;
private marker: maplibregl.Marker;
private geolocate: maplibregl.GeolocateControl;

constructor(props: IProps) {
super(props);

this.state = {
type: LocationShareType.OnceOff,
position: undefined,
manualPosition: undefined,
error: undefined,
};
}
Expand Down Expand Up @@ -150,53 +87,13 @@ class LocationPicker extends React.Component<IProps, IState> {
this.geolocate.trigger();
});

this.map.on('click', (e) => {
this.addMarker(e.lngLat);
this.storeManualPosition(e.lngLat);
this.setState({ type: LocationShareType.Custom });
});

this.geolocate.on('geolocate', this.onGeolocate);
} catch (e) {
logger.error("Failed to render map", e.error);
this.setState({ error: e.error });
}
}

private addMarker(lngLat: maplibregl.LngLat): void {
if (this.marker) return;
this.marker = new maplibregl.Marker({
draggable: true,
})
.setLngLat(lngLat)
.addTo(this.map)
.on('dragend', () => {
this.storeManualPosition(this.marker.getLngLat());
});
}

private removeMarker(): void {
if (!this.marker) return;
this.marker.remove();
this.marker = undefined;
}

private storeManualPosition(lngLat: maplibregl.LngLat): void {
const manualPosition: GeolocationPosition = {
coords: {
longitude: lngLat.lng,
latitude: lngLat.lat,
altitude: undefined,
accuracy: undefined,
altitudeAccuracy: undefined,
heading: undefined,
speed: undefined,
},
timestamp: Date.now(),
};
this.setState({ manualPosition });
}

componentWillUnmount() {
this.geolocate?.off('geolocate', this.onGeolocate);
}
Expand All @@ -206,35 +103,15 @@ class LocationPicker extends React.Component<IProps, IState> {
};

private onOk = () => {
const position = (this.state.type == LocationShareType.Custom) ?
this.state.manualPosition : this.state.position;
const position = this.state.position;

this.props.onChoose(
position ? getGeoUri(position) : undefined,
position ? position.timestamp : undefined,
this.state.type,
);
this.props.onFinished();
};

private onTypeChange= (type: LocationShareType) => {
if (type == LocationShareType.Custom) {
if (!this.state.manualPosition) {
this.setState({ manualPosition: this.state.position });
}
if (this.state.manualPosition) {
this.addMarker(new maplibregl.LngLat(
this.state.manualPosition?.coords.longitude,
this.state.manualPosition?.coords.latitude,
));
}
} else {
this.removeMarker();
}

this.setState({ type });
};

render() {
const error = this.state.error ?
<div className="mx_LocationPicker_error">
Expand All @@ -247,20 +124,10 @@ class LocationPicker extends React.Component<IProps, IState> {
{ error }
<div className="mx_LocationPicker_footer">
<form onSubmit={this.onOk}>
<LocationShareTypeDropdown
value={this.state.type}
label={_t("Type of location share")}
onChange={this.onTypeChange}
width={400}
/>

<DialogButtons primaryButton={_t('Share')}
onPrimaryButtonClick={this.onOk}
onCancel={this.props.onFinished}
primaryDisabled={
!this.state.position &&
!this.state.manualPosition
} />
primaryDisabled={!this.state.position} />
</form>
</div>
</div>
Expand Down
30 changes: 0 additions & 30 deletions src/components/views/location/LocationShareType.tsx
View file
Open in desktop

This file was deleted.

7 changes: 1 addition & 6 deletions src/components/views/rooms/MessageComposer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,6 @@ import Modal from "../../../Modal";
import RoomContext from '../../../contexts/RoomContext';
import ErrorDialog from "../dialogs/ErrorDialog";
import PollCreateDialog from "../elements/PollCreateDialog";
import LocationShareType from "../location/LocationShareType";
import { SettingUpdatedPayload } from "../../../dispatcher/payloads/SettingUpdatedPayload";
import { CollapsibleButton, ICollapsibleButtonProps } from './CollapsibleButton';
import { LocationButton, textForLocation } from '../location/LocationButton';
Expand Down Expand Up @@ -453,11 +452,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
return true;
};

private shareLocation = (
uri: string,
ts: number,
_type: LocationShareType,
): boolean => {
private shareLocation = (uri: string, ts: number): boolean => {
if (!uri) return false;
try {
const text = textForLocation(uri, ts, null);
Expand Down
3 changes: 0 additions & 3 deletions src/i18n/strings/en_EN.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2127,9 +2127,6 @@
"Can't load this message": "Can't load this message",
"toggle event": "toggle event",
"Share location": "Share location",
"Share custom location": "Share custom location",
"Share my current location as a once off": "Share my current location as a once off",
"Type of location share": "Type of location share",
"Failed to load group members": "Failed to load group members",
"Filter community members": "Filter community members",
"Are you sure you want to remove '%(roomName)s' from %(groupId)s?": "Are you sure you want to remove '%(roomName)s' from %(groupId)s?",
Expand Down