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

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

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 */
_getPendingEvents() {
return this._sendQueue.pendingEvents;

View File

@ -16,6 +16,8 @@ limitations under the License.
*/
import {TemplateView} from "../../general/TemplateView.js";
import {Popup} from "../../general/Popup.js";
import {Menu} from "../../general/Menu.js";
import {TimelineList} from "./TimelineList.js";
import {TimelineLoadingView} from "./TimelineLoadingView.js";
import {MessageComposer} from "./MessageComposer.js";
@ -23,6 +25,11 @@ import {RoomArchivedView} from "./RoomArchivedView.js";
import {AvatarView} from "../../avatar.js";
export class RoomView extends TemplateView {
constructor(options) {
super(options);
this._optionsPopup = null;
}
render(t, vm) {
let bottomView;
if (vm.composerViewModel.kind === "composer") {
@ -37,6 +44,10 @@ export class RoomView extends TemplateView {
t.div({className: "room-description"}, [
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_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
}
});
}
}
}