Merge branch 'develop' into travis/room-list/enable

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

@@ -403,10 +403,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 {
@@ -442,10 +446,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 {
@@ -493,10 +501,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);
             }
         }
     }

src/stores/room-list/algorithms/list-ordering/ImportanceAlgorithm.ts

@@ -19,47 +19,29 @@ import { Room } from "matrix-js-sdk/src/models/room";
 import { RoomUpdateCause, TagID } from "../../models";
 import { SortAlgorithm } from "../models";
 import { sortRoomsWithAlgorithm } from "../tag-sorting";
-import * as Unread from '../../../../Unread';
 import { OrderingAlgorithm } from "./OrderingAlgorithm";
-
-/**
- * The determined category of a room.
- */
-export enum Category {
-    /**
-     * The room has unread mentions within.
-     */
-    Red = "RED",
-    /**
-     * The room has unread notifications within. Note that these are not unread
-     * mentions - they are simply messages which the user has asked to cause a
-     * badge count update or push notification.
-     */
-    Grey = "GREY",
-    /**
-     * The room has unread messages within (grey without the badge).
-     */
-    Bold = "BOLD",
-    /**
-     * The room has no relevant unread messages within.
-     */
-    Idle = "IDLE",
-}
+import { NotificationColor } from "../../../notifications/NotificationColor";
+import { RoomNotificationStateStore } from "../../../notifications/RoomNotificationStateStore";
 
 interface ICategorizedRoomMap {
     // @ts-ignore - TS wants this to be a string, but we know better
-    [category: Category]: Room[];
+    [category: NotificationColor]: Room[];
 }
 
 interface ICategoryIndex {
     // @ts-ignore - TS wants this to be a string, but we know better
-    [category: Category]: number; // integer
+    [category: NotificationColor]: number; // integer
 }
 
 // Caution: changing this means you'll need to update a bunch of assumptions and
 // comments! Check the usage of Category carefully to figure out what needs changing
 // if you're going to change this array's order.
-const CATEGORY_ORDER = [Category.Red, Category.Grey, Category.Bold, Category.Idle];
+const CATEGORY_ORDER = [
+    NotificationColor.Red,
+    NotificationColor.Grey,
+    NotificationColor.Bold,
+    NotificationColor.None, // idle
+];
 
 /**
  * An implementation of the "importance" algorithm for room list sorting. Where
@@ -92,10 +74,10 @@ export class ImportanceAlgorithm extends OrderingAlgorithm {
     // noinspection JSMethodCanBeStatic
     private categorizeRooms(rooms: Room[]): ICategorizedRoomMap {
         const map: ICategorizedRoomMap = {
-            [Category.Red]: [],
-            [Category.Grey]: [],
-            [Category.Bold]: [],
-            [Category.Idle]: [],
+            [NotificationColor.Red]: [],
+            [NotificationColor.Grey]: [],
+            [NotificationColor.Bold]: [],
+            [NotificationColor.None]: [],
         };
         for (const room of rooms) {
             const category = this.getRoomCategory(room);
@@ -105,25 +87,11 @@ export class ImportanceAlgorithm extends OrderingAlgorithm {
     }
 
     // noinspection JSMethodCanBeStatic
-    private getRoomCategory(room: Room): Category {
-        // Function implementation borrowed from old RoomListStore
-
-        const mentions = room.getUnreadNotificationCount('highlight') > 0;
-        if (mentions) {
-            return Category.Red;
-        }
-
-        let unread = room.getUnreadNotificationCount() > 0;
-        if (unread) {
-            return Category.Grey;
-        }
-
-        unread = Unread.doesRoomHaveUnreadMessages(room);
-        if (unread) {
-            return Category.Bold;
-        }
-
-        return Category.Idle;
+    private getRoomCategory(room: Room): NotificationColor {
+        // It's fine for us to call this a lot because it's cached, and we shouldn't be
+        // wasting anything by doing so as the store holds single references
+        const state = RoomNotificationStateStore.instance.getRoomState(room, this.tagId);
+        return state.color;
     }
 
     public async setRooms(rooms: Room[]): Promise<any> {
@@ -217,7 +185,7 @@ export class ImportanceAlgorithm extends OrderingAlgorithm {
         }
     }
 
-    private async sortCategory(category: Category) {
+    private async sortCategory(category: NotificationColor) {
         // This should be relatively quick because the room is usually inserted at the top of the
         // category, and most popular sorting algorithms will deal with trying to keep the active
         // room at the top/start of the category. For the few algorithms that will have to move the
@@ -234,7 +202,7 @@ export class ImportanceAlgorithm extends OrderingAlgorithm {
     }
 
     // noinspection JSMethodCanBeStatic
-    private getCategoryFromIndices(index: number, indices: ICategoryIndex): Category {
+    private getCategoryFromIndices(index: number, indices: ICategoryIndex): NotificationColor {
         for (let i = 0; i < CATEGORY_ORDER.length; i++) {
             const category = CATEGORY_ORDER[i];
             const isLast = i === (CATEGORY_ORDER.length - 1);
@@ -250,7 +218,7 @@ export class ImportanceAlgorithm extends OrderingAlgorithm {
     }
 
     // noinspection JSMethodCanBeStatic
-    private moveRoomIndexes(nRooms: number, fromCategory: Category, toCategory: Category, indices: ICategoryIndex) {
+    private moveRoomIndexes(nRooms: number, fromCategory: NotificationColor, toCategory: NotificationColor, indices: ICategoryIndex) {
         // We have to update the index of the category *after* the from/toCategory variables
         // in order to update the indices correctly. Because the room is moving from/to those
         // categories, the next category's index will change - not the category we're modifying.
@@ -261,7 +229,7 @@ export class ImportanceAlgorithm extends OrderingAlgorithm {
         this.alterCategoryPositionBy(toCategory, +nRooms, indices);
     }
 
-    private alterCategoryPositionBy(category: Category, n: number, indices: ICategoryIndex) {
+    private alterCategoryPositionBy(category: NotificationColor, n: number, indices: ICategoryIndex) {
         // Note: when we alter a category's index, we actually have to modify the ones following
         // the target and not the target itself.
 

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();
-        }
-    }
 }