nice style for options

Signed-off-by: Kerry Archibald <[email protected]>

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

@@ -49,6 +49,27 @@
 .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/light/css/_light.scss

@@ -284,6 +284,7 @@ $avatar-initial-color: $background;
 $primary-hairline-color: transparent;
 $focus-brightness: 105%;
 $location-marker-color: #ffffff;
+$location-live-color: #5c56f5;
 // ********************
 
 // blur amounts for left left panel (only for element theme)

src/components/views/location/LocationShareMenu.tsx

@@ -58,8 +58,8 @@ const LocationShareMenu: React.FC<Props> = ({
         managed={false}
     >
         <div className="mx_LocationShareMenu">
-            {!shareType && <ShareType setShareType={setShareType} enabledShareTypes={enabledShareTypes} />}
-            {!!shareType && <LocationPicker
+            { !shareType && <ShareType setShareType={setShareType} enabledShareTypes={enabledShareTypes} /> }
+            { !!shareType && <LocationPicker
                 sender={sender}
                 onChoose={shareLocation(matrixClient, roomId, openMenu)}
                 onFinished={onFinished}

src/components/views/location/ShareType.tsx

@@ -14,11 +14,40 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { HTMLAttributes } from 'react';
+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 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}`}>
+</div>;
+
+
 // TODO this will be defined somewhere better
 export enum LocationShareType {
     Own = 'Own',
@@ -34,7 +63,10 @@ const ShareTypeOption: React.FC<ShareTypeOptionProps> = ({
     // not yet implemented
     disabled={shareType !== LocationShareType.Own}
     {...rest}>
-        <div className="mx_ShareType_option-icon" />
+
+        {shareType === LocationShareType.Own && <UserAvatar />}
+        {shareType === LocationShareType.Pin && <LocationPinIcon />}
+
         {label}
     </button>;
 
@@ -43,26 +75,25 @@ interface Props {
     enabledShareTypes: LocationShareType[];
 }
 const ShareType: React.FC<Props> = ({
-    setShareType, enabledShareTypes
+    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'>
-            <img aria-hidden alt='location icon' src={require("../../../../res/img/location/pointer.svg")} height={25} />
         </div>
         <Heading className='mx_ShareType_heading' size='h3'>{_t("What location type do you want to share?")}</Heading>
-        {enabledShareTypes.map((type, index) =>
+        {enabledShareTypes.map((type) =>
             <ShareTypeOption
                 key={type}
                 onClick={() => setShareType(type)}
                 label={labels[type]}
                 shareType={type}
                 data-test-id={`share-location-option-${type}`}
-            />
+            />,
         )}
     </div>;
 };

src/i18n/strings/en_EN.json

@@ -2179,6 +2179,9 @@
     "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",

test/components/views/location/LocationShareMenu-test.tsx

@@ -86,7 +86,7 @@ describe('<LocationShareMenu />', () => {
     });
 
     it('selecting own location share type advances to location picker', () => {
-       // feature_location_share_pin_drop is set to enabled by default mocking
+        // feature_location_share_pin_drop is set to enabled by default mocking
         const component = getComponent();
 
         act(() => {