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

Update Space Panel scrollable region (#7245)

Browse source
This commit is contained in:
Michael Telatynski 2021-12-01 10:51:54 +00:00 • committed by GitHub
parent 4a6d46b76a
commit 82c125c170
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 25 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -14,11 +14,11 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { createRef } from "react";
import React, { ComponentProps, createRef } from "react";
import AutoHideScrollbar from "./AutoHideScrollbar";
import { replaceableComponent } from "../../utils/replaceableComponent";
interface IProps {
interface IProps extends Omit<ComponentProps<typeof AutoHideScrollbar>, "onWheel"> {
// If true, the scrollbar will append mx_IndicatorScrollbar_leftOverflowIndicator
// and mx_IndicatorScrollbar_rightOverflowIndicator elements to the list for positioning
// by the parent element.
@ -55,6 +55,7 @@ export default class IndicatorScrollbar extends React.Component<IProps, IState>
}
private collectScroller = (scroller: HTMLDivElement): void => {
this.props.wrappedRef?.(scroller);
if (scroller && !this.scrollElement) {
this.scrollElement = scroller;
// Using the passive option to not block the main thread
@ -185,10 +186,10 @@ export default class IndicatorScrollbar extends React.Component<IProps, IState>
? <div className="mx_IndicatorScrollbar_rightOverflowIndicator" style={rightIndicatorStyle} /> : null;
return (<AutoHideScrollbar
{...otherProps}
ref={this.autoHideScrollbar}
wrappedRef={this.collectScroller}
onWheel={this.onMouseWheel}
{...otherProps}
>
{ leftOverflowIndicator }
{ children }

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

@ -44,7 +44,6 @@ import {
UPDATE_SELECTED_SPACE,
UPDATE_TOP_LEVEL_SPACES,
} from "../../../stores/spaces";
import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
import { RovingTabIndexProvider } from "../../../accessibility/RovingTabIndex";
import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";
import SpaceContextMenu from "../context_menus/SpaceContextMenu";
@ -58,6 +57,7 @@ import UIStore from "../../../stores/UIStore";
import QuickSettingsButton from "./QuickSettingsButton";
import { useSettingValue } from "../../../hooks/useSettings";
import UserMenu from "../../structures/UserMenu";
import IndicatorScrollbar from "../../structures/IndicatorScrollbar";
const useSpaces = (): [Room[], MetaSpace[], Room[], SpaceKey] => {
const invites = useEventEmitterState<Room[]>(SpaceStore.instance, UPDATE_INVITED_SPACES, () => {
@ -252,7 +252,6 @@ const InnerSpacePanel = React.memo<IInnerSpacePanelProps>(({ children, isPanelCo
});
return <div className="mx_SpaceTreeLevel">
<UserMenu isPanelCollapsed={isPanelCollapsed} />
{ metaSpacesSection }
{ invites.map(s => (
<SpaceItem
@ -308,9 +307,10 @@ const SpacePanel = () => {
aria-label={_t("Spaces")}
ref={ref}
>
<UserMenu isPanelCollapsed={isPanelCollapsed} />
<Droppable droppableId="top-level-spaces">
{ (provided, snapshot) => (
<AutoHideScrollbar
<IndicatorScrollbar
{...provided.droppableProps}
wrappedRef={provided.innerRef}
className="mx_SpacePanel_spaceTreeWrapper"
@ -324,7 +324,7 @@ const SpacePanel = () => {
>
{ provided.placeholder }
</InnerSpacePanel>
</AutoHideScrollbar>
</IndicatorScrollbar>
) }
</Droppable>
<AccessibleTooltipButton