PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Display general marker on non-self location shares (#7574)

Browse source
This commit is contained in:
Andy Balaam 2022-01-19 09:33:49 +00:00 committed by GitHub
parent 41b9e4aa4f
commit 2743a75a21
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 93 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
res/css/views/messages/_MLocationBody.scss
View file

@ -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
res/img/element-icons/location.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 1.99999C8.13 1.99999 5 5.2152 5 9.19054C5 13.4741 9.42 19.3806 11.24 21.6302C11.64 22.1233 12.37 22.1233 12.77 21.6302C14.58 19.3806 19 13.4741 19 9.19054C19 5.2152 15.87 1.99999 12 1.99999ZM12 11.7586C10.62 11.7586 9.5 10.6081 9.5 9.19054C9.5 7.77298 10.62 6.62249 12 6.62249C13.38 6.62249 14.5 7.77298 14.5 9.19054C14.5 10.6081 13.38 11.7586 12 11.7586Z" fill="#737D8C"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 490 B

1
res/themes/legacy-light/css/_legacy-light.scss
View file

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

1
res/themes/light/css/_light.scss
View file

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

31
src/components/views/messages/MLocationBody.tsx
View file

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

54
test/components/views/messages/MLocationBody-test.tsx
View file

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