mirror of
https://github.com/vector-im/hydrogen-web.git
synced 2024-12-22 19:14:52 +01:00
Merge pull request #951 from Automattic/close-room-screens
Allow closing room creation and room joining views on small screens
This commit is contained in:
commit
5a743034fd
@ -33,6 +33,7 @@ export class CreateRoomViewModel extends ViewModel {
|
|||||||
this._avatarScaledBlob = undefined;
|
this._avatarScaledBlob = undefined;
|
||||||
this._avatarFileName = undefined;
|
this._avatarFileName = undefined;
|
||||||
this._avatarInfo = undefined;
|
this._avatarInfo = undefined;
|
||||||
|
this._closeUrl = this.urlRouter.urlUntilSegment("session");
|
||||||
}
|
}
|
||||||
|
|
||||||
get isPublic() { return this._isPublic; }
|
get isPublic() { return this._isPublic; }
|
||||||
@ -45,6 +46,7 @@ export class CreateRoomViewModel extends ViewModel {
|
|||||||
get hasAvatar() { return !!this._avatarScaledBlob; }
|
get hasAvatar() { return !!this._avatarScaledBlob; }
|
||||||
get isFederationDisabled() { return this._isFederationDisabled; }
|
get isFederationDisabled() { return this._isFederationDisabled; }
|
||||||
get isAdvancedShown() { return this._isAdvancedShown; }
|
get isAdvancedShown() { return this._isAdvancedShown; }
|
||||||
|
get closeUrl() { return this._closeUrl; }
|
||||||
|
|
||||||
setName(name) {
|
setName(name) {
|
||||||
this._name = name;
|
this._name = name;
|
||||||
|
@ -27,12 +27,16 @@ export class JoinRoomViewModel extends ViewModel<SegmentType, Options> {
|
|||||||
private _session: Session;
|
private _session: Session;
|
||||||
private _joinInProgress: boolean = false;
|
private _joinInProgress: boolean = false;
|
||||||
private _error: Error | undefined;
|
private _error: Error | undefined;
|
||||||
|
private _closeUrl: string;
|
||||||
|
|
||||||
constructor(options: Readonly<Options>) {
|
constructor(options: Readonly<Options>) {
|
||||||
super(options);
|
super(options);
|
||||||
this._session = options.session;
|
this._session = options.session;
|
||||||
|
this._closeUrl = this.urlRouter.urlUntilSegment("session");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get closeUrl(): string { return this._closeUrl; }
|
||||||
|
|
||||||
async join(roomId: string): Promise<void> {
|
async join(roomId: string): Promise<void> {
|
||||||
this._error = undefined;
|
this._error = undefined;
|
||||||
this._joinInProgress = true;
|
this._joinInProgress = true;
|
||||||
|
@ -24,6 +24,11 @@ export class UnknownRoomViewModel extends ViewModel {
|
|||||||
this.roomIdOrAlias = roomIdOrAlias;
|
this.roomIdOrAlias = roomIdOrAlias;
|
||||||
this._error = null;
|
this._error = null;
|
||||||
this._busy = false;
|
this._busy = false;
|
||||||
|
this._closeUrl = this.urlRouter.urlUntilSegment("session");
|
||||||
|
}
|
||||||
|
|
||||||
|
get closeUrl() {
|
||||||
|
return this._closeUrl;
|
||||||
}
|
}
|
||||||
|
|
||||||
get error() {
|
get error() {
|
||||||
|
@ -984,9 +984,16 @@ button.link {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.UnknownRoomView {
|
.UnknownRoomView_container {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.UnknownRoomView_body {
|
||||||
|
height: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
@ -1274,7 +1281,7 @@ button.RoomDetailsView_row::after {
|
|||||||
gap: 12px;
|
gap: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.CreateRoomView, .JoinRoomView, .RoomBeingCreated_error {
|
.CreateRoomView_body, .JoinRoomView_body, .RoomBeingCreated_error {
|
||||||
max-width: 400px;
|
max-width: 400px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -21,9 +21,12 @@ import {StaticView} from "../general/StaticView";
|
|||||||
|
|
||||||
export class CreateRoomView extends TemplateView {
|
export class CreateRoomView extends TemplateView {
|
||||||
render(t, vm) {
|
render(t, vm) {
|
||||||
return t.main({className: "middle"},
|
return t.main({className: "CreateRoomView middle"}, [
|
||||||
t.div({className: "CreateRoomView centered-column"}, [
|
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.h2("Create room"),
|
||||||
|
]),
|
||||||
|
t.div({className: "CreateRoomView_body centered-column"}, [
|
||||||
//t.div({className: "RoomView_error"}, vm => vm.error),
|
//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.form({className: "CreateRoomView_detailsForm form", onChange: evt => this.onFormChange(evt), onSubmit: evt => this.onSubmit(evt)}, [
|
||||||
t.div({className: "vertical-layout"}, [
|
t.div({className: "vertical-layout"}, [
|
||||||
@ -96,7 +99,7 @@ export class CreateRoomView extends TemplateView {
|
|||||||
]),
|
]),
|
||||||
])
|
])
|
||||||
])
|
])
|
||||||
);
|
]);
|
||||||
}
|
}
|
||||||
|
|
||||||
onFormChange(evt) {
|
onFormChange(evt) {
|
||||||
|
@ -27,9 +27,12 @@ export class JoinRoomView extends TemplateView<JoinRoomViewModel> {
|
|||||||
placeholder: vm.i18n`Enter a room id or alias`,
|
placeholder: vm.i18n`Enter a room id or alias`,
|
||||||
disabled: vm => vm.joinInProgress,
|
disabled: vm => vm.joinInProgress,
|
||||||
});
|
});
|
||||||
return t.main({className: "middle"},
|
return t.main({className: "JoinRoomView middle"}, [
|
||||||
t.div({className: "JoinRoomView centered-column"}, [
|
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.h2("Join room"),
|
||||||
|
]),
|
||||||
|
t.div({className: "JoinRoomView_body centered-column"}, [
|
||||||
t.form({className: "JoinRoomView_detailsForm form", onSubmit: evt => this.onSubmit(evt, input.value)}, [
|
t.form({className: "JoinRoomView_detailsForm form", onSubmit: evt => this.onSubmit(evt, input.value)}, [
|
||||||
t.div({className: "vertical-layout"}, [
|
t.div({className: "vertical-layout"}, [
|
||||||
t.div({className: "stretch form-row text"}, [
|
t.div({className: "stretch form-row text"}, [
|
||||||
@ -52,7 +55,7 @@ export class JoinRoomView extends TemplateView<JoinRoomViewModel> {
|
|||||||
})
|
})
|
||||||
])
|
])
|
||||||
])
|
])
|
||||||
);
|
]);
|
||||||
}
|
}
|
||||||
|
|
||||||
onSubmit(evt, id) {
|
onSubmit(evt, id) {
|
||||||
@ -60,4 +63,3 @@ export class JoinRoomView extends TemplateView<JoinRoomViewModel> {
|
|||||||
this.value.join(id);
|
this.value.join(id);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -18,7 +18,13 @@ import {TemplateView} from "../../general/TemplateView";
|
|||||||
|
|
||||||
export class UnknownRoomView extends TemplateView {
|
export class UnknownRoomView extends TemplateView {
|
||||||
render(t, vm) {
|
render(t, vm) {
|
||||||
return t.main({className: "UnknownRoomView middle"}, t.div([
|
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.div({className: "UnknownRoomView_body centered-column"}, [
|
||||||
|
t.div({className: "UnknownRoomView_container"}, [
|
||||||
t.h2([
|
t.h2([
|
||||||
vm.i18n`You are currently not in ${vm.roomIdOrAlias}.`,
|
vm.i18n`You are currently not in ${vm.roomIdOrAlias}.`,
|
||||||
t.br(),
|
t.br(),
|
||||||
@ -30,6 +36,8 @@ export class UnknownRoomView extends TemplateView {
|
|||||||
disabled: vm => vm.busy,
|
disabled: vm => vm.busy,
|
||||||
}, vm.i18n`Join room`),
|
}, vm.i18n`Join room`),
|
||||||
t.if(vm => vm.error, t => t.p({className: "error"}, vm.error))
|
t.if(vm => vm.error, t => t.p({className: "error"}, vm.error))
|
||||||
]));
|
])
|
||||||
|
])
|
||||||
|
]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user