Merge pull request #141 from vector-im/bwindels/grid-view

Grid view for up to 6 rooms

scripts/build.mjs

@@ -302,7 +302,6 @@ async function buildCssLegacy(entryPath, urlMapper = null) {
     const preCss = await fs.readFile(entryPath, "utf8");
     const options = [
         postcssImport,
-        cssvariables(),
         flexbugsFixes()
     ];
     if (urlMapper) {

src/domain/ViewModel.js

@@ -40,6 +40,12 @@ export class ViewModel extends EventEmitter {
         return this.disposables.track(disposable);
     }
 
+    untrack(disposable) {
+        if (this.disposables) {
+            return this.disposables.untrack(disposable);
+        }
+    }
+
     dispose() {
         if (this.disposables) {
             this.disposables.dispose();

src/domain/session/RoomGridViewModel.js

@@ -0,0 +1,121 @@
+/*
+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 {ViewModel} from "../ViewModel.js";
+
+export class RoomGridViewModel extends ViewModel {
+    constructor(options) {
+        super(options);
+        this._width = options.width;
+        this._height = options.height;
+        this._selectedIndex = 0;
+        this._viewModels = [];
+    }
+
+    _posToIdx(x, y) {
+        return (y * this.width) + x;
+    }
+
+    _idxToX(idx) {
+        return idx % this.width;
+    }
+
+    _idxToY(idx) {
+        return Math.floor(idx / this.width);
+    }
+
+    roomViewModelAt(x, y) {
+        return this._viewModels[this._posToIdx(x, y)]?.vm;
+    }
+
+    get focusX() {
+        return this._idxToX(this._selectedIndex);
+    }
+
+    get focusY() {
+        return this._idxToY(this._selectedIndex);
+    }
+
+    isFocusAt(x, y) {
+        return this._posToIdx(x, y) === this._selectedIndex;
+    }
+
+    setFocusAt(x, y) {
+        this._setFocusedIndex(this._posToIdx(x, y));
+    }
+
+    _setFocusedIndex(idx) {
+        if (idx === this._selectedIndex) {
+            return;
+        }
+        const oldItem = this._viewModels[this._selectedIndex];
+        oldItem?.tileVM?.close();
+        this._selectedIndex = idx;
+        const newItem = this._viewModels[this._selectedIndex];
+        if (newItem) {
+            newItem.vm.focus();
+            newItem.tileVM.open();
+        }
+        this.emitChange("focusedIndex");
+    }
+    get width() {
+        return this._width;
+    }
+
+    get height() {
+        return this._height;
+    }
+
+    /**
+     * Sets a pair of room and room tile view models at the current index
+     * @param {RoomViewModel} vm
+     * @param {RoomTileViewModel} tileVM
+     * @package
+     */
+    setRoomViewModel(vm, tileVM) {
+        const old = this._viewModels[this._selectedIndex];
+        this.disposeTracked(old?.vm);
+        old?.tileVM?.close();
+        this._viewModels[this._selectedIndex] = {vm: this.track(vm), tileVM};
+        this.emitChange(`${this._selectedIndex}`);
+    }
+
+    /**
+     * @package
+     */
+    tryFocusRoom(roomId) {
+        const index = this._viewModels.findIndex(vms => vms?.vm._room.id === roomId);
+        if (index >= 0) {
+            this._setFocusedIndex(index);
+            return true;
+        }
+        return false;
+    }
+    
+    /**
+     * Returns the first set of room and room tile vm,
+     * and untracking them so they are not owned by this view model anymore.
+     * @package
+     */
+    getAndUntrackFirst() {
+        for (const item of this._viewModels) {
+            if (item) {
+                this.untrack(item.vm);
+                return item;
+            }
+        }
+    }
+}

src/domain/session/SessionViewModel.js

@@ -18,6 +18,7 @@ limitations under the License.
 import {LeftPanelViewModel} from "./leftpanel/LeftPanelViewModel.js";
 import {RoomViewModel} from "./room/RoomViewModel.js";
 import {SessionStatusViewModel} from "./SessionStatusViewModel.js";
+import {RoomGridViewModel} from "./RoomGridViewModel.js";
 import {ViewModel} from "../ViewModel.js";
 
 export class SessionViewModel extends ViewModel {
@@ -32,16 +33,34 @@ export class SessionViewModel extends ViewModel {
         })));
         this._leftPanelViewModel = new LeftPanelViewModel(this.childOptions({
             rooms: this._session.rooms,
-            openRoom: this._openRoom.bind(this)
+            openRoom: this._openRoom.bind(this),
+            gridEnabled: {
+                get: () => !!this._gridViewModel,
+                set: value => this._enabledGrid(value)
+            }
         }));
         this._currentRoomTileViewModel = null;
         this._currentRoomViewModel = null;
+        this._gridViewModel = null;
     }
 
     start() {
         this._sessionStatusViewModel.start();
     }
 
