diff --git a/src/domain/session/SessionViewModel.js b/src/domain/session/SessionViewModel.js index 6fb8a11b..1a80aa82 100644 --- a/src/domain/session/SessionViewModel.js +++ b/src/domain/session/SessionViewModel.js @@ -17,7 +17,6 @@ limitations under the License. import {LeftPanelViewModel} from "./leftpanel/LeftPanelViewModel.js"; import {RoomViewModel} from "./room/RoomViewModel.js"; -import {RoomDetailsViewModel} from "./rightpanel/RoomDetailsViewModel.js"; import {UnknownRoomViewModel} from "./room/UnknownRoomViewModel.js"; import {InviteViewModel} from "./room/InviteViewModel.js"; import {LightboxViewModel} from "./room/LightboxViewModel.js"; @@ -27,6 +26,7 @@ import {SettingsViewModel} from "./settings/SettingsViewModel.js"; import {ViewModel} from "../ViewModel.js"; import {RoomViewModelObservable} from "./RoomViewModelObservable.js"; import {MemberListViewModel} from "./rightpanel/MemberListViewModel.js"; +import { RightPanelViewModel } from "./rightpanel/RightPanelViewModel.js"; export class SessionViewModel extends ViewModel { constructor(options) { @@ -64,7 +64,7 @@ export class SessionViewModel extends ViewModel { if (!this._gridViewModel) { this._updateRoom(roomId); } - this._updateRoomDetails(); + this._updateRightPanel(); })); if (!this._gridViewModel) { this._updateRoom(currentRoomId.get()); @@ -82,13 +82,13 @@ export class SessionViewModel extends ViewModel { })); this._updateLightbox(lightbox.get()); - const details = this.navigation.observe("details"); - this.track(details.subscribe(() => this._updateRoomDetails())); - this._updateRoomDetails(); + // const members = this.navigation.observe("members"); + // this.track(members.subscribe(() => this._toggleMemberListPanel())); + // this._toggleMemberListPanel(); - const members = this.navigation.observe("members"); - this.track(members.subscribe(() => this._toggleMemberListPanel())); - this._toggleMemberListPanel(); + const rightpanel = this.navigation.observe("rightpanel"); + this.track(rightpanel.subscribe(() => this._updateRightPanel())); + this._updateRightPanel(); } get id() { @@ -123,14 +123,14 @@ export class SessionViewModel extends ViewModel { return this._roomViewModelObservable?.get(); } - get roomDetailsViewModel() { - return this._roomDetailsViewModel; - } - get memberListViewModel() { return this._memberListViewModel; } + get rightPanelViewModel() { + return this._rightPanelViewModel; + } + _updateGrid(roomIds) { const changed = !(this._gridViewModel && roomIds); const currentRoomId = this.navigation.path.get("room"); @@ -265,17 +265,6 @@ export class SessionViewModel extends ViewModel { return room; } - _updateRoomDetails() { - this._roomDetailsViewModel = this.disposeTracked(this._roomDetailsViewModel); - const enable = !!this.navigation.path.get("details")?.value; - if (enable) { - const room = this._roomFromNavigation(); - if (!room) { return; } - this._roomDetailsViewModel = this.track(new RoomDetailsViewModel(this.childOptions({room}))); - } - this.emitChange("roomDetailsViewModel"); - } - async _toggleMemberListPanel() { this._memberListViewModel = this.disposeTracked(this._memberListViewModel); const enable = !!this.navigation.path.get("members")?.value; @@ -289,4 +278,15 @@ export class SessionViewModel extends ViewModel { } this.emitChange("memberListViewModel"); } + + _updateRightPanel() { + this._rightPanelViewModel = this.disposeTracked(this._rightPanelViewModel); + const enable = !!this.navigation.path.get("rightpanel")?.value; + if (enable) { + const room = this._roomFromNavigation(); + this._rightPanelViewModel = this.track(new RightPanelViewModel(this.childOptions({room}))); + } + this.emitChange("rightPanelViewModel"); + } + } diff --git a/src/platform/web/ui/session/SessionView.js b/src/platform/web/ui/session/SessionView.js index 4323a07c..15a5d0dd 100644 --- a/src/platform/web/ui/session/SessionView.js +++ b/src/platform/web/ui/session/SessionView.js @@ -27,6 +27,7 @@ import {RoomGridView} from "./RoomGridView.js"; import {SettingsView} from "./settings/SettingsView.js"; import {RoomDetailsView} from "./rightpanel/RoomDetailsView.js"; import {MemberListView} from "./rightpanel/MemberListView.js"; +import {RightPanelView} from "./rightpanel/RightPanelView.js"; export class SessionView extends TemplateView { render(t, vm) { @@ -34,7 +35,7 @@ export class SessionView extends TemplateView { className: { "SessionView": true, "middle-shown": vm => !!vm.activeMiddleViewModel, - "right-shown": vm => !!vm.roomDetailsViewModel + "right-shown": vm => !!vm.rightPanelViewModel }, }, [ t.view(new SessionStatusView(vm.sessionStatusViewModel)), @@ -56,9 +57,9 @@ export class SessionView extends TemplateView { return new StaticView(t => t.div({className: "room-placeholder"}, t.h2(vm.i18n`Choose a room on the left side.`))); } }), - t.mapView(vm => vm.roomDetailsViewModel, roomDetailsViewModel => roomDetailsViewModel ? new RoomDetailsView(roomDetailsViewModel) : null), t.mapView(vm => vm.memberListViewModel, memberListViewModel => memberListViewModel ? new MemberListView(memberListViewModel) : null), - t.mapView(vm => vm.lightboxViewModel, lightboxViewModel => lightboxViewModel ? new LightboxView(lightboxViewModel) : null) + t.mapView(vm => vm.lightboxViewModel, lightboxViewModel => lightboxViewModel ? new LightboxView(lightboxViewModel) : null), + t.mapView(vm => vm.rightPanelViewModel, rightPanelViewModel => rightPanelViewModel ? new RightPanelView(rightPanelViewModel) : null) ]); } }