mirror of
https://github.com/vector-im/hydrogen-web.git
synced 2024-12-22 19:14:52 +01:00
setup navigation for create room form
This commit is contained in:
parent
83d2b58bad
commit
8523f6feaf
@ -32,7 +32,7 @@ function allowsChild(parent, child) {
|
|||||||
// allowed root segments
|
// allowed root segments
|
||||||
return type === "login" || type === "session" || type === "sso" || type === "logout";
|
return type === "login" || type === "session" || type === "sso" || type === "logout";
|
||||||
case "session":
|
case "session":
|
||||||
return type === "room" || type === "rooms" || type === "settings";
|
return type === "room" || type === "rooms" || type === "settings" || type === "create-room";
|
||||||
case "rooms":
|
case "rooms":
|
||||||
// downside of the approach: both of these will control which tile is selected
|
// downside of the approach: both of these will control which tile is selected
|
||||||
return type === "room" || type === "empty-grid-tile";
|
return type === "room" || type === "empty-grid-tile";
|
||||||
|
@ -24,6 +24,7 @@ import {LightboxViewModel} from "./room/LightboxViewModel.js";
|
|||||||
import {SessionStatusViewModel} from "./SessionStatusViewModel.js";
|
import {SessionStatusViewModel} from "./SessionStatusViewModel.js";
|
||||||
import {RoomGridViewModel} from "./RoomGridViewModel.js";
|
import {RoomGridViewModel} from "./RoomGridViewModel.js";
|
||||||
import {SettingsViewModel} from "./settings/SettingsViewModel.js";
|
import {SettingsViewModel} from "./settings/SettingsViewModel.js";
|
||||||
|
import {CreateRoomViewModel} from "./CreateRoomViewModel.js";
|
||||||
import {ViewModel} from "../ViewModel.js";
|
import {ViewModel} from "../ViewModel.js";
|
||||||
import {RoomViewModelObservable} from "./RoomViewModelObservable.js";
|
import {RoomViewModelObservable} from "./RoomViewModelObservable.js";
|
||||||
import {RightPanelViewModel} from "./rightpanel/RightPanelViewModel.js";
|
import {RightPanelViewModel} from "./rightpanel/RightPanelViewModel.js";
|
||||||
@ -42,6 +43,7 @@ export class SessionViewModel extends ViewModel {
|
|||||||
this._settingsViewModel = null;
|
this._settingsViewModel = null;
|
||||||
this._roomViewModelObservable = null;
|
this._roomViewModelObservable = null;
|
||||||
this._gridViewModel = null;
|
this._gridViewModel = null;
|
||||||
|
this._createRoomViewModel = null;
|
||||||
this._setupNavigation();
|
this._setupNavigation();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -73,6 +75,12 @@ export class SessionViewModel extends ViewModel {
|
|||||||
}));
|
}));
|
||||||
this._updateSettings(settings.get());
|
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");
|
const lightbox = this.navigation.observe("lightbox");
|
||||||
this.track(lightbox.subscribe(eventId => {
|
this.track(lightbox.subscribe(eventId => {
|
||||||
this._updateLightbox(eventId);
|
this._updateLightbox(eventId);
|
||||||
@ -94,7 +102,7 @@ export class SessionViewModel extends ViewModel {
|
|||||||
}
|
}
|
||||||
|
|
||||||
get activeMiddleViewModel() {
|
get activeMiddleViewModel() {
|
||||||
return this._roomViewModelObservable?.get() || this._gridViewModel || this._settingsViewModel;
|
return this._roomViewModelObservable?.get() || this._gridViewModel || this._settingsViewModel || this._createRoomViewModel;
|
||||||
}
|
}
|
||||||
|
|
||||||
get roomGridViewModel() {
|
get roomGridViewModel() {
|
||||||
@ -117,11 +125,14 @@ export class SessionViewModel extends ViewModel {
|
|||||||
return this._roomViewModelObservable?.get();
|
return this._roomViewModelObservable?.get();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
get rightPanelViewModel() {
|
get rightPanelViewModel() {
|
||||||
return this._rightPanelViewModel;
|
return this._rightPanelViewModel;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get createRoomViewModel() {
|
||||||
|
return this._createRoomViewModel;
|
||||||
|
}
|
||||||
|
|
||||||
_updateGrid(roomIds) {
|
_updateGrid(roomIds) {
|
||||||
const changed = !(this._gridViewModel && roomIds);
|
const changed = !(this._gridViewModel && roomIds);
|
||||||
const currentRoomId = this.navigation.path.get("room");
|
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);
|
const room = this._client.session.rooms.get(roomId);
|
||||||
if (room) {
|
if (room) {
|
||||||
const roomVM = new RoomViewModel(this.childOptions({room}));
|
const roomVM = new RoomViewModel(this.childOptions({room}));
|
||||||
@ -246,6 +257,16 @@ export class SessionViewModel extends ViewModel {
|
|||||||
this.emitChange("activeMiddleViewModel");
|
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) {
|
_updateLightbox(eventId) {
|
||||||
if (this._lightboxViewModel) {
|
if (this._lightboxViewModel) {
|
||||||
this._lightboxViewModel = this.disposeTracked(this._lightboxViewModel);
|
this._lightboxViewModel = this.disposeTracked(this._lightboxViewModel);
|
||||||
|
@ -35,6 +35,7 @@ export class LeftPanelViewModel extends ViewModel {
|
|||||||
this._setupNavigation();
|
this._setupNavigation();
|
||||||
this._closeUrl = this.urlCreator.urlForSegment("session");
|
this._closeUrl = this.urlCreator.urlForSegment("session");
|
||||||
this._settingsUrl = this.urlCreator.urlForSegment("settings");
|
this._settingsUrl = this.urlCreator.urlForSegment("settings");
|
||||||
|
this._createRoomUrl = this.urlCreator.urlForSegment("create-room");
|
||||||
}
|
}
|
||||||
|
|
||||||
_mapTileViewModels(roomsBeingCreated, invites, rooms) {
|
_mapTileViewModels(roomsBeingCreated, invites, rooms) {
|
||||||
@ -77,6 +78,8 @@ export class LeftPanelViewModel extends ViewModel {
|
|||||||
return this._settingsUrl;
|
return this._settingsUrl;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get createRoomUrl() { return this._createRoomUrl; }
|
||||||
|
|
||||||
_setupNavigation() {
|
_setupNavigation() {
|
||||||
const roomObservable = this.navigation.observe("room");
|
const roomObservable = this.navigation.observe("room");
|
||||||
this.track(roomObservable.subscribe(roomId => this._open(roomId)));
|
this.track(roomObservable.subscribe(roomId => this._open(roomId)));
|
||||||
|
@ -26,6 +26,7 @@ import {StaticView} from "../general/StaticView.js";
|
|||||||
import {SessionStatusView} from "./SessionStatusView.js";
|
import {SessionStatusView} from "./SessionStatusView.js";
|
||||||
import {RoomGridView} from "./RoomGridView.js";
|
import {RoomGridView} from "./RoomGridView.js";
|
||||||
import {SettingsView} from "./settings/SettingsView.js";
|
import {SettingsView} from "./settings/SettingsView.js";
|
||||||
|
import {CreateRoomView} from "./CreateRoomView.js";
|
||||||
import {RightPanelView} from "./rightpanel/RightPanelView.js";
|
import {RightPanelView} from "./rightpanel/RightPanelView.js";
|
||||||
|
|
||||||
export class SessionView extends TemplateView {
|
export class SessionView extends TemplateView {
|
||||||
@ -44,6 +45,8 @@ export class SessionView extends TemplateView {
|
|||||||
return new RoomGridView(vm.roomGridViewModel);
|
return new RoomGridView(vm.roomGridViewModel);
|
||||||
} else if (vm.settingsViewModel) {
|
} else if (vm.settingsViewModel) {
|
||||||
return new SettingsView(vm.settingsViewModel);
|
return new SettingsView(vm.settingsViewModel);
|
||||||
|
} else if (vm.createRoomViewModel) {
|
||||||
|
return new CreateRoomView(vm.createRoomViewModel);
|
||||||
} else if (vm.currentRoomViewModel) {
|
} else if (vm.currentRoomViewModel) {
|
||||||
if (vm.currentRoomViewModel.kind === "invite") {
|
if (vm.currentRoomViewModel.kind === "invite") {
|
||||||
return new InviteView(vm.currentRoomViewModel);
|
return new InviteView(vm.currentRoomViewModel);
|
||||||
|
@ -90,6 +90,7 @@ export class LeftPanelView extends TemplateView {
|
|||||||
"aria-label": gridButtonLabel
|
"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 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"}, [
|
return t.div({className: "LeftPanel"}, [
|
||||||
|
Loading…
Reference in New Issue
Block a user