OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Remove the Description from the location picker (#7485)

pull/21833/head
Andy Balaam 2022-01-10 10:07:51 +00:00 committed by GitHub
parent fe16f224ea
commit 9562deb28c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 16 additions and 212 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
res/css/views/location/_LocationPicker.scss
View File

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

8
src/components/views/location/LocationButton.tsx
View File

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

172
src/components/views/location/LocationPicker.tsx
View File

@ -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,12 +87,6 @@ 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);
@ -167,40 +94,6 @@ class LocationPicker extends React.Component<IProps, IState> {
}
}
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>

30
src/components/views/location/LocationShareType.tsx
View File

@ -1,30 +0,0 @@
/*
Copyright 2021 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
enum LocationShareType {
Custom = -1,
OnceOff = 0,
OneMine = 60,
FiveMins = 5 * 60,
ThirtyMins = 30 * 60,
OneHour = 60 * 60,
ThreeHours = 3 * 60 * 60,
SixHours = 6 * 60 * 60,
OneDay = 24 * 60 * 60,
Forever = Number.MAX_SAFE_INTEGER,
}
export default LocationShareType;

12
src/components/views/rooms/MessageComposer.tsx
View File

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

4
src/i18n/strings/en_EN.json
View File

@ -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?",