PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Fix space panel edge gradient not applying on load (#7644)

Browse source
This commit is contained in:
Michael Telatynski 2022-01-27 09:36:58 +00:00 committed by GitHub
parent 3eca71bc84
commit 3ff4c6808f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 42 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/components/structures/IndicatorScrollbar.tsx
View file

@ -18,6 +18,7 @@ import React, { ComponentProps, createRef } from "react";
import AutoHideScrollbar from "./AutoHideScrollbar"; import AutoHideScrollbar from "./AutoHideScrollbar";
import { replaceableComponent } from "../../utils/replaceableComponent"; import { replaceableComponent } from "../../utils/replaceableComponent";
import UIStore, { UI_EVENTS } from "../../stores/UIStore";
interface IProps extends Omit<ComponentProps<typeof AutoHideScrollbar>, "onWheel"> { interface IProps extends Omit<ComponentProps<typeof AutoHideScrollbar>, "onWheel"> {
// If true, the scrollbar will append mx_IndicatorScrollbar_leftOverflowIndicator // If true, the scrollbar will append mx_IndicatorScrollbar_leftOverflowIndicator
@ -35,8 +36,8 @@ interface IProps extends Omit<ComponentProps<typeof AutoHideScrollbar>, "onWheel
} }
interface IState { interface IState {
leftIndicatorOffset: number | string; leftIndicatorOffset: string;
rightIndicatorOffset: number | string; rightIndicatorOffset: string;
} }
@replaceableComponent("structures.IndicatorScrollbar") @replaceableComponent("structures.IndicatorScrollbar")
@ -50,8 +51,8 @@ export default class IndicatorScrollbar extends React.Component<IProps, IState>
super(props); super(props);
this.state = { this.state = {
leftIndicatorOffset: 0, leftIndicatorOffset: '0',
rightIndicatorOffset: 0, rightIndicatorOffset: '0',
}; };
} }
@ -79,6 +80,7 @@ export default class IndicatorScrollbar extends React.Component<IProps, IState>
public componentDidMount(): void { public componentDidMount(): void {
this.checkOverflow(); this.checkOverflow();
UIStore.instance.on(UI_EVENTS.Resize, this.checkOverflow);
} }
private checkOverflow = (): void => { private checkOverflow = (): void => {
@ -122,9 +124,8 @@ export default class IndicatorScrollbar extends React.Component<IProps, IState>
}; };
public componentWillUnmount(): void { public componentWillUnmount(): void {
if (this.scrollElement) { this.scrollElement?.removeEventListener("scroll", this.checkOverflow);
this.scrollElement.removeEventListener("scroll", this.checkOverflow); UIStore.instance.off(UI_EVENTS.Resize, this.checkOverflow);
}
} }
private onMouseWheel = (e: React.WheelEvent): void => { private onMouseWheel = (e: React.WheelEvent): void => {

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

@ -18,6 +18,7 @@ import React, {
ComponentProps, ComponentProps,
Dispatch, Dispatch,
ReactNode, ReactNode,
RefCallback,
SetStateAction, SetStateAction,
useCallback, useCallback,
useEffect, useEffect,
@ -25,7 +26,7 @@ import React, {
useRef, useRef,
useState, useState,
} from "react"; } from "react";
import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd"; import { DragDropContext, Draggable, Droppable, DroppableProvidedProps } from "react-beautiful-dnd";
import classNames from "classnames"; import classNames from "classnames";
import { Room } from "matrix-js-sdk/src/models/room"; import { Room } from "matrix-js-sdk/src/models/room";
@ -87,12 +88,6 @@ const useSpaces = (): [Room[], MetaSpace[], Room[], SpaceKey] => {
return [invites, metaSpaces, actualSpaces, activeSpace]; return [invites, metaSpaces, actualSpaces, activeSpace];
}; };
interface IInnerSpacePanelProps {
children?: ReactNode;
isPanelCollapsed: boolean;
setPanelCollapsed: Dispatch<SetStateAction<boolean>>;
}
export const HomeButtonContextMenu = ({ export const HomeButtonContextMenu = ({
onFinished, onFinished,
hideHeader, hideHeader,
@ -260,8 +255,23 @@ const metaSpaceComponentMap: Record<MetaSpace, typeof HomeButton> = {
[MetaSpace.Orphans]: OrphansButton, [MetaSpace.Orphans]: OrphansButton,
}; };
interface IInnerSpacePanelProps extends DroppableProvidedProps {
children?: ReactNode;
isPanelCollapsed: boolean;
setPanelCollapsed: Dispatch<SetStateAction<boolean>>;
isDraggingOver: boolean;
innerRef: RefCallback<HTMLElement>;
}
// Optimisation based on https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/api/droppable.md#recommended-droppable--performance-optimisation // Optimisation based on https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/api/droppable.md#recommended-droppable--performance-optimisation
const InnerSpacePanel = React.memo<IInnerSpacePanelProps>(({ children, isPanelCollapsed, setPanelCollapsed }) => { const InnerSpacePanel = React.memo<IInnerSpacePanelProps>(({
children,
isPanelCollapsed,
setPanelCollapsed,
isDraggingOver,
innerRef,
...props
}) => {
const [invites, metaSpaces, actualSpaces, activeSpace] = useSpaces(); const [invites, metaSpaces, actualSpaces, activeSpace] = useSpaces();
const activeSpaces = activeSpace ? [activeSpace] : []; const activeSpaces = activeSpace ? [activeSpace] : [];
@ -270,7 +280,14 @@ const InnerSpacePanel = React.memo<IInnerSpacePanelProps>(({ children, isPanelCo
return <Component key={key} selected={activeSpace === key} isPanelCollapsed={isPanelCollapsed} />; return <Component key={key} selected={activeSpace === key} isPanelCollapsed={isPanelCollapsed} />;
}); });
return <div className="mx_SpaceTreeLevel"> return <IndicatorScrollbar
{...props}
wrappedRef={innerRef}
className="mx_SpaceTreeLevel"
style={isDraggingOver ? {
pointerEvents: "none",
} : undefined}
>
{ metaSpacesSection } { metaSpacesSection }
{ invites.map(s => ( { invites.map(s => (
<SpaceItem <SpaceItem
@ -300,7 +317,7 @@ const InnerSpacePanel = React.memo<IInnerSpacePanelProps>(({ children, isPanelCo
)) } )) }
{ children } { children }
<CreateSpaceButton isPanelCollapsed={isPanelCollapsed} setPanelCollapsed={setPanelCollapsed} /> <CreateSpaceButton isPanelCollapsed={isPanelCollapsed} setPanelCollapsed={setPanelCollapsed} />
</div>; </IndicatorScrollbar>;
}); });
const SpacePanel = () => { const SpacePanel = () => {
@ -352,21 +369,15 @@ const SpacePanel = () => {
</UserMenu> </UserMenu>
<Droppable droppableId="top-level-spaces"> <Droppable droppableId="top-level-spaces">
{ (provided, snapshot) => ( { (provided, snapshot) => (
<IndicatorScrollbar <InnerSpacePanel
{...provided.droppableProps} {...provided.droppableProps}
wrappedRef={provided.innerRef} isPanelCollapsed={isPanelCollapsed}
className="mx_SpacePanel_spaceTreeWrapper" setPanelCollapsed={setPanelCollapsed}
style={snapshot.isDraggingOver ? { isDraggingOver={snapshot.isDraggingOver}
pointerEvents: "none", innerRef={provided.innerRef}
} : undefined}
> >
<InnerSpacePanel { provided.placeholder }
isPanelCollapsed={isPanelCollapsed} </InnerSpacePanel>
setPanelCollapsed={setPanelCollapsed}
>
{ provided.placeholder }
</InnerSpacePanel>
</IndicatorScrollbar>
) } ) }
</Droppable> </Droppable>