+    get selectionId() {
+        if (this._currentRoomViewModel) {
+            return this._currentRoomViewModel.id;
+        } else if (this._gridViewModel) {
+            return "roomgrid";
+        }
+        return "placeholder";
+    }
+
+    get roomGridViewModel() {
+        return this._gridViewModel;
+    }
+
     get leftPanelViewModel() {
         return this._leftPanelViewModel;
     }
@@ -58,24 +77,60 @@ export class SessionViewModel extends ViewModel {
         return this._currentRoomViewModel;
     }
 
+    _enabledGrid(enabled) {
+        if (enabled) {
+            this._gridViewModel = this.track(new RoomGridViewModel(this.childOptions({width: 3, height: 2})));
+            // transfer current room
+            if (this._currentRoomViewModel) {
+                this.untrack(this._currentRoomViewModel);
+                this._gridViewModel.setRoomViewModel(this._currentRoomViewModel, this._currentRoomTileViewModel);
+                this._currentRoomViewModel = null;
+                this._currentRoomTileViewModel = null;
+            }
+        } else {
+            const VMs = this._gridViewModel.getAndUntrackFirst();
+            if (VMs) {
+                this._currentRoomViewModel = this.track(VMs.vm);
+                this._currentRoomTileViewModel = VMs.tileVM;
+                this._currentRoomTileViewModel.open();
+            }
+            this._gridViewModel = this.disposeTracked(this._gridViewModel);
+        }
+        this.emitChange("middlePanelViewType");
+    }
+
     _closeCurrentRoom() {
-        this._currentRoomTileViewModel?.close();
+        // no closing in grid for now as it is disabled on narrow viewports
-        this._currentRoomViewModel = this.disposeTracked(this._currentRoomViewModel);
+        if (!this._gridViewModel) {
+            this._currentRoomTileViewModel?.close();
+            this._currentRoomViewModel = this.disposeTracked(this._currentRoomViewModel);
+            return true;
+        }
     }
 
     _openRoom(room, roomTileVM) {
-        this._closeCurrentRoom();
+        if (this._gridViewModel?.tryFocusRoom(room.id)) {
-        this._currentRoomTileViewModel = roomTileVM;
+            return;
-        this._currentRoomViewModel = this.track(new RoomViewModel(this.childOptions({
+        } else if (this._currentRoomViewModel?.id === room.id) {
+            return;
+        }
+        const roomVM = new RoomViewModel(this.childOptions({
             room,
             ownUserId: this._session.user.id,
             closeCallback: () => {
-                this._closeCurrentRoom();
+                if (this._closeCurrentRoom()) {
-                this.emitChange("currentRoom");
+                    this.emitChange("currentRoom");
+                }
             },
-        })));
+        }));
-        this._currentRoomViewModel.load();
+        roomVM.load();
-        this.emitChange("currentRoom");
+        if (this._gridViewModel) {
+            this._gridViewModel.setRoomViewModel(roomVM, roomTileVM);
+        } else {
+            this._closeCurrentRoom();
+            this._currentRoomTileViewModel = roomTileVM;
+            this._currentRoomViewModel = this.track(roomVM);
+            this.emitChange("currentRoom");
+        }
     }
 }
