Location share type UI (#7924)

* copyright

Signed-off-by: Kerry Archibald <kerrya@element.io>

* empty line

Signed-off-by: Kerry Archibald <kerrya@element.io>

* functional picker

Signed-off-by: Kerry Archibald <kerrya@element.io>

* most style

Signed-off-by: Kerry Archibald <kerrya@element.io>

* nice style for options

Signed-off-by: Kerry Archibald <kerrya@element.io>

* get ShareType test passing

Signed-off-by: Kerry Archibald <kerrya@element.io>

* add maplibre mock

Signed-off-by: Kerry Archibald <kerrya@element.io>

* lint and test

Signed-off-by: Kerry Archibald <kerrya@element.io>

* add section to themes for location sharing cols

Signed-off-by: Kerry Archibald <kerrya@element.io>

* add svg mock

Signed-off-by: Kerry Archibald <kerrya@element.io>

* use same mock string as imageMock

Signed-off-by: Kerry Archibald <kerrya@element.io>

* newline

Signed-off-by: Kerry Archibald <kerrya@element.io>

* lint

Signed-off-by: Kerry Archibald <kerrya@element.io>

* add live location icon

Signed-off-by: Kerry Archibald <kerrya@element.io>

* rename useEnabledShareTypes

Signed-off-by: Kerry Archibald <kerrya@element.io>

* use solid color for live border

* use ternary

Signed-off-by: Kerry Archibald <kerrya@element.io>

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

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,10 +31,26 @@ type Props = Omit<ILocationPickerProps, 'onChoose'> & {
     roomId: Room["roomId"];
 };
 
+const getEnabledShareTypes = (): 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 = getEnabledShareTypes();
+
+    const [shareType, setShareType] = useState<LocationShareType>(
+        enabledShareTypes.length === 1 ? LocationShareType.Own : undefined,
+    );
 
     return <ContextMenu
         {...menuPosition}
@@ -40,11 +58,13 @@ const LocationShareMenu: React.FC<Props> = ({
         managed={false}
     >
         <div className="mx_LocationShareMenu">
-            <LocationPicker
+            { shareType ? <LocationPicker
                 sender={sender}
                 onChoose={shareLocation(matrixClient, roomId, openMenu)}
                 onFinished={onFinished}
             />
+                :
+                <ShareType setShareType={setShareType} enabledShareTypes={enabledShareTypes} /> }
         </div>
     </ContextMenu>;
 };

src/components/views/location/ShareType.tsx

@@ -0,0 +1,103 @@
+/*
+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';
+import { Icon as LocationIcon } from '../../../../res/img/element-icons/location.svg';
+import { Icon as LiveLocationIcon } from '../../../../res/img/location/live-location.svg';
+
+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>;
+};
+
+// 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 &&
+            <LocationIcon className={`mx_ShareType_option-icon ${LocationShareType.Pin}`} /> }
+    { shareType === LocationShareType.Live &&
+            <LiveLocationIcon className={`mx_ShareType_option-icon ${LocationShareType.Live}`} /> }
+
+    { 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'>
+        <LocationIcon 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.