Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Fix layout and visual regressions around default avatars #10031

Merged
merged 6 commits into from
Jan 31, 2023
Merged

Fix layout and visual regressions around default avatars #10031

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c461d9b
Fix regression in Space Panel default avatar colour
t3chguy Jan 31, 2023
62c6281
Fix regression with User Menu default avatar margins
t3chguy Jan 31, 2023
5a4b29b
Fix issue with default avatar read receipt positions being ignored
t3chguy Jan 31, 2023
ab8ce50
Add tests
t3chguy Jan 31, 2023
a2a5a15
Update snapshot
t3chguy Jan 31, 2023
cae28d1
Iterate
t3chguy Jan 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions cypress/e2e/spaces/spaces.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,10 +153,7 @@ describe("Spaces", () => {

openSpaceCreateMenu().within(() => {
cy.get(".mx_SpaceCreateMenuType_private").click();
cy.get('.mx_SpaceBasicSettings_avatarContainer input[type="file"]').selectFile(
"cypress/fixtures/riot.png",
{ force: true },
);
// We don't set an avatar here to get a Percy snapshot of the default avatar style for spaces
cy.get('input[label="Address"]').should("not.exist");
cy.get('textarea[label="Description"]').type("This is a personal space to mourn Riot.im...");
cy.get('input[label="Name"]').type("This is my Riot{enter}");
Expand All @@ -169,6 +166,7 @@ describe("Spaces", () => {

cy.contains(".mx_RoomList .mx_RoomTile", "Sample Room").should("exist");
cy.contains(".mx_SpaceHierarchy_list .mx_SpaceHierarchy_roomTile", "Sample Room").should("exist");
cy.get(".mx_LeftPanel_outerWrapper").percySnapshotElement("Left panel with default avatar space");
});

it("should allow user to invite another to a space", () => {
Expand Down
6 changes: 1 addition & 5 deletions res/css/structures/_SpacePanel.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -277,14 +277,10 @@ $activeBorderColor: $primary-content;
.mx_BaseAvatar:not(.mx_UserMenu_userAvatar_BaseAvatar) .mx_BaseAvatar_initial {
color: $secondary-content;
border-radius: 8px;
background-color: $panel-actions;
background-color: $panel-actions !important; /* override inline style */
font-size: $font-15px !important; /* override inline style */
font-weight: $font-semi-bold;
line-height: $font-18px;

& + .mx_BaseAvatar_image {
visibility: hidden;
}
}

.mx_SpaceTreeLevel {
Expand Down
1 change: 1 addition & 0 deletions res/css/structures/_UserMenu.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ limitations under the License.

.mx_UserMenu_userAvatar {
position: relative;
display: inherit;

.mx_BaseAvatar {
pointer-events: none; /* makes the avatar non-draggable */
Expand Down
30 changes: 13 additions & 17 deletions src/components/views/avatars/BaseAvatar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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[] => {
Expand Down Expand Up @@ -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) {
Expand All @@ -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>
Expand All @@ -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}
Expand All @@ -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}
Expand All @@ -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}
Expand Down