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

Change avatar to use Compound implementation (#11448)

Browse source 
* Move avatar to new compound implementation

* Make space avatars square

* Remove reference to the avatar initial CSS class

* remove references to mx_BaseAvatar_image

* Fixe test suites

* Fix accessbility violations

* Add ConfirmUserActionDialog test

* Fix tests

* Add FacePile test

* Fix items clipping in members list

* Fix user info avatar sizing

* Fix tests
This commit is contained in:
Germain 2023-08-24 04:48:35 +01:00 • committed by GitHub
parent e34920133e
commit 09c5e06d12
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
125 changed files with 936 additions and 1413 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/components/views/spaces/SpacePanel.tsx
View file

@ -119,7 +119,7 @@ interface IMetaSpaceButtonProps extends ComponentProps<typeof SpaceButton> {
type MetaSpaceButtonProps = Pick<IMetaSpaceButtonProps, "selected" | "isPanelCollapsed">;
const MetaSpaceButton: React.FC<IMetaSpaceButtonProps> = ({ selected, isPanelCollapsed, ...props }) => {
const MetaSpaceButton: React.FC<IMetaSpaceButtonProps> = ({ selected, isPanelCollapsed, size = "32px", ...props }) => {
return (
<li
className={classNames("mx_SpaceItem", {
@ -128,7 +128,7 @@ const MetaSpaceButton: React.FC<IMetaSpaceButtonProps> = ({ selected, isPanelCol
role="treeitem"
aria-selected={selected}
>
<SpaceButton {...props} selected={selected} isNarrow={isPanelCollapsed} />
<SpaceButton {...props} selected={selected} isNarrow={isPanelCollapsed} size={size} />
</li>
);
};
@ -160,6 +160,7 @@ const HomeButton: React.FC<MetaSpaceButtonProps> = ({ selected, isPanelCollapsed
notificationState={notificationState}
ContextMenuComponent={HomeButtonContextMenu}
contextMenuTooltip={_t("common|options")}
size="32px"
/>
);
};
@ -173,6 +174,7 @@ const FavouritesButton: React.FC<MetaSpaceButtonProps> = ({ selected, isPanelCol
isPanelCollapsed={isPanelCollapsed}
label={getMetaSpaceName(MetaSpace.Favourites)}
notificationState={SpaceStore.instance.getNotificationState(MetaSpace.Favourites)}
size="32px"
/>
);
};
@ -186,6 +188,7 @@ const PeopleButton: React.FC<MetaSpaceButtonProps> = ({ selected, isPanelCollaps
isPanelCollapsed={isPanelCollapsed}
label={getMetaSpaceName(MetaSpace.People)}
notificationState={SpaceStore.instance.getNotificationState(MetaSpace.People)}
size="32px"
/>
);
};
@ -199,6 +202,7 @@ const OrphansButton: React.FC<MetaSpaceButtonProps> = ({ selected, isPanelCollap
isPanelCollapsed={isPanelCollapsed}
label={getMetaSpaceName(MetaSpace.Orphans)}
notificationState={SpaceStore.instance.getNotificationState(MetaSpace.Orphans)}
size="32px"
/>
);
};
@ -244,6 +248,7 @@ const CreateSpaceButton: React.FC<Pick<IInnerSpacePanelProps, "isPanelCollapsed"
onClick={onNewClick}
isNarrow={isPanelCollapsed}
innerRef={handle}
size="32px"
/>
{contextMenu}

10
src/components/views/spaces/SpaceTreeLevel.tsx
View file

@ -48,7 +48,7 @@ import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
import { useRovingTabIndex } from "../../../accessibility/RovingTabIndex";
import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
interface IButtonProps extends Omit<ComponentProps<typeof AccessibleTooltipButton>, "title" | "onClick"> {
interface IButtonProps extends Omit<ComponentProps<typeof AccessibleTooltipButton>, "title" | "onClick" | "size"> {
space?: Room;
spaceKey?: SpaceKey;
className?: string;
@ -57,7 +57,7 @@ interface IButtonProps extends Omit<ComponentProps<typeof AccessibleTooltipButto
contextMenuTooltip?: string;
notificationState?: NotificationState;
isNarrow?: boolean;
avatarSize?: number;
size: string;
innerRef?: RefObject<HTMLElement>;
ContextMenuComponent?: ComponentType<ComponentProps<typeof SpaceContextMenu>>;
onClick?(ev?: ButtonEvent): void;
@ -71,7 +71,7 @@ export const SpaceButton: React.FC<IButtonProps> = ({
label,
contextMenuTooltip,
notificationState,
avatarSize,
size,
isNarrow,
children,
innerRef,
@ -90,7 +90,7 @@ export const SpaceButton: React.FC<IButtonProps> = ({
</div>
);
if (space) {
avatar = <RoomAvatar width={avatarSize} height={avatarSize} room={space} />;
avatar = <RoomAvatar size={size} room={space} type="square" />;
}
let notifBadge;
@ -374,7 +374,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
contextMenuTooltip={_t("Space options")}
notificationState={notificationState}
isNarrow={isPanelCollapsed}
avatarSize={isNested ? 24 : 32}
size={isNested ? "24px" : "32px"}
onKeyDown={this.onKeyDown}
ContextMenuComponent={this.props.space.getMyMembership() === "join" ? SpaceContextMenu : undefined}
>