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

Display general marker on non-self location shares #7574

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
12 changes: 12 additions & 0 deletions res/css/views/messages/_MLocationBody.scss
Original file line number Diff line number Diff line change
Expand Up @@ -40,4 +40,16 @@ limitations under the License.
bottom: -3px;
left: 12px;
}

.mx_MLocationBody_markerContents {
background-color: $location-marker-color;
margin: 4px;
width: 24px;
height: 24px;
padding-top: 8px;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
mask-image: url('$(res)/img/element-icons/location.svg');
}
}
3 changes: 3 additions & 0 deletions res/img/element-icons/location.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions res/themes/legacy-light/css/_legacy-light.scss
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ $accent-alt: #238cf5;
$selection-fg-color: $primary-bg-color;

$focus-brightness: 105%;
$location-marker-color: #ffffff;

$other-user-pill-bg-color: rgba(0, 0, 0, 0.1);

Expand Down
1 change: 1 addition & 0 deletions res/themes/light/css/_light.scss
Original file line number Diff line number Diff line change
Expand Up @@ -283,6 +283,7 @@ $pinned-color: $tertiary-content;
$avatar-initial-color: $background;
$primary-hairline-color: transparent;
$focus-brightness: 105%;
$location-marker-color: #ffffff;
// ********************

// blur amounts for left left panel (only for element theme)
Expand Down
31 changes: 24 additions & 7 deletions src/components/views/messages/MLocationBody.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,13 @@ limitations under the License.
import React from 'react';
import maplibregl from 'maplibre-gl';
import { logger } from "matrix-js-sdk/src/logger";
import { LOCATION_EVENT_TYPE } from 'matrix-js-sdk/src/@types/location';
import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
import {
ASSET_NODE_TYPE,
ASSET_TYPE_SELF,
ILocationContent,
LOCATION_EVENT_TYPE,
} from 'matrix-js-sdk/src/@types/location';

import SdkConfig from '../../../SdkConfig';
import { replaceableComponent } from "../../../utils/replaceableComponent";
Expand Down Expand Up @@ -101,6 +106,12 @@ export default class MLocationBody extends React.Component<IBodyProps, IState> {
}
}

export function isSelfLocation(locationContent: ILocationContent): boolean {
const asset = ASSET_NODE_TYPE.findIn(locationContent) as { type: string };
const assetType = asset?.type ?? ASSET_TYPE_SELF;
return assetType == ASSET_TYPE_SELF;
}

interface ILocationBodyContentProps {
mxEvent: MatrixEvent;
bodyId: string;
Expand All @@ -121,6 +132,17 @@ export function LocationBodyContent(props: ILocationBodyContentProps):
className="mx_MLocationBody_map"
/>;

const markerContents = (
isSelfLocation(props.mxEvent.getContent())
? <MemberAvatar
member={props.mxEvent.sender}
width={27}
height={27}
viewUserOnClick={false}
/>
: <div className="mx_MLocationBody_markerContents" />
);

return <div className="mx_MLocationBody">
{
props.error
Expand All @@ -142,12 +164,7 @@ export function LocationBodyContent(props: ILocationBodyContentProps):
}
<div className="mx_MLocationBody_marker" id={props.markerId}>
<div className="mx_MLocationBody_markerBorder">
<MemberAvatar
member={props.mxEvent.sender}
width={27}
height={27}
viewUserOnClick={false}
/>
{ markerContents }
</div>
<img
className="mx_MLocationBody_pointer"
Expand Down
54 changes: 52 additions & 2 deletions test/components/views/messages/MLocationBody-test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,21 @@ limitations under the License.
*/

import { makeLocationContent } from "matrix-js-sdk/src/content-helpers";
import { LOCATION_EVENT_TYPE } from "matrix-js-sdk/src/@types/location";
import {
ASSET_NODE_TYPE,
ILocationContent,
LOCATION_EVENT_TYPE,
TIMESTAMP_NODE_TYPE,
} from "matrix-js-sdk/src/@types/location";
import { TEXT_NODE_TYPE } from "matrix-js-sdk/src/@types/extensible_events";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";

import sdk from "../../../skinned-sdk";
import { createMapSiteLink, parseGeoUri } from "../../../../src/components/views/messages/MLocationBody";
import {
createMapSiteLink,
isSelfLocation,
parseGeoUri,
} from "../../../../src/components/views/messages/MLocationBody";

sdk.getComponent("views.messages.MLocationBody");

Expand Down Expand Up @@ -189,6 +199,46 @@ describe("MLocationBody", () => {
);
});
});

describe("isSelfLocation", () => {
it("Returns true for a full m.asset event", () => {
const content = makeLocationContent("", "", 0);
expect(isSelfLocation(content)).toBe(true);
});

it("Returns true for a missing m.asset", () => {
const content = {
body: "",
msgtype: "m.location",
geo_uri: "",
[LOCATION_EVENT_TYPE.name]: { uri: "" },
[TEXT_NODE_TYPE.name]: "",
[TIMESTAMP_NODE_TYPE.name]: 0,
// Note: no m.asset!
};
expect(isSelfLocation(content as ILocationContent)).toBe(true);
});

it("Returns true for a missing m.asset type", () => {
const content = {
body: "",
msgtype: "m.location",
geo_uri: "",
[LOCATION_EVENT_TYPE.name]: { uri: "" },
[TEXT_NODE_TYPE.name]: "",
[TIMESTAMP_NODE_TYPE.name]: 0,
[ASSET_NODE_TYPE.name]: {
// Note: no type!
},
};
expect(isSelfLocation(content as ILocationContent)).toBe(true);
});

it("Returns false for an unknown asset type", () => {
const content = makeLocationContent("", "", 0, "", "org.example.unknown");
expect(isSelfLocation(content)).toBe(false);
});
});
});

function oldLocationEvent(geoUri: string): MatrixEvent {
Expand Down