Remove the Description from the location picker (#7485)

res/css/views/location/_LocationPicker.scss

@@ -26,7 +26,7 @@ limitations under the License.
 }
 
 #mx_LocationPicker_map {
-    height: 324px;
+    height: 408px;
     border-radius: 8px 8px 0px 0px;
 }
 

src/components/views/location/LocationButton.tsx

@@ -19,19 +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,
-        description: string,
-    ) => boolean;
+    shareLocation: (uri: string, ts: number) => boolean;
     menuPosition: AboveLeftOf;
     narrowMode: boolean;
 }

src/components/views/location/LocationPicker.tsx

@@ -19,105 +19,38 @@ import maplibregl from 'maplibre-gl';
 import { logger } from "matrix-js-sdk/src/logger";
 
 import SdkConfig from '../../../SdkConfig';
-import Field from "../elements/Field";
 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,
-        description: string,
-    ): boolean;
+    onChoose(uri: string, ts: number): boolean;
     onFinished(ev?: SyntheticEvent): void;
 }
 
 interface IState {
-    description: string;
-    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.
+ */
+
 @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 = {
-            description: _t("My location"),
-            type: LocationShareType.OnceOff,
             position: undefined,
-            manualPosition: undefined,
             error: undefined,
         };
     }
@@ -154,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);
     }
@@ -209,41 +102,16 @@ class LocationPicker extends React.Component<IProps, IState> {
         this.setState({ position });
     };
 
-    private onDescriptionChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
-        this.setState({ description: ev.target.value });
-    };
-
     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.state.description,
         );
         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">
@@ -256,28 +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}
-                        />
-
-                        <Field
-                            label={_t('Description')}
-                            onChange={this.onDescriptionChange}
-                            value={this.state.description}
-                            width={400}
-                            className="mx_LocationPicker_description"
-                        />
-
                         <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>

src/components/views/rooms/MessageComposer.tsx

@@ -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';
@@ -453,18 +452,13 @@ export default class MessageComposer extends React.Component<IProps, IState> {
         return true;
     };
 
-    private shareLocation = (
-        uri: string,
-        ts: number,
-        _type: LocationShareType,
-        description: string | null,
-    ): boolean => {
+    private shareLocation = (uri: string, ts: number): boolean => {
         if (!uri) return false;
         try {
-            const text = textForLocation(uri, ts, description);
+            const text = textForLocation(uri, ts, null);
             MatrixClientPeg.get().sendMessage(
                 this.props.room.roomId,
-                makeLocationContent(text, uri, ts, description),
+                makeLocationContent(text, uri, ts, null),
             );
         } catch (e) {
             logger.error("Error sending location:", e);

src/i18n/strings/en_EN.json

@@ -2129,10 +2129,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",
-    "My location": "My location",
-    "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?",