mirrors/vector-im-hydrogen-web
1
0
Fork 0
mirror of https://github.com/vector-im/hydrogen-web.git synced 2024-12-22 11:05:03 +01:00
Code Issues Projects Releases Wiki Activity

Merge pull request #951 from Automattic/close-room-screens

Browse Source 
Allow closing room creation and room joining views on small screens
This commit is contained in:
R Midhun Suresh 2023-09-04 15:30:29 +05:30 committed by GitHub
commit 5a743034fd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 52 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/domain/session/CreateRoomViewModel.js
View File

@ -33,6 +33,7 @@ export class CreateRoomViewModel extends ViewModel {
this._avatarScaledBlob = undefined;
this._avatarFileName = undefined;
this._avatarInfo = undefined;
this._closeUrl = this.urlRouter.urlUntilSegment("session");
}
get isPublic() { return this._isPublic; }
@ -45,6 +46,7 @@ export class CreateRoomViewModel extends ViewModel {
get hasAvatar() { return !!this._avatarScaledBlob; }
get isFederationDisabled() { return this._isFederationDisabled; }
get isAdvancedShown() { return this._isAdvancedShown; }
get closeUrl() { return this._closeUrl; }
setName(name) {
this._name = name;

4
src/domain/session/JoinRoomViewModel.ts
View File

@ -27,12 +27,16 @@ export class JoinRoomViewModel extends ViewModel<SegmentType, Options> {
private _session: Session;
private _joinInProgress: boolean = false;
private _error: Error | undefined;
private _closeUrl: string;
constructor(options: Readonly<Options>) {
super(options);
this._session = options.session;
this._closeUrl = this.urlRouter.urlUntilSegment("session");
}
get closeUrl(): string { return this._closeUrl; }
async join(roomId: string): Promise<void> {
this._error = undefined;
this._joinInProgress = true;

5
src/domain/session/room/UnknownRoomViewModel.js
View File

@ -24,6 +24,11 @@ export class UnknownRoomViewModel extends ViewModel {
this.roomIdOrAlias = roomIdOrAlias;
this._error = null;
this._busy = false;
this._closeUrl = this.urlRouter.urlUntilSegment("session");
}
get closeUrl() {
return this._closeUrl;
}
get error() {

11
src/platform/web/ui/css/themes/element/theme.css
View File

@ -984,9 +984,16 @@ button.link {
margin: 0;
}
.UnknownRoomView {
.UnknownRoomView_container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.UnknownRoomView_body {
height: 100%;
text-align: center;
padding: 16px;
box-sizing: border-box;
@ -1274,7 +1281,7 @@ button.RoomDetailsView_row::after {
gap: 12px;
}
.CreateRoomView, .JoinRoomView, .RoomBeingCreated_error {
.CreateRoomView_body, .JoinRoomView_body, .RoomBeingCreated_error {
max-width: 400px;
}

9
src/platform/web/ui/session/CreateRoomView.js
View File

@ -21,9 +21,12 @@ import {StaticView} from "../general/StaticView";
export class CreateRoomView extends TemplateView {
render(t, vm) {
return t.main({className: "middle"},
t.div({className: "CreateRoomView centered-column"}, [
return t.main({className: "CreateRoomView middle"}, [
t.div({className: "CreateRoomView_header middle-header"}, [
t.a({className: "button-utility close-middle", href: vm.closeUrl, title: vm.i18n`Cancel room creation`}),
t.h2("Create room"),
]),
t.div({className: "CreateRoomView_body centered-column"}, [
//t.div({className: "RoomView_error"}, vm => vm.error),
t.form({className: "CreateRoomView_detailsForm form", onChange: evt => this.onFormChange(evt), onSubmit: evt => this.onSubmit(evt)}, [
t.div({className: "vertical-layout"}, [
@ -96,7 +99,7 @@ export class CreateRoomView extends TemplateView {
]),
])
])
);
]);
}
onFormChange(evt) {

10
src/platform/web/ui/session/JoinRoomView.ts
View File

@ -27,9 +27,12 @@ export class JoinRoomView extends TemplateView<JoinRoomViewModel> {
placeholder: vm.i18n`Enter a room id or alias`,
disabled: vm => vm.joinInProgress,
});
return t.main({className: "middle"},
t.div({className: "JoinRoomView centered-column"}, [
return t.main({className: "JoinRoomView middle"}, [
t.div({className: "JoinRoomView_header middle-header"}, [
t.a({className: "button-utility close-middle", href: vm.closeUrl, title: vm.i18n`Cancel room join`}),
t.h2("Join room"),
]),
t.div({className: "JoinRoomView_body centered-column"}, [
t.form({className: "JoinRoomView_detailsForm form", onSubmit: evt => this.onSubmit(evt, input.value)}, [
t.div({className: "vertical-layout"}, [
t.div({className: "stretch form-row text"}, [
@ -52,7 +55,7 @@ export class JoinRoomView extends TemplateView<JoinRoomViewModel> {
})
])
])
);
]);
}
onSubmit(evt, id) {
@ -60,4 +63,3 @@ export class JoinRoomView extends TemplateView<JoinRoomViewModel> {
this.value.join(id);
}
}

32
src/platform/web/ui/session/room/UnknownRoomView.js
View File

@ -18,18 +18,26 @@ import {TemplateView} from "../../general/TemplateView";
export class UnknownRoomView extends TemplateView {
render(t, vm) {
return t.main({className: "UnknownRoomView middle"}, t.div([
t.h2([
vm.i18n`You are currently not in ${vm.roomIdOrAlias}.`,
t.br(),
vm.i18n`Want to join it?`
return t.main({className: "UnknownRoomView middle"}, [
t.div({className: "UnknownRoomView_header middle-header"}, [
t.a({className: "button-utility close-middle", href: vm.closeUrl, title: vm.i18n`Cancel room join`}),
t.h2("Join room"),
]),
t.button({
className: "button-action primary",
onClick: () => vm.join(),
disabled: vm => vm.busy,
}, vm.i18n`Join room`),
t.if(vm => vm.error, t => t.p({className: "error"}, vm.error))
]));
t.div({className: "UnknownRoomView_body centered-column"}, [
t.div({className: "UnknownRoomView_container"}, [
t.h2([
vm.i18n`You are currently not in ${vm.roomIdOrAlias}.`,
t.br(),
vm.i18n`Want to join it?`
]),
t.button({
className: "button-action primary",
onClick: () => vm.join(),
disabled: vm => vm.busy,
}, vm.i18n`Join room`),
t.if(vm => vm.error, t => t.p({className: "error"}, vm.error))
])
])
]);
}
}