add options menu in room header with leave room option

This commit is contained in:
Bruno Windels 2021-05-12 13:59:08 +02:00
parent d7e8529a6e
commit f331d84292
3 changed files with 55 additions and 0 deletions

View File

@ -131,6 +131,14 @@ export class RoomViewModel extends ViewModel {
get avatarTitle() { get avatarTitle() {
return this.name; return this.name;
} }
get canLeave() {
return this._room.isJoined;
}
leaveRoom() {
this._room.leave();
}
async _sendMessage(message) { async _sendMessage(message) {
if (!this._room.isArchived && message) { if (!this._room.isArchived && message) {

View File

@ -367,6 +367,13 @@ export class Room extends BaseRoom {
} }
} }
leave(log = null) {
return this._platform.logger.wrapOrRun(log, "leave room", async log => {
log.set("id", this.id);
await this._hsApi.leave(this.id, {log}).response();
});
}
/* called by BaseRoom to pass pendingEvents when opening the timeline */ /* called by BaseRoom to pass pendingEvents when opening the timeline */
_getPendingEvents() { _getPendingEvents() {
return this._sendQueue.pendingEvents; return this._sendQueue.pendingEvents;

View File

@ -16,6 +16,8 @@ limitations under the License.
*/ */
import {TemplateView} from "../../general/TemplateView.js"; import {TemplateView} from "../../general/TemplateView.js";
import {Popup} from "../../general/Popup.js";
import {Menu} from "../../general/Menu.js";
import {TimelineList} from "./TimelineList.js"; import {TimelineList} from "./TimelineList.js";
import {TimelineLoadingView} from "./TimelineLoadingView.js"; import {TimelineLoadingView} from "./TimelineLoadingView.js";
import {MessageComposer} from "./MessageComposer.js"; import {MessageComposer} from "./MessageComposer.js";
@ -23,6 +25,11 @@ import {RoomArchivedView} from "./RoomArchivedView.js";
import {AvatarView} from "../../avatar.js"; import {AvatarView} from "../../avatar.js";
export class RoomView extends TemplateView { export class RoomView extends TemplateView {
constructor(options) {
super(options);
this._optionsPopup = null;
}
render(t, vm) { render(t, vm) {
let bottomView; let bottomView;
if (vm.composerViewModel.kind === "composer") { if (vm.composerViewModel.kind === "composer") {
@ -37,6 +44,10 @@ export class RoomView extends TemplateView {
t.div({className: "room-description"}, [ t.div({className: "room-description"}, [
t.h2(vm => vm.name), t.h2(vm => vm.name),
]), ]),
t.button({
className: "button-utility room-options",
onClick: evt => this._toggleOptionsMenu(evt)
}, "⋮")
]), ]),
t.div({className: "RoomView_body"}, [ t.div({className: "RoomView_body"}, [
t.div({className: "RoomView_error"}, vm => vm.error), t.div({className: "RoomView_error"}, vm => vm.error),
@ -49,4 +60,33 @@ export class RoomView extends TemplateView {
]) ])
]); ]);
} }
_toggleOptionsMenu(evt) {
if (this._optionsPopup && this._optionsPopup.isOpen) {
this._optionsPopup.close();
} else {
const vm = this.value;
const options = [];
if (vm.canLeave) {
options.push(Menu.option(vm.i18n`Leave room`, () => vm.leaveRoom()));
}
if (!options.length) {
return;
}
this._optionsPopup = new Popup(new Menu(options));
this._optionsPopup.trackInTemplateView(this);
this._optionsPopup.showRelativeTo(evt.target, {
horizontal: {
relativeTo: "end",
align: "start",
after: 0
},
vertical: {
relativeTo: "start",
align: "start",
after: 40 + 4
}
});
}
}
} }