-

src/domain/session/leftpanel/LeftPanelViewModel.js

@@ -23,7 +23,8 @@ import {ApplyMap} from "../../../observable/map/ApplyMap.js";
 export class LeftPanelViewModel extends ViewModel {
     constructor(options) {
         super(options);
-        const {rooms, openRoom} = options;
+        const {rooms, openRoom, gridEnabled} = options;
+        this._gridEnabled = gridEnabled;
         const roomTileVMs = rooms.mapValues((room, emitChange) => {
             return new RoomTileViewModel({
                 room,
@@ -35,6 +36,15 @@ export class LeftPanelViewModel extends ViewModel {
         this._roomList = this._roomListFilterMap.sortValues((a, b) => a.compare(b));
     }
 
+    get gridEnabled() {
+        return this._gridEnabled.get();
+    }
+
+    toggleGrid() {
+        this._gridEnabled.set(!this._gridEnabled.get());
+        this.emitChange("gridEnabled");
+    }
+
     get roomList() {
         return this._roomList;
     }

src/domain/session/room/RoomViewModel.js

@@ -51,10 +51,18 @@ export class RoomViewModel extends ViewModel {
             this._timelineError = err;
             this.emitChange("error");
         }
+        this._clearUnreadAfterDelay();
+    }
+
+    async _clearUnreadAfterDelay() {
+        if (this._clearUnreadTimout) {
+            return;
+        }
         this._clearUnreadTimout = this.clock.createTimeout(2000);
         try {
             await this._clearUnreadTimout.elapsed();
             await this._room.clearUnread();
+            this._clearUnreadTimout = null;
         } catch (err) {
             if (err.name !== "AbortError") {
                 throw err;
@@ -62,6 +70,10 @@ export class RoomViewModel extends ViewModel {
         }
     }
 
+    focus() {
+        this._clearUnreadAfterDelay();
+    }
+
     dispose() {
         super.dispose();
         if (this._clearUnreadTimout) {
@@ -86,6 +98,10 @@ export class RoomViewModel extends ViewModel {
         return this._room.name || this.i18n`Empty Room`;
     }
 
+    get id() {
+        return this._room.id;
+    }
+
     get timelineViewModel() {
         return this._timelineVM;
     }

src/ui/web/css/form.css

@@ -20,3 +20,13 @@ limitations under the License.
   width: 100%;
   box-sizing: border-box;
 }
+
+.FilterField {
+    display: flex;
+}
+
+.FilterField input {
+    display: block;
+    flex: 1;
+    min-width: 0;
+}

src/ui/web/css/layout.css

@@ -48,8 +48,11 @@ html {
 
 /* mobile layout */
 @media screen and (max-width: 800px) {
+    /* show back button */
     .RoomHeader button.back { display: block; }
-    div.RoomView, div.RoomPlaceholderView { display: none; }
+    /* hide grid button */
+    .LeftPanel button.grid { display: none; }
+    div.RoomView, div.RoomPlaceholderView, div.RoomGridView { display: none; }
     div.LeftPanel {flex-grow: 1;}
     div.room-shown div.RoomView { display: flex; }
     div.room-shown div.LeftPanel { display: none; }
@@ -61,7 +64,7 @@ html {
     min-width: 0;
 }
 
-.RoomPlaceholderView, .RoomView {
+.RoomPlaceholderView, .RoomView, .RoomGridView {
     flex: 1 0 0;
     min-width: 0;
 }
@@ -88,3 +91,22 @@ html {
 .RoomHeader {
     display: flex;
 }
+
+.RoomGridView {
+    display: grid;
+    grid-template-columns: repeat(var(--columns), 1fr);
+    grid-template-rows: repeat(var(--rows), 1fr);
+}
+
+.RoomGridView > div {
+    display: flex;
+    min-width: 0;
+    min-height: 0;
+    grid-column: var(--column);
+    grid-row: var(--row);
+}
+
+.RoomGridView > div.focus-ring {
+    z-index: 1;
+    pointer-events: none;
+}

src/ui/web/css/left-panel.css

@@ -19,14 +19,12 @@ limitations under the License.
     flex-direction: column;
 }
 
-.LeftPanel .filter {
+.LeftPanel .utilities {
     display: flex;
 }
 
-.LeftPanel .filter input {
+.LeftPanel .utilities .FilterField {
-    display: block;
     flex: 1;
-    box-sizing: border-box;
 }
 
 .LeftPanel ul {

src/ui/web/css/themes/element/icons/clear.svg

@@ -0,0 +1,4 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.33313 1.33313L6.66646 6.66646" stroke="#8D99A5" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M6.66699 1.33313L1.33366 6.66646" stroke="#8D99A5" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

src/ui/web/css/themes/element/icons/disable-grid.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 0.75H12C13.7949 0.75 15.25 2.20507 15.25 4V12C15.25 13.7949 13.7949 15.25 12 15.25H4C2.20507 15.25 0.75 13.7949 0.75 12V4C0.75 2.20507 2.20507 0.75 4 0.75Z" stroke="#8D99A5" stroke-width="1.5"/>
+<path d="M0 12H16V12C16 14.2091 14.2091 16 12 16H4C1.79086 16 0 14.2091 0 12V12Z" fill="#8D99A5"/>
+<path d="M0 4C0 1.79086 1.79086 0 4 0H12C14.2091 0 16 1.79086 16 4V5H0V4Z" fill="#8D99A5"/>
+</svg>

src/ui/web/css/themes/element/icons/enable-grid.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="9.59998" width="6.4" height="6.4" rx="1.6" fill="#8D99A5"/>
+<rect x="9.59998" y="9.59998" width="6.4" height="6.4" rx="1.6" fill="#8D99A5"/>
+<rect y="9.59998" width="6.4" height="6.4" rx="1.6" fill="#8D99A5"/>
+<rect width="6.4" height="6.4" rx="1.6" fill="#8D99A5"/>
+</svg>

src/ui/web/css/themes/element/theme.css

@@ -117,6 +117,68 @@ button.styled {
     font-weight: 500;
 }
 
+button.utility {
+    width: 32px;
+    height: 32px;
+    background-position: center;
+    background-color: #e1e3e6;
+    background-repeat: no-repeat;
+    border: none;
+    border-radius: 100%;
+}
+
+button.utility.grid {
+    background-image: url('icons/enable-grid.svg');
+}
+
+button.utility.grid.on {
+    background-image: url('icons/disable-grid.svg');
+}
+
+.FilterField {
+    background-color: #e1e3e6;
+    border-radius: 16px;
+    height: 32px;
+    align-items: center;
+    padding: 0 8px;
+    box-sizing: border-box;
+}
+
+.FilterField :not(:first-child) {
+    margin-left: 8px;
+}
+
+.FilterField:focus-within {
+    border: 1px #e1e3e6 solid;
+    background-color: white;
+}
+
+/*.FilterField:not(:focus-within) button {
+    display: none;
+}*/
+
+.FilterField input {
+    font-family: "Inter";
+    font-size: 1.3rem;
+    font-weight: 500;
+    line-height: 1.573rem;
+    outline: none;
+    border: none;
+    background-color: transparent;
+    height: 100%;
+}
+
+.FilterField button {
+    width: 16px;
+    height: 16px;
+    background-position: center;
+    background-color: #e1e3e6;
+    background-repeat: no-repeat;
+    background-image: url('icons/clear.svg');
+    border: none;
+    border-radius: 100%;
+}
+
 .PreSessionScreen {
     padding: 30px;
 }
@@ -141,6 +203,15 @@ button.styled {
 .LeftPanel {
     background: rgba(245, 245, 245, 0.90);
     font-size: 1.5rem;
+    padding: 12px 0 0 8px;
+}
+
+.LeftPanel .utilities {
+    margin-right: 8px;
+}
+
+.LeftPanel .utilities :not(:first-child) {
+    margin-left: 8px;
 }
 
 .LeftPanel .filter {
@@ -158,8 +229,8 @@ button.styled {
 }
 
 .LeftPanel li {
-    margin: 3px 10px;
+    margin: 12px 0;
-    padding: 5px;
+    padding-right: 5px;
     /* vertical align */
     align-items: center;
 }
@@ -211,6 +282,7 @@ a {
     background-color: #3D88FA;
     color: white;
     border-radius: 10px;
+    z-index: 2;
 }
 
 .room-shown .SessionStatusView {
@@ -220,6 +292,8 @@ a {
 .RoomPlaceholderView {
     align-items: center;
     justify-content: center;
+    text-align: center;
+    padding: 20px;
 }
 
 .SessionPickerView li {
@@ -258,6 +332,16 @@ a {
     color: #FF4B55;
 }
 
+.RoomGridView > div.container {
+    border-right: 1px solid rgba(245, 245, 245, 0.90);
+    border-bottom: 1px solid rgba(245, 245, 245, 0.90);
+}
+
+.RoomGridView > div.focus-ring {
+    border: 2px solid rgba(134, 193, 165, 1);
+    border-radius: 12px;
+}
+
 .RoomHeader {
     background: rgba(245, 245, 245, 0.90);
     padding: 10px;

src/ui/web/session/RoomGridView.js

@@ -0,0 +1,49 @@
+/*
+Copyright 2020 Bruno Windels <bruno@windels.cloud>
+
+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 {RoomView} from "./room/RoomView.js";
+import {RoomPlaceholderView} from "./RoomPlaceholderView.js";
+import {TemplateView} from "../general/TemplateView.js";
+
+export class RoomGridView extends TemplateView {
+    render(t, vm) {
+        const children = [];
+        for (let y = 0; y < vm.height; y+=1) {
+            for (let x = 0; x < vm.width; x+=1) {
+                children.push(t.div({
+                    onClick: () => vm.setFocusAt(x, y),
+                    onFocusin: () => vm.setFocusAt(x, y),
+                    className: {
+                        "container": true,
+                        "focused": vm => vm.isFocusAt(x, y)
+                    },
+                    style: `--column: ${x + 1}; --row: ${y + 1}`
+                },t.mapView(vm => vm.roomViewModelAt(x, y), roomVM => {
+                    if (roomVM) {
+                        return new RoomView(roomVM);
+                    } else {
+                        return new RoomPlaceholderView();
+                    }
+                })));
+            }
+        }
+        children.push(t.div({className: "focus-ring", style: vm => `--column: ${vm.focusX + 1}; --row: ${vm.focusY + 1}`}));
+        return t.div({
+            className: "RoomGridView",
+            style: `--columns: ${vm.width}; --rows: ${vm.height}`
+        }, children);
+    }
+}

src/ui/web/session/SessionView.js

@@ -19,23 +19,27 @@ import {RoomView} from "./room/RoomView.js";
 import {TemplateView} from "../general/TemplateView.js";
 import {RoomPlaceholderView} from "./RoomPlaceholderView.js";
 import {SessionStatusView} from "./SessionStatusView.js";
+import {RoomGridView} from "./RoomGridView.js";
 
 export class SessionView extends TemplateView {
     render(t, vm) {
         return t.div({
             className: {
                 "SessionView": true,
-                "room-shown": vm => !!vm.currentRoom
+                "room-shown": vm => vm.selectionId !== "placeholder"
             },
         }, [
             t.view(new SessionStatusView(vm.sessionStatusViewModel)),
             t.div({className: "main"}, [
                 t.view(new LeftPanelView(vm.leftPanelViewModel)),
-                t.mapView(vm => vm.currentRoom, currentRoom => {
+                t.mapView(vm => vm.selectionId, selectionId => {
-                    if (currentRoom) {
+                    switch (selectionId) {
-                        return new RoomView(currentRoom);
+                        case "roomgrid":
-                    } else {
+                            return new RoomGridView(vm.roomGridViewModel);
-                        return new RoomPlaceholderView();
+                        case "placeholder":
+                            return new RoomPlaceholderView();
+                        default: //room id
+                            return new RoomView(vm.currentRoom);
                     }
                 })
             ])

src/ui/web/session/leftpanel/LeftPanelView.js

@@ -18,30 +18,67 @@ import {ListView} from "../../general/ListView.js";
 import {TemplateView} from "../../general/TemplateView.js";
 import {RoomTileView} from "./RoomTileView.js";
 
-export class LeftPanelView extends TemplateView {
+class FilterField extends TemplateView {
-    render(t, vm) {
+    render(t, options) {
+        const clear = () => {
+            filterInput.value = "";
+            filterInput.blur();
+            clearButton.blur();
+            options.clear();
+        };
         const filterInput = t.input({
             type: "text",
-            placeholder: vm.i18n`Filter rooms…`,
+            placeholder: options?.label,
-            "aria-label": vm.i18n`Filter rooms by name`,
+            "aria-label": options?.label,
-            autocomplete: true,
+            autocomplete: options?.autocomplete,
-            name: "room-filter",
+            name: options?.name,
-            onInput: event => vm.setFilter(event.target.value),
+            onInput: event => options.set(event.target.value),
             onKeydown: event => {
                 if (event.key === "Escape" || event.key === "Esc") {
-                    filterInput.value = "";
+                    clear();
-                    vm.clearFilter();
                 }
-            }
+            },
+            onFocus: () => filterInput.select()
         });
+        const clearButton = t.button({
+            onClick: clear,
+            title: options.i18n`Clear`,
+            "aria-label": options.i18n`Clear`
+        });
+        return t.div({className: "FilterField"}, [filterInput, clearButton]);
+    }
+}
+
+export class LeftPanelView extends TemplateView {
+    render(t, vm) {
+        const gridButtonLabel = vm => {
+            return vm.gridEnabled ?
+                vm.i18n`Show single room` :
+                vm.i18n`Enable grid layout`;
+        };
+        const utilitiesRow = t.div({className: "utilities"}, [
+            t.view(new FilterField({
+                i18n: vm.i18n,
+                label: vm.i18n`Filter rooms…`,
+                name: "room-filter",
+                autocomplete: true,
+                set: query => vm.setFilter(query),
+                clear: () => vm.clearFilter()
+            })),
+            t.button({
+                onClick: () => vm.toggleGrid(),
+                className: {
+                    utility: true,
+                    grid: true,
+                    on: vm => vm.gridEnabled
+                },
+                title: gridButtonLabel,
+                "aria-label": gridButtonLabel
+            })
+        ]);
+
         return t.div({className: "LeftPanel"}, [
-            t.div({className: "filter"}, [
+            utilitiesRow,
-                filterInput,
-                t.button({onClick: () => {
-                    filterInput.value = "";
-                    vm.clearFilter();
-                }}, vm.i18n`Clear`)
-            ]),
             t.view(new ListView(
                 {
                     className: "RoomList",

src/utils/Disposables.js

@@ -35,6 +35,13 @@ export class Disposables {
         return disposable;
     }
 
+    untrack(disposable) {
+        const idx = this._disposables.indexOf(disposable);
+        if (idx >= 0) {
+            this._disposables.splice(idx, 1);
+        }
+    }
+
     dispose() {
         if (this._disposables) {
             for (const d of this._disposables) {