matrix/matrix-react-sdk
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-react-sdk.git synced 2025-11-13 08:02:38 +03:00
Code Activity

Merge pull request #4844 from matrix-org/travis/room-list/tag-panel

Browse Source 
Allow the tag panel to be disabled in the new room list
This commit is contained in:
Travis Ralston
2020-06-26 07:27:51 -06:00
committed by GitHub
parent 424443927f 3abc9d8d56
commit f96682f3c2
2 changed files with 22 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
res/css/structures/_LeftPanel2.scss
View File

@@ -38,6 +38,12 @@ $tagPanelWidth: 70px; // only applies in this file, used for calculations
// TagPanel handles its own CSS
}
&:not(.mx_LeftPanel2_hasTagPanel) {
.mx_LeftPanel2_roomListContainer {
width: 100%;
}
}
// Note: The 'room list' in this context is actually everything that isn't the tag
// panel, such as the menu options, breadcrumbs, filtering, etc
.mx_LeftPanel2_roomListContainer {
@@ -127,7 +133,12 @@ $tagPanelWidth: 70px; // only applies in this file, used for calculations
min-width: unset;
// We have to forcefully set the width to override the resizer's style attribute.
&.mx_LeftPanel2_hasTagPanel {
width: calc(68px + $tagPanelWidth) !important;
}
&:not(.mx_LeftPanel2_hasTagPanel) {
width: 68px !important;
}
.mx_LeftPanel2_roomListContainer {
width: 68px;

11
src/components/structures/LeftPanel2.tsx
View File

@@ -29,6 +29,7 @@ import RoomBreadcrumbs2 from "../views/rooms/RoomBreadcrumbs2";
import { BreadcrumbsStore } from "../../stores/BreadcrumbsStore";
import { UPDATE_EVENT } from "../../stores/AsyncStore";
import ResizeNotifier from "../../utils/ResizeNotifier";
import SettingsStore from "../../settings/SettingsStore";
/*******************************************************************
* CAUTION *
@@ -46,10 +47,12 @@ interface IProps {
interface IState {
searchFilter: string; // TODO: Move search into room list?
showBreadcrumbs: boolean;
showTagPanel: boolean;
}
export default class LeftPanel2 extends React.Component<IProps, IState> {
private listContainerRef: React.RefObject<HTMLDivElement> = createRef();
private tagPanelWatcherRef: string;
// TODO: Properly support TagPanel
// TODO: Properly support searching/filtering
@@ -64,9 +67,13 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
this.state = {
searchFilter: "",
showBreadcrumbs: BreadcrumbsStore.instance.visible,
showTagPanel: SettingsStore.getValue('TagPanel.enableTagPanel'),
};
BreadcrumbsStore.instance.on(UPDATE_EVENT, this.onBreadcrumbsUpdate);
this.tagPanelWatcherRef = SettingsStore.watchSetting("TagPanel.enableTagPanel", null, () => {
this.setState({showTagPanel: SettingsStore.getValue("TagPanel.enableTagPanel")});
});
// We watch the middle panel because we don't actually get resized, the middle panel does.
// We listen to the noisy channel to avoid choppy reaction times.
@@ -74,6 +81,7 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
}
public componentWillUnmount() {
SettingsStore.unwatchSetting(this.tagPanelWatcherRef);
BreadcrumbsStore.instance.off(UPDATE_EVENT, this.onBreadcrumbsUpdate);
this.props.resizeNotifier.off("middlePanelResizedNoisy", this.onResize);
}
@@ -181,7 +189,7 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
}
public render(): React.ReactNode {
const tagPanel = (
const tagPanel = !this.state.showTagPanel ? null : (
<div className="mx_LeftPanel2_tagPanelContainer">
<TagPanel/>
</div>
@@ -202,6 +210,7 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
const containerClasses = classNames({
"mx_LeftPanel2": true,
"mx_LeftPanel2_hasTagPanel": !!tagPanel,
"mx_LeftPanel2_minimized": this.props.isMinimized,
});