diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss index 7d57425f6f..6edee5eed2 100644 --- a/res/css/structures/_LeftPanel.scss +++ b/res/css/structures/_LeftPanel.scss @@ -22,6 +22,14 @@ limitations under the License. flex: 0 0 auto; } +// TODO: Remove temporary indicator of new room list implementation. +// This border is meant to visually distinguish between the two components when the +// user has turned on the new room list implementation, at least until the designs +// themselves give it away. +.mx_LeftPanel2 .mx_LeftPanel { + border-left: 5px #e26dff solid; +} + .mx_LeftPanel_container.collapsed { min-width: unset; /* Collapsed LeftPanel 50px */ diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js index 837064e822..05cd97df2a 100644 --- a/src/components/structures/LeftPanel.js +++ b/src/components/structures/LeftPanel.js @@ -26,7 +26,6 @@ import * as VectorConferenceHandler from '../../VectorConferenceHandler'; import SettingsStore from '../../settings/SettingsStore'; import {_t} from "../../languageHandler"; import Analytics from "../../Analytics"; -import RoomList2 from "../views/rooms/RoomList2"; import {Action} from "../../dispatcher/actions"; @@ -275,28 +274,15 @@ const LeftPanel = createReactClass({ breadcrumbs = (); } - let roomList = null; - if (SettingsStore.isFeatureEnabled("feature_new_room_list")) { - roomList = ; - } else { - roomList = ; - } + const roomList = ; return (
diff --git a/src/components/structures/LeftPanel2.tsx b/src/components/structures/LeftPanel2.tsx new file mode 100644 index 0000000000..c9a4948539 --- /dev/null +++ b/src/components/structures/LeftPanel2.tsx @@ -0,0 +1,154 @@ +/* +Copyright 2020 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import * as React from "react"; +import TagPanel from "./TagPanel"; +import classNames from "classnames"; +import dis from "../../dispatcher/dispatcher"; +import AccessibleButton from "../views/elements/AccessibleButton"; +import { _t } from "../../languageHandler"; +import SearchBox from "./SearchBox"; +import RoomList2 from "../views/rooms/RoomList2"; +import TopLeftMenuButton from "./TopLeftMenuButton"; +import { Action } from "../../dispatcher/actions"; + +/******************************************************************* + * CAUTION * + ******************************************************************* + * This is a work in progress implementation and isn't complete or * + * even useful as a component. Please avoid using it until this * + * warning disappears. * + *******************************************************************/ + +interface IProps { + // TODO: Support collapsed state +} + +interface IState { + searchExpanded: boolean; + searchFilter: string; // TODO: Move search into room list? +} + +export default class LeftPanel2 extends React.Component { + // TODO: Properly support TagPanel + // TODO: Properly support searching/filtering + // TODO: Properly support breadcrumbs + // TODO: Properly support TopLeftMenu (User Settings) + // TODO: a11y + // TODO: actually make this useful in general (match design proposals) + // TODO: Fadable support (is this still needed?) + + constructor(props: IProps) { + super(props); + + this.state = { + searchExpanded: false, + searchFilter: "", + }; + } + + private onSearch = (term: string): void => { + this.setState({searchFilter: term}); + }; + + private onSearchCleared = (source: string): void => { + if (source === "keyboard") { + dis.fire(Action.FocusComposer); + } + this.setState({searchExpanded: false}); + } + + private onSearchFocus = (): void => { + this.setState({searchExpanded: true}); + }; + + private onSearchBlur = (event: FocusEvent): void => { + const target = event.target as HTMLInputElement; + if (target.value.length === 0) { + this.setState({searchExpanded: false}); + } + } + + public render(): React.ReactNode { + const tagPanel = ( +
+ +
+ ); + + const exploreButton = ( +
+ dis.dispatch({action: 'view_room_directory'})}> + {_t("Explore")} + +
+ ); + + const searchBox = ( {/*TODO*/}} + onSearch={this.onSearch} + onCleared={this.onSearchCleared} + onFocus={this.onSearchFocus} + onBlur={this.onSearchBlur} + collapsed={false}/>); // TODO: Collapsed support + + // TODO: Improve props for RoomList2 + const roomList = {/*TODO*/}} + resizeNotifier={null} + collapsed={false} + searchFilter={this.state.searchFilter} + onFocus={() => {/*TODO*/}} + onBlur={() => {/*TODO*/}} + />; + + // TODO: Breadcrumbs + // TODO: Conference handling / calls + + const containerClasses = classNames({ + "mx_LeftPanel_container": true, + "mx_fadable": true, + "collapsed": false, // TODO: Collapsed support + "mx_LeftPanel_container_hasTagPanel": true, // TODO: TagPanel support + "mx_fadable_faded": false, + "mx_LeftPanel2": true, // TODO: Remove flag when RoomList2 ships (used as an indicator) + }); + + return ( +
+ {tagPanel} + +
+ ); + } +} diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx index cf985187e3..d09706402a 100644 --- a/src/components/structures/LoggedInView.tsx +++ b/src/components/structures/LoggedInView.tsx @@ -52,6 +52,7 @@ import { hideToast as hideServerLimitToast } from "../../toasts/ServerLimitToast"; import { Action } from "../../dispatcher/actions"; +import LeftPanel2 from "./LeftPanel2"; // We need to fetch each pinned message individually (if we don't already have it) // so each pinned message may trigger a request. Limit the number per room for sanity. @@ -656,6 +657,20 @@ class LoggedInView extends React.PureComponent { bodyClasses += ' mx_MatrixChat_useCompactLayout'; } + let leftPanel = ( + + ); + if (SettingsStore.isFeatureEnabled("feature_new_room_list")) { + // TODO: Supply props like collapsed and disabled to LeftPanel2 + leftPanel = ( + + ); + } + return (
{
- + { leftPanel } { pageElement }