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

Display the user's avatar when they shared their location #7424

Merged
merged 5 commits into from
Dec 21, 2021
Merged

Display the user's avatar when they shared their location #7424

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
89f22e1
Remove the Forward and Share buttons for location messages only
andybalaam Dec 17, 2021
58c4ce9
Use the proper constant for m.room.message
andybalaam Dec 21, 2021
59e6671
Display the user's avatar when they shared their location
andybalaam Dec 17, 2021
eab9d34
Merge develop into psf-536-show-avatar-on-map (using imerge)
andybalaam Dec 21, 2021
d17ed30
Fix bad merge - re-remove forward and share in state
andybalaam Dec 21, 2021
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
29 changes: 25 additions & 4 deletions res/css/views/messages/_MLocationBody.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,30 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

.mx_MLocationBody_map {
width: 450px;
height: 300px;
.mx_MLocationBody {
.mx_MLocationBody_map {
width: 450px;
height: 300px;

border-radius: $timeline-image-border-radius;
border-radius: $timeline-image-border-radius;
}

.mx_MLocationBody_markerBorder {
width: 31px;
height: 31px;
border-radius: 50%;
background-color: $accent;
filter: drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.2));

.mx_BaseAvatar {
margin-top: 2px;
margin-left: 2px;
}
}

.mx_MLocationBody_pointer {
position: absolute;
bottom: -3px;
left: 12px;
}
}
3 changes: 3 additions & 0 deletions res/img/location/pointer.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
33 changes: 25 additions & 8 deletions src/components/views/messages/MLocationBody.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import SdkConfig from '../../../SdkConfig';
import { replaceableComponent } from "../../../utils/replaceableComponent";
import { IBodyProps } from "./IBodyProps";
import { _t } from '../../../languageHandler';
import MemberAvatar from '../avatars/MemberAvatar';

interface IState {
error: Error;
Expand All @@ -32,7 +33,6 @@ interface IState {
export default class MLocationBody extends React.Component<IBodyProps, IState> {
private map: maplibregl.Map;
private coords: GeolocationCoordinates;
private description: string;

constructor(props: IBodyProps) {
super(props);
Expand All @@ -49,8 +49,6 @@ export default class MLocationBody extends React.Component<IBodyProps, IState> {
this.state = {
error: undefined,
};

this.description = loc?.description ?? content['body'];
}

componentDidMount() {
Expand All @@ -65,13 +63,12 @@ export default class MLocationBody extends React.Component<IBodyProps, IState> {
zoom: 13,
});

new maplibregl.Popup({
closeButton: false,
closeOnClick: false,
closeOnMove: false,
new maplibregl.Marker({
element: document.getElementById(this.getMarkerId()),
anchor: 'bottom',
offset: [0, -1],
})
.setLngLat(coordinates)
.setHTML(this.description)
.addTo(this.map);

this.map.on('error', (e)=>{
Expand All @@ -88,6 +85,10 @@ export default class MLocationBody extends React.Component<IBodyProps, IState> {
return `mx_MLocationBody_${this.props.mxEvent.getId()}`;
};

private getMarkerId = () => {
return `mx_MLocationBody_marker_${this.props.mxEvent.getId()}`;
};

render() {
const error = this.state.error ?
<div className="mx_EventTile_tileError mx_EventTile_body">
Expand All @@ -97,6 +98,22 @@ export default class MLocationBody extends React.Component<IBodyProps, IState> {
return <div className="mx_MLocationBody">
<div id={this.getBodyId()} className="mx_MLocationBody_map" />
{ error }
<div className="mx_MLocationBody_marker" id={this.getMarkerId()}>
<div className="mx_MLocationBody_markerBorder">
<MemberAvatar
member={this.props.mxEvent.sender}
width={27}
height={27}
viewUserOnClick={false}
/>
</div>
<img
className="mx_MLocationBody_pointer"
src={require("../../../../res/img/location/pointer.svg")}
width="9"
height="5"
/>
</div>
</div>;
}
}
Expand Down