Merge branch 'develop' into travis/room-list/unread-2

src/components/structures/LeftPanel2.tsx

@@ -19,7 +19,6 @@ import TagPanel from "./TagPanel";
 import classNames from "classnames";
 import dis from "../../dispatcher/dispatcher";
 import { _t } from "../../languageHandler";
-import SearchBox from "./SearchBox";
 import RoomList2 from "../views/rooms/RoomList2";
 import { Action } from "../../dispatcher/actions";
 import { MatrixClientPeg } from "../../MatrixClientPeg";
@@ -30,6 +29,8 @@ import AccessibleButton from "../views/elements/AccessibleButton";
 import RoomBreadcrumbs2 from "../views/rooms/RoomBreadcrumbs2";
 import { BreadcrumbsStore } from "../../stores/BreadcrumbsStore";
 import { UPDATE_EVENT } from "../../stores/AsyncStore";
+import ResizeNotifier from "../../utils/ResizeNotifier";
+import { createRef } from "react";
 
 /*******************************************************************
  *   CAUTION                                                       *
@@ -41,6 +42,7 @@ import { UPDATE_EVENT } from "../../stores/AsyncStore";
 
 interface IProps {
     isMinimized: boolean;
+    resizeNotifier: ResizeNotifier;
 }
 
 interface IState {
@@ -49,6 +51,8 @@ interface IState {
 }
 
 export default class LeftPanel2 extends React.Component<IProps, IState> {
+    private listContainerRef: React.RefObject<HTMLDivElement> = createRef();
+
     // TODO: Properly support TagPanel
     // TODO: Properly support searching/filtering
     // TODO: Properly support breadcrumbs
@@ -65,10 +69,15 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
         };
 
         BreadcrumbsStore.instance.on(UPDATE_EVENT, this.onBreadcrumbsUpdate);
+
+        // 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.
+        this.props.resizeNotifier.on("middlePanelResizedNoisy", this.onResize);
     }
 
     public componentWillUnmount() {
         BreadcrumbsStore.instance.off(UPDATE_EVENT, this.onBreadcrumbsUpdate);
+        this.props.resizeNotifier.off("middlePanelResizedNoisy", this.onResize);
     }
 
     private onSearch = (term: string): void => {
@@ -86,9 +95,7 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
         }
     };
 
-    // TODO: Apply this on resize, init, etc for reliability
-    private onScroll = (ev: React.MouseEvent<HTMLDivElement>) => {
-        const list = ev.target as HTMLDivElement;
+    private handleStickyHeaders(list: HTMLDivElement) {
         const rlRect = list.getBoundingClientRect();
         const bottom = rlRect.bottom;
         const top = rlRect.top;
@@ -123,6 +130,18 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
                 header.style.top = `unset`;
             }
         }
+    }
+
+    // TODO: Apply this on resize, init, etc for reliability
+    private onScroll = (ev: React.MouseEvent<HTMLDivElement>) => {
+        const list = ev.target as HTMLDivElement;
+        this.handleStickyHeaders(list);
+    };
+
+    private onResize = () => {
+        console.log("Resize width");
+        if (!this.listContainerRef.current) return; // ignore: no headers to sticky
+        this.handleStickyHeaders(this.listContainerRef.current);
     };
 
     private renderHeader(): React.ReactNode {
@@ -230,9 +249,11 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
                 <aside className="mx_LeftPanel2_roomListContainer">
                     {this.renderHeader()}
                     {this.renderSearchExplore()}
-                    <div className="mx_LeftPanel2_actualRoomListContainer" onScroll={this.onScroll}>
-                        {roomList}
-                    </div>
+                    <div
+                        className="mx_LeftPanel2_actualRoomListContainer"
+                        onScroll={this.onScroll}
+                        ref={this.listContainerRef}
+                    >{roomList}</div>
                 </aside>
             </div>
         );

src/components/structures/LoggedInView.tsx

@@ -677,7 +677,10 @@ class LoggedInView extends React.PureComponent<IProps, IState> {
         if (SettingsStore.isFeatureEnabled("feature_new_room_list")) {
             // TODO: Supply props like collapsed and disabled to LeftPanel2
             leftPanel = (
-                <LeftPanel2 isMinimized={this.props.collapseLhs || false} />
+                <LeftPanel2
+                    isMinimized={this.props.collapseLhs || false}
+                    resizeNotifier={this.props.resizeNotifier}
+                />
             );
         }
 

src/components/structures/UserMenuButton.tsx

@@ -117,7 +117,7 @@ export default class UserMenuButton extends React.Component<IProps, IState> {
         SettingsStore.setValue("use_system_theme", null, SettingLevel.DEVICE, false);
 
         const newTheme = this.state.isDarkTheme ? "light" : "dark";
-        SettingsStore.setValue("theme", null, SettingLevel.ACCOUNT, newTheme);
+        SettingsStore.setValue("theme", null, SettingLevel.DEVICE, newTheme); // set at same level as Appearance tab
     };
 
     private onSettingsOpen = (ev: ButtonEvent, tabId: string) => {

src/components/views/rooms/RoomSublist2.tsx

@@ -291,7 +291,18 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
                         'mx_RoomSublist2_headerContainer_withAux': !!addRoomButton,
                     });
 
+                    const badgeContainer = (
+                        <div className="mx_RoomSublist2_badgeContainer">
+                            {badge}
+                        </div>
+                    );
+
                     // TODO: a11y (see old component)
+                    // Note: the addRoomButton conditionally gets moved around
+                    // the DOM depending on whether or not the list is minimized.
+                    // If we're minimized, we want it below the header so it
+                    // doesn't become sticky.
+                    // The same applies to the notification badge.
                     return (
                         <div className={classes}>
                             <div className='mx_RoomSublist2_stickable'>
@@ -307,11 +318,11 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
                                     <span>{this.props.label}</span>
                                 </AccessibleButton>
                                 {this.renderMenu()}
-                                {addRoomButton}
-                                <div className="mx_RoomSublist2_badgeContainer">
-                                    {badge}
-                                </div>
+                                {this.props.isMinimized ? null : addRoomButton}
+                                {this.props.isMinimized ? null : badgeContainer}
                             </div>
+                            {this.props.isMinimized ? badgeContainer : null}
+                            {this.props.isMinimized ? addRoomButton : null}
                         </div>
                     );
                 }}

src/components/views/terms/InlineTermsAgreement.js

@@ -18,6 +18,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import {_t, pickBestLanguage} from "../../../languageHandler";
 import * as sdk from "../../..";
+import {objectClone} from "../../../utils/objects";
 
 export default class InlineTermsAgreement extends React.Component {
     static propTypes = {
@@ -56,7 +57,7 @@ export default class InlineTermsAgreement extends React.Component {
     }
 
     _togglePolicy = (index) => {
-        const policies = JSON.parse(JSON.stringify(this.state.policies)); // deep & cheap clone
+        const policies = objectClone(this.state.policies);
         policies[index].checked = !policies[index].checked;
         this.setState({policies});
     };