Merge remote-tracking branch 'origin/develop' into element

src/components/views/rooms/RoomSublist2.tsx

@@ -20,7 +20,7 @@ import * as React from "react";
 import { createRef } from "react";
 import { Room } from "matrix-js-sdk/src/models/room";
 import classNames from 'classnames';
-import {RovingAccessibleButton, RovingTabIndexWrapper} from "../../../accessibility/RovingTabIndex";
+import { RovingAccessibleButton, RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex";
 import { _t } from "../../../languageHandler";
 import AccessibleButton from "../../views/elements/AccessibleButton";
 import RoomTile2 from "./RoomTile2";
@@ -36,12 +36,12 @@ import RoomListStore from "../../../stores/room-list/RoomListStore2";
 import { ListAlgorithm, SortAlgorithm } from "../../../stores/room-list/algorithms/models";
 import { DefaultTagID, TagID } from "../../../stores/room-list/models";
 import dis from "../../../dispatcher/dispatcher";
+import defaultDispatcher from "../../../dispatcher/dispatcher";
 import NotificationBadge from "./NotificationBadge";
 import { ListNotificationState } from "../../../stores/notifications/ListNotificationState";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import { Key } from "../../../Keyboard";
-import defaultDispatcher from "../../../dispatcher/dispatcher";
-import {ActionPayload} from "../../../dispatcher/payloads";
+import { ActionPayload } from "../../../dispatcher/payloads";
 import { Enable, Resizable } from "re-resizable";
 import { Direction } from "re-resizable/lib/resizer";
 import { polyfillTouchEvent } from "../../../@types/polyfill";
@@ -130,8 +130,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
     private calculateInitialHeight() {
         const requestedVisibleTiles = Math.max(Math.floor(this.layout.visibleTiles), this.layout.minVisibleTiles);
         const tileCount = Math.min(this.numTiles, requestedVisibleTiles);
-        const height = this.layout.tilesToPixelsWithPadding(tileCount, this.padding);
-        return height;
+        return this.layout.tilesToPixelsWithPadding(tileCount, this.padding);
     }
 
     private get padding() {

src/stores/room-list/ListLayout.ts

@@ -18,11 +18,6 @@ import { TagID } from "./models";
 
 const TILE_HEIGHT_PX = 44;
 
-// this comes from the CSS where the show more button is
-// mathematically this percent of a tile when floating.
-//const RESIZER_BOX_FACTOR = 0.78;
-const RESIZER_BOX_FACTOR = 0;
-
 interface ISerializedListLayout {
     numTiles: number;
     showPreviews: boolean;
@@ -82,36 +77,12 @@ export class ListLayout {
     }
 
     public get minVisibleTiles(): number {
-        return 1 + RESIZER_BOX_FACTOR;
+        return 1;
     }
 
     public get defaultVisibleTiles(): number {
         // This number is what "feels right", and mostly subject to design's opinion.
-        return 5 + RESIZER_BOX_FACTOR;
-    }
-
-    public setVisibleTilesWithin(newVal: number, maxPossible: number) {
-        maxPossible = maxPossible + RESIZER_BOX_FACTOR;
-        if (newVal > maxPossible) {
-            this.visibleTiles = maxPossible;
-        } else {
-            this.visibleTiles = newVal;
-        }
-    }
-
-    public calculateTilesToPixelsMin(maxTiles: number, n: number, possiblePadding: number): number {
-        // Only apply the padding if we're about to use maxTiles as we need to
-        // plan for the padding. If we're using n, the padding is already accounted
-        // for by the resizing stuff.
-        let padding = 0;
-        if (maxTiles < n) {
-            padding = possiblePadding;
-        }
-        return this.tilesToPixels(Math.min(maxTiles, n)) + padding;
-    }
-
-    public tilesWithResizerBoxFactor(n: number): number {
-        return n + RESIZER_BOX_FACTOR;
+        return 5;
     }
 
     public tilesWithPadding(n: number, paddingPx: number): number {

src/stores/room-list/RoomListStore2.ts

@@ -368,10 +368,14 @@ export class RoomListStore2 extends AsyncStore<ActionPayload> {
     }
 
     public async setTagSorting(tagId: TagID, sort: SortAlgorithm) {
+        await this.setAndPersistTagSorting(tagId, sort);
+        this.updateFn.trigger();
+    }
+
+    private async setAndPersistTagSorting(tagId: TagID, sort: SortAlgorithm) {
         await this.algorithm.setTagSorting(tagId, sort);
         // TODO: Per-account? https://github.com/vector-im/riot-web/issues/14114
         localStorage.setItem(`mx_tagSort_${tagId}`, sort);
-        this.updateFn.triggerIfWillMark();
     }
 
     public getTagSorting(tagId: TagID): SortAlgorithm {
@@ -407,10 +411,14 @@ export class RoomListStore2 extends AsyncStore<ActionPayload> {
     }
 
     public async setListOrder(tagId: TagID, order: ListAlgorithm) {
+        await this.setAndPersistListOrder(tagId, order);
+        this.updateFn.trigger();
+    }
+
+    private async setAndPersistListOrder(tagId: TagID, order: ListAlgorithm) {
         await this.algorithm.setListOrdering(tagId, order);
         // TODO: Per-account? https://github.com/vector-im/riot-web/issues/14114
         localStorage.setItem(`mx_listOrder_${tagId}`, order);
-        this.updateFn.triggerIfWillMark();
     }
 
     public getListOrder(tagId: TagID): ListAlgorithm {
@@ -458,10 +466,10 @@ export class RoomListStore2 extends AsyncStore<ActionPayload> {
             const listOrder = this.calculateListOrder(tag);
 
             if (tagSort !== definedSort) {
-                await this.setTagSorting(tag, tagSort);
+                await this.setAndPersistTagSorting(tag, tagSort);
             }
             if (listOrder !== definedOrder) {
-                await this.setListOrder(tag, listOrder);
+                await this.setAndPersistListOrder(tag, listOrder);
             }
         }
     }
@@ -481,8 +489,9 @@ export class RoomListStore2 extends AsyncStore<ActionPayload> {
     };
 
     private onAlgorithmFilterUpdated = () => {
-        // The filter can happen off-cycle, so trigger an update if we need to.
-        this.updateFn.triggerIfWillMark();
+        // The filter can happen off-cycle, so trigger an update. The filter will have
+        // already caused a mark.
+        this.updateFn.trigger();
     };
 
     /**

src/utils/MarkedExecution.ts

@@ -53,15 +53,4 @@ export class MarkedExecution {
         this.reset(); // reset first just in case the fn() causes a trigger()
         this.fn();
     }
-
-    /**
-     * Triggers the function if a mark() call would mark it. If the function
-     * has already been marked this will do nothing.
-     */
-    public triggerIfWillMark() {
-        if (!this.marked) {
-            this.mark();
-            this.trigger();
-        }
-    }
 }