From 5a1d255d2a07ffd0b1c85bab52658015b39de8b5 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 7 Oct 2020 12:23:02 +0200 Subject: [PATCH 01/20] implement room grid view model --- src/domain/session/RoomGridViewModel.js | 89 +++++++++++++++++++++++++ 1 file changed, 89 insertions(+) create mode 100644 src/domain/session/RoomGridViewModel.js diff --git a/src/domain/session/RoomGridViewModel.js b/src/domain/session/RoomGridViewModel.js new file mode 100644 index 00000000..dcea1a26 --- /dev/null +++ b/src/domain/session/RoomGridViewModel.js @@ -0,0 +1,89 @@ +/* +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 = []; + } + + roomViewModelAt(idx) { + return this._viewModels[idx]?.vm; + } + + get focusedIndex() { + return this._selectedIndex; + } + + setFocusedIndex(idx) { + 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 + */ + hasRoomId(roomId) { + return this._viewModels.some(vms => vms?.vm._room.id === roomId); + } + + /** + * 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; + } + } + } +} From 9cc7833d7ae400cde62dbe6c4eaa0c1690d1a73e Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 7 Oct 2020 12:24:44 +0200 Subject: [PATCH 02/20] implement room grid view --- src/ui/web/session/RoomGridView.js | 43 ++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 src/ui/web/session/RoomGridView.js diff --git a/src/ui/web/session/RoomGridView.js b/src/ui/web/session/RoomGridView.js new file mode 100644 index 00000000..d87d1e9d --- /dev/null +++ b/src/ui/web/session/RoomGridView.js @@ -0,0 +1,43 @@ +/* +Copyright 2020 Bruno Windels + +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 roomViews = []; + const len = vm.width * vm.height; + for (let i = 0; i < len; i+=1) { + roomViews[i] = t.div({ + onClick: () => vm.setFocusedIndex(i), + onFocusin: () => vm.setFocusedIndex(i), + className: {focused: vm => vm.focusedIndex === i}, + },t.mapView(vm => vm.roomViewModelAt(i), roomVM => { + if (roomVM) { + return new RoomView(roomVM); + } else { + return new RoomPlaceholderView(); + } + })) + } + return t.div({ + className: "RoomGridView", + style: `--columns: ${vm.width}; --rows: ${vm.height}` + }, roomViews); + } +} From 614ec08238930afce78e90388da6176128ca9ba8 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 7 Oct 2020 12:25:03 +0200 Subject: [PATCH 03/20] integrate grid vm with session vm, allowing to switch --- src/domain/ViewModel.js | 6 ++ src/domain/session/SessionViewModel.js | 81 ++++++++++++++++++++++---- src/utils/Disposables.js | 7 +++ 3 files changed, 82 insertions(+), 12 deletions(-) diff --git a/src/domain/ViewModel.js b/src/domain/ViewModel.js index 7f973ad7..bb651d87 100644 --- a/src/domain/ViewModel.js +++ b/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(); diff --git a/src/domain/session/SessionViewModel.js b/src/domain/session/SessionViewModel.js index f7d28fed..467bc169 100644 --- a/src/domain/session/SessionViewModel.js +++ b/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 middlePanelViewType() { + if (this._currentRoomViewModel) { + return "room"; + } else if (this._gridViewModel) { + return "roomgrid"; + } + return "placeholder"; + } + + get roomGridViewModel() { + return this._gridViewModel; + } + get leftPanelViewModel() { return this._leftPanelViewModel; } @@ -58,24 +77,62 @@ 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(); - this._currentRoomViewModel = this.disposeTracked(this._currentRoomViewModel); + // no closing in grid for now + if (!this._gridViewModel) { + this._currentRoomTileViewModel?.close(); + this._currentRoomViewModel = this.disposeTracked(this._currentRoomViewModel); + return true; + } } _openRoom(room, roomTileVM) { - this._closeCurrentRoom(); - this._currentRoomTileViewModel = roomTileVM; - this._currentRoomViewModel = this.track(new RoomViewModel(this.childOptions({ + // for now, we don't support having the same room opened more than once, + // so bail out if we already have the room open + if (this._gridViewModel?.hasRoomId(room.id)) { + return; + } else if (this._currentRoomViewModel?._room.id === room.id) { + return; + } + const roomVM = new RoomViewModel(this.childOptions({ room, ownUserId: this._session.user.id, closeCallback: () => { - this._closeCurrentRoom(); - this.emitChange("currentRoom"); + if (this._closeCurrentRoom()) { + this.emitChange("currentRoom"); + } }, - }))); - this._currentRoomViewModel.load(); - this.emitChange("currentRoom"); + })); + roomVM.load(); + if (this._gridViewModel) { + this._gridViewModel.setRoomViewModel(roomVM, roomTileVM); + } else { + this._closeCurrentRoom(); + this._currentRoomTileViewModel = roomTileVM; + this._currentRoomViewModel = this.track(roomVM); + this.emitChange("currentRoom"); + } } } - diff --git a/src/utils/Disposables.js b/src/utils/Disposables.js index efc49897..bd13abc2 100644 --- a/src/utils/Disposables.js +++ b/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) { From dc1357bb316094ffb5b140af9441a362c661c6bb Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 7 Oct 2020 12:30:46 +0200 Subject: [PATCH 04/20] support clearing unread when focusing a room --- src/domain/session/room/RoomViewModel.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/domain/session/room/RoomViewModel.js b/src/domain/session/room/RoomViewModel.js index ab453e01..87d0cb6c 100644 --- a/src/domain/session/room/RoomViewModel.js +++ b/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) { From 7955462dda3b24e4d7ebd51957a3574b2ba72986 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 7 Oct 2020 12:31:24 +0200 Subject: [PATCH 05/20] render grid view in session view --- src/ui/web/session/SessionView.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/ui/web/session/SessionView.js b/src/ui/web/session/SessionView.js index eb8d3153..63fe819d 100644 --- a/src/ui/web/session/SessionView.js +++ b/src/ui/web/session/SessionView.js @@ -19,6 +19,7 @@ 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) { @@ -31,11 +32,14 @@ export class SessionView extends TemplateView { t.view(new SessionStatusView(vm.sessionStatusViewModel)), t.div({className: "main"}, [ t.view(new LeftPanelView(vm.leftPanelViewModel)), - t.mapView(vm => vm.currentRoom, currentRoom => { - if (currentRoom) { - return new RoomView(currentRoom); - } else { - return new RoomPlaceholderView(); + t.mapView(vm => vm.middlePanelViewType, middlePanelViewType => { + switch (middlePanelViewType) { + case "room": + return new RoomView(vm.currentRoom); + case "roomgrid": + return new RoomGridView(vm.roomGridViewModel); + case "placeholder": + return new RoomPlaceholderView(); } }) ]) From 1ff6d36ec3012616d662d7fcfe24c92424496785 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 7 Oct 2020 12:31:52 +0200 Subject: [PATCH 06/20] add grid toggle button to left panel --- src/domain/session/leftpanel/LeftPanelViewModel.js | 12 +++++++++++- src/ui/web/session/leftpanel/LeftPanelView.js | 3 ++- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/src/domain/session/leftpanel/LeftPanelViewModel.js b/src/domain/session/leftpanel/LeftPanelViewModel.js index 50864b4c..fe5ce05b 100644 --- a/src/domain/session/leftpanel/LeftPanelViewModel.js +++ b/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; } diff --git a/src/ui/web/session/leftpanel/LeftPanelView.js b/src/ui/web/session/leftpanel/LeftPanelView.js index f262e954..d7c588ad 100644 --- a/src/ui/web/session/leftpanel/LeftPanelView.js +++ b/src/ui/web/session/leftpanel/LeftPanelView.js @@ -40,7 +40,8 @@ export class LeftPanelView extends TemplateView { t.button({onClick: () => { filterInput.value = ""; vm.clearFilter(); - }}, vm.i18n`Clear`) + }}, vm.i18n`Clear`), + t.button({onClick: () => vm.toggleGrid()}, vm => vm.gridEnabled ? "Single" : "Grid") ]), t.view(new ListView( { From b9d2da736ac6d738696f72cbc936c520e3cf922b Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 7 Oct 2020 13:18:19 +0200 Subject: [PATCH 07/20] when opening room, focus in grid if already open --- src/domain/session/RoomGridViewModel.js | 7 +++++-- src/domain/session/SessionViewModel.js | 8 ++++++-- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/domain/session/RoomGridViewModel.js b/src/domain/session/RoomGridViewModel.js index dcea1a26..d8dc38ab 100644 --- a/src/domain/session/RoomGridViewModel.js +++ b/src/domain/session/RoomGridViewModel.js @@ -34,6 +34,9 @@ export class RoomGridViewModel extends ViewModel { } setFocusedIndex(idx) { + if (idx === this._selectedIndex) { + return; + } const oldItem = this._viewModels[this._selectedIndex]; oldItem?.tileVM?.close(); this._selectedIndex = idx; @@ -69,8 +72,8 @@ export class RoomGridViewModel extends ViewModel { /** * @package */ - hasRoomId(roomId) { - return this._viewModels.some(vms => vms?.vm._room.id === roomId); + roomIndex(roomId) { + return this._viewModels.findIndex(vms => vms?.vm._room.id === roomId); } /** diff --git a/src/domain/session/SessionViewModel.js b/src/domain/session/SessionViewModel.js index 467bc169..082d738f 100644 --- a/src/domain/session/SessionViewModel.js +++ b/src/domain/session/SessionViewModel.js @@ -111,8 +111,12 @@ export class SessionViewModel extends ViewModel { _openRoom(room, roomTileVM) { // for now, we don't support having the same room opened more than once, // so bail out if we already have the room open - if (this._gridViewModel?.hasRoomId(room.id)) { - return; + if (this._gridViewModel) { + const roomIndex = this._gridViewModel.roomIndex(room.id); + if (roomIndex >= 0) { + this._gridViewModel.setFocusedIndex(roomIndex); + return; + } } else if (this._currentRoomViewModel?._room.id === room.id) { return; } From 99ff387dece6cbff299529bd903cfa1194940653 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 7 Oct 2020 14:18:35 +0200 Subject: [PATCH 08/20] index the room by x,y instead of index from the view so it is easier to implement a focus-ring as a separate dom node --- src/domain/session/RoomGridViewModel.js | 43 +++++++++++++++++++++---- src/domain/session/SessionViewModel.js | 10 ++---- src/ui/web/session/RoomGridView.js | 33 ++++++++++--------- 3 files changed, 56 insertions(+), 30 deletions(-) diff --git a/src/domain/session/RoomGridViewModel.js b/src/domain/session/RoomGridViewModel.js index d8dc38ab..40b7192c 100644 --- a/src/domain/session/RoomGridViewModel.js +++ b/src/domain/session/RoomGridViewModel.js @@ -25,15 +25,39 @@ export class RoomGridViewModel extends ViewModel { this._viewModels = []; } - roomViewModelAt(idx) { - return this._viewModels[idx]?.vm; + _posToIdx(x, y) { + return (y * this.width) + x; } - get focusedIndex() { - return this._selectedIndex; + _idxToX(idx) { + return idx % this.width; } - setFocusedIndex(idx) { + _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; } @@ -72,8 +96,13 @@ export class RoomGridViewModel extends ViewModel { /** * @package */ - roomIndex(roomId) { - return this._viewModels.findIndex(vms => vms?.vm._room.id === roomId); + tryFocusRoom(roomId) { + const index = this._viewModels.findIndex(vms => vms?.vm._room.id === roomId); + if (index >= 0) { + this._setFocusedIndex(index); + return true; + } + return false; } /** diff --git a/src/domain/session/SessionViewModel.js b/src/domain/session/SessionViewModel.js index 082d738f..e6965c8c 100644 --- a/src/domain/session/SessionViewModel.js +++ b/src/domain/session/SessionViewModel.js @@ -109,14 +109,8 @@ export class SessionViewModel extends ViewModel { } _openRoom(room, roomTileVM) { - // for now, we don't support having the same room opened more than once, - // so bail out if we already have the room open - if (this._gridViewModel) { - const roomIndex = this._gridViewModel.roomIndex(room.id); - if (roomIndex >= 0) { - this._gridViewModel.setFocusedIndex(roomIndex); - return; - } + if (this._gridViewModel?.tryFocusRoom(room.id)) { + return; } else if (this._currentRoomViewModel?._room.id === room.id) { return; } diff --git a/src/ui/web/session/RoomGridView.js b/src/ui/web/session/RoomGridView.js index d87d1e9d..f954c4f1 100644 --- a/src/ui/web/session/RoomGridView.js +++ b/src/ui/web/session/RoomGridView.js @@ -20,24 +20,27 @@ import {TemplateView} from "../general/TemplateView.js"; export class RoomGridView extends TemplateView { render(t, vm) { - const roomViews = []; - const len = vm.width * vm.height; - for (let i = 0; i < len; i+=1) { - roomViews[i] = t.div({ - onClick: () => vm.setFocusedIndex(i), - onFocusin: () => vm.setFocusedIndex(i), - className: {focused: vm => vm.focusedIndex === i}, - },t.mapView(vm => vm.roomViewModelAt(i), roomVM => { - if (roomVM) { - return new RoomView(roomVM); - } else { - return new RoomPlaceholderView(); - } - })) + 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", + 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}` - }, roomViews); + }, children); } } From 152a83f75fe32d7b1c0aa9b9ec2c38b249145454 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 7 Oct 2020 14:22:00 +0200 Subject: [PATCH 09/20] css for the grid view --- src/ui/web/css/layout.css | 25 +++++++++++++++++-- src/ui/web/css/themes/element/theme.css | 17 +++++++++++++ src/ui/web/session/leftpanel/LeftPanelView.js | 5 +++- 3 files changed, 44 insertions(+), 3 deletions(-) diff --git a/src/ui/web/css/layout.css b/src/ui/web/css/layout.css index c1a47eb2..eea0eed2 100644 --- a/src/ui/web/css/layout.css +++ b/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,21 @@ 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; + grid-column: var(--column); + grid-row: var(--row); +} + +.RoomGridView > div.focus-ring { + z-index: 1; + pointer-events: none; +} diff --git a/src/ui/web/css/themes/element/theme.css b/src/ui/web/css/themes/element/theme.css index 3e627eb7..56c9fb29 100644 --- a/src/ui/web/css/themes/element/theme.css +++ b/src/ui/web/css/themes/element/theme.css @@ -211,6 +211,7 @@ a { background-color: #3D88FA; color: white; border-radius: 10px; + z-index: 2; } .room-shown .SessionStatusView { @@ -258,6 +259,22 @@ a { color: #FF4B55; } + +/*.RoomGridView > :not(.focused) .MessageComposer { + display: none; +} +*/ + +.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: 2px; +} + .RoomHeader { background: rgba(245, 245, 245, 0.90); padding: 10px; diff --git a/src/ui/web/session/leftpanel/LeftPanelView.js b/src/ui/web/session/leftpanel/LeftPanelView.js index d7c588ad..b993531d 100644 --- a/src/ui/web/session/leftpanel/LeftPanelView.js +++ b/src/ui/web/session/leftpanel/LeftPanelView.js @@ -41,7 +41,10 @@ export class LeftPanelView extends TemplateView { filterInput.value = ""; vm.clearFilter(); }}, vm.i18n`Clear`), - t.button({onClick: () => vm.toggleGrid()}, vm => vm.gridEnabled ? "Single" : "Grid") + t.button({ + onClick: () => vm.toggleGrid(), + className: "grid" + }, vm => vm.gridEnabled ? "Single" : "Grid") ]), t.view(new ListView( { From de14d6b54b8bc60de8f9169f780346429305489e Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 7 Oct 2020 14:22:14 +0200 Subject: [PATCH 10/20] fix filter field taking up too much width --- src/ui/web/css/left-panel.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/ui/web/css/left-panel.css b/src/ui/web/css/left-panel.css index 6833341d..5a5240a2 100644 --- a/src/ui/web/css/left-panel.css +++ b/src/ui/web/css/left-panel.css @@ -27,6 +27,7 @@ limitations under the License. display: block; flex: 1; box-sizing: border-box; + min-width: 0; } .LeftPanel ul { From 537972b97b9e7c9254b3421c5c4ca66206dadb4e Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 7 Oct 2020 14:25:32 +0200 Subject: [PATCH 11/20] clarify comment --- src/domain/session/SessionViewModel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/domain/session/SessionViewModel.js b/src/domain/session/SessionViewModel.js index e6965c8c..076d8178 100644 --- a/src/domain/session/SessionViewModel.js +++ b/src/domain/session/SessionViewModel.js @@ -100,7 +100,7 @@ export class SessionViewModel extends ViewModel { } _closeCurrentRoom() { - // no closing in grid for now + // no closing in grid for now as it is disabled on narrow viewports if (!this._gridViewModel) { this._currentRoomTileViewModel?.close(); this._currentRoomViewModel = this.disposeTracked(this._currentRoomViewModel); From 46b24c3f24a33e91dd2781b1a347ccbf2fba3099 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 7 Oct 2020 14:32:57 +0200 Subject: [PATCH 12/20] fix room not changing when not in grid view --- src/domain/session/SessionViewModel.js | 4 ++-- src/ui/web/session/SessionView.js | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/domain/session/SessionViewModel.js b/src/domain/session/SessionViewModel.js index 076d8178..5ad50600 100644 --- a/src/domain/session/SessionViewModel.js +++ b/src/domain/session/SessionViewModel.js @@ -48,9 +48,9 @@ export class SessionViewModel extends ViewModel { this._sessionStatusViewModel.start(); } - get middlePanelViewType() { + get selectionId() { if (this._currentRoomViewModel) { - return "room"; + return this._currentRoomViewModel._room.id; } else if (this._gridViewModel) { return "roomgrid"; } diff --git a/src/ui/web/session/SessionView.js b/src/ui/web/session/SessionView.js index 63fe819d..aaeecc5c 100644 --- a/src/ui/web/session/SessionView.js +++ b/src/ui/web/session/SessionView.js @@ -32,14 +32,14 @@ export class SessionView extends TemplateView { t.view(new SessionStatusView(vm.sessionStatusViewModel)), t.div({className: "main"}, [ t.view(new LeftPanelView(vm.leftPanelViewModel)), - t.mapView(vm => vm.middlePanelViewType, middlePanelViewType => { - switch (middlePanelViewType) { - case "room": - return new RoomView(vm.currentRoom); + t.mapView(vm => vm.selectionId, selectionId => { + switch (selectionId) { case "roomgrid": return new RoomGridView(vm.roomGridViewModel); case "placeholder": return new RoomPlaceholderView(); + default: //room id + return new RoomView(vm.currentRoom); } }) ]) From f6d9ffa7bbcd7cc131803acefd9adc5b5f572eeb Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 7 Oct 2020 14:36:08 +0200 Subject: [PATCH 13/20] friends don't read each others private properties --- src/domain/session/SessionViewModel.js | 4 ++-- src/domain/session/room/RoomViewModel.js | 4 ++++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/domain/session/SessionViewModel.js b/src/domain/session/SessionViewModel.js index 5ad50600..beb35872 100644 --- a/src/domain/session/SessionViewModel.js +++ b/src/domain/session/SessionViewModel.js @@ -50,7 +50,7 @@ export class SessionViewModel extends ViewModel { get selectionId() { if (this._currentRoomViewModel) { - return this._currentRoomViewModel._room.id; + return this._currentRoomViewModel.id; } else if (this._gridViewModel) { return "roomgrid"; } @@ -111,7 +111,7 @@ export class SessionViewModel extends ViewModel { _openRoom(room, roomTileVM) { if (this._gridViewModel?.tryFocusRoom(room.id)) { return; - } else if (this._currentRoomViewModel?._room.id === room.id) { + } else if (this._currentRoomViewModel?.id === room.id) { return; } const roomVM = new RoomViewModel(this.childOptions({ diff --git a/src/domain/session/room/RoomViewModel.js b/src/domain/session/room/RoomViewModel.js index 87d0cb6c..7c8df7bc 100644 --- a/src/domain/session/room/RoomViewModel.js +++ b/src/domain/session/room/RoomViewModel.js @@ -98,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; } From 61b5369f2fa3c1768a3e70a19768cf2d435995ef Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 7 Oct 2020 14:53:41 +0200 Subject: [PATCH 14/20] also show status view a bit lower for grid --- src/ui/web/session/SessionView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/web/session/SessionView.js b/src/ui/web/session/SessionView.js index aaeecc5c..cf96be54 100644 --- a/src/ui/web/session/SessionView.js +++ b/src/ui/web/session/SessionView.js @@ -26,7 +26,7 @@ export class SessionView extends TemplateView { return t.div({ className: { "SessionView": true, - "room-shown": vm => !!vm.currentRoom + "room-shown": vm => !!vm.selectionId }, }, [ t.view(new SessionStatusView(vm.sessionStatusViewModel)), From ddda03d82c707fc13c99eee70022aafddabb82ee Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 7 Oct 2020 17:59:14 +0200 Subject: [PATCH 15/20] style filter field and grid button --- src/ui/web/css/form.css | 10 +++ src/ui/web/css/left-panel.css | 7 +- src/ui/web/css/themes/element/icons/clear.svg | 4 + .../css/themes/element/icons/disable-grid.svg | 5 ++ .../css/themes/element/icons/enable-grid.svg | 6 ++ src/ui/web/css/themes/element/theme.css | 44 +++++++++++ src/ui/web/session/leftpanel/LeftPanelView.js | 75 +++++++++++++------ 7 files changed, 125 insertions(+), 26 deletions(-) create mode 100644 src/ui/web/css/themes/element/icons/clear.svg create mode 100644 src/ui/web/css/themes/element/icons/disable-grid.svg create mode 100644 src/ui/web/css/themes/element/icons/enable-grid.svg diff --git a/src/ui/web/css/form.css b/src/ui/web/css/form.css index 741d2bfd..e9771611 100644 --- a/src/ui/web/css/form.css +++ b/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; +} diff --git a/src/ui/web/css/left-panel.css b/src/ui/web/css/left-panel.css index 5a5240a2..5a7ae221 100644 --- a/src/ui/web/css/left-panel.css +++ b/src/ui/web/css/left-panel.css @@ -19,15 +19,12 @@ limitations under the License. flex-direction: column; } -.LeftPanel .filter { +.LeftPanel .utilities { display: flex; } -.LeftPanel .filter input { - display: block; +.LeftPanel .utilities .FilterField { flex: 1; - box-sizing: border-box; - min-width: 0; } .LeftPanel ul { diff --git a/src/ui/web/css/themes/element/icons/clear.svg b/src/ui/web/css/themes/element/icons/clear.svg new file mode 100644 index 00000000..9227cf4d --- /dev/null +++ b/src/ui/web/css/themes/element/icons/clear.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/ui/web/css/themes/element/icons/disable-grid.svg b/src/ui/web/css/themes/element/icons/disable-grid.svg new file mode 100644 index 00000000..1be4ae6a --- /dev/null +++ b/src/ui/web/css/themes/element/icons/disable-grid.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/ui/web/css/themes/element/icons/enable-grid.svg b/src/ui/web/css/themes/element/icons/enable-grid.svg new file mode 100644 index 00000000..776fec35 --- /dev/null +++ b/src/ui/web/css/themes/element/icons/enable-grid.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/ui/web/css/themes/element/theme.css b/src/ui/web/css/themes/element/theme.css index 56c9fb29..234b63ef 100644 --- a/src/ui/web/css/themes/element/theme.css +++ b/src/ui/web/css/themes/element/theme.css @@ -117,6 +117,50 @@ button.styled { font-weight: 500; } +.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; } diff --git a/src/ui/web/session/leftpanel/LeftPanelView.js b/src/ui/web/session/leftpanel/LeftPanelView.js index b993531d..3eeaaada 100644 --- a/src/ui/web/session/leftpanel/LeftPanelView.js +++ b/src/ui/web/session/leftpanel/LeftPanelView.js @@ -18,34 +18,67 @@ import {ListView} from "../../general/ListView.js"; import {TemplateView} from "../../general/TemplateView.js"; import {RoomTileView} from "./RoomTileView.js"; -export class LeftPanelView extends TemplateView { - render(t, vm) { +class FilterField extends TemplateView { + render(t, options) { + const clear = () => { + filterInput.value = ""; + filterInput.blur(); + clearButton.blur(); + options.clear(); + }; const filterInput = t.input({ type: "text", - placeholder: vm.i18n`Filter rooms…`, - "aria-label": vm.i18n`Filter rooms by name`, - autocomplete: true, - name: "room-filter", - onInput: event => vm.setFilter(event.target.value), + placeholder: options?.label, + "aria-label": options?.label, + autocomplete: options?.autocomplete, + name: options?.name, + onInput: event => options.set(event.target.value), onKeydown: event => { if (event.key === "Escape" || event.key === "Esc") { - filterInput.value = ""; - vm.clearFilter(); + clear(); } - } + }, + 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"}, [ - filterInput, - t.button({onClick: () => { - filterInput.value = ""; - vm.clearFilter(); - }}, vm.i18n`Clear`), - t.button({ - onClick: () => vm.toggleGrid(), - className: "grid" - }, vm => vm.gridEnabled ? "Single" : "Grid") - ]), + utilitiesRow, t.view(new ListView( { className: "RoomList", From bd959bc14728b0eabe0d2587ee616959cf6958a6 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 7 Oct 2020 17:59:28 +0200 Subject: [PATCH 16/20] style grid button --- src/ui/web/css/themes/element/theme.css | 41 +++++++++++++++++++------ 1 file changed, 32 insertions(+), 9 deletions(-) diff --git a/src/ui/web/css/themes/element/theme.css b/src/ui/web/css/themes/element/theme.css index 234b63ef..41a9b82f 100644 --- a/src/ui/web/css/themes/element/theme.css +++ b/src/ui/web/css/themes/element/theme.css @@ -117,6 +117,24 @@ 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; @@ -185,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 { @@ -202,8 +229,8 @@ button.styled { } .LeftPanel li { - margin: 3px 10px; - padding: 5px; + margin: 12px 0; + padding-right: 5px; /* vertical align */ align-items: center; } @@ -265,6 +292,8 @@ a { .RoomPlaceholderView { align-items: center; justify-content: center; + text-align: center; + padding: 20px; } .SessionPickerView li { @@ -303,12 +332,6 @@ a { color: #FF4B55; } - -/*.RoomGridView > :not(.focused) .MessageComposer { - display: none; -} -*/ - .RoomGridView > div.container { border-right: 1px solid rgba(245, 245, 245, 0.90); border-bottom: 1px solid rgba(245, 245, 245, 0.90); @@ -316,7 +339,7 @@ a { .RoomGridView > div.focus-ring { border: 2px solid rgba(134, 193, 165, 1); - border-radius: 2px; + border-radius: 12px; } .RoomHeader { From c80c369c42d3352697541268f76bdf798d7152f5 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 7 Oct 2020 17:59:40 +0200 Subject: [PATCH 17/20] prevent grid item from growing to max content height --- src/ui/web/css/layout.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/ui/web/css/layout.css b/src/ui/web/css/layout.css index eea0eed2..7a30381b 100644 --- a/src/ui/web/css/layout.css +++ b/src/ui/web/css/layout.css @@ -101,6 +101,7 @@ html { .RoomGridView > div { display: flex; min-width: 0; + min-height: 0; grid-column: var(--column); grid-row: var(--row); } From b79b41adcd02cca37386cee8c415d308160e3457 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 7 Oct 2020 17:59:58 +0200 Subject: [PATCH 18/20] keep focused class --- src/ui/web/session/RoomGridView.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/ui/web/session/RoomGridView.js b/src/ui/web/session/RoomGridView.js index f954c4f1..235af6da 100644 --- a/src/ui/web/session/RoomGridView.js +++ b/src/ui/web/session/RoomGridView.js @@ -26,7 +26,10 @@ export class RoomGridView extends TemplateView { children.push(t.div({ onClick: () => vm.setFocusAt(x, y), onFocusin: () => vm.setFocusAt(x, y), - className: "container", + 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) { From dafa9954296792ccd714d330b1ad9944a40b0865 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 7 Oct 2020 18:00:07 +0200 Subject: [PATCH 19/20] placeholder does not count as room shown --- src/ui/web/session/SessionView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/web/session/SessionView.js b/src/ui/web/session/SessionView.js index cf96be54..f997c0d0 100644 --- a/src/ui/web/session/SessionView.js +++ b/src/ui/web/session/SessionView.js @@ -26,7 +26,7 @@ export class SessionView extends TemplateView { return t.div({ className: { "SessionView": true, - "room-shown": vm => !!vm.selectionId + "room-shown": vm => vm.selectionId !== "placeholder" }, }, [ t.view(new SessionStatusView(vm.sessionStatusViewModel)), From 423a463cd64161f1a48fb30a4ce55379c2c76c17 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 7 Oct 2020 18:00:26 +0200 Subject: [PATCH 20/20] disable css variables transformation as it breaks the grid layout f/ now --- scripts/build.mjs | 1 - 1 file changed, 1 deletion(-) diff --git a/scripts/build.mjs b/scripts/build.mjs index f8f08e39..45a668c1 100644 --- a/scripts/build.mjs +++ b/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) {