Merge pull request #5526 from matrix-org/t3chguy/fix/15832

Fix avatar upload prompt/tooltip floating wrong and permissions

res/css/views/elements/_MiniAvatarUploader.scss

@@ -18,6 +18,16 @@ limitations under the License.
     position: relative;
     width: min-content;
 
+    // this isn't a floating tooltip so override some things to not need to bother with z-index and floating
+    .mx_Tooltip {
+        display: inline-block;
+        position: absolute;
+        z-index: unset;
+        width: max-content;
+        left: 72px;
+        top: 0;
+    }
+
     &::before, &::after {
         content: '';
         position: absolute;

src/components/views/elements/MiniAvatarUploader.tsx

@@ -15,14 +15,15 @@ limitations under the License.
 */
 
 import React, {useContext, useRef, useState} from 'react';
+import {EventType} from 'matrix-js-sdk/src/@types/event';
 import classNames from 'classnames';
 
 import AccessibleButton from "./AccessibleButton";
-import Tooltip from './Tooltip';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {useTimeout} from "../../../hooks/useTimeout";
 import Analytics from "../../../Analytics";
 import CountlyAnalytics from '../../../CountlyAnalytics';
+import RoomContext from "../../../contexts/RoomContext";
 
 export const AVATAR_SIZE = 52;
 
@@ -50,6 +51,11 @@ const MiniAvatarUploader: React.FC<IProps> = ({ hasAvatar, hasAvatarLabel, noAva
 
     const label = (hasAvatar || busy) ? hasAvatarLabel : noAvatarLabel;
 
+    const {room} = useContext(RoomContext);
+    const canSetAvatar = room?.currentState.maySendStateEvent(EventType.RoomAvatar, cli.getUserId());
+    if (!canSetAvatar) return <React.Fragment>{ children }</React.Fragment>;
+
+    const visible = !!label && (hover || show);
     return <React.Fragment>
         <input
             type="file"
@@ -82,11 +88,13 @@ const MiniAvatarUploader: React.FC<IProps> = ({ hasAvatar, hasAvatarLabel, noAva
         >
             { children }
 
-            <Tooltip
+            <div className={classNames("mx_Tooltip", {
-                label={label}
+                "mx_Tooltip_visible": visible,
-                visible={!!label && (hover || show)}
+                "mx_Tooltip_invisible": !visible,
-                forceOnRight
+            })}>
-            />
+                <div className="mx_Tooltip_chevron" />
+                { label }
+            </div>
         </AccessibleButton>
     </React.Fragment>;
 };