OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #5965 from matrix-org/t3chguy/fix/17158 

Fix more space panel layout and hover behaviour issues
pull/21833/head
Michael Telatynski 2021-05-04 15:01:36 +01:00 committed by GitHub
parent 3cca153696 caa772348f
commit 3de174554c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
res/css/structures/_SpacePanel.scss
View File

@ -79,8 +79,11 @@ $activeBorderColor: $secondary-fg-color;
.mx_SpaceItem { .mx_SpaceItem {
display: inline-flex; display: inline-flex;
flex-flow: wrap; flex-flow: wrap;
&.mx_SpaceItem_narrow {
align-self: baseline; align-self: baseline;
} }
}
.mx_SpaceItem.collapsed { .mx_SpaceItem.collapsed {
& > .mx_SpaceButton > .mx_SpaceButton_toggleCollapse { & > .mx_SpaceButton > .mx_SpaceButton_toggleCollapse {
@ -276,7 +279,7 @@ $activeBorderColor: $secondary-fg-color;
.mx_SpaceButton:hover, .mx_SpaceButton:hover,
.mx_SpaceButton:focus-within, .mx_SpaceButton:focus-within,
.mx_SpaceButton_hasMenuOpen { .mx_SpaceButton_hasMenuOpen {
&:not(.mx_SpaceButton_home) { &:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) {
// Hide the badge container on hover because it'll be a menu button // Hide the badge container on hover because it'll be a menu button
.mx_SpacePanel_badgeContainer { .mx_SpacePanel_badgeContainer {
width: 0; width: 0;

6
src/components/views/spaces/SpaceTreeLevel.tsx
View File

@ -297,15 +297,19 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
const isActive = activeSpaces.includes(space); const isActive = activeSpaces.includes(space);
const itemClasses = classNames({ const itemClasses = classNames({
"mx_SpaceItem": true, "mx_SpaceItem": true,
"mx_SpaceItem_narrow": isNarrow,
"collapsed": collapsed, "collapsed": collapsed,
"hasSubSpaces": childSpaces && childSpaces.length, "hasSubSpaces": childSpaces && childSpaces.length,
}); });
const isInvite = space.getMyMembership() === "invite";
const classes = classNames("mx_SpaceButton", { const classes = classNames("mx_SpaceButton", {
mx_SpaceButton_active: isActive, mx_SpaceButton_active: isActive,
mx_SpaceButton_hasMenuOpen: !!this.state.contextMenuPosition, mx_SpaceButton_hasMenuOpen: !!this.state.contextMenuPosition,
mx_SpaceButton_narrow: isNarrow, mx_SpaceButton_narrow: isNarrow,
mx_SpaceButton_invite: isInvite,
}); });
const notificationState = space.getMyMembership() === "invite" const notificationState = isInvite
? StaticNotificationState.forSymbol("!", NotificationColor.Red) ? StaticNotificationState.forSymbol("!", NotificationColor.Red)
: SpaceStore.instance.getNotificationState(space.roomId); : SpaceStore.instance.getNotificationState(space.roomId);