nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Don't use the minimised width(68px) on the new room list (#29778)

Browse Source 
* Don't toggle to the minimised left bar size.

* Don't re-style old room list when at the minimum size

* Only apply larger minimised with on new room list

* Don't tell child views we are minimised for the new room list

* move comment to the correct place

* address PR comments

* Don't wrap search text and add truncation down to a minimum of 50px

* Put min-width on the button so that we don't have to hardcode the 50px

* Keep the flex display, shrink and truncate just the search text and keep the shortcut

* Update snapshots

* Add comment for magic value

* Make inner search text a span

* Add e2e test for smallscreen to test responsiveness

* Update snapshots

* Forcing an empty commit to fix PR

* Change minWidth to 224
This commit is contained in:
David Langley
2025-05-14 18:21:27 +01:00
committed by GitHub
parent 231515bc6c
commit 69c1a8cd1c
9 changed files with 68 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/structures/LeftPanel.tsx
View File

@@ -379,13 +379,14 @@ export default class LeftPanel extends React.Component<IProps, IState> {
}
public render(): React.ReactNode {
const useNewRoomList = SettingsStore.getValue("feature_new_room_list");
const containerClasses = classNames({
mx_LeftPanel: true,
mx_LeftPanel_newRoomList: useNewRoomList,
mx_LeftPanel_minimized: this.props.isMinimized,
});
const roomListClasses = classNames("mx_LeftPanel_actualRoomListContainer", "mx_AutoHideScrollbar");
const useNewRoomList = SettingsStore.getValue("feature_new_room_list");
if (useNewRoomList) {
return (
<div className={containerClasses}>

22
src/components/structures/LoggedInView.tsx
View File

@@ -259,9 +259,11 @@ class LoggedInView extends React.Component<IProps, IState> {
private createResizer(): Resizer<ICollapseConfig, CollapseItem> {
let panelSize: number | null;
let panelCollapsed: boolean;
const useNewRoomList = SettingsStore.getValue("feature_new_room_list");
// TODO decrease this once Spaces launches as it'll no longer need to include the 56px Community Panel
const toggleSize = useNewRoomList ? 224 : 206 - 50;
const collapseConfig: ICollapseConfig = {
// TODO decrease this once Spaces launches as it'll no longer need to include the 56px Community Panel
toggleSize: 206 - 50,
toggleSize,
onCollapsed: (collapsed) => {
panelCollapsed = collapsed;
if (collapsed) {
@@ -697,10 +699,18 @@ class LoggedInView extends React.Component<IProps, IState> {
"mx_MatrixChat--with-avatar": this.state.backgroundImage,
});
const useNewRoomList = SettingsStore.getValue("feature_new_room_list");
const leftPanelWrapperClasses = classNames({
mx_LeftPanel_wrapper: true,
mx_LeftPanel_newRoomList: useNewRoomList,
});
const audioFeedArraysForCalls = this.state.activeCalls.map((call) => {
return <AudioFeedArrayForLegacyCall call={call} key={call.callId} />;
});
const shouldUseMinimizedUI = !useNewRoomList && this.props.collapseLhs;
return (
<MatrixClientContextProvider client={this._matrixClient}>
<div
@@ -712,19 +722,19 @@ class LoggedInView extends React.Component<IProps, IState> {
<ToastContainer />
<div className={bodyClasses}>
<div className="mx_LeftPanel_outerWrapper">
<LeftPanelLiveShareWarning isMinimized={this.props.collapseLhs || false} />
<div className="mx_LeftPanel_wrapper">
<LeftPanelLiveShareWarning isMinimized={shouldUseMinimizedUI || false} />
<div className={leftPanelWrapperClasses}>
<BackdropPanel blurMultiplier={0.5} backgroundImage={this.state.backgroundImage} />
<SpacePanel />
<BackdropPanel backgroundImage={this.state.backgroundImage} />
<div
className="mx_LeftPanel_wrapper--user"
ref={this._resizeContainer}
data-collapsed={this.props.collapseLhs ? true : undefined}
data-collapsed={shouldUseMinimizedUI ? true : undefined}
>
<LeftPanel
pageType={this.props.page_type as PageTypes}
isMinimized={this.props.collapseLhs || false}
isMinimized={shouldUseMinimizedUI || false}
resizeNotifier={this.props.resizeNotifier}
/>
</div>