diff --git a/src/domain/session/SessionViewModel.js b/src/domain/session/SessionViewModel.js index 5339ffc9..321c0dbf 100644 --- a/src/domain/session/SessionViewModel.js +++ b/src/domain/session/SessionViewModel.js @@ -10,12 +10,12 @@ export default class SessionViewModel extends EventEmitter { this._syncStatusViewModel = new SyncStatusViewModel(sync); this._currentRoomViewModel = null; const roomTileVMs = this._session.rooms.mapValues((room, emitUpdate) => { - return new RoomTileViewModel({ - room, - emitUpdate, - emitOpen: room => this._openRoom(room) - }); + return new RoomTileViewModel({ + room, + emitUpdate, + emitOpen: room => this._openRoom(room) }); + }); this._roomList = roomTileVMs.sortValues((a, b) => a.compare(b)); } @@ -31,12 +31,24 @@ export default class SessionViewModel extends EventEmitter { return this._currentRoomViewModel; } + _closeCurrentRoom() { + if (this._currentRoomViewModel) { + this._currentRoomViewModel.dispose(); + this._currentRoomViewModel = null; + this.emit("change", "currentRoom"); + } + } + _openRoom(room) { if (this._currentRoomViewModel) { - this._currentRoomViewModel.disable(); + this._currentRoomViewModel.dispose(); } - this._currentRoomViewModel = new RoomViewModel(room, this._session.userId); - this._currentRoomViewModel.enable(); + this._currentRoomViewModel = new RoomViewModel({ + room, + ownUserId: this._session.userId, + closeCallback: () => this._closeCurrentRoom(), + }); + this._currentRoomViewModel.load(); this.emit("change", "currentRoom"); } } diff --git a/src/domain/session/room/RoomViewModel.js b/src/domain/session/room/RoomViewModel.js index 84e21627..3f3e8d77 100644 --- a/src/domain/session/room/RoomViewModel.js +++ b/src/domain/session/room/RoomViewModel.js @@ -3,7 +3,7 @@ import TimelineViewModel from "./timeline/TimelineViewModel.js"; import {avatarInitials} from "../avatar.js"; export default class RoomViewModel extends EventEmitter { - constructor(room, ownUserId) { + constructor({room, ownUserId, closeCallback}) { super(); this._room = room; this._ownUserId = ownUserId; @@ -11,9 +11,10 @@ export default class RoomViewModel extends EventEmitter { this._timelineVM = null; this._onRoomChange = this._onRoomChange.bind(this); this._timelineError = null; + this._closeCallback = closeCallback; } - async enable() { + async load() { this._room.on("change", this._onRoomChange); try { this._timeline = await this._room.openTimeline(); @@ -26,13 +27,18 @@ export default class RoomViewModel extends EventEmitter { } } - disable() { + dispose() { + // this races with enable, on the await openTimeline() if (this._timeline) { // will stop the timeline from delivering updates on entries this._timeline.close(); } } + close() { + this._closeCallback(); + } + // room doesn't tell us yet which fields changed, // so emit all fields originating from summary _onRoomChange() { diff --git a/src/ui/web/css/layout.css b/src/ui/web/css/layout.css index e77a9570..098be686 100644 --- a/src/ui/web/css/layout.css +++ b/src/ui/web/css/layout.css @@ -21,7 +21,7 @@ body { /* mobile layout */ @media screen and (max-width: 800px) { - div.back { display: block !important; } + .RoomHeader button.back { display: block; } div.RoomView, div.RoomPlaceholderView { display: none; } div.LeftPanel {flex-grow: 1;} div.room-shown div.RoomView { display: unset; } diff --git a/src/ui/web/css/room.css b/src/ui/web/css/room.css index f90ee8c8..3a9dc886 100644 --- a/src/ui/web/css/room.css +++ b/src/ui/web/css/room.css @@ -4,12 +4,13 @@ background-color: #333; } -.RoomHeader *:last-child { - margin-right: 0 !important; +.RoomHeader > *:last-child { + margin-right: 0; } .RoomHeader > * { - margin-right: 10px !important; + margin-right: 10px; + flex: 0 0 auto; } .RoomHeader button { @@ -25,10 +26,15 @@ line-height: 40px; } -.RoomHeader button.back { +.RoomHeader .back { display: none; } +.RoomHeader .room-description { + flex: 1 1 0; + min-width: 0; +} + .RoomHeader .topic { font-size: 0.8em; overflow: hidden; diff --git a/src/ui/web/session/SessionView.js b/src/ui/web/session/SessionView.js index dc52c84d..9b97ac19 100644 --- a/src/ui/web/session/SessionView.js +++ b/src/ui/web/session/SessionView.js @@ -52,8 +52,13 @@ export default class SessionView { _onViewModelChange(prop) { if (prop === "currentRoom") { - this._root.classList.add("room-shown"); - this._middleSwitcher.switch(new RoomView(this._viewModel.currentRoom)); + if (this._viewModel.currentRoom) { + this._root.classList.add("room-shown"); + this._middleSwitcher.switch(new RoomView(this._viewModel.currentRoom)); + } else { + this._root.classList.remove("room-shown"); + this._middleSwitcher.switch(new RoomPlaceholderView()); + } } } diff --git a/src/ui/web/session/room/RoomView.js b/src/ui/web/session/room/RoomView.js index 8c370762..c9225294 100644 --- a/src/ui/web/session/room/RoomView.js +++ b/src/ui/web/session/room/RoomView.js @@ -7,11 +7,11 @@ export default class RoomView extends TemplateView { this._timelineList = null; } - render(t) { + render(t, vm) { return t.div({className: "RoomView"}, [ t.div({className: "TimelinePanel"}, [ t.div({className: "RoomHeader"}, [ - t.button({className: "back"}), + t.button({className: "back", onClick: () => vm.close()}), t.div({className: "avatar large"}, vm => vm.avatarInitials), t.div({className: "room-description"}, [ t.h2(vm => vm.name),