Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Update Space Panel scrollable region (#7245)
Browse files Browse the repository at this point in the history
  • Loading branch information
t3chguy authored Dec 1, 2021
1 parent 4a6d46b commit 82c125c
Show file tree
Hide file tree
Showing 4 changed files with 25 additions and 13 deletions.
20 changes: 15 additions & 5 deletions res/css/structures/_SpacePanel.scss
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,6 @@ $activeBorderColor: $primary-content;
display: flex;
flex-direction: column;

.mx_SpacePanel_spaceTreeWrapper {
flex: 1;
padding: 12px 8px 16px 0;
}

.mx_SpacePanel_toggleCollapse {
margin: 0 auto;
position: relative;
Expand Down Expand Up @@ -336,6 +331,9 @@ $activeBorderColor: $primary-content;

/* root space buttons are bigger and not indented */
& > .mx_AutoHideScrollbar {
flex: 1;
padding: 0 8px 16px 0;

& > .mx_SpaceButton {
height: $topLevelHeight;

Expand All @@ -347,6 +345,18 @@ $activeBorderColor: $primary-content;
& > ul {
padding-left: 0;
}

&.mx_IndicatorScrollbar_topOverflow {
mask-image: linear-gradient(180deg, transparent, black 5%);
}

&.mx_IndicatorScrollbar_bottomOverflow {
mask-image: linear-gradient(180deg, black, black 95%, transparent);
}

&.mx_IndicatorScrollbar_topOverflow.mx_IndicatorScrollbar_bottomOverflow {
mask-image: linear-gradient(180deg, transparent, black 5%, black 95%, transparent);
}
}
}

Expand Down
3 changes: 2 additions & 1 deletion res/css/structures/_UserMenu.scss
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,11 @@ limitations under the License.
border-bottom: 1px solid $quinary-content;
margin-left: 18px;
margin-bottom: 4px;
margin-top: 12px;
box-sizing: border-box;
display: flex;
align-items: center;
width: max-content;
width: calc(100% - 20px);

.mx_UserMenu_userAvatar {
position: relative;
Expand Down
7 changes: 4 additions & 3 deletions src/components/structures/IndicatorScrollbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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 }
Expand Down
8 changes: 4 additions & 4 deletions src/components/views/spaces/SpacePanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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, () => {
Expand Down Expand Up @@ -252,7 +252,6 @@ const InnerSpacePanel = React.memo<IInnerSpacePanelProps>(({ children, isPanelCo
});

return <div className="mx_SpaceTreeLevel">
<UserMenu isPanelCollapsed={isPanelCollapsed} />
{ metaSpacesSection }
{ invites.map(s => (
<SpaceItem
Expand Down Expand Up @@ -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"
Expand All @@ -324,7 +324,7 @@ const SpacePanel = () => {
>
{ provided.placeholder }
</InnerSpacePanel>
</AutoHideScrollbar>
</IndicatorScrollbar>
) }
</Droppable>
<AccessibleTooltipButton
Expand Down

0 comments on commit 82c125c

Please sign in to comment.