Location share type UI

__mocks__/maplibre-gl.js

@@ -0,0 +1,20 @@
+const EventEmitter = require("events");
+const { LngLat } = require('maplibre-gl');
+
+class MockMap extends EventEmitter {
+    addControl = jest.fn();
+    removeControl = jest.fn();
+}
+class MockGeolocateControl extends EventEmitter {
+
+}
+class MockMarker extends EventEmitter {
+    setLngLat = jest.fn().mockReturnValue(this);
+    addTo = jest.fn();
+}
+module.exports = {
+    Map: MockMap,
+    GeolocateControl: MockGeolocateControl,
+    Marker: MockMarker,
+    LngLat,
+};

res/css/_components.scss

@@ -5,6 +5,7 @@
 @import "./_font-weights.scss";
 @import "./_spacing.scss";
 @import "./components/views/location/_LocationShareMenu.scss";
+@import "./components/views/location/_ShareType.scss";
 @import "./components/views/spaces/_QuickThemeSwitcher.scss";
 @import "./structures/_AutoHideScrollbar.scss";
 @import "./structures/_BackdropPanel.scss";

res/css/components/views/location/_ShareType.scss

@@ -0,0 +1,90 @@
+/*
+Copyright 2022 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.
+*/
+
+.mx_ShareType {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+
+    padding: 60px $spacing-12 $spacing-32;
+
+    color: $primary-content;
+}
+
+.mx_ShareType_badge {
+    height: 60px;
+    width: 60px;
+    margin-bottom: $spacing-20;
+    background-color: $accent;
+    border-radius: 50%;
+}
+
+.mx_ShareType_heading {
+    padding-bottom: $spacing-32;
+    text-align: center;
+}
+
+.mx_ShareType_option {
+    @mixin ButtonResetDefault;
+
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    padding: $spacing-8 $spacing-20;
+    margin-top: $spacing-12;
+
+    color: $primary-content;
+    border: 1px solid $quinary-content;
+    border-radius: 8px;
+
+    font-size: $font-15px;
+
+    &:hover, &:focus {
+        border-color: $accent;
+    }
+}
+
+.mx_ShareType_option-icon {
+    height: 40px;
+    width: 40px;
+    box-sizing: border-box;
+    margin-right: $spacing-12;
+    flex: 0 0 40px;
+    border-width: 2px;
+    border-style: solid;
+    border-radius: 50%;
+
+    &.Own {
+        // color is set by user color class
+        // generated from id
+        border-color: currentColor;
+    }
+
+    &.Live {
+        background-color: $location-live-color;
+        // TODO opacity
+        border-color: $location-live-color;
+    }
+
+    &.Pin {
+        border-color: $accent;
+        background-color: $accent;
+    }
+}

res/themes/dark/css/_dark.scss

@@ -182,6 +182,11 @@ $call-view-button-off-background: $primary-content;
 $video-feed-secondary-background: $system;
 // ********************
 
+// Location sharing
+// ********************
+$location-live-color: #5c56f5;
+// ********************
+
 // Location sharing
 // ********************
 .maplibregl-ctrl-attrib-button {

res/themes/legacy-dark/css/_legacy-dark.scss

@@ -188,6 +188,12 @@ $eventbubble-others-bg: $event-selected-color;
 $eventbubble-bg-hover: #1C2026;
 $eventbubble-reply-color: #C1C6CD;
 
+// Location sharing
+// ********************
+$location-marker-color: #ffffff;
+$location-live-color: #5c56f5;
+// ********************
+
 // ***** Mixins! *****
 
 @define-mixin mx_DialogButton {

res/themes/legacy-light/css/_legacy-light.scss

@@ -36,7 +36,6 @@ $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);
 
@@ -284,6 +283,12 @@ $pinned-color: $tertiary-content;
 
 $groupFilterPanel-divider-color: $tertiary-content;
 
+// Location sharing
+// ********************
+$location-marker-color: #ffffff;
+$location-live-color: #5c56f5;
+// ********************
+
 // ***** Mixins! *****
 
 @define-mixin mx_DialogButton {

res/themes/light/css/_light.scss

@@ -283,7 +283,6 @@ $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)
@@ -298,6 +297,12 @@ $location-marker-color: #ffffff;
 $copy-button-url: "$(res)/img/feather-customised/clipboard.svg";
 // ********************
 
+// Location sharing
+// ********************
+$location-marker-color: #ffffff;
+$location-live-color: #5c56f5;
+// ********************
+
 // Mixins
 // ********************
 @define-mixin mx_DialogButton {

src/components/views/location/LocationShareMenu.tsx

@@ -14,13 +14,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { SyntheticEvent, useContext } from 'react';
+import React, { SyntheticEvent, useContext, useState } from 'react';
 import { Room } from 'matrix-js-sdk/src/models/room';
 
 import MatrixClientContext from '../../../contexts/MatrixClientContext';
 import ContextMenu, { AboveLeftOf } from '../../structures/ContextMenu';
 import LocationPicker, { ILocationPickerProps } from "./LocationPicker";
 import { shareLocation } from './shareLocation';
+import SettingsStore from '../../../settings/SettingsStore';
+import ShareType, { LocationShareType } from './ShareType';
 
 type Props = Omit<ILocationPickerProps, 'onChoose'> & {
     onFinished: (ev?: SyntheticEvent) => void;
@@ -29,22 +31,40 @@ type Props = Omit<ILocationPickerProps, 'onChoose'> & {
     roomId: Room["roomId"];
 };
 
+const useEnabledShareTypes = (): LocationShareType[] => {
+    const isPinDropLocationShareEnabled = SettingsStore.getValue("feature_location_share_pin_drop");
+
+    if (isPinDropLocationShareEnabled) {
+        return [LocationShareType.Own, LocationShareType.Pin];
+    }
+    return [
+        LocationShareType.Own,
+    ];
+};
+
 const LocationShareMenu: React.FC<Props> = ({
     menuPosition, onFinished, sender, roomId, openMenu,
 }) => {
     const matrixClient = useContext(MatrixClientContext);
+    const enabledShareTypes = useEnabledShareTypes();
+
+    const [shareType, setShareType] = useState<LocationShareType>(
+        enabledShareTypes.length === 1 ? LocationShareType.Own : undefined,
+    );
 
     return <ContextMenu
         {...menuPosition}
         onFinished={onFinished}
         managed={false}
     >
         <div className="mx_LocationShareMenu">
-            <LocationPicker
+            { !shareType && <ShareType setShareType={setShareType} enabledShareTypes={enabledShareTypes} /> }
+            { !!shareType && <LocationPicker
                 sender={sender}
                 onChoose={shareLocation(matrixClient, roomId, openMenu)}
                 onFinished={onFinished}
             />
+            }
         </div>
     </ContextMenu>;
 };

src/components/views/location/ShareType.tsx

@@ -0,0 +1,100 @@
+/*
+Copyright 2022 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.
+*/
+
+import React, { HTMLAttributes, useContext } from 'react';
+
+import MatrixClientContext from '../../../contexts/MatrixClientContext';
+import { _t } from '../../../languageHandler';
+import { OwnProfileStore } from '../../../stores/OwnProfileStore';
+import { getUserNameColorClass } from '../../../utils/FormattingUtils';
+import BaseAvatar from '../avatars/BaseAvatar';
+import AccessibleButton from '../elements/AccessibleButton';
+import Heading from '../typography/Heading';
+
+const UserAvatar = () => {
+    const matrixClient = useContext(MatrixClientContext);
+    const userId = matrixClient.getUserId();
+    const displayName = OwnProfileStore.instance.displayName;
+    // 40 - 2px border
+    const avatarSize = 36;
+    const avatarUrl = OwnProfileStore.instance.getHttpAvatarUrl(avatarSize);
+    const colorClass = getUserNameColorClass(userId);
+
+    return <div className={`mx_ShareType_option-icon ${LocationShareType.Own} ${colorClass}`}>
+        <BaseAvatar
+            idName={userId}
+            name={displayName}
+            url={avatarUrl}
+            width={avatarSize}
+            height={avatarSize}
+            resizeMethod="crop"
+            className="mx_UserMenu_userAvatar_BaseAvatar"
+        /></div>;
+};
+
+const LocationPinIcon = () => <div className={`mx_ShareType_option-icon ${LocationShareType.Pin}`} />;
+
+// TODO this will be defined somewhere better
+export enum LocationShareType {
+    Own = 'Own',
+    Pin = 'Pin',
+    Live = 'Live'
+}
+type ShareTypeOptionProps = HTMLAttributes<Element> & { label: string, shareType: LocationShareType };
+const ShareTypeOption: React.FC<ShareTypeOptionProps> = ({
+    onClick, label, shareType, ...rest
+}) => <AccessibleButton
+    element='button'
+    className='mx_ShareType_option'
+    onClick={onClick}
+    // not yet implemented
+    disabled={shareType !== LocationShareType.Own}
+    {...rest}>
+
+    { shareType === LocationShareType.Own && <UserAvatar /> }
+    { shareType === LocationShareType.Pin && <LocationPinIcon /> }
+
+    { label }
+</AccessibleButton>;
+
+interface Props {
+    setShareType: (shareType: LocationShareType) => void;
+    enabledShareTypes: LocationShareType[];
+}
+const ShareType: React.FC<Props> = ({
+    setShareType, enabledShareTypes,
+}) => {
+    const labels = {
+        [LocationShareType.Own]: _t('My current location'),
+        [LocationShareType.Live]: _t('My live location'),
+        [LocationShareType.Pin]: _t('Drop a Pin'),
+    };
+    return <div className='mx_ShareType'>
+        <div className='mx_ShareType_badge' />
+        <Heading className='mx_ShareType_heading' size='h3'>{ _t("What location type do you want to share?") }</Heading>
+        { enabledShareTypes.map((type) =>
+            <ShareTypeOption
+                key={type}
+                onClick={() => setShareType(type)}
+                label={labels[type]}
+                shareType={type}
+                data-test-id={`share-location-option-${type}`}
+            />,
+        ) }
+    </div>;
+};
+
+export default ShareType;

src/components/views/location/shareLocation.ts

@@ -1,4 +1,3 @@
-
 /*
 Copyright 2022 The Matrix.org Foundation C.I.C.
 

src/i18n/strings/en_EN.json

@@ -2179,6 +2179,10 @@
     "Unknown error fetching location. Please try again later.": "Unknown error fetching location. Please try again later.",
     "We couldn’t send your location": "We couldn’t send your location",
     "Element could not send your location. Please try again later.": "Element could not send your location. Please try again later.",
+    "My current location": "My current location",
+    "My live location": "My live location",
+    "Drop a Pin": "Drop a Pin",
+    "What location type do you want to share?": "What location type do you want to 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?",