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

Refactor left panel to use menu

Browse Source
This commit is contained in:
RMidhunSuresh 2022-09-06 15:42:41 +05:30
parent 5f9cfffa3b
commit cfbd0672c5
2 changed files with 29 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/domain/session/leftpanel/LeftPanelViewModel.js
View File

@ -34,7 +34,6 @@ export class LeftPanelViewModel extends ViewModel {
this._setupNavigation(); this._setupNavigation();
this._closeUrl = this.urlCreator.urlForSegment("session"); this._closeUrl = this.urlCreator.urlForSegment("session");
this._settingsUrl = this.urlCreator.urlForSegment("settings"); this._settingsUrl = this.urlCreator.urlForSegment("settings");
this._createRoomUrl = this.urlCreator.urlForSegment("create-room");
} }
_mapTileViewModels(roomsBeingCreated, invites, rooms) { _mapTileViewModels(roomsBeingCreated, invites, rooms) {
@ -74,7 +73,9 @@ export class LeftPanelViewModel extends ViewModel {
return this._settingsUrl; return this._settingsUrl;
} }
get createRoomUrl() { return this._createRoomUrl; } showCreateRoomView() {
this.navigation.push("create-room");
}
_setupNavigation() { _setupNavigation() {
const roomObservable = this.navigation.observe("room"); const roomObservable = this.navigation.observe("room");

27
src/platform/web/ui/session/leftpanel/LeftPanelView.js
View File

@ -17,6 +17,8 @@ limitations under the License.
import {ListView} from "../../general/ListView"; import {ListView} from "../../general/ListView";
import {TemplateView} from "../../general/TemplateView"; import {TemplateView} from "../../general/TemplateView";
import {RoomTileView} from "./RoomTileView.js"; import {RoomTileView} from "./RoomTileView.js";
import {Menu} from "../../general/Menu.js";
import {Popup} from "../../general/Popup.js";
class FilterField extends TemplateView { class FilterField extends TemplateView {
render(t, options) { render(t, options) {
@ -51,6 +53,11 @@ class FilterField extends TemplateView {
} }
export class LeftPanelView extends TemplateView { export class LeftPanelView extends TemplateView {
constructor(vm) {
super(vm);
this._createMenuPopup = null;
}
render(t, vm) { render(t, vm) {
const gridButtonLabel = vm => { const gridButtonLabel = vm => {
return vm.gridEnabled ? return vm.gridEnabled ?
@ -90,7 +97,11 @@ export class LeftPanelView extends TemplateView {
"aria-label": gridButtonLabel "aria-label": gridButtonLabel
}), }),
t.a({className: "button-utility settings", href: vm.settingsUrl, "aria-label": vm.i18n`Settings`, title: vm.i18n`Settings`}), t.a({className: "button-utility settings", href: vm.settingsUrl, "aria-label": vm.i18n`Settings`, title: vm.i18n`Settings`}),
t.a({className: "button-utility create", href: vm.createRoomUrl, "aria-label": vm.i18n`Create room`, title: vm.i18n`Create room`}), t.button({
className: "button-utility create",
"aria-label": vm.i18n`Create room`,
onClick: evt => this._toggleCreateMenu(evt)
}),
]); ]);
return t.div({className: "LeftPanel"}, [ return t.div({className: "LeftPanel"}, [
@ -98,4 +109,18 @@ export class LeftPanelView extends TemplateView {
roomList roomList
]); ]);
} }
_toggleCreateMenu(evt) {
if (this._createMenuPopup && this._createMenuPopup.isOpen) {
this._createMenuPopup.close();
} else {
const vm = this.value;
const options = [];
options.push(Menu.option(vm.i18n`Create Room`, () => { vm.showCreateRoomView(); }))
options.push(Menu.option(vm.i18n`Join Room`, () => {}))
this._createMenuPopup = new Popup(new Menu(options));
this._createMenuPopup.trackInTemplateView(this);
this._createMenuPopup.showRelativeTo(evt.target, 10);
}
}
} }