imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix layout and visual regressions around default avatars (#10031)

Browse source
This commit is contained in:
Michael Telatynski 2023-01-31 13:56:48 +00:00 • committed by GitHub
parent 5a08859e37
commit 0d1fce37b2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 21 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/components/views/avatars/BaseAvatar.tsx
View file

@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { useCallback, useContext, useEffect, useState } from "react";
import React, { CSSProperties, useCallback, useContext, useEffect, useState } from "react";
import classNames from "classnames";
import { ResizeMethod } from "matrix-js-sdk/src/@types/partials";
import { ClientEvent } from "matrix-js-sdk/src/client";
@ -51,6 +51,7 @@ interface IProps {
inputRef?: React.RefObject<HTMLImageElement & HTMLSpanElement>;
className?: string;
tabIndex?: number;
style?: CSSProperties;
}
const calculateUrls = (url: string | undefined, urls: string[] | undefined, lowBandwidth: boolean): string[] => {
@ -132,10 +133,17 @@ const BaseAvatar: React.FC<IProps> = (props) => {
onClick,
inputRef,
className,
style: parentStyle,
resizeMethod: _unused, // to keep it from being in `otherProps`
...otherProps
} = props;
const style = {
...parentStyle,
width: toPx(width),
height: toPx(height),
};
const [imageUrl, onError] = useImageUrl({ url, urls });
if (!imageUrl && defaultToInitialLetter && name) {
@ -151,10 +159,7 @@ const BaseAvatar: React.FC<IProps> = (props) => {
className={classNames("mx_BaseAvatar", className)}
onClick={onClick}
inputRef={inputRef}
style={{
width: toPx(width),
height: toPx(height),
}}
style={style}
>
{avatar}
</AccessibleButton>
@ -165,10 +170,7 @@ const BaseAvatar: React.FC<IProps> = (props) => {
className={classNames("mx_BaseAvatar", className)}
ref={inputRef}
{...otherProps}
style={{
width: toPx(width),
height: toPx(height),
}}
style={style}
role="presentation"
>
{avatar}
@ -185,10 +187,7 @@ const BaseAvatar: React.FC<IProps> = (props) => {
src={imageUrl}
onClick={onClick}
onError={onError}
style={{
width: toPx(width),
height: toPx(height),
}}
style={style}
title={title}
alt={_t("Avatar")}
inputRef={inputRef}
@ -202,10 +201,7 @@ const BaseAvatar: React.FC<IProps> = (props) => {
className={classNames("mx_BaseAvatar mx_BaseAvatar_image", className)}
src={imageUrl}
onError={onError}
style={{
width: toPx(width),
height: toPx(height),
}}
style={style}
title={title}
alt=""
ref={inputRef}