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

Iterate Space Panel alignments

Browse source
This commit is contained in:
Michael Telatynski 2021-03-01 17:02:02 +00:00
parent 70f1303544
commit ea61b18c18
3 changed files with 81 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -56,9 +56,10 @@ const SpaceButton: React.FC<IButtonProps> = ({
}) => {
const classes = classNames("mx_SpaceButton", className, {
mx_SpaceButton_active: selected,
mx_SpaceButton_narrow: isNarrow,
});
let avatar = <div className="mx_SpaceButton_avatarPlaceholder" />;
let avatar = <div className="mx_SpaceButton_avatarPlaceholder"><div className="mx_SpaceButton_icon" /></div>;
if (space) {
avatar = <RoomAvatar width={32} height={32} room={space} />;
}
@ -74,18 +75,22 @@ const SpaceButton: React.FC<IButtonProps> = ({
if (isNarrow) {
button = (
<RovingAccessibleTooltipButton className={classes} title={tooltip} onClick={onClick} role="treeitem">
{ avatar }
{ notifBadge }
{ children }
<div className="mx_SpaceButton_selectionWrapper">
{ avatar }
{ notifBadge }
{ children }
</div>
</RovingAccessibleTooltipButton>
);
} else {
button = (
<RovingAccessibleButton className={classes} onClick={onClick} role="treeitem">
{ avatar }
<span className="mx_SpaceButton_name">{ tooltip }</span>
{ notifBadge }
{ children }
<div className="mx_SpaceButton_selectionWrapper">
{ avatar }
<span className="mx_SpaceButton_name">{ tooltip }</span>
{ notifBadge }
{ children }
</div>
</RovingAccessibleButton>
);
}

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

@ -95,6 +95,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
const classes = classNames("mx_SpaceButton", {
mx_SpaceButton_active: isActive,
mx_SpaceButton_hasMenuOpen: !!this.state.contextMenuPosition,
mx_SpaceButton_narrow: isNarrow,
});
const notificationState = SpaceStore.instance.getNotificationState(space.roomId);
const childItems = childSpaces && !collapsed ? <SpaceTreeLevel
@ -129,8 +130,10 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
role="treeitem"
>
{ toggleCollapseButton }
<RoomAvatar width={avatarSize} height={avatarSize} room={space} />
{ notifBadge }
<div className="mx_SpaceButton_selectionWrapper">
<RoomAvatar width={avatarSize} height={avatarSize} room={space} />
{ notifBadge }
</div>
</RovingAccessibleTooltipButton>
);
} else {
@ -142,9 +145,11 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
role="treeitem"
>
{ toggleCollapseButton }
<RoomAvatar width={avatarSize} height={avatarSize} room={space} />
<span className="mx_SpaceButton_name">{ space.name }</span>
{ notifBadge }
<div className="mx_SpaceButton_selectionWrapper">
<RoomAvatar width={avatarSize} height={avatarSize} room={space} />
<span className="mx_SpaceButton_name">{ space.name }</span>
{ notifBadge }
</div>
</RovingAccessibleButton>
);
}