New room list: remove color gradient in space panel (#29721)
* feat: remove blur effect in space * feat: remove user menu border and align * test(e2e): update snapshots
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 78 KiB After Width: | Height: | Size: 78 KiB |
|
Before Width: | Height: | Size: 74 KiB After Width: | Height: | Size: 74 KiB |
|
Before Width: | Height: | Size: 92 KiB After Width: | Height: | Size: 92 KiB |
@@ -30,6 +30,11 @@ Please see LICENSE files in the repository root for full details.
|
|||||||
width: 68px;
|
width: 68px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.newUi {
|
||||||
|
background-color: var(--cpd-color-bg-canvas-default);
|
||||||
|
border-right: 1px solid var(--cpd-color-bg-subtle-primary);
|
||||||
|
}
|
||||||
|
|
||||||
.mx_SpacePanel_toggleCollapse {
|
.mx_SpacePanel_toggleCollapse {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 18px;
|
width: 18px;
|
||||||
@@ -399,6 +404,11 @@ Please see LICENSE files in the repository root for full details.
|
|||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.newUi .mx_UserMenu {
|
||||||
|
margin-top: var(--cpd-space-4x);
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_SpacePanel_contextMenu {
|
.mx_SpacePanel_contextMenu {
|
||||||
|
|||||||
@@ -724,9 +724,11 @@ class LoggedInView extends React.Component<IProps, IState> {
|
|||||||
<div className="mx_LeftPanel_outerWrapper">
|
<div className="mx_LeftPanel_outerWrapper">
|
||||||
<LeftPanelLiveShareWarning isMinimized={shouldUseMinimizedUI || false} />
|
<LeftPanelLiveShareWarning isMinimized={shouldUseMinimizedUI || false} />
|
||||||
<div className={leftPanelWrapperClasses}>
|
<div className={leftPanelWrapperClasses}>
|
||||||
|
{!useNewRoomList && (
|
||||||
<BackdropPanel blurMultiplier={0.5} backgroundImage={this.state.backgroundImage} />
|
<BackdropPanel blurMultiplier={0.5} backgroundImage={this.state.backgroundImage} />
|
||||||
|
)}
|
||||||
<SpacePanel />
|
<SpacePanel />
|
||||||
<BackdropPanel backgroundImage={this.state.backgroundImage} />
|
{!useNewRoomList && <BackdropPanel backgroundImage={this.state.backgroundImage} />}
|
||||||
<div
|
<div
|
||||||
className="mx_LeftPanel_wrapper--user"
|
className="mx_LeftPanel_wrapper--user"
|
||||||
ref={this._resizeContainer}
|
ref={this._resizeContainer}
|
||||||
|
|||||||
@@ -363,6 +363,8 @@ const SpacePanel: React.FC = () => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const newRoomListEnabled = useSettingValue("feature_new_room_list");
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<RovingTabIndexProvider handleHomeEnd handleUpDown={!dragging}>
|
<RovingTabIndexProvider handleHomeEnd handleUpDown={!dragging}>
|
||||||
{({ onKeyDownHandler, onDragEndHandler }) => (
|
{({ onKeyDownHandler, onDragEndHandler }) => (
|
||||||
@@ -378,7 +380,10 @@ const SpacePanel: React.FC = () => {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<nav
|
<nav
|
||||||
className={classNames("mx_SpacePanel", { collapsed: isPanelCollapsed })}
|
className={classNames("mx_SpacePanel", {
|
||||||
|
collapsed: isPanelCollapsed,
|
||||||
|
newUi: newRoomListEnabled,
|
||||||
|
})}
|
||||||
onKeyDown={(ev) => {
|
onKeyDown={(ev) => {
|
||||||
const navAction = getKeyBindingsManager().getNavigationAction(ev);
|
const navAction = getKeyBindingsManager().getNavigationAction(ev);
|
||||||
if (
|
if (
|
||||||
|
|||||||