diff --git a/src/domain/navigation/index.js b/src/domain/navigation/index.js index e209f2e5..086367ce 100644 --- a/src/domain/navigation/index.js +++ b/src/domain/navigation/index.js @@ -32,7 +32,7 @@ function allowsChild(parent, child) { // allowed root segments return type === "login" || type === "session" || type === "sso" || type === "logout"; case "session": - return type === "room" || type === "rooms" || type === "settings"; + return type === "room" || type === "rooms" || type === "settings" || type === "create-room"; case "rooms": // downside of the approach: both of these will control which tile is selected return type === "room" || type === "empty-grid-tile"; diff --git a/src/domain/session/SessionViewModel.js b/src/domain/session/SessionViewModel.js index 11126ca9..5a818c4d 100644 --- a/src/domain/session/SessionViewModel.js +++ b/src/domain/session/SessionViewModel.js @@ -24,6 +24,7 @@ import {LightboxViewModel} from "./room/LightboxViewModel.js"; import {SessionStatusViewModel} from "./SessionStatusViewModel.js"; import {RoomGridViewModel} from "./RoomGridViewModel.js"; import {SettingsViewModel} from "./settings/SettingsViewModel.js"; +import {CreateRoomViewModel} from "./CreateRoomViewModel.js"; import {ViewModel} from "../ViewModel.js"; import {RoomViewModelObservable} from "./RoomViewModelObservable.js"; import {RightPanelViewModel} from "./rightpanel/RightPanelViewModel.js"; @@ -42,6 +43,7 @@ export class SessionViewModel extends ViewModel { this._settingsViewModel = null; this._roomViewModelObservable = null; this._gridViewModel = null; + this._createRoomViewModel = null; this._setupNavigation(); } @@ -73,6 +75,12 @@ export class SessionViewModel extends ViewModel { })); this._updateSettings(settings.get()); + const createRoom = this.navigation.observe("create-room"); + this.track(createRoom.subscribe(createRoomOpen => { + this._updateCreateRoom(createRoomOpen); + })); + this._updateCreateRoom(createRoom.get()); + const lightbox = this.navigation.observe("lightbox"); this.track(lightbox.subscribe(eventId => { this._updateLightbox(eventId); @@ -94,7 +102,7 @@ export class SessionViewModel extends ViewModel { } get activeMiddleViewModel() { - return this._roomViewModelObservable?.get() || this._gridViewModel || this._settingsViewModel; + return this._roomViewModelObservable?.get() || this._gridViewModel || this._settingsViewModel || this._createRoomViewModel; } get roomGridViewModel() { @@ -117,11 +125,14 @@ export class SessionViewModel extends ViewModel { return this._roomViewModelObservable?.get(); } - get rightPanelViewModel() { return this._rightPanelViewModel; } + get createRoomViewModel() { + return this._createRoomViewModel; + } + _updateGrid(roomIds) { const changed = !(this._gridViewModel && roomIds); const currentRoomId = this.navigation.path.get("room"); @@ -160,7 +171,7 @@ export class SessionViewModel extends ViewModel { } } - _createRoomViewModel(roomId) { + _createRoomViewModelInstance(roomId) { const room = this._client.session.rooms.get(roomId); if (room) { const roomVM = new RoomViewModel(this.childOptions({room})); @@ -246,6 +257,16 @@ export class SessionViewModel extends ViewModel { this.emitChange("activeMiddleViewModel"); } + _updateCreateRoom(createRoomOpen) { + if (this._createRoomViewModel) { + this._createRoomViewModel = this.disposeTracked(this._createRoomViewModel); + } + if (createRoomOpen) { + this._createRoomViewModel = this.track(new CreateRoomViewModel(this.childOptions({session: this._client.session}))); + } + this.emitChange("activeMiddleViewModel"); + } + _updateLightbox(eventId) { if (this._lightboxViewModel) { this._lightboxViewModel = this.disposeTracked(this._lightboxViewModel); diff --git a/src/domain/session/leftpanel/LeftPanelViewModel.js b/src/domain/session/leftpanel/LeftPanelViewModel.js index 597c0da6..cc3a2ccb 100644 --- a/src/domain/session/leftpanel/LeftPanelViewModel.js +++ b/src/domain/session/leftpanel/LeftPanelViewModel.js @@ -35,6 +35,7 @@ export class LeftPanelViewModel extends ViewModel { this._setupNavigation(); this._closeUrl = this.urlCreator.urlForSegment("session"); this._settingsUrl = this.urlCreator.urlForSegment("settings"); + this._createRoomUrl = this.urlCreator.urlForSegment("create-room"); } _mapTileViewModels(roomsBeingCreated, invites, rooms) { @@ -77,6 +78,8 @@ export class LeftPanelViewModel extends ViewModel { return this._settingsUrl; } + get createRoomUrl() { return this._createRoomUrl; } + _setupNavigation() { const roomObservable = this.navigation.observe("room"); this.track(roomObservable.subscribe(roomId => this._open(roomId))); diff --git a/src/platform/web/ui/session/SessionView.js b/src/platform/web/ui/session/SessionView.js index 3740ffca..e7cc406a 100644 --- a/src/platform/web/ui/session/SessionView.js +++ b/src/platform/web/ui/session/SessionView.js @@ -26,6 +26,7 @@ import {StaticView} from "../general/StaticView.js"; import {SessionStatusView} from "./SessionStatusView.js"; import {RoomGridView} from "./RoomGridView.js"; import {SettingsView} from "./settings/SettingsView.js"; +import {CreateRoomView} from "./CreateRoomView.js"; import {RightPanelView} from "./rightpanel/RightPanelView.js"; export class SessionView extends TemplateView { @@ -44,6 +45,8 @@ export class SessionView extends TemplateView { return new RoomGridView(vm.roomGridViewModel); } else if (vm.settingsViewModel) { return new SettingsView(vm.settingsViewModel); + } else if (vm.createRoomViewModel) { + return new CreateRoomView(vm.createRoomViewModel); } else if (vm.currentRoomViewModel) { if (vm.currentRoomViewModel.kind === "invite") { return new InviteView(vm.currentRoomViewModel); diff --git a/src/platform/web/ui/session/leftpanel/LeftPanelView.js b/src/platform/web/ui/session/leftpanel/LeftPanelView.js index 1b3c2ae7..c79192be 100644 --- a/src/platform/web/ui/session/leftpanel/LeftPanelView.js +++ b/src/platform/web/ui/session/leftpanel/LeftPanelView.js @@ -90,6 +90,7 @@ export class LeftPanelView extends TemplateView { "aria-label": gridButtonLabel }), t.a({className: "button-utility settings", href: vm.settingsUrl, "aria-label": vm.i18n`Settings`, title: vm.i18n`Settings`}), + t.a({className: "button-utility create", href: vm.createRoomUrl, "aria-label": vm.i18n`Create room`, title: vm.i18n`Create room`}), ]); return t.div({className: "LeftPanel"}, [