Skip to content

Commit 3a951bd

Browse files
psrpintopsrpinto
authored
Merge pull request #151 from Automattic/single-room-mode-settings
Improve single room mode
2 parents d29fe35 + b4f6442 commit 3a951bd

File tree

8 files changed

+334
-6
lines changed

8 files changed

+334
-6
lines changed

‎frontend/iframe/styles/theme/theme.css‎

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,30 @@ body {
1313
left: 0;
1414
}
1515

16-
/* Hide back button when in single-room mode. */
17-
.RootView.single-room-mode .RoomHeader .close-middle {
18-
display: none !important;
16+
/* Hide the left panel when in single-room mode. */
17+
.RootView.single-room-mode .SessionView .LeftPanel {
18+
display: none;
19+
}
20+
.RootView.single-room-mode .RightPanelView {
21+
grid-area: middle / right;
22+
}
23+
@media screen and (max-width: 800px) {
24+
.RootView.single-room-mode .RightPanelView {
25+
grid-area: middle;
26+
}
27+
}
28+
29+
/* Make the middle take all the grid when in single-room mode. */
30+
.RootView.single-room-mode .SessionView {
31+
grid-template:
32+
"status status" auto
33+
"middle middle" 1fr /
34+
320px 1fr;
35+
}
36+
37+
/* Always show the back button in single-room mode. */
38+
.RootView.single-room-mode .close-middle {
39+
display: block;
1940
}
2041

2142
/* Remove horizontal scrollbars in pre-session screen. */

‎frontend/iframe/viewmodels/RoomViewModel.ts‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import { SegmentType } from "hydrogen-web/src/domain/navigation";
2+
import { Segment } from "hydrogen-web/src/domain/navigation/Navigation";
3+
import { RoomViewModel as BaseRoomViewModel } from "hydrogen-web/src/domain/session/room/RoomViewModel";
4+
import { URLRouter } from "../platform/URLRouter";
5+
6+
export class RoomViewModel extends BaseRoomViewModel {
7+
constructor(options) {
8+
super(options);
9+
}
10+
11+
async load() {
12+
super.load();
13+
}
14+
15+
get urlRouter(): URLRouter {
16+
return super.urlRouter;
17+
}
18+
19+
get closeUrl() {
20+
if (this.singleRoomMode) {
21+
const path = this.navigation.path.with(new Segment<SegmentType>("session"));
22+
23+
return this.urlRouter.urlForPath(path);
24+
}
25+
26+
return super.closeUrl;
27+
}
28+
29+
get singleRoomMode(): boolean {
30+
return !!super.platform.config.roomId;
31+
}
32+
33+
get navigation() {
34+
return super.navigation;
35+
}
36+
37+
i18n(parts: TemplateStringsArray, ...expr: any[]): string {
38+
return super.i18n(parts, expr);
39+
}
40+
41+
openDetailsPanel() {
42+
super.openDetailsPanel();
43+
}
44+
45+
get canLeave() {
46+
return super.canLeave;
47+
}
48+
49+
get canForget() {
50+
return super.canForget;
51+
}
52+
53+
forgetRoom() {
54+
super.forgetRoom();
55+
}
56+
57+
get canRejoin() {
58+
return super.canRejoin;
59+
}
60+
61+
rejoinRoom() {
62+
super.rejoinRoom();
63+
}
64+
}

‎frontend/iframe/viewmodels/RootViewModel.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@ import { ForcedLogoutViewModel } from "hydrogen-web/src/domain/ForcedLogoutViewM
22
import { LoginViewModel } from "hydrogen-web/src/domain/login/LoginViewModel";
33
import { LogoutViewModel } from "hydrogen-web/src/domain/LogoutViewModel";
44
import { SegmentType } from "hydrogen-web/src/domain/navigation";
5-
import { SessionViewModel } from "hydrogen-web/src/domain/session/SessionViewModel";
65
import { SessionLoadViewModel } from "hydrogen-web/src/domain/SessionLoadViewModel";
76
import { SessionPickerViewModel } from "hydrogen-web/src/domain/SessionPickerViewModel";
87
import { Options as BaseOptions, ViewModel } from "hydrogen-web/src/domain/ViewModel";
98
import { Client } from "hydrogen-web/src/matrix/Client.js";
109
import { allSections, Section } from "../platform/Navigation";
10+
import { SessionViewModel } from "./SessionViewModel";
1111

1212
type Options = {} & BaseOptions;
1313

@@ -112,7 +112,7 @@ export class RootViewModel extends ViewModel<SegmentType, Options> {
112112
void this._showPicker();
113113
}
114114
} else if (sessionId) {
115-
if (this.platform.config.roomId) {
115+
if (this.singleRoomMode) {
116116
this.navigation.push("room", this.platform.config.roomId);
117117
}
118118

‎frontend/iframe/viewmodels/SessionViewModel.ts‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import { SessionViewModel as BaseSessionViewModel } from "hydrogen-web/src/domain/session/SessionViewModel";
2+
import { RoomViewModel } from "./RoomViewModel";
3+
import { SettingsViewModel } from "./SettingsViewModel";
4+
5+
export class SessionViewModel extends BaseSessionViewModel {
6+
constructor(options) {
7+
super(options);
8+
}
9+
10+
get id() {
11+
return super.id;
12+
}
13+
14+
start() {
15+
super.start();
16+
}
17+
18+
i18n(parts: TemplateStringsArray, ...expr: any[]): string {
19+
return super.i18n(parts, expr);
20+
}
21+
22+
get activeMiddleViewModel() {
23+
return super.activeMiddleViewModel;
24+
}
25+
26+
get roomGridViewModel() {
27+
return super.roomGridViewModel;
28+
}
29+
30+
get leftPanelViewModel() {
31+
return super.leftPanelViewModel;
32+
}
33+
34+
get sessionStatusViewModel() {
35+
return super.sessionStatusViewModel;
36+
}
37+
38+
get currentRoomViewModel() {
39+
// @ts-ignore
40+
return this._roomViewModelObservable?.get();
41+
}
42+
43+
get rightPanelViewModel() {
44+
return super.rightPanelViewModel;
45+
}
46+
47+
get createRoomViewModel() {
48+
return super.createRoomViewModel;
49+
}
50+
51+
get joinRoomViewModel() {
52+
return super.joinRoomViewModel;
53+
}
54+
55+
_updateSettings(settingsOpen) {
56+
if (this.settingsViewModel) {
57+
this.settingsViewModel = super.disposeTracked(super.settingsViewModel);
58+
}
59+
if (settingsOpen) {
60+
this.settingsViewModel = super.track(new SettingsViewModel(super.childOptions({
61+
client: this.client,
62+
})));
63+
void this.settingsViewModel.load();
64+
}
65+
super.emitChange("activeMiddleViewModel");
66+
}
67+
68+
get settingsViewModel(): SettingsViewModel {
69+
// @ts-ignore
70+
return this._settingsViewModel;
71+
}
72+
73+
private set settingsViewModel(vm: SettingsViewModel) {
74+
// @ts-ignore
75+
this._settingsViewModel = vm;
76+
}
77+
78+
dispose(): void {
79+
super.dispose();
80+
}
81+
82+
private get client() {
83+
// @ts-ignore
84+
return this._client;
85+
}
86+
87+
_createRoomViewModelInstance(roomId) {
88+
const room = this.client.session.rooms.get(roomId);
89+
if (room) {
90+
const roomVM = new RoomViewModel(super.childOptions({room}));
91+
void roomVM.load();
92+
return roomVM;
93+
}
94+
return null;
95+
}
96+
97+
async _createArchivedRoomViewModel(roomId) {
98+
const room = await this.client.session.loadArchivedRoom(roomId);
99+
if (room) {
100+
const roomVM = new RoomViewModel(super.childOptions({room}));
101+
void roomVM.load();
102+
return roomVM;
103+
}
104+
return null;
105+
}
106+
}

‎frontend/iframe/viewmodels/SettingsViewModel.ts‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { SegmentType } from "hydrogen-web/src/domain/navigation";
2+
import { Segment } from "hydrogen-web/src/domain/navigation/Navigation";
3+
import { SettingsViewModel as BaseSettingsViewModel } from "hydrogen-web/src/domain/session/settings/SettingsViewModel";
4+
import { URLRouter } from "../platform/URLRouter";
5+
6+
export class SettingsViewModel extends BaseSettingsViewModel {
7+
constructor(options) {
8+
super(options);
9+
}
10+
11+
async load() {
12+
return super.load();
13+
}
14+
15+
get urlRouter(): URLRouter {
16+
return super.urlRouter;
17+
}
18+
19+
get navigation() {
20+
return super.navigation;
21+
}
22+
23+
get closeUrl() {
24+
if (this.singleRoomMode) {
25+
const roomId = super.platform.config.roomId;
26+
const path = this.navigation.path.with(new Segment<SegmentType>("room", roomId));
27+
28+
return this.urlRouter.urlForPath(path);
29+
}
30+
31+
return super.closeUrl;
32+
}
33+
34+
get singleRoomMode(): boolean {
35+
return !!super.platform.config.roomId;
36+
}
37+
}

‎frontend/iframe/views/RoomView.ts‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { Menu, MenuOption } from "hydrogen-web/src/platform/web/ui/general/Menu";
2+
import { Popup } from "hydrogen-web/src/platform/web/ui/general/Popup";
3+
import { RoomView as BaseRoomView } from "hydrogen-web/src/platform/web/ui/session/room/RoomView";
4+
import { RoomViewModel } from "../viewmodels/RoomViewModel";
5+
6+
export class RoomView extends BaseRoomView {
7+
constructor(value: RoomViewModel, viewClassForTile) {
8+
super(value, viewClassForTile);
9+
}
10+
11+
_toggleOptionsMenu(evt) {
12+
if (super._optionsPopup && super._optionsPopup.isOpen) {
13+
super._optionsPopup.close();
14+
} else {
15+
const vm: RoomViewModel = super.value;
16+
const options: MenuOption[] = [];
17+
options.push(Menu.option(vm.i18n`Room details`, () => vm.openDetailsPanel()));
18+
if (vm.canLeave) {
19+
options.push(Menu.option(vm.i18n`Leave room`, () => super._confirmToLeaveRoom()).setDestructive());
20+
}
21+
if (vm.canForget) {
22+
options.push(Menu.option(vm.i18n`Forget room`, () => vm.forgetRoom()).setDestructive());
23+
}
24+
if (vm.canRejoin) {
25+
options.push(Menu.option(vm.i18n`Rejoin room`, () => vm.rejoinRoom()));
26+
}
27+
if (vm.singleRoomMode) {
28+
options.push(Menu.option(vm.i18n`Settings`, () => vm.navigation.push("settings")));
29+
}
30+
if (!options.length) {
31+
return;
32+
}
33+
const optionsPopup = new Popup(new Menu(options));
34+
optionsPopup.trackInTemplateView(this);
35+
optionsPopup.showRelativeTo(evt.target, 10);
36+
37+
super._optionsPopup = optionsPopup;
38+
}
39+
}
40+
}

‎frontend/iframe/views/RootView.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ import { LoginView } from "hydrogen-web/src/platform/web/ui/login/LoginView";
55
import { SessionLoadView } from "hydrogen-web/src/platform/web/ui/login/SessionLoadView";
66
import { SessionPickerView } from "hydrogen-web/src/platform/web/ui/login/SessionPickerView";
77
import { LogoutView } from "hydrogen-web/src/platform/web/ui/LogoutView";
8-
import { SessionView } from "hydrogen-web/src/platform/web/ui/session/SessionView";
98
import { Section } from "../platform/Navigation";
109
import { RootViewModel } from "../viewmodels/RootViewModel";
10+
import { SessionView } from "./SessionView";
1111

1212
export class RootView extends TemplateView<RootViewModel> {
1313
constructor(value: RootViewModel) {

‎frontend/iframe/views/SessionView.ts‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { StaticView } from "hydrogen-web/src/platform/web/ui/general/StaticView";
2+
import { CreateRoomView } from "hydrogen-web/src/platform/web/ui/session/CreateRoomView";
3+
import { JoinRoomView } from "hydrogen-web/src/platform/web/ui/session/JoinRoomView";
4+
import { LeftPanelView } from "hydrogen-web/src/platform/web/ui/session/leftpanel/LeftPanelView";
5+
import { RightPanelView } from "hydrogen-web/src/platform/web/ui/session/rightpanel/RightPanelView";
6+
import { viewClassForTile } from "hydrogen-web/src/platform/web/ui/session/room/common";
7+
import { InviteView } from "hydrogen-web/src/platform/web/ui/session/room/InviteView";
8+
import { LightboxView } from "hydrogen-web/src/platform/web/ui/session/room/LightboxView";
9+
import { RoomBeingCreatedView } from "hydrogen-web/src/platform/web/ui/session/room/RoomBeingCreatedView";
10+
import { UnknownRoomView } from "hydrogen-web/src/platform/web/ui/session/room/UnknownRoomView";
11+
import { RoomGridView } from "hydrogen-web/src/platform/web/ui/session/RoomGridView";
12+
import { SessionStatusView } from "hydrogen-web/src/platform/web/ui/session/SessionStatusView";
13+
import { SessionView as BaseSessionView } from "hydrogen-web/src/platform/web/ui/session/SessionView";
14+
import { SettingsView } from "hydrogen-web/src/platform/web/ui/session/settings/SettingsView";
15+
import { SessionViewModel } from "../viewmodels/SessionViewModel";
16+
import { RoomView } from "./RoomView";
17+
18+
export class SessionView extends BaseSessionView {
19+
constructor(value?: SessionViewModel) {
20+
super(value);
21+
}
22+
23+
render(t, vm: SessionViewModel) {
24+
return t.div({
25+
className: {
26+
"SessionView": true,
27+
"middle-shown": (vm: SessionViewModel) => !!vm.activeMiddleViewModel,
28+
"right-shown": (vm: SessionViewModel) => !!vm.rightPanelViewModel,
29+
},
30+
}, [
31+
t.view(new SessionStatusView(vm.sessionStatusViewModel)),
32+
t.view(new LeftPanelView(vm.leftPanelViewModel)),
33+
t.mapView(vm => vm.activeMiddleViewModel, () => {
34+
if (vm.roomGridViewModel) {
35+
return new RoomGridView(vm.roomGridViewModel, viewClassForTile);
36+
} else if (vm.settingsViewModel) {
37+
return new SettingsView(vm.settingsViewModel);
38+
} else if (vm.createRoomViewModel) {
39+
return new CreateRoomView(vm.createRoomViewModel);
40+
} else if (vm.joinRoomViewModel) {
41+
return new JoinRoomView(vm.joinRoomViewModel);
42+
} else if (vm.currentRoomViewModel) {
43+
if (vm.currentRoomViewModel.kind === "invite") {
44+
return new InviteView(vm.currentRoomViewModel);
45+
} else if (vm.currentRoomViewModel.kind === "room") {
46+
return new RoomView(vm.currentRoomViewModel, viewClassForTile);
47+
} else if (vm.currentRoomViewModel.kind === "roomBeingCreated") {
48+
return new RoomBeingCreatedView(vm.currentRoomViewModel);
49+
} else {
50+
return new UnknownRoomView(vm.currentRoomViewModel);
51+
}
52+
} else {
53+
return new StaticView(t => t.div({className: "room-placeholder"}, t.h2(vm.i18n`Choose a room on the left side.`)));
54+
}
55+
}),
56+
t.mapView(vm => vm.lightboxViewModel, lightboxViewModel => lightboxViewModel ? new LightboxView(lightboxViewModel) : null),
57+
t.mapView(vm => vm.rightPanelViewModel, rightPanelViewModel => rightPanelViewModel ? new RightPanelView(rightPanelViewModel) : null)
58+
]);
59+
}
60+
}

0 commit comments

Comments
 (